单页面应用基于配置引用远程页面组件的方法与流程

本发明属于通信的技术领域，具体而言，涉及一种单页面应用基于配置引用远程页面组件的方法。

背景技术

单页面应用(spa)指的是singlepagewebapplication，即只有一个web页面应用，单页面应用程序是加载单个html(hypertextmarkuplanguage，超级文本标记语言)页面并在用户与应用程序交互时动态更新该页面的web应用程序。

在加载页面的过程中，浏览器首先会加载必须的html、css(cascadingstylesheets，层叠样式表)及javascript，所有的操作都在页面上完成由javascript控制单页面应用具有快速发布的特点。

单页面应用也有一些缺点：首次加载大量资源：在第一次加载的时候，需要将所有前端资源进行加载，而且mvc前置后，前端资源会比多页面应用大一些，加载时间相对较长；对搜索引擎不友好：单页面应用只有一个页面，无法对每一个路由做seo。

vue.js自身不是一个全能框架——它只聚焦于视图层，因此，它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，vue.js也能完美地驱动复杂的单页应用。

基于vue.js单页面应用的开发都是组件化开发，一般都是使用webpack模块打包器组织开发，并使用vue-router进行页面模块导航。由于webpack默认会把所有组件模块打包成一个js文件，页面模块很多时，这个js文件就会非常大，首次加载就会很慢。

再者，由于基于vue.js的单页面应用路由页面的代码分割都是通过import()方法自动分割的，分割的js页面代码文件就会高度依赖于当前项目工程，在产品制定化开发的时候，通过直接引用这个js文件来显示页面时可能会无法正常显示。所以在产品制定化开发时通常都是把之前有相同功能的页面代码复制到新的项目工程中来，而这个相同功能的页面有bug或者要增加功能的时候，多个产品之间就很难做的同步更新，这无疑增加了产品的维护成本。

技术实现要素：

为了解决现有技术存在的上述问题，本发明目的在于提供一种单页面应用基于配置引用远程页面组件的方法以达到能够对多个产品进行同步更新，降低产品制定化开发的成本以及公用页面组件更加容易维护的目的。

本发明所采用的技术方案为：一种单页面应用基于配置引用远程页面组件的方法，主要包括以下步骤：

(一)、开发与打包公用页面组件：

(1)新建公用页面组件开发项目工程：启动项目，复制已有的项目工程，修改工程名以用于开发公用页面组件；

(2)开发公用页面组件：启动路由，以路由为页面单位开发公用页面组件；

(3)打包公用页面组件：要配置一个以步骤(2)中各个公用页面组件的代码文件为入口的webpack配置选项，配置webpack以路由为单位打包每个公用页面组件以分别形成单独的js文件；

(4)发布公用页面组件：将各个单独的js文件发布至服务器上以形成远程页面组件，以用于多个项目工程进行调用；

(二)、调用远程页面组件：

(a)获取远程页面组件的配置信息：通过本地配置或者api地址获取当前项目工程所需要的远程页面组件的地址列表与对应的路由配置信息；

(b)根据路由配置信息生成动态路由：根据路由配置信息动态生成路由列表；

(c)根据路由访问页面：通过路由列表的地址访问显示远程页面组件。

进一步地，在步骤(二)中项目工程中的web应用采用单页面应用。

本发明的有益效果为：

1.采用本发明所提供的方法，在对公用页面组件进行打包的过程中，采用配置webpack以路由为单位打包每个公用页面组件，能够防止采用通过import方法自动分割后的js页面代码文件高度依赖于当前的项目工程，克服直接引用js文件导致显示页面无法正常显示的缺陷，能够实现在相同功能的页面有bug或者要增加功能的时候，只需要对远程页面组件进行维护，便可实现对多个产品进行同步更新，从整体上降低了产品的维护成本；

2.本发明中通过路由为页面单位开发公用页面组件，并配合配置webpack以路由为单位打包每个公用页面组件，能够实现获取远程页面组件的地址列表与对应的路由配置信息，路由配置信息动态生成路由列表，从而实现访问显示远程页面组件，在产品定制化时，具有相同功能的页面能够共用远程页面组件，降低产品制定化开发的成本，且共用的远程页面组件更加容易维护。

附图说明

图1是单页面应用基于配置引用远程页面组件的方法中开发与打包公用页面组件的工作流程图；

图2是单页面应用基于配置引用远程页面组件的方法中调用远程页面组件的工作流程图。

具体实施方式

下面结合附图及具体实施例对本发明作进一步阐述。

如图1、图2所述，本发明提供了一种单页面应用基于配置引用远程页面组件的方法，主要包括以下步骤：

1、开发与打包公用页面组件：

(1)新建公用页面组件开发项目工程：启动项目，复制已有的项目工程，修改工程名以用于开发公用页面组件；具体的操作如下：

1)copy一个旧工程，paste一个新工程，并将paste的工程改名为你的新工程名(如chapter4)；

2)将当前目录下的.settings/org.eclipse.wst.common.component下的工程名(如chapter2)改为新的项目名(如chapter4)；

3)将.project里的工程名作相同的修改；

4)修改包名，修改servlet名，修改web.xml里引用的servlet名字。

(2)开发公用页面组件：启动路由，以路由为页面单位开发公用页面组件；优选的，采用vue.js为前端框架以路由页面为单位进行公用页面组件的开发。

(3)打包公用页面组件：由于上述的公用页面组件是需要在多个项目工程中共用使用的，因此，在本实施例中，不能由import()来自动生成公用页面组件的js文件，优选的，在本实施例中，要配置一个以步骤(2)中各个公用页面组件的代码文件为入口的webpack配置选项，配置webpack以路由为单位打包每个公用页面组件以分别形成单独的js文件，即打包后的每一个公用页面组件为对应的js文件，且每一个公用页面组件有对应的路由配置信息；其中，webpack为模块打包机，分析项目结构，找到javascript模块以及其他的一些浏览器不能直接运行的拓展语言(sass，typescript)，并将其转换和打包为合适的格式以供浏览器使用。

(4)发布公用页面组件：将各个单独的js文件发布至服务器上以形成远程页面组件，即将js文件上传至服务器上进行统一维护和管理，以用于多个项目工程进行调用。

2、调用远程页面组件：

(a)获取远程页面组件的配置信息：通过本地配置或者api地址获取当前项目工程所需要的远程页面组件的地址列表与对应的路由配置信息，项目工程中的web应用采用单页面应用；其中，api地址就是一个全是国内代理ip地址的一个链接，可以直接用浏览器打开读取，而已可以通过软件发起httpget请求来调用读取。在进行产品定制化开发过程中，对应当前的项目工程(即web应用采用单页面应用)所需的功能，根据该功能配置对应的远程页面组件，远程页面组件的地址列表通过本地配置或者api地址获取，再将地址列表与路由配置信息相对应，以为后续的访问步骤提供路由路径。

(b)根据路由配置信息生成动态路由：根据路由配置信息动态生成路由列表，即生成动态路由表；其中，动态路由表是路由器根据网络系统的运行情况而自动调整的路由表。路由器根据路由选择协议(routingprotocol)提供的功能，自动学习和记忆网络运行情况，在需要时自动计算数据传输的最佳路径。

(c)根据路由访问页面：通过路由列表的地址访问显示远程页面组件，以实现对远程页面组件的共用，从而，远程页面组件的维护更加方便快捷。

本发明不局限于上述可选实施方式，任何人在本发明的启示下都可得出其他各种形式的产品，但不论在其形状或结构上作任何变化，凡是落入本发明权利要求界定范围内的技术方案，均落在本发明的保护范围之内。