精华内容
下载资源
问答
  • 种动态网页技术的简要分析

    万次阅读 2016-11-25 22:12:37
    动态网页技术可以非常方便地处理用户的请求,在Web开发中它们的地位是非常重要的。目前比较流行的动态网页技术有JSP、ASP、PHP等,下面分别简要介绍这些技术的特点。1 ASP技术ASP技术是基于.NET平台的一种动态网页...

    动态网页可以根据用户的选择、点击、输入等操作而迅速的响应和动态的改变。动态网页技术可以非常方便地处理用户的请求,在Web开发中它们的地位是非常重要的。目前比较流行的动态网页技术有JSP、ASP、PHP等,下面分别简要介绍这些技术的特点。


    1 ASP技术

    ASP技术是基于.NET平台的一种动态网页技术。它有非常强大的后台处理能力,但却有一些安全性、稳定性、跨平台性的问题。它的原理为:通过服务器端的解释器将用户请求的ASP文件进行处理,然后将生成的HTML页面传输到客户端显示。解释器可以调用功能强大的COM组件去进行非常多的工作。因此,ASP的功能被无限放大了。

    • ASP的优势

    容易学。ASP的内嵌代码是Basic语言,这种语言很容易掌握,并且学的人很多。Microsoft开发的语言有很多联机手册,并且市面上也有很多的相关书籍,方便开发人员的学习和深入。

    容易安装。装好Windows系统后,只要安装了IIS,就可以使用ASP语言了,不用像Java一样花很大功夫去配置。

    效率高。在访问量比较低的情况下,ASP处理的效率相当高。

    • ASP的弱势

    虽然使用COM组件极大地扩展了ASP的功能,但是Windows系统的缺陷可能会导致使用ASP技术建立的网站更容易受到攻击,以至于瘫痪。

    编译的时间长。

    无法实现跨操作系统的使用。

    无法使用它建立大型的网站,因为ASP技术不能实现完全的集群和负载均衡。

    2、PHP技术

    PHP语言是HTML内嵌式的语言,这一点类似于ASP。不过,它的语法混合了C、Java、Perl等语言的特点。PHP语言的用途也非常广,它支持众多的数据库,如Microsoft SQL Server、MySQL、Sybase、Oracle等。它与HTML可以有很好的兼容:在PHP脚本中可以直接加入HTML标签,在HTML标签中也可以加入PHP脚本。从而它可以实现更强的页面控制。

    • PHP的优势

    PHP可以跨平台,并且具有更好的数据库交互能力。PHP在UNIX/Linux平台下运行的性能很好。

    由于PHP可以与Apache,以及其他的一些平台以静态编译的方式结合起来。所以它可以很大程度地优化CPU和内存的使用。

    PHP有很好的安全性。

    • PHP的弱势

    数据库接口不规范。虽然PHP支持众多的数据库,但是对每种数据库接口的开发都不同。同样的数据库操作在不同的数据库中都要用不同的语言来实现,从而极大地加重了开发者的负担。

    使用起来复杂。由于实现某些功能,一般是靠某种拓展模块来实现的。而每种拓展木块都有不同的外部应用库来实现,这样在编译时相当复杂。

    缺少企业级应用的支持。由于开发大型Web应用的接口的数量有限而导致的。

    3、JSP技术

    JSP技术在基于java的平台上广泛地使用,是进行Java web开发的一种核心组件。JSP页面由HTML代码和嵌入在其中的Java脚本组成。当浏览器用户请求某个JSP页面时,Web服务器在服务器端对所请求的JSP文件进行编译处理,执行其中的Java脚本,并把生成的HTML页面返回到浏览器端显示。Servlet技术是JSP技术的基础,实际开发中往往是二者联合使用。由于基于Java平台,JSP有Java技术面向对象、平台无关、安全等特点。

    • JSP的优势

    一次编写,到处运行。这一点JSP比PHP技术更有优势,在不同的系统平台上运行,代码不用做任何修改。

    被多平台支持。JSP几乎可以在任何的平台上进行开发,并且可以在任何的平台上部署和运行。这一点是ASP和PHP所无法企及的。

    后台强大的功能。由于JSP后台有Java语言和Servlet的支持,在后台可以进行复杂的、功能强大的业务逻辑处理。并且可以实现多台服务器端集群和负载均衡,从而更加适应企业级的应用。

    有很多优秀的IDE帮助开发,如Eclipse、IntelliJ IDEA等。

    • JSP的弱势

    正式由于跨平台和服务器集群等一些优点,同时带来了其产品过于复杂的缺点。

    编译后的Class文件运行时,内存的使用率比较低。

    展开全文
  • 导读:本文大约2000字,预计阅读时间3分钟。本文纯属技术文,无推广。 Web开发-概述 Web开发是创建网站,网页或Web应用程序的过程。或者我们可以说是一个完整的编码和编程过程,可以实现网站的功能。 此过程包含几...

    导读:本文大约2000字,预计阅读时间3分钟。本文纯属技术文,无推广。

    Web开发-概述

    Web开发是创建网站,网页或Web应用程序的过程。或者我们可以说是一个完整的编码和编程过程,可以实现网站的功能。

    此过程包含几种实践或操作,包括Web设计,编程,来自客户端的安全任务以及服务器端脚本。

    Web开发范围从构建单个网页到创建大型网站,复杂的Web应用程序和社交媒体网站

    Web开发是一个广泛而多样的领域。在Web开发中,存在大量不同的概念。Web开发的主要和基本部分分为两个主要部分,即前端开发和后端开发。

    2020年的web开发

    随着网络技术的发展,企业必须拥有功能强大且引人注目的网站。从Web开发人员或程序员的角度来看,对于他们来说,预见变化并学习如何适应很重要。

    如果您要成为一名优秀的Web开发人员超过10年,则必须通过Web开发来更新自己-详细了解并继续学习技术堆栈,框架,库等的新版本。

    到2020年,Web开发服务是技术领域中最苛刻的服务,并且其需求正日益增长。Web开发有助于用户和数据库(CMS)。这听起来像是一个愚蠢的问题,但事实并非如此。为什么需要网站并需要维护?

    编程语言

    为了从事Web开发这一职业,要考虑的最重要的事情之一是拥有编程语言方面的专业知识。

    编程语言的需求和流行每年都在变化。还有一些新的编程语言不断涌现,并具有最新功能。

    因此,在您的Web开发中学习或使用新的编程语言是一种投资。如果您打算在2020年开始编程生涯或简化Web开发工作流程,则无需学习或使用所有编程语言。

    这是事实,很难确定哪种编程语言是最流行的,哪种语言不是。但是您不必担心,我研究了 2020年6月流行度最高的6种编程语言,如下:

    1. Python:

    Python是一种解释性的高级通用编程语言。Python使您可以快速工作并更有效地集成系统。它支持多种编程范例python,包括结构,面向对象和功能编程。

    2. Java:

    Java是一种开放源代码语言,在2020年将变得越来越流行。它用于创建服务器端应用程序,由于开发了针对Web,移动和智能设备的应用程序,因此对这些应用程序的需求很高。

    3. JavaScript:

    JavaScript是一种动态开发语言和强大的客户端脚本语言。除HTML和CSS之外,JavaScript是万维网的核心技术之一。它主要用于增强用户与网页的交互。

    4. C#:

    C#是一种通用的多范式编程语言。熟悉C,C ++或Java的任何人都可以立即识别C#。C#是一种面向对象的编程语言,在.NET平台上具有基于XML的服务。

    5. PHP:

    PHP代表超文本预处理器,是一种广泛开源的通用脚本语言,特别适合于Web开发。它用于创建静态网站或动态网站或Web应用程序。

    6. C:

    C是一种通用编程语言,在2020年将是一种灵活且非常流行的语言。C是一种与机器无关的结构化编程语言,可用于各种应用程序中。

    7. C ++:

    C ++还是一种通用编程语言,它与许多其他流行的通用语言不同。C ++支持以不同的方式进行编程,例如过程,面向对象,功能等。

    如果您正在寻找合适的编程语言来快速开始您的职业生涯或项目,明智的做法是在选择一种语言之前考虑所有方面。

    Web开发技术

    您以前可能已经熟悉Web开发技术,但是您是否想过真正的含义?

    实际上,Web技术是计算机用来与之通信的标记语言和多媒体包。这是用于完成任何基于Web的项目的Web开发技术的列表。

    HTML,CSS

    Web开发框架

    编程语言

    通讯协定

    API

    资料格式

    客户端/客户端

    服务器/服务器端

    网站开发工具

    Web开发工具也称为DevTools。这些工具允许开发人员测试和调试他们的代码。Web开发工具是Web浏览器中的内置功能。

    网络浏览器中内置功能的最佳示例是Google Chrome,Fixefox,Internet Explorer,Opera等。

    Web开发工具使开发人员可以使用多种不同的Web技术,包括HTML,CSS,JavaScript和更多其他技术。

    我们无法囊括所有内容,但以下是一些示例,它们汇总了Web开发工具的完整列表。下面的工具和资源未按特定顺序列出:

    • JavaScript Libraries

      Front-end Frameworks

      Back-end Development Tools

      Web Application Frameworks

      Task Runners/Package Managers

      Languages/Platforms

      Databases

      CSS Preprocessors

      Text Editors/Code editors

      Markdown Editors

      Git Clients/Git services

      Collaboration Tools

    如您所见,有许多Web开发工具,并且您还将获得许多不同的文章。每篇文章探讨了不同的Web开发工具,因此在Web开发领域中,有数百种工具可以简化您的Web开发项目。

    2020 Web 发展趋势

    Web开发趋势每年都在变化。每年都有一定的季节性趋势出现。这些趋势会在不同程度上暂时影响市场。这些趋势的影响全年都在上升和下降。关注“计算机自学平台”获取更多资讯

    为了持续进行每项竞赛,并增强您在2020年需要了解的知识。我列出了16种Web开发的主要趋势。请注意,以下列表没有特定顺序。

    • 渐进式Web应用程序(PWA)

      人工智能和聊天机器人

      加速的移动页面(AMP)

      单页应用程序(SPA)

      语音搜索优化

      运动界面

      自动化测试

      JavaScript框架

      无服务器的应用程序和体系结构

      区块链技术

      物联网(IoT)

      移动-首次开发

      响应式网站(RWD)

      推送通知

      GDPR和网络安全

      用户行为跟踪

    结论

    在每个最具吸引力和最有效的网站或应用程序的背后,都有许多准备工作和实践。如果您想获得Web开发方面的专业知识,则必须掌握Web开发中的新工具,技术甚至最新趋势。

    展开全文
  • Python开发动态网页基础(三)

    万次阅读 2016-07-04 10:38:51
    我们解释了如何建立一个 Django 项目并启动 Django 开发服务器。当然,那个网站实际并没有干什么有用的事情,它所做的只是显示 ...这是一个不错的动态网页范例,因为该页面的内容不是静态的。相反,其内容是随着计算

    我们解释了如何建立一个 Django项目并启动 Django 开发服务器。当然,那个网站实际并没有干什么有用的事情,它所做的只是显示 It worked!消息。让我们来做些改变。本章将介绍如何使用 Django创建动态网页。

    第一份视图:动态内容

    我们的第一个目标是创建一个显示当前日期和时间的网页。这是一个不错的动态网页范例,因为该页面的内容不是静态的。相反,其内容是随着计算(本例中是对当前时间的计算)的结果而变化的。这个简单的范例既不涉及数据库,也不需要任何用户输入,仅输出服务器的内部时钟。

    我们将编写一个视图函数以创建该页面。所谓的视图函数(或视图),只不过是一个接受 Web 请求并返回 Web 响应的 Python 函数。实际上,该响应可以是一份网页的 HTML内容、一次重定向、一条 404错误、一份 XML 文档、一幅图片,或其它任何东西。视图本身包含返回该响应所需的任意逻辑。该段代码可以随意放置,只要在 Python的路径设置中就可以了。没有其它要求——也可以说是没有任何奇特之处。为了给这些代码一个存身之处,让我们在上一章所创建的mysite目录中新建一份名为views.py的文件。


    以下是一个以HTML 方式返回当前的日期与时间的视图 (view),:

    from django.http import HttpResponse

    import datetime

    def current_datetime(request):

    now = datetime.datetime.now()

    html = "<html><body>It is now %s.</body></html>" % now

    return HttpResponse(html)

    我们逐行逐句地分析一遍这段代码:

    首先,我们从django.http模块导入(importHttpResponse类。参阅附录 H 了解更多关于HttpRequestHttpResponse的细节。

    然后我们从 Python标准库(Python 自带的实用模块集合)中导入(import)datetime模块。datetime模块包含几个处理日期和时间的函数(functions)和类(classes),其中就包括返回当前时间的函数。

    接下来,我们定义了一个叫做current_datetime的函数。这就是所谓的视图函数(view function)。每个视图函数都以一个HttpRequest对象为第一个参数,该参数通常命名为request


    注意视图函数的名称并不重要;并不一定非得以某种特定的方式命名才能让 Django识别它。此处,我们称之为current_datetime,只是因为该名字明确地指出了它的功能,而它也可以被命名为super_duper_awesome_current_time或者其它同样莫名其妙的名字。Django并不关心其名字。下一节将解释 Django如何查找该函数。

    函数中的第一行代码计算当前日期和时间,并以datetime.datetime对象的形式保存为局部变量now

    函数的第二行代码用 Python的格式化字符串(format-string)功能构造了一段 HTML响应。字符串里面的%s是占位符,字符串之后的百分号表示使用变量now的值替换%s(是的,这段 HTML 不合法,但我们只不过是想让范例尽量保持简短而已。)

    最后,该视图返回一个包含所生成响应的HttpResponse对象。每个视图函数都负责返回一个HttpResponse对象。(也有例外,但是我们稍后才会接触到。)

    Django 时区 (Time Zone)

    Django 包含一个默认为America/ChicagoTIME_ZONE设置。这可能不是你所居住的时区,因此你可以在settings.py文件中修改它。请参阅附录 E 了解更多细节。

    URL映射到视图

    那么概括起来,该视图函数返回了包含当前日期和时间的一段 HTML页面。但是如何告诉 Django使用这段代码呢?这就是URLconfs粉墨登场的地方了。

    URLconf就像是 Django所支撑网站的目录。它的本质是 URL模式以及要为该 URL 模式调用的视图函数之间的映射表。你就是以这种方式告诉 Django,对于这个 URL调用这段代码,对于那个 URL调用那段代码。但必须记住的是视图函数必须位于 Python搜索路径之中。

    Python 搜索路径

    Python 搜索路径就是使用import语句时,Python所查找的系统目录清单。

    举例来说,假定你将 Python路径设置为['','/usr/lib/python2.4/site-packages','/home/username/djcode/']。如果执行代码from foo import barPython将会首先在当前目录查找foo.py模块( Python路径第一项的空字符串表示当前目录)。如果文件不存在,Python将查找/usr/lib/python2.4/site-packages/foo.py文件。如果文件也不存在,它将尝试/home/username/djcode/foo.py。最后,如果这个文件还不存在,它将引发ImportError异常。

    如果对了解 Python搜索路径值感兴趣,可以启动 Python交互式解释程序,输入import sys,接着输入print sys.path

    通常,你不必关心 Python搜索路径的设置。Python Django 会在后台自动帮你处理好。(如果有兴趣了解的话,Python搜索路径的设置工作是manage.py文件的职能之一。)

    前一章中执行django-admin.py startproject时,该脚本会自动为你建了一份 URLconf(即urls.py文件)。让我们编辑一下这份文件。缺省情况下它是下面这个样子:

    from django.conf.urls.defaults import *

    urlpatterns = patterns('',

    # Example:

    # (r'^mysite/', include('mysite.apps.foo.urls.foo')),

    # Uncomment this for admin:

    # (r'^admin/', include('django.contrib.admin.urls')),

    )

    让我们逐行逐句分析一遍这段代码:

    § 第一行从django.conf.urls.defaults模块引入了所有的对象,其中包括了叫做patterns的函数。

    § 第二行调用patterns()函数并将返回结果保存到urlpatterns变量。patterns()函数只传入了一个空字符串参数。其他代码行都被注释掉了。 (该字符串可用作视图函数的通用前缀,但目前我们将略过这种高级用法。)

    当前应该注意是urlpatterns变量, Django期望能从ROOT_URLCONF模块中找到它。该变量定义了 URL以及用于处理这些 URL 的代码之间的映射关系。

    默认情况下,URLconf所有内容都被注释起来了——Django应用程序还是白版一块。(旁注:这也就是上一章中 Django显示“It worked!”页面的原因。如果 URLconf为空,Django 会认定你才创建好新项目,因此也就显示那种信息。)

    现在编辑该文件以展示我们的current_datetime视图:

    from django.conf.urls.defaults import *

    from mysite.views import current_datetime

    urlpatterns = patterns('',

    (r'^time/$', current_datetime),

    )

    我们做了两处修改。首先,我们从模块 ( Python import 语法中,mysite/views.py转译为mysite.views)中引入了current_datetime视图。接着,我们加入了(r'^time/$', current_datetime),这一行。该行就是所谓的URLpattern ,它是一个 Python元组,其第一个元素是简单的正则表达式,第二个元素是为该模式应用的视图函数。

    简单来说,我们只是告诉 Django,所有指向 URL/time/的请求都应由current_datetime这个视图函数来处理。

    下面是一些需要注意的地方:

    注意,该例中,我们将current_datetime视图函数作为对象传递,而不是调用它。这是Python (及其它动态语言的)的一个重要特性:函数是一级对象(first-class objects),也就是说你可以像传递其它变量一样传递它们。很酷吧?

    r'^time/$'中的r表示'^time/$'是一个原始字符串。这样一来就可以避免正则表达式有过多的转义字符。

    不必在'^time/$'前加斜杠(/)来匹配/time/因为 Django 会自动在每个表达式前添加一个斜杠。乍看起来,这好像有点奇怪,但是 URLconfs可能由其它的 URLconfs所引用, 所以不加前面的斜杠可让事情简单一些。这一点在第 8章中将有进一步阐述。

    上箭头^和美元符号$符号非常重要。上箭头要求表达式对字符串的头部进行匹配,美元符号则要求表达式对字符串的尾部进行匹配。

    最好还是用范例来说明一下这个概念。如果我们用'^time/'(结尾没有$),那么以time/开始的任意URL都会匹配,比如/time/foo/time/bar不仅仅是/time/。同样的,如果我们去掉最前面的 ^ ('time/$'), Django一样会匹配由time/结束的任意URL/time/,比如/foo/bar/time/因此,我们必须同时用上 ^ $ 来精确匹配 URL/time/。不能多也不能少。

    你可能想如果有人请求/time也可以同样处理。如果APPEND_SLASH设置是True的话,系统会重定向到/time/,这样就可以一样处理了。 (有关内容请查看附录 E )

    启动Django开发服务器来测试修改好的 URLconf,运行命令行python manage.py runserver (如果你让它一直运行也可以,开发服务器会自动监测代码改动并自动重新载入,所以不需要手工重启)开发服务器的地址是http://127.0.0.1:8000/,打开你的浏览器访问http://127.0.0.1:8000/time/你就可以看到输出结果了。

    万岁!你已经创建了第一个Djangoweb页面。

    正则表达式

    正则表达式(regexes ) 是通用的文本模式匹配的方法。Django URLconfs允许你使用任意的正则表达式来做强有力的URL映射,不过通常你实际上可能只需要使用很少的一部分功能。下面就是一些常用通用模式:

    符号

    匹配

    . (dot)

    任意字符

    \d

    任意数字

    [A-Z]

    任意字符, A-Z (大写)

    [a-z]

    任意字符, a-z (小写)

    [A-Za-z]

    任意字符, a-z (不区分大小写)

    +

    匹配一个或更多 (例如, \d+匹配一个或 多个数字字符)

    [^/]+

    不是/的任意字符

    *

    匹配0个或更多 (例如, \d*匹配0个 或更多数字字符)

    {1,3}

    匹配1个到3个(包含)2

    有关正则表达式的更多内容,请访问http://www.djangoproject.com/r/python/re-module/.

    Django是怎么处理请求的

    我们必须对刚才所发生的几件事情进行一些说明。它们是运行Django开发服务器和构造Web页面请求的本质所在。

    命令python manage.py runserver从同一目录载入文件settings.py该文件包含了这个特定的Django实例所有的各种可选配置,其中一个最重要的配置就是ROOT_URLCONFROOT_URLCONF告诉Django哪个Python模块应该用作本网站的 URLconf

    还记得django-admin.py startproject创建的文件settings.pyurls.py吗?这时系统自动生成的settings.pyROOT_URLCONF默认设置是urls.py

    当访问 URL/time/时,Django根据ROOT_URLCONF的设置装载 URLconf然后按顺序逐个匹配URLconf里的URLpatterns,直到找到一个匹配的。当找到这个匹配URLpatterns就调用相关联的view函数,并把HttpRequest对象作为第一个参数。(稍后再给出HttpRequest的更多信息)

    view函数负责返回一个HttpResponse对象。

    你现在知道了怎么做一个 Django-powered页面了,真的很简单,只需要写视图函数并用 URLconfs把它们和URLs对应起来。你可能会认为用一系列正则表达式将URLs映射到函数也许会比较慢,但事实却会让你惊讶。

    Django如何处理请求:完整细节

    除了刚才所说到的简明URL-to-view映射方式之外,Django在请求处理方面提供了大量的灵活性。

    通过 URLconf解析到哪个视图函数来返回HttpResponse可以通过中间件(middleware)来短路或者增强。关于中间件的细节将在第十五章详细谈论,这里给出3-1让你先了解大体概念.


    3-1Django请求回应流程

    当服务器收到一个HTTP请求以后,一个服务器特定的handler 会创建HttpRequest并传递给下一个组件并处理。

    这个 handler然后调用所有可用的Request或者View中间件。这些类型的中间件通常是用来增强HttpRequest对象来对一些特别类型的request做些特别处理。只要其中有一个返回HttpResponse,系统就跳过对视图的处理。


    即便是最棒的程序员也会有出错的时候,这个时候异常处理中间件(exception middleware可以帮你的大忙。如果一个视图函数抛出异常,控制器会传递给异常处理中间件处理。如果这个中间件没有返回HttpResponse,意味着它不能处理这个异常,这个异常将会再次抛出。

    即便是这样,你也不用担心。Django包含缺省的视图来生成友好的404 500 回应(response)。

    最后, response middleware 做发送HttpResponse给浏览器之前的后处理或者清除请求用到的相关资源。

    URL配置和松耦合

    现在是好时机来指出DjangoURL配置背后的哲学:松耦合原则。简单的说,松耦合是一个重要的保证互换性的一个软件开发方法。如果两段代码是松耦合的,那么改动其中一段代码不会影响另一段代码,或者只有很少的一点影响。

    DjangoURL配置就是一个很好的例子。在Django的应用程序中,URL的定义和视图函数之间是松耦合的,换句话说,决定URL返回哪个视图函数和实现这个视图函数是在两个不同的地方。这使得开发人员可以修改一块而不会影响另一块。

    相比之下,其他的Web开发平台紧耦合和URL到代码中。在典型的PHP (http://www.php.net/)应用,URL的设计是通过放置代码的目录来实现。在早期的 CherryPy Python Web framework (http://www.cherrypy.org/)中,URL对应处理的的方法名。这可能在短期看起来是便利之举,但是长期会带来难维护的问题。

    比方说,考虑有一个以前写的视图函数,这个函数显示当前日期和时间。如果我们想把它的URL从原来的/time/改变到/currenttime/,我们只需要快速的修改一下URL配置即可,不用担心这个函数的内部实现。同样的,如果我们想要修改这个函数的内部实现也不用担心会影响到对应的URL。此外,如果我们想要输出这个函数到一些URL我们只需要修改URL配置而不用去改动视图的代码。

    Django大量应用松耦合。我们将在本书中继续给出这一重要哲学的相关例子。

    404 错误

    在我们当前的这个URL配置中,我们之定义了一个URL模式:处理URL/time/当请求其他URL会怎么样呢?

    让我们试试看,运行Django开发服务器并访问类似http://127.0.0.1:8000/hello/或者http://127.0.0.1:8000/does-not-exist/,甚至http://127.0.0.1:8000/(网站根目录)。你将会看到一个 “Page not found” 页面(图 32)。(挺漂亮的,是吧?你会喜欢上我们的配色方案的;-)如果请求的URL没有在URL配置里设置,Django就会显示这个页面。

    3-2. Django 404页面

    这个页面的功能不只是显示404的基本错误信息,它同样精确的告诉你Django使用了哪个URL配置和这个配置里的每一个模式。这样,你应该能了解到为什么这个请求会抛出404错误。

    当然,这些敏感的信息应该只呈现给你-开发者。如果是部署到了因特网上的站点就不应该暴露这些信息。出于这个考虑,这个“Page not found”页面只会在调试模式(debug mode显示。我们将在以后说明怎么关闭调试模式。现在,你只需要知道所有的Django项目在创建后都是在调试模式下的,如果关闭了调试模式,结果将会不一样。

    第二个视图:动态URL

    在我们的第一个视图范例中,尽管内容是动态的,但是URL/time/)是静态的。在大多数动态web应用程序,URL通常都包含有相关的参数。

    让我们创建第二个视图来显示当前时间和加上时间偏差量的时间,设计是这样的:/time/plus/1/显示当前时间+1个小时的页面/time/plus/2/显示当前时间+2个小时的页面/time/plus/3/显示当前时间+3个小时的页面,以此类推。

    新手可能会考虑写不同的视图函数来处理每个时间偏差量,URL配置看起来就象这样:

    urlpatterns = patterns('',

    (r'^time/$', current_datetime),

    (r'^time/plus/1/$', one_hour_ahead),

    (r'^time/plus/2/$', two_hours_ahead),

    (r'^time/plus/3/$', three_hours_ahead),

    (r'^time/plus/4//$', four_hours_ahead),

    )


    很明显,这样处理是不太妥当的。不但有很多冗余的视图函数,而且整个应用也被限制了只支持预先定义好的时间段,2小时,3小时,或者4小时。如果哪天我们要实现5 小时,我们就不得不再单独创建新的视图函数和配置URL,既重复又混乱。我们需要在这里做一点抽象,提取一些共同的东西出来。

    关于漂亮URL的一点建议

    如果你有其他Web开发平台的经验,例如PHP或者JAVA,你可能会想,好吧,让我们来用一个查询字符串参数来表示它们吧,例如/time/plus?hours=3,哪个时间段用hours参数代表,URL的查询字符串(query string)URL?后面的字符串。

    可以Django里也这样做 (如果你真的想要这样做,我们稍后会告诉你怎么做),但是Django的一个核心理念就是URL必须看起来漂亮。URL/time/plus/3/更加清晰,更简单,也更有可读性,可以很容易的大声念出来,因为它是纯文本,没有查询字符串那么复杂。漂亮的URL就像是高质量的Web应用的一个标志。

    DjangoURL配置系统可以使你很容易的设置漂亮的URL,而尽量不要考虑它的反面


    带通配符的URL匹配模式

    继续我们的hours_ahead范例,让我们在URL模式里使用通配符。我们前面讲到,URL模式是一个正则表达式,因此,我们可以使用正则表达式模式\d+来匹配一个或多个数字:

    from django.conf.urls.defaults import *

    from mysite.views import current_datetime, hours_ahead

    urlpatterns = patterns('',

    (r'^time/$', current_datetime),

    (r'^time/plus/\d+/$', hours_ahead),

    )

    这个URL模式将匹配类似/time/plus/2/,/time/plus/25/,甚至/time/plus/100000000000/的任何URL。更进一步,让我们把它限制在最大允许99个小时,这样我们就只允许一个或两个数字,正则表达式的语法就是\d{1,2}:

    (r'^time/plus/\d{1,2}/$', hours_ahead),

    备注

    在建造Web应用的时候,尽可能多考虑可能的数据输入是很重要的,然后决定哪些我们可以接受。在这里我们就设置了99个小时的时间段限制。

    现在我们已经设计了一个带通配符的URL,我们需要一个方法把它传递到视图函数里去,这样我们只用一个视图函数就可以处理所有的时间段了。我们使用圆括号把参数在URL模式里标识出来。在这个例子中,我们想要把这些数字作为参数,用圆括号把\d{1,2}包围起来:

    (r'^time/plus/(\d{1,2})/$', hours_ahead),

    如果你熟悉正则表达式,那么你应该已经了解,正则表达式也是用圆括号来从文本里提取数据的。


    最终的current_datetimeURLconf,包含我们前面的视图,看起来像这样:

    from django.conf.urls.defaults import *

    from mysite.views import current_datetime, hours_ahead

    urlpatterns = patterns('',

    (r'^time/$', current_datetime),

    (r'^time/plus/(\d{1,2})/$', hours_ahead),

    )

    现在开始写hours_ahead视图。

    编码次序

    这个例子中,我们先写了URLpattern,然后是视图,但是在前面的例子中,我们先写了视图,然后是URLpattern。哪种技术更好?嗯,怎么说呢,每个开发者是不一样的。

    如果你是喜欢从总体上来把握事物(注:或译为大局观)类型的人,你应该会想在项目开始的时候就写下所有的URL配置。这会给你带来一些好处,例如,给你一个清晰的to-do列表,让你更好的定义视图所需的参数。

    如果你从更像是一个自底向上的开发者,你可能更喜欢先写视图,然后把它们挂接到URL上。这同样是可以的。

    最后,取决与你喜欢那种技术,两种方法都是可以的。

    hours_ahead和我们以前写的current_datetime很象,关键的区别在于:它多了一个额外参数,时间差。views.py修改如下:

    def hours_ahead(request, offset):

    offset = int(offset)

    dt = datetime.datetime.now() + datetime.timedelta(hours=offset)

    html = "<html><body>In %s hour(s), it will be %s.</body></html>" % (offset, dt)

    return HttpResponse(html)


    让我们一次一行通一下这些代码:

    就像我们在我们的current_datetime视图中所作的一样,我们导入django.http.HttpResponse类和datetime模块。

    视图函数,hours_ahead,两个参数:requestoffset.

    request是一个HttpRequest对象,就像在current_datetime中一样.再说一次好了: 每一个视图总是以一个HttpRequest对象作为它的第一个参数。


    offset是从匹配的URL里提取出来的。例如:如果URL/time/plus/3/那么offset是字符串'3'如果URL/time/plus/21/,那么offset是字符串'21'注意,提取的字符串总是字符串,不是整数,即便都是数字组成,就象'21'

    在这里我们命名变量为offset,你也可以任意命名它,只要符合Python的语法。变量名是无关紧要的,重要的是它的位置,它是这个函数的第二个参数 (request的后面)。你还可以使用关键字来定义它,而不是用位置。详情请看第八章。

    我们在这个函数中要做的第一件事情就是在offset上调用int().这会把这个字符串值转换为整数。

    注意Python可能会在你调用int()来转换一个不能转换成整数时抛出ValueError异常,例如字符串'foo'当然,在这个范例中我们不用担心这个问题,因为我们已经确定offset只包含数字字符的字符串。因为正则表达式(\d{1,2})只提取数字字符。这也是URL配置的另一个好处:提供了清晰的输入数据有效性确认。

    下一行显示了我们为什么调用int()来转换offset这一行我们要计算当前时间加上这个时间差offset小时,保存结果到变量dtdatetime.timedelta函数的参数hours必须是整数类型。

    这行和前面的那行的的一个微小差别就是,它使用带有两个值的Python的格式化字符串功能,而不仅仅是一个值。因此,在字符串中有两个%s符号和一个以进行插入的值的元组:(offset, dt)

    最后,我们再一次返回一个HTMLHttpResponse,就像我们在current_datetime做的一样。

    在完成视图函数和URL配置编写后,启动Django开发服务器,用浏览器访问http://127.0.0.1:8000/time/plus/3/来确认它工作正常。然后是http://127.0.0.1:8000/time/plus/5/。再然后是http://127.0.0.1:8000/time/plus/24/。最后,访问http://127.0.0.1:8000/time/plus/100/来检验URL配置里设置的模式是否只接受一个或两个数字;Django会显示一个 Page not found error 页面,和以前看到的 404 错误一样。访问URLhttp://127.0.0.1:8000/time/plus/(没有定义时间差)也会抛出404错误。

    你现在已经注意到views.py文件中包含了两个视图,views.py看起来象这样:

    from django.http import HttpResponse

    import datetime

    def current_datetime(request):

    now = datetime.datetime.now()

    html = "<html><body>It is now %s.</body></html>" % now

    return HttpResponse(html)

    def hours_ahead(request, offset):

    offset = int(offset)

    dt = datetime.datetime.now() + datetime.timedelta(hours=offset)

    html = "<html><body>In %s hour(s), it will be %s.</body></html>" % (offset, dt)

    return HttpResponse(html)

    Django 漂亮的出错页面

    花几分钟时间欣赏一下我们写好的Web应用程序,然后我们再来搞点小破坏。我们故意在views.py文件中引入一项 Python 错误,注释掉hours_ahead视图中的offset = int(offset)一行。

    def hours_ahead(request, offset):

    #offset = int(offset)

    dt = datetime.datetime.now() + datetime.timedelta(hours=offset)

    html = "<html><body>In %s hour(s), it will be %s.</body></html>" % (offset, dt)

    return HttpResponse(html)


    启动开发服务器,然后访问/time/plus/3/。你会看到一个包含大量信息的出错页,最上面的一条TypeError信息是:"unsupported type for timedelta hours component: str"

    怎么回事呢?是的,datetime.timedelta函数要求hours参数必须为整型,而我们注释掉了将offset转为整型的代码。这样导致datetime.timedelta弹出TypeError异常。这是所有程序员某个时候都可能碰到的一种典型错误。

    这个例子是为了展示 Django的出错页面。我们来花些时间看一看这个出错页,了解一下其中给出了哪些信息。

    以下是值得注意的一些要点:

    在页面顶部,你可以得到关键的异常信息:异常数据类型、异常的参数 (如本例中的"unsupported type")、在哪个文件中引发了异常、出错的行号等等。

    在关键异常信息下方,该页面显示了对该异常的完整 Python追踪信息。这类似于你在 Python命令行解释器中获得的追溯信息,只不过后者更具交互性。对栈中的每一帧,Django均显示了其文件名、函数或方法名、行号及该行源代码。

    点击该行代码 (以深灰色显示),你可以看到出错行的前后几行,从而得知相关上下文情况。

    点击栈中的任何一帧的“Local vars”可以看到一个所有局部变量的列表,以及在出错那一帧时它们的值。这些调试信息是无价的。

    注意“Traceback”下面的“Switch to copy-and-paste view”文字。点击这些字,追溯会切换另一个视图,它让你很容易地复制和粘贴这些内容。当你想同其他人分享这些异常追溯以获得技术支持时(比如在 Django IRC聊天室或邮件列表中),可以使用它。

    接下来的“Request information”部分包含了有关产生错误的 Web请求的大量信息: GET POSTcookie值、元数据(象 CGI头)。在附录H里给出了request的对象的完整参考。

    Request信息的下面,“Settings”列出了 Django使用的具体配置信息。同样在附录E给出了settings配置的完整参考。现在,大概浏览一下,对它们有个大致印象就好了。

    Django 的出错页某些情况下有能力显示更多的信息,比如模板语法错误。我们讨论 Django模板系统时再说它们。现在,取消offset = int(offset)这行的注释,让它重新正常工作。

    不知道你是不是那种使用小心放置的print语句来帮助调试的程序员?你其实可以用 Django出错页来做这些,而不用print语句。在你视图的任何位置,临时插入一个assert False来触发出错页。然后,你就可以看到局部变量和程序语句了。(还有更高级的办法来调试 Django 视图,我们后来再说,但这个是最快捷最简单的办法了。)


    最后,很显然这些信息很多是敏感的,它暴露了你 Python代码的内部结构以及 Django配置,在 Internet 上公开这信息是很愚蠢的。不怀好意的人会尝试使用它攻击你的 Web应用程序,做些下流之事。因此,Django出错信息仅在 debug 模式下才会显现。我们稍后说明如何禁用 debug模式。现在,你只要知道 Django服务器在你开启它时默认运行在 debug模式就行了。(听起来很熟悉?“Page not found”错误,“404错误一节也这样描述过。)


    转载请注明文章出处:http://blog.csdn.net/wolaiye320/article/details/51819151

    展开全文
  • 快速入门 使用之前 在开始使用 ThingJS 之前,需要先了解Javascript,我们假设您已经掌握JS。...您可通过以下三方式创建项目: 选择菜单区域的“文件 - 新建项目”选项 点击工具栏“新建”图标,图标如右...

    快速入门

    使用之前

    在开始使用 ThingJS 之前,需要先了解Javascript,我们假设您已经掌握JS。

    创建项目

    创建项目之前需登录ThingJS账号,如果您尚未登录账号或页面出现“登录已过期,请重新登录!”的提示,为保证项目的正确保存及运行,请您在账号登录之后再创建项目。您可通过以下三种方式创建项目:

    选择菜单区域的“文件 - 新建项目”选项

    点击工具栏“新建”图标,图标如右图所示:

    使用快捷键“Ctrl+P”

    编辑项目

    在线开发为用户提供了相应的快捷代码和官方示例,如果你正在用 ThingJS在线开发页面,可以通过以下两种方式来编辑项目:

    点击在线开发页面菜单区域的快捷代码选项中的子项,编辑区将自动插入相应代码

    选择在线开发官方示例中的其中任意一个示例,点击相应示例,编辑区将显示相应代码

    后续操作详见 在线开发 - 应用开发 - 在线开发

    保存项目

    可通过以下四种方式保存项目:

    选择菜单区域的“文件 - 保存”选项

    点击工具栏“保存”图标,图标如右图所示:

    使用快捷键“Ctrl+S”

    运行项目

    在线开发环境提供了以下几种方式运行项目:

    使用快捷方式“Ctrl+R/Enter”或点击工具栏中的“运行”图标,3d容器区域将运行编辑器相应的代码。图标如右图所示:

    选择菜单区域的“工具 - 设置”选型,出现的设置面板,点击开启“自动保存执行”

    界面介绍

    在线开发页面左边显示官方示例及用户创建并保存的项目,中间的编辑器则显示您已打开项目或文件的内容,而右侧主要显示项目运行之后的3D场景。

    界面区域

    菜单栏:对项目或项目文件操作的快捷入口,包括文件、快捷代码、资源、工具、项目、视图及帮助七个子项

    项目列表:官方提供的示例代码及用户项目的集合,其中用户项目只有登录之后才会显示

    工具栏:对菜单栏的图标化显示

    状态栏:用户项目、文件或官方示例的状态显示

    编辑器:当前打开项目的内容

    3D容器:项目运行后的场景可视化显示

    项目打印日志:项目运行输出的日志

    项目导航显隐切换:左侧项目列表显示/隐藏

    文件位置:当前打开项目/文件的路径

    申请建模: ThingJS平台提供的模型(设施设备、建筑外观等)定制服务,每个模型800元起。需填写相应资料发出申请,ThingJS平台会有专人联系并沟通服务细节。

    请求协助:为协助ThingJS用户快速入门,ThingJS平台可提供用户特定项目的框架代码开发服务。该服务可为用户快速构建符合项目基本需求的3D可视化框架代码资源(包括源码、3D模型、贴图、数据等),用户的技术团队可在此基础上快速上手,大幅提高3D可视化项目成功基础。

    充值:魔豆充值,包括两种充值方式:支付宝和微信支付。充值之后的魔豆可用于购买VIP、VIP续费或项目部署的付费。

    升级VIP:普通用户可通过支付宝、微信支付或魔豆支付三种方式升级为VIP。

    个人信息栏:用户名和用户头像

    容器浮动:点击“浮动”图标,3D容器将以浮动层的方式显示

    最大化预览:场景最大化预览

    在线咨询:ThingJS在线支持入口

    编辑器拖拽:调节编辑器及3D容器的宽度比

    主要功能介绍

    菜单栏

    在线开发环境的菜单栏位于头部左侧区域,主要由以下几部分构成:

    文件:对在线开发环境中用户的项目及文件进行的操作,主要包括新建项目、新建文件、保存及运行。详细介绍请参照 在线开发 - 菜单导航 - 文件管理

    快捷代码:为提高项目开发效率,ThingJS提供了的功能模块,点击快捷代码中的内容,编辑器将插入对应功能的代码。也可通过点击工具栏中的快捷代码图标进行相应操作。详细介绍请参照 在线开发 - 菜单导航 - 快捷代码

    资源:在线开发环境为用户提供的包括模型、园区、地图、图表、界面、动态背景灯及用户上传的多种资源集合。详细介绍请参照 在线开发 - 菜单导航 - 资源管理

    工具:主要包括场景信息、场景效果、拾取坐标、自定义模型和设置。详细介绍请参照 在线开发 - 菜单导航 - 场景工具

    项目:针对用户已开发项目进行的分享、部署及更新操作。详细介绍请参照 在线开发 - 菜单导航 - 项目管理

    视图:通过切换日志、3D容器和目录(项目列表)的显隐状态以及切换视图风格改变在线开发环境的界面布局。详细介绍请参照 在线开发 - 菜单导航 - 视图管理

    帮助:提供了快捷键的详细介绍以及ThingJS平台其他相关页面的快捷入口。详细介绍请参照 在线开发 - 菜单导航 - 帮助

    项目列表

    项目列表主要位于在线开发环境的左侧,主要包括官方示例和用户项目。可通过点击列表上方的“官方”和“我的”切换官方和个人项目:

    当切换至官方示例时,在列表标题下方的输入框搜输入相关内容可搜索相应的官方示例,点击相应示例,编辑器将显示对应代码,点击运行图标,右侧3D容器将显示示例对应的场景,用户可对编辑器内的示例代码修改并保存为个人项目。

    注:新增的示例右侧会显示一个新增标记(

    ),VIP专栏中的所有示例仅针对VIP用户开放。

    切换个人项目时,选中其中任一项目,右键选择“打开项目”,编辑器和3D容器将分别显示该项目的内容及场景,且项目及项目下的文件将显示在“当前项目”目录下。用户可编辑修改当前项目及项目下的文件。

    注意事项:

    用户只有在注册并登录 ThingJS 网站后,才能新建和保存项目,否则“我的项目”列表将不会出现在左侧导航栏中

    工具栏

    工具栏图标说明如下:

    图标图标说明

    新建项目:创建一个空项目,用户可在编辑器器内添增加或修改项目内容

    保存项目:保存当前处于编辑状态的文件

    执行项目:运行当前处于编辑状态下的项目或示例,右侧3D容器将显示对应场景

    项目分享:分享当前处于编辑状态的项目或示例

    模型:显示模型资源面板,面板中的模型资源由ThingJS提供的官方模型及用户选择或上传的模型构成

    园区:显示园区资源面板,面板中的园区资源由用户上传或CamBuilder同步过来的园区场景构成

    地图:显示地图资源面板,该面板中的地图资源是用户在CityBuilder创建的地图

    图表:显示园区资源面板,该面板中的图表模板由ThingJS平台提供

    界面:显示界面资源面板,该面板主要为ThingJS平台提供的Widget 面板组件的快捷方式

    动态背景:显示动态背景面板,该面板中的背景模板由ThingJS提供

    快捷代码:显示快捷代码面板,该面板是在线开发为提升用户的开发效率所提供的大量常用功能代码块的集合

    场景信息:显示场景信息(当前运行项目或示例对应场景的一系列信息)

    场景效果:显示场景效果面板,该面板内开关和按钮可调节3D容器场景的灯光、 后期、动态天空、雾等特效等场景效果

    状态栏

    介于编辑器与工具栏中间,用来显示已打开的项目、文件或示例。当在线开发环境中已经存在一个已打开的用户项目时,点击其他的示例或项目文件,将作为参考文件在状态栏中打开,点击之后的状态栏显示如下:

    编辑器

    在线开发中的编辑器用来查询、修改项目或文件的内容,支持支持自动拼写和快捷键操作。详情请参照 在线开发 - 应用开发 - 在线开发

    3D容器

    显示编辑器内代码运行之后的场景及效果

    项目打印日志

    若3D容器场景对应的项目文件或示例中含有类似于:console.log(obj)的代码块,在线开发环境右侧下方的项目打印区域将输相关信息

    场景搭建

    ThingJS平台为用户提供了以下两种方式搭建场景:

    通过CamBuilder客户端搭建3D场景

    通过CityBuilder城市地图搭建3D场景

    CamBuilder

    通过客户端下载需要以下几个步骤:

    通过ThingJS官网下载3D园区搭建工具,在出现的下载详情面板中点击下载按钮

    下载后可登陆账号,点击工具下的「用户手册」可查看使用教程

    将场景导出上传或同步至ThingJS平台

    选择园区资源下的场景进行开发

    后续操作详见 在线开发 - 菜单导航 - 资源管理 - 园区

    CityBuilder

    在“地图”资源面板中点击“新建地图”

    在出现的弹出面版中输入地图名称,点击“下一步”

    选择“一键城市”和“上传数据”中的任一选项。若选择“上传数据”,地图面板将同时新增一个地图资源;若选择“一键城市”,需选择“城市范围”和“模板”并点击“下一步”,待数据下载完成之后,点击“进入编辑”,地图面板将新增一个地图资源

    选择地图资源下的地图进行开发

    后续操作详见 在线开发 - 菜单导航 - 资源管理 - 地图

    在线开发

    在线编辑器支持自动拼写,输入一个字符(串),若存在该字符(串),则编辑器将出现所匹配的内容,点击选择所需代码,如下图所示:

    编辑区域内右键可调出快捷工具菜单,按下鼠标右键,点击选择下图所示的工具:

    快捷键操作如下表所示;

    快捷键快捷键说明

    Ctrl + F查找

    Ctrl + H查找替换

    Ctrl + [  、 Ctrl + ]代码行缩进

    Ctrl + C复制当前选中内容

    Ctrl + X剪切当前选中内容

    Ctrl + V在光标处插入剪贴板的内容,并替换任何所选内容,只有在剪切或复制了内容之后,才能使用此快捷键

    Shift + Alt + F代码格式化

    Alt + Up  、 Alt + Down上下移动一行

    Alt + Shift + 鼠标左键多行编辑(列编辑)(鼠标右键更改所有匹配项)

    Ctrl + Delete删除光标右侧的所有字

    Ctrl + U回退上一个光标操作

    Ctrl + K后Ctrl + 0折叠所有区域代码

    Ctrl + K后Ctrl + J展开所有折叠区域代码

    选中注释代码块 Ctrl+ /代码块注释

    Home移动到行首

    End移动到行尾

    Ctrl + F12转到定义

    Alt + F12速览定义

    Shift + F12查找所有定义

    Ctrl + End移动到文件结尾

    Ctrl + Home移动到文件开头

    Ctrl + Shift + Enter在当前行上方插入一行

    编辑器内按下 F1 键,调出快捷功能列表,用户可按需选择下图所示的功能:

    在线编辑器支持插入常用代码块,降低学习门槛。将鼠标移至菜单栏中“快捷代码”或者点击工具栏“快捷代码”图标(

    ),将出现常用代码块,点击快捷代码按钮,则可在编辑器中插入对应功能的代码。

    为方便用户开发,在线开发环境提供了资源引用的快捷入口。如引用“模板资源”步骤下:

    点击工具栏“模型”图标(

    在出现的模型资源面板中双击要引用的模型

    编辑器区域快速插入相应代码

    点击工具栏“执行项目”图标(

    ),模型将出现在右侧3D容器内的场景中

    其他资源引用操作详见 在线开发 - 菜单导航 - 资源管理

    在线调试

    ThingJS 在线开发环境中可以通过在代码里加入 “debugger” 关键字进行调试,调试步骤如下:

    在代码中加入 “debugger” 关键字

    F12 打开浏览器控制台

    点击按钮运行代码

    在浏览器控制台中查看断点位置

    F12 调试

    和普通页面调试方法一样,直接打开 F12 在 Sources 里 找到 debug.js文件,在里面打断点即可调试,调试步骤如下:

    F12键调出浏览器控制台可以查看在线开发环境相关信息

    点击选择“Sources - Page”

    选择Top目录下的ifId(about:blank) - (no - domain -debug.js)

    在浏览器控制台的debug.js文件点击断点行数

    点击在线开发工具栏“执行项目”图标(

    数据对接

    ThingJS平台目前提供以下四种方法进行数据对接:

    Ajax

    JSONP

    WebSocket

    MQTT

    Ajax 方式对接

    Ajax 数据对接

    Ajax 的本质是通过浏览器的 XMLHttpRequest 对象向服务器发送 HTTP 请求,得到服务器返回的数据后进行数据处理的数据交互方式。

    对于原生的 Ajax 来说,包括以下几个步骤:

    创建 XMLHttpRequest 实例;

    发出 HTTP 请求;

    接收服务器传回的数据;

    处理数据,更新页面。

    在 ThingJS 在线开发环境中,内置了 JQuery 库,可以直接使用 JQurey 封装的 Ajax 方法进行数据对接,例如:

    $.ajax({'url':"http://3dmmd.cn:83/getMonitorDataById",//Ajax请求服务的地址'type':"GET",//请求方式 "POST" 或 "GET",默认为 "GET"'dataType':"json",//服务返回的数据类型,推荐使用标准JSON数据格式//发送到服务器的数据'data':{'id':89757},//请求成功后的回调函数'success':function(data){console.log(data);// 处理返回的数据},//请求失败时调用的函数 有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象'error':function(xhr,status,error){console.log(xhr);},});

    关于跨域

    浏览器出于安全考虑,有同源策略(same-origin policy),所谓“同源”指的是“三个相同”:

    协议相同;

    域名相同

    端口相同

    对于 ThingJS 在线开发环境所发布的 3D 页面而言,其协议是 https:// ,域名是 www.thingjs.com ,端口是 80 (默认端口可以省略),如果协议、域名或者端口有一个不同就是跨域,Ajax 请求就会失败。

    在开发工具 Network 中可查看请求情况,下图展示了跨域相关报错:

    因此,要在 ThingJS 在线环境中请求用户自己服务器上的静态资源数据或数据服务,或者其他网站的数据服务,就需要解决跨域问题。

    注意事项

    如果是访问用户上传到 ThingJS 网站的静态 json 数据资源则不存在跨域问题。

    Ajax 请求跨域解决方案

    对于在 ThingJS 在线开发环境中开发,我们推荐以下方案解决跨域问题:

    CORS;

    CORS 是一个 W3C 标准,全称是 “跨域资源共享”(Cross-origin resource sharing)。它允许浏览器向跨域的服务器,发出 XMLHttpRequest 请求,从而解决了 Ajax 跨域请求数据的问题。

    对于前端而言,整个 CORS 通信过程,由浏览器自动完成。对于开发者来说,前端代码与普通 Ajax 代码完全一样。实现 CORS 的关键是后端,需在服务端设置 response 响应头(header)的 Access-Control-Allow-Origin 属性就可以开启 CORS。该属性表示哪些域名可以访问资源,如果设置通配符则表示所有网站都可以访问资源,例如:

    "Access-Control-Allow-Origin","*"//所有网站都可访问// 仅ThingJS网站能访问// "Access-Control-Allow-Origin","http://www.thingjs.com"

    如果 CORS 请求不是简单的跨站请求,如:

    使用GET或POST以外的HTTP请求方法(PUT DELETE等);

    请求的Content-Type 不属于以下三种之一:

    application/x-www-form-urlencoded;

    text/plain;

    multipart/form-data;

    发送了自定义的请求头信息(如Token数据)。

    那么还需根据实际情况,在服务器的响应头中设置 Access-Control-Allow-Headers 和Access-Control-Allow-Methods 相关属性值,例如:

    浏览器 Ajax 请求为:

    $.ajax({'headers':{"token":'31415926'// 请求头中带上了token数据},'url':"http://localhost:3000/getDataByIds",'type':"POST",//发送数据到服务器时所使用的内容类型。默认是:"application/x-www-form-urlencoded" 但此方式无将复杂的 JSON 组织成键值对形式//因此设置 contentType 为'application/json; charset=utf-8',这种类型是文本类型'contentType':'application/json; charset=utf-8','dataType':"json",//发送到服务器的数据 由于contentType设置为'application/json; charset=utf-8',这里需将json对象转为字符串后发送'data':JSON.stringify({'ids':[1,2,3]}),'success':function(data){console.log(data);}});

    则服务端需要设置:

    //配置允许的请求方式,如果写 * 则都允许"Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS";//配置允许的自定义请求头,如果写 * 则都允许"Access-Control-Allow-Headers","Content-Type,Token"

    查看示例

    对于 ThingJS 在线开发环境所发布的 3D 页面而言,其协议是 https:// ,域名是 www.thingjs.com ,端口是 80 (默认端口可以省略),如果协议、域名或者端口有一个不同就是跨域,Ajax 请求就会失败。

    在开发工具 Network 中可查看请求情况,下图展示了跨域相关报错:

    因此,要在 ThingJS 在线环境中请求用户自己服务器上的静态资源数据或数据服务,或者其他网站的数据服务,就需要解决跨域问题。

    注意事项

    如果是访问用户上传到 ThingJS 网站的静态 json 数据资源则不存在跨域问题。

    $.ajax({'url':"http://3dmmd.cn:83/getMonitorDataById",//Ajax请求服务的地址'type':"GET",//请求方式 "POST" 或 "GET",默认为 "GET"'dataType':"json",//服务返回的数据类型,推荐使用标准JSON数据格式//发送到服务器的数据'data':{'id':89757},//请求成功后的回调函数'success':function(data){console.log(data);// 处理返回的数据},//请求失败时调用的函数 有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象'error':function(xhr,status,error){console.log(xhr);},});

    JSONP对接

    JSONP 的基本原理就是利用 script 标签没有跨域限制的特点,通过 script 标签向服务器请求数据;服务器收到请求后,将数据放在一个指定名字的回调函数里返回给浏览器。

    由于 JQuery 的 Ajax 请求对 JSONP 进行了封装,因此我们可以直接使用相关方法请求 JSONP 数据,例如:

    $.ajax({type:"get",url:"http://3dmmd.cn:83/monitoringData",data:{"id":89757},dataType:"jsonp",// 返回的数据类型,设置为JSONP方式//设置回调函数名 JQurey会自动注册该函数jsonpCallback:"myCallbackFun",success:function(d){console.log(d);// 处理json数据}});

    上述示例会向浏览器发送一个类似 http://3dmmd.cn:83/monitoringData?id=89757&callback=myCallbackFunc 的请求,服务器通过解析 url 中的 callback 参数,返回如下数据:

    myCallbackFunc({"state":"success","data":{"id":"89757","temper":"26℃","humi":"42%","power":"9kWh"}})

    请求成功后 JQuery 会执行 myCallbackFun 函数,从而可以在回调函数中得到并处理 json 数据。

    注意事项

    JSONP 仅支持 GET 请求,使用 JQuery 的 Ajax 方法 发起多个 jsonp 请求时,回调函数名不要重复(即 jsonpCallback 的设置不要重复),否则可能会导致回调函数 undefined ,详见 jsonp请求失败的原因

    查看示例

    WebSocket对接

    WebSocket 是 HTML5 一种新的协议,实现了浏览器与服务器之间的全双工通信。

    其本质是先通过 HTTP/HTTPS 协议进行握手后创建一个用于交换数据的 TCP 连接,服务端与客户端通过此 TCP 连接进行数据的双向实时传输,直到有一方主动发送关闭连接请求或出现网络错误才会关闭连接。

    WebSocket 最大的优点在,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,真正实现了数据的实时双向通信。并且 WebSocket 通信不受同源策略的限制,即不存在跨域问题。

    WebSocket 客户端 API

    浏览器端的一个简单示例如下:

    // 创建一个WebSocket连接varwebSocket=newWebSocket('ws://3dmmd.cn:82');// 建立 websocket 连接成功 触发open事件webSocket.onopen=function(){console.log("websocket服务器连接成功...");};// 接收服务端数据 触发message事件webSocket.onmessage=function(ev){console.log("websocket接收到的数据:"+ev.data);};// 关闭连接后 触发close事件webSocket.onclose=function(evt){console.log("websocket关闭...");};// 通信发生错误时 触发error事件webSocket.οnerrοr=function(){console.log('发生错误')}

    可通过 readyState 属性值(只读),获取连接状态:

    0 - 表示连接尚未建立;

    1 - 表示连接已建立,可以进行通信;

    2 - 表示连接正在进行关闭

    3 - 表示连接已经关闭或者连接不能打开

    当连接成功后,可利用 send() 方法向服务器发送数据,例如:

    vardataObj={'id':89785};// send 数据类型可以是 字符串 或 二进制对象(Blob 对象、ArrayBuffer 对象)webSocket.send(JSON.stringify(dataObj));

    在客户端可调用 close() 方法主动关闭 WebSocket 连接。

    查看示例

    WebSocket 服务器端

    在服务器端,Node.js、Java、.Net、C++ 等语言都有相应的 API 库或框架来实现 WebSocket 的服务端开发。开发者可根据具体的项目需求选择相应方案,这里不再详细说明。

    MQTT方式对接

    MQTT是一个轻量级协议,使用MQTT协议的中心是broker(服务器/代理),客户端通过订阅消息和发布消息进行数据交互。使用MQTT方式的步骤如下:

    直接连接MQTT服务器(需支持websocket访问,Mosquitto支持websocket的配置可自行百度)

    引用第三方 mqtt库

    MQTT数据对接

    浏览器端的一个简单示例如下:

    // 引用第三方 mqtt 库,详见 https://github.com/mqttjs/MQTT.jsTHING.Utils.dynamicLoad(['https://www.thingjs.com/static/lib/mqtt.js'],function(){init();});varclient=null;// 创建一个Mosquitto连接client=mqtt.connect("wss:www.3dmmd.cn:8086");client.subscribe("/public/TEST/dev1");// 连接成功后发送数据client.on("message",function(topic,payload){console.log('data:'+payload);obj.setAttribute("monitorData/温度",payload);changeColor(obj);});// 关闭连接client.end();

    在客户端可调用 end() 方法主动关闭 Mosquitto 连接。

    查看示例

    展开全文
  • 中文名称:程序天下:新手学ASP动态网页开发 教程/光盘资源类型:ISO版本:电子教程/随书光盘发行时间:2008年01月地区:大陆语言:普通话简介:【作 者】薛小龙 【丛 书 名】 程序天下系列 【 版 社】 电子工业...
  • (或者可能更有针对性的问题是,我该迫使我的所有开发人员和数据科学家非要用哪种语言?)这个问题不会推迟太久,迟早要定夺。  当然,没有什么阻止得了你使用其他机制(比如XSLT转换)来处理大数据工作。但通常...
  • 本文是《打破国外垄断,开发中国人自己的编程语言》系列文章的第1篇。本系列文章的主要目的是教大家学会如何从零开始设计一编程语言(marvel语言),并使用marvel语言开发一些真实的项目,如移动App、Web应用等。
  • 多图详解!10大高性能开发核心技术

    千次阅读 多人点赞 2020-08-19 09:20:11
    这篇文章,我们循序渐进,从内存、磁盘I/O、网络I/O、CPU、缓存、架构、算法等多层次递进,串联起高性能开发十大必须掌握的核心技术。 - I/O优化:零拷贝技术 - I/O优化:多路复用技术 -线程池技术 -无锁编程技术 ...
  • 如何写技术欢迎的需求文档

    千次阅读 2018-10-31 14:49:01
    综述 正如我们做出来的产品都希望受用户欢迎,开发和测试是需求文档的用户,产品...虽然不可能写得像开发人员写设计文档的一样专业,但产品经理如果能运用技术人员的思维多做些考虑,就能减少评审过程的反复沟通,...
  • VC++数据库开发技术的比较

    千次阅读 2004-12-23 09:32:00
    原地址:http://www.yesky.com/20011204/208233.shtml从功能简单的数据库(如Jet ...本文主要介绍以下五: 1.ODBC API; 2.MFC ODBC类; 3.MFC DAO类;(数据访问对象) 4.MFC的OLE/DB; 5.ActiveX数据对象(ADO
  • 81. Domino视图Web展现技术

    千次阅读 2014-10-15 17:14:21
    Domino以界面为导向的开发风格和不适于动态查询的文档型数据库使得程序员面临完全不同的处境和问题。预先设计的视图不仅定义了包含的文档,也设置了外观属性,集数据层和外观层的功能于一体。在
  • java面试题(二)(J2EE相关知识)2009-07-... Java 2平台有3个版本:  适用于小型设备和智能卡的Java 2平台Micro版(Java 2 Platform Micro Edition,J2ME)、  适用于桌面系统的Java 2平台标准版(Java 2 Platform
  • 服务端开发常用技术

    千次阅读 2017-08-18 16:17:02
    3.优秀的学习能力,对数据结构;算法分析.计算机系统结构.操作系统.网络等计算机基础具备扎实的功底; 4.熟悉LAMP开发架构。 5.了解MySQL等传统数据库及NoSQL或MongoDB等非关系型数据库者优先考虑; 6.具有机器...
  • 技术选型并不是一成不变的,需要根据技术的发展、项目实际情况和人员技能构成实际考虑,在此列出的只是这些年常用的。 开发环境 1. 主要开发语言:Java7, HTML, Javascript等 2. 遵循规范:JEE 7,编码规范,数据库...
  • Web前端十常用的技术

    千次阅读 2019-06-22 16:39:49
    Web前端应用十常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式,本文将为您精心推荐十最...
  • Web开发技术最佳教程合辑

    千次阅读 2008-01-21 00:52:00
    学习 Web 开发技术的最佳教程 点击这里使用RSS订阅本Blog: <!-- main_sub="c1s67";...--> developerWorks 在线教程是深受读者们喜爱的内容,也是开发人员学习编程技术的最佳方式之一,它有效的将技术知识与精心设
  • Web前端常用的十种技术

    千次阅读 2019-06-26 16:42:23
    Web前端应用十常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式,本文将为您精心推荐十最...
  • 如果这里没有列出你想学习的编程语言,别失望。你可以使用你的树莓派去编译或解释任何你选择的语言,包括 C、C++、PHP 和 Ruby,这种可能性还是很大的。 微软的  Visual Studio Code [11]  也可以运行在  树莓派 ...
  • OpenJWeb(v2.61)企业级信息化应用开发平台技术白皮书 OpenJWeb开源组织手机:18600510596王先生QQ:29803446Email:baozhengw@163.com网站: http://www.openjweb.com 编写日期:2013-08-06 目 录 第一章概述.......
  • ReSharper代码排版格式 对齐 本文提供全流程,中文翻译助力快速完成 Resharper 的对齐设置为新手节省宝贵的时间,避免采坑! 排版格式:对齐 是最新版 ReSharper2017.3 加入的功能,所以需要先去ReSharper官网 ...
  • 您希望加快网页的加载速度吗?了解如何通过缩短加载时间来改善拨号上网用户的浏览体验,在某些情形下,加载时间最多可缩短 80%。下面介绍二十五中网速方法和技巧。 一、使用良好的结构 可扩展 HTML (XHTML) 具有...
  • 游戏开发入门如何点亮技术树?

    万次阅读 多人点赞 2018-11-06 11:52:23
    经常有知友问我,我很喜欢玩游戏,可以从事游戏开发吗?开发游戏需要哪些技能?一款游戏的开发需要哪些人员参与?诸如此类的问题比比皆是。 本场 Chat 老司机带你弯道超车,以 10 年游戏行业的真实背景和经验为实例...
  • .net web开发技术路线图

    千次阅读 2012-06-13 14:00:15
    前前后后收到过一些学生的来信,询问ASP.NET的学习顺序问题,在此就向打算系统学习ASP.NET技术的初学者谈谈我的建议。 如果你已经有较多的面向对象开发经验,跳过以下这两步: 第一步  掌握一门.NET面向对象...
  • 在论述的过程中会结合华为各语言编程专家和华为电信软件内部的骨干开发人员的交流,摒弃语言偏好或者语言教派之争,尽量以客观公正的角度来论述下各个语言的特点和不足,对语言选型作为一个客观的参考。
  • 使用JAVA语言,系统讲解微信公众平台订阅号、服务号官方列出的全部功能接口,包括:自定义菜单、个性化菜单(按需定制菜单)、群发消息、客服消息(有限次消息推送)、模板消息接(无限次消息推送)、微信网页开发...
  • 2020年30最佳的免费网页爬虫软件

    万次阅读 2020-07-03 14:25:31
    网页抓取(也称为网络数据提取,网络爬虫,数据收集和提取)是一种网页技术,从网站上提取数据。将非结构化数据转换为可以存储在本地计算机或数据库中的结构化数据。 对于不了解编码的人来说,创建网络抓取可能很...
  • 十大Web开发流行技术热门哦!!

    千次阅读 2009-04-07 09:11:00
    NETTUTS上列出10大最吃香的网站开发技术。作为网站开发工程师,如果你精通这些技术,即便在经济不景气的时候,仍然很容易找到一份好工作。 1. Framework knowledge (架构知识) 架构是大型网站开发的重要部分。...
  • 当下10大最热门的网站开发技术

    千次阅读 2008-12-26 19:36:00
    NETTUTS上列出10大最吃香的网站开发技术。作为网站开发工程师,如果你精通这些技术,即便在经济不景气的时候,仍然很容易找到一份好工作。1. Framework knowledge (架构知识) 架构是大型网站开发的重要部分。开发者...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 82,884
精华内容 33,153
关键字:

列出3种动态页面技术的开发语言