CN110806868B - 一种单页面搭建及加载方法 - Google Patents

一种单页面搭建及加载方法 Download PDF

Info

Publication number
CN110806868B
CN110806868B CN201810887069.9A CN201810887069A CN110806868B CN 110806868 B CN110806868 B CN 110806868B CN 201810887069 A CN201810887069 A CN 201810887069A CN 110806868 B CN110806868 B CN 110806868B
Authority
CN
China
Prior art keywords
file
page
configuration
route
building
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201810887069.9A
Other languages
English (en)
Other versions
CN110806868A (zh
Inventor
陈健
张�杰
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Netech Digital Technology Co ltd
Original Assignee
Shanghai Netech Digital Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shanghai Netech Digital Technology Co ltd filed Critical Shanghai Netech Digital Technology Co ltd
Priority to CN201810887069.9A priority Critical patent/CN110806868B/zh
Publication of CN110806868A publication Critical patent/CN110806868A/zh
Application granted granted Critical
Publication of CN110806868B publication Critical patent/CN110806868B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/40—Transformation of program code
    • G06F8/41—Compilation

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明公开了一种单页面搭建及加载方法，包括以下步骤：搭建开发环境；针对依赖的资源文件编写配置文件；编译源文件的任务脚本；根据项目的业务需求配置路由文件；接受访问请求，分析请求并跳转到指定的请求页面；根据配置文件解析并获取路由配置及路径；根据路由文件加载路由指定文件；执行路由路径，触发数据请求方法，并执行，达到最终的页面显示；只有一个JSP页面，对已加载的文件不会重复加载，浏览器渲染速度快，对服务器请求数量少；编写的指令和模板可以重复利用，数据请求前后端分离，加快开发效率。

Description

一种单页面搭建及加载方法
技术领域
本发明涉及网页技术领域，尤其涉及一种单页面搭建及加载方法。
背景技术
目前，前端页面以JSP技术(使用Java编程语言编写类XML的tags和scriptlets，来封装产生动态网页的处理逻辑)制作动态网页，用户访问时每打开一个新的网页，都需重新加载资源文件与数据，导致页面响应时间过长。同时，JSP技术无法形成体系化的框架结构，每每提出新的需求或功能便要设计新的动态页面。例如：
场景1：用户要跳转至同级页面时，相同的资源文件将重复加载，而java的高效率运行又需要占用大量的内存和硬盘空间。JSP技术既降低了打开网页的速度，又对计算机硬件要求比较高。
场景2：JSP页面执行时,首先被转换为.java文件(Servlet),然后将.java文件编译为字节码文件，这样,出错信息实际上指向的是转换后的那个.java文件(Servlet),而不是JSP本身。因此，JSP程序调试起来是十分困难的。
发明内容
鉴于目前存在的上述不足，本发明提供一种单页面搭建及加载方法，只有一个JSP页面，对已加载的文件不会重复加载，浏览器渲染速度快，对服务器请求数量少；编写的指令和模板可以重复利用，数据请求前后端分离，加快开发效率。
为达到上述目的，本发明的实施例采用如下技术方案：
一种单页面搭建及加载方法，所述单页面搭建及加载方法包括以下步骤：
搭建开发环境；
针对依赖的资源文件编写配置文件；
编译源文件的任务脚本；
根据项目的业务需求配置路由文件；
接受访问请求，分析请求并跳转到指定的请求页面；
根据配置文件解析并获取路由配置及路径；
根据路由文件加载路由指定文件；
执行路由路径，触发数据请求方法，并执行，达到最终的页面显示。
依照本发明的一个方面，所述搭建开发环境包括：安装NodeJS环境，运行指令初始化NodeJS配置。
依照本发明的一个方面，所述针对依赖的资源文件编写配置文件包括：创建.bowerrc文件，指定配置安装文件的目录，运行相应的脚本安装第三方插件。
依照本发明的一个方面，包括：运行npm install gulp--save-dev指令，通过NodeJS环境安装gulp，创建gulpfile.js编写gulp任务脚本。开发环境中的编译使用了gulp，还可以使用Webpack和Grunt，但都是依赖NodeJS。
依照本发明的一个方面，所述编译源文件的任务脚本包括：启动gulp任务，编译源文件，生成目标文件用于线上运行。
依照本发明的一个方面，所述编译源文件的任务脚本包括：上线时通过gulp编译拷贝源文件，生成文件版本号并替换依赖模板中引用资源的版本。
依照本发明的一个方面，包括：
当请求页面引用到了require.js，require在执行的时候会执行data-main的配置文件main.js；
shim配置着非AMD规范的JS文件，以及文件的依赖文件使用deps配置；
deps执行下一个配置文件app.js，加载依赖项目基本的文件，创建模块app对象；
执行app.config配置文件，获取routerJS文件解析路由配置并添加的$stateProvider对象中；
使用AngularAMD启动app模块，AngularJS解析请求地址锚点(#)后的路由路径以及参数，匹配路由配置路径，如果没有匹配到则根据$urlRouterProvider的配置选择默认路由，并执行路由。
使用的AngularJS是1.X版本，与1.X不同的还有Angular2.X到4.X版本，但有着本质的区别，依然可以实现本发明技术方案，还有比Angular更晚出现的Vue.js也可以实现本发明技术方案。
依照本发明的一个方面，包括步骤A：加载路由指定的视图文件以及controller的JS文件，加载controller依赖文件。
依照本发明的一个方面，包括步骤B：执行路由路径配置的控制器的JS，触发数据请求方法，根据参数配置显示过程动画，根据数据加载情况渲染加载后的模板文件内容，达到最终的页面显示。
依照本发明的一个方面，所述在页面中触发其它路由跳转，只渲染ui-view中的展示，重复步骤A和步骤B改变页面渲染，达到预期的交互效果。
本发明实施的优点：只有一个JSP页面，对已加载的文件不会重复加载，浏览器渲染速度快，对服务器请求数量少；编写的指令和模板可以重复利用，数据请求前后端分离，加快开发效率；具体包括：针对平台业务编写Angular对应页面路由，路由之间存在父子关系，父路由的加载的数据可以供子路由调用。父子路由作用域之间也可以通过事件通讯进行数据交流；路由配置对应的控制器和模板，由于Angular是MVVM的前端框架。控制域负责对数据的掌控，一旦数据发生变化，对应的模板展示就会发生相应变化，达到预期的交互效果；配合requirejs对不同业务需求按需加载依赖文件，减少首次访问加载不必要的文件，而影响用户体验；对Angular数据请求进行包装，减少代码量，以及方便问题的排除。数据请求使用Ajax方案实现前后端分离，加快开发效率；使用nodejs搭建开发环境，使用gulp编译源文件实时刷新修改文件查看浏览器展示效果；生成对应的编译压缩的运行文件，例如编写Less文件生成压缩和添加前缀的css文件，压缩和合并js文件等；替换依赖文件版本号解决浏览器缓存问题；使用bower管理第三方文件版本依赖关系。
附图说明
为了更清楚地说明本发明实施例中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明所述的一种单页面搭建及加载方法示意图；
图2为本发明实施例所述的搭建阶段示意图；
图3为本发明实施例所述的加载阶段示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
如图1、图2和图3所示，一种单页面搭建及加载方法，所述单页面搭建及加载方法包括以下步骤：
步骤S1：搭建开发环境；
步骤S2：针对依赖的资源文件编写配置文件；
步骤S3：编译源文件的任务脚本；
步骤S4：根据项目的业务需求配置路由文件；
步骤S5：接受访问请求，分析请求并跳转到指定的请求页面；
步骤S6：根据配置文件解析并获取路由配置及路径；
步骤S7：根据路由文件加载路由指定文件；
步骤S8：执行路由路径，触发数据请求方法，并执行，达到最终的页面显示。
参照图2，为搭建阶段示意图，其描述了开发环境搭建，创建配置文件，运行任务编写，具体如下：
步骤101：开发环境依赖的前端框架和运行脚本需要NodeJS支持，所以第一步安装NodeJS环境，运行指令初始化NodeJS配置。
步骤102：由于前端第三方数量庞大，彼此之间又有着依赖关系。当需要使用一个第三方插件来实现较为复杂的功能时，需要去了解它的依赖关系太复杂，所以引入bower来管理版本依赖关系。创建.bowerrc文件，指定配置安装文件的目录，运行相应的脚本安装第三方插件。
步骤103：运行npm install gulp--save-dev指令，通过NodeJS环境安装gulp。创建gulpfile.js编写gulp任务脚本。不同的gulp任务做不同的事情，例如：拷贝文件、图片压缩、JS编译合并、编译Less生成css。
步骤104：启动gulp任务，编译源文件，生成目标文件用于线上运行。在开发环境下启动监听任务，在修改源文件时可以即时生成目标文件，同时刷新浏览器渲染，可以查看修改效果。上线时通过gulp编译拷贝源文件，生成文件版本号并替换依赖模板中引用资源的版本，解决浏览器对资源的缓存问题。
开发环境中的编译使用了gulp，还可以使用Webpack和Grunt，但都是依赖NodeJS。
参照图3，为加载阶段示意图，其描述了资源文件加载配置和运行依赖关系，以及数据加载后的视图显示，具体如下：
步骤201：在浏览器中输入请求地址，后端服务器接受到请求，分析请求并跳转到指定的请求页面。这个页面还是原始的JSP页面，因为显示页面时需要准备部分配置信息，而Html静态页面不具备这个功能。
步骤202：当JSP页面引用到了require.js，require在执行的时候会执行data-main的配置文件main.js。main.js中的require.config有所有依赖文件的路径和依赖关系，如paths指定的依赖JS文件路径；shim配置着非AMD规范的JS文件，以及文件的依赖文件使用deps配置；deps执行下一个配置文件app(在path中配置了app.js的路径)。app.js中加载依赖项目基本的文件，创建模块app对象，执行app.config配置文件，获取routerJS文件解析路由配置并添加的$stateProvider对象中。使用AngularAMD启动app模块，AngularJS解析请求地址锚点(#)后的路由路径以及参数，匹配路由配置路径，如果没有匹配到则根据$urlRouterProvider的配置选择默认路由，并执行路由。
步骤203：加载路由指定的视图文件以及controller的JS文件，加载controller依赖文件比如指令和第三方文件。此时浏览器已经可以根据默认数据显示模板文件内容。
步骤204：执行路由路径配置的控制器的JS，触发数据请求方法，根据参数配置显示过程动画，根据数据加载情况渲染加载后的模板文件内容，达到最终的页面显示。
最后在页面中触发其它路由跳转，只会渲染ui-view中的展示重复步骤203和步骤204的改变页面渲染，达到预期的交互效果。
本实施例使用的AngularJS是1.X版本，与1.X不同的还有Angular2.X到4.X版本，但有着本质的区别，依然可以实现本发明技术方案，还有比Angular更晚出现的Vue.js也可以实现本发明技术方案。
本发明实施的优点：只有一个JSP页面，对已加载的文件不会重复加载，浏览器渲染速度快，对服务器请求数量少；编写的指令和模板可以重复利用，数据请求前后端分离，加快开发效率；具体包括：针对平台业务编写Angular对应页面路由，路由之间存在父子关系，父路由的加载的数据可以供子路由调用。父子路由作用域之间也可以通过事件通讯进行数据交流；路由配置对应的控制器和模板，由于Angular是MVVM的前端框架。控制域负责对数据的掌控，一旦数据发生变化，对应的模板展示就会发生相应变化，达到预期的交互效果；配合requirejs对不同业务需求按需加载依赖文件，减少首次访问加载不必要的文件，而影响用户体验；对Angular数据请求进行包装，减少代码量，以及方便问题的排除。数据请求使用Ajax方案实现前后端分离，加快开发效率；使用nodejs搭建开发环境，使用gulp编译源文件实时刷新修改文件查看浏览器展示效果；生成对应的编译压缩的运行文件，例如编写Less文件生成压缩和添加前缀的css文件，压缩和合并js文件等；替换依赖文件版本号解决浏览器缓存问题；使用bower管理第三方文件版本依赖关系。
以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本领域技术的技术人员在本发明公开的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。

Claims (9)

1.一种单页面搭建及加载方法，其特征在于，所述单页面搭建及加载方法包括以下步骤：
搭建开发环境；
针对依赖的资源文件编写配置文件；
编译源文件的任务脚本；
根据项目的业务需求配置路由文件；
接受访问请求，分析请求并跳转到指定的请求页面；
根据配置文件解析并获取路由配置及路径，所述获取路由配置及路径包括：当请求页面引用到了require.js，require在执行的时候会执行data-main的配置文件main.js；shim配置着非AMD规范的JS文件，以及文件的依赖文件使用deps配置；deps执行下一个配置文件app.js，加载依赖项目基本的文件，创建模块app对象；执行app.config配置文件，获取routerJS文件解析路由配置并添加的$stateProvider对象中；使用AngularAMD启动app模块，AngularJS解析请求地址锚点（#）后的路由路径以及参数，匹配路由配置路径，如果没有匹配到则根据$urlRouterProvider的配置选择默认路由，并执行路由；
根据路由文件加载路由指定文件；
执行路由路径，触发数据请求方法，并执行，达到最终的页面显示。
2.根据权利要求1所述的单页面搭建及加载方法，其特征在于，所述搭建开发环境包括：安装NodeJS环境，运行指令初始化NodeJS配置。
3.根据权利要求2所述的单页面搭建及加载方法，其特征在于，所述针对依赖的资源文件编写配置文件包括：创建.bowerrc文件，指定配置安装文件的目录，运行相应的脚本安装第三方插件。
4.根据权利要求3所述的单页面搭建及加载方法，其特征在于，包括：运行npm installgulp --save-dev指令，通过NodeJS环境安装gulp，创建gulpfile.js编写gulp任务脚本。
5.根据权利要求4所述的单页面搭建及加载方法，其特征在于，所述编译源文件的任务脚本包括：启动gulp任务，编译源文件，生成目标文件用于线上运行。
6.根据权利要求5所述的单页面搭建及加载方法，其特征在于，所述编译源文件的任务脚本包括：上线时通过gulp编译拷贝源文件，生成文件版本号并替换依赖模板中引用资源的版本。
7.根据权利要求1所述的单页面搭建及加载方法，其特征在于，包括步骤A：加载路由指定的视图文件以及controller的JS文件，加载controller依赖文件。
8.根据权利要求7所述的单页面搭建及加载方法，其特征在于，包括步骤B：执行路由路径配置的控制器的JS，触发数据请求方法，根据参数配置显示过程动画，根据数据加载情况渲染加载后的模板文件内容，达到最终的页面显示。
9.根据权利要求8所述的单页面搭建及加载方法，其特征在于，包括：在页面中触发其它路由跳转，只渲染ui-view中的展示，重复步骤A和步骤B改变页面渲染，达到预期的交互效果。
CN201810887069.9A 2018-08-06 2018-08-06 一种单页面搭建及加载方法 Active CN110806868B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201810887069.9A CN110806868B (zh) 2018-08-06 2018-08-06 一种单页面搭建及加载方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201810887069.9A CN110806868B (zh) 2018-08-06 2018-08-06 一种单页面搭建及加载方法

Publications (2)

Publication Number Publication Date
CN110806868A CN110806868A (zh) 2020-02-18
CN110806868B true CN110806868B (zh) 2023-02-03

Family

ID=69487318

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201810887069.9A Active CN110806868B (zh) 2018-08-06 2018-08-06 一种单页面搭建及加载方法

Country Status (1)

Country Link
CN (1) CN110806868B (zh)

Families Citing this family (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111428168B (zh) * 2020-03-18 2020-11-10 北京三维天地科技股份有限公司 一种可与后端架构分离开发的浏览器前端架构系统
CN111464617B (zh) * 2020-03-30 2023-08-25 广东电网有限责任公司广州供电局 生产规范化移动监控系统
CN111708965B (zh) * 2020-05-28 2024-05-03 北京嗨学网教育科技股份有限公司 一种同域跨单页应用无感知跳转方法及装置
CN114328342B (zh) * 2020-09-29 2023-09-26 中国船舶集团有限公司第七二四研究所 一种用于PCIe异构加速卡的新型程控配置方法
CN112417343B (zh) * 2020-12-29 2021-08-31 中科院计算技术研究所大数据研究院 一种基于前端Angular框架缓存数据的方法
CN112631604B (zh) * 2020-12-30 2022-04-26 武汉达梦数据技术有限公司 一种前端框架实现方法及装置
CN113656110B (zh) * 2021-09-02 2024-03-29 武汉众邦银行股份有限公司 一种前端升级后免清缓存的页面加载方法及装置
CN114500481A (zh) * 2021-12-29 2022-05-13 苏州众言网络科技股份有限公司 业务请求处理方法、系统和装置

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP1156429A2 (en) * 2000-05-18 2001-11-21 Microsoft Corporation Server-side code generation from a dynamic web page content file
WO2017124962A1 (zh) * 2016-01-21 2017-07-27 阿里巴巴集团控股有限公司 一种应用热部署方法、装置和系统
CN107273528A (zh) * 2017-06-28 2017-10-20 努比亚技术有限公司 一种前后端分离方法、移动终端以及计算机可读存储介质
WO2017206626A1 (zh) * 2016-06-01 2017-12-07 广州市动景计算机科技有限公司 网络资源访问设备、混合设备及方法

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8438471B2 (en) * 2009-07-13 2013-05-07 John R Thorpe System for speeding up web site use using task workflow templates for filtration and extraction

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP1156429A2 (en) * 2000-05-18 2001-11-21 Microsoft Corporation Server-side code generation from a dynamic web page content file
WO2017124962A1 (zh) * 2016-01-21 2017-07-27 阿里巴巴集团控股有限公司 一种应用热部署方法、装置和系统
WO2017206626A1 (zh) * 2016-06-01 2017-12-07 广州市动景计算机科技有限公司 网络资源访问设备、混合设备及方法
CN107273528A (zh) * 2017-06-28 2017-10-20 努比亚技术有限公司 一种前后端分离方法、移动终端以及计算机可读存储介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
异步非阻塞瓦片地图服务器的实现;李正学等;《测绘科学》;20151020(第10期);全文 *

Also Published As

Publication number Publication date
CN110806868A (zh) 2020-02-18

Similar Documents

Publication Publication Date Title
CN110806868B (zh) 一种单页面搭建及加载方法
US11868231B2 (en) System and method for evaluating code by a hybrid of local and cloud-based computers
US9098636B2 (en) White-box testing systems and/or methods in web applications
CN110134378B (zh) 应用程序创建方法及装置、计算机设备及存储介质
US9852015B2 (en) Automatic discovery of a JavaScript API
US11113050B2 (en) Application architecture generation
US20130167128A1 (en) Application Compiling
CN110032388B (zh) 一种增量文件的构建、发布、下载方法及装置
CN113885849B (zh) 基于工业互联网平台的应用开发方法、装置及终端设备
EP3447635A1 (en) Application architecture generation
CN116974620A (zh) 应用程序的生成方法、运行方法以及相应的装置
CN112087370A (zh) 发布GitHub Issues的方法、系统、电子设备和计算机可读存储介质
US11604662B2 (en) System and method for accelerating modernization of user interfaces in a computing environment
CN110020370B (zh) 在客户端应用中实现动画的方法、装置及动画脚本的框架
US9489179B2 (en) Application programming interface tracing mechanism
AU2016378425B2 (en) Application program running method and apparatus
US20130111431A1 (en) Validation of a system model including an activity diagram
CN115760391A (zh) 区块链中智能合约更改方法、装置、电子设备及存储介质
US10990425B2 (en) Simulated change of immutable objects during execution runtime
EP2721494A1 (en) System and method to in-line script dependencies
CN112068895A (zh) 代码配置方法、装置、视频播放设备及存储介质
CN111638903B (zh) 不同软件版本的差异信息生成方法及装置
CN117453302A (zh) 导入软件开发包的方法、装置、设备及计算机可读介质
CN116932126A (zh) 一种应用嵌入方法、装置、终端、介质及程序产品
CN116450964A (zh) 多媒体播放方法、装置、电子设备及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant