CN109032659A - 单页面应用基于配置引用远程页面组件的方法 - Google Patents
单页面应用基于配置引用远程页面组件的方法 Download PDFInfo
- Publication number
- CN109032659A CN109032659A CN201810805226.7A CN201810805226A CN109032659A CN 109032659 A CN109032659 A CN 109032659A CN 201810805226 A CN201810805226 A CN 201810805226A CN 109032659 A CN109032659 A CN 109032659A
- Authority
- CN
- China
- Prior art keywords
- page
- routing
- public page
- pages component
- page assembly
- 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.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
- G06F8/65—Updates
Abstract
本发明公开了一种单页面应用基于配置引用远程页面组件的方法，属于通信的技术领域，具体通过以下步骤：新建公用页面组件开发项目工程、开发公用页面组件、打包公用页面组件和发布公用页面组件实现开发与打包公用页面组件，再通过获取远程页面组件的配置信息、根据路由配置信息生成动态路由和根据路由访问页面实现调用远程页面组件，以达到能够对多个产品进行同步更新，降低产品制定化开发的成本以及公用页面组件更加容易维护的目的。
Description
技术领域
本发明属于通信的技术领域，具体而言，涉及一种单页面应用基于配置引用远程页面组件的方法。
背景技术
单页面应用(SPA)指的是Single Page webApplication，即只有一个web页面应用，单页面应用程序是加载单个html(HyperText Markup Language，超级文本标记语言)页面并在用户与应用程序交互时动态更新该页面的web应用程序。
在加载页面的过程中，浏览器首先会加载必须的html、css(cascading stylesheets，层叠样式表)及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地址的一个链接，可以直接用浏览器打开读取，而已可以通过软件发起HTTP GET请求来调用读取。在进行产品定制化开发过程中，对应当前的项目工程(即web应用采用单页面应用)所需的功能，根据该功能配置对应的远程页面组件，远程页面组件的地址列表通过本地配置或者API地址获取，再将地址列表与路由配置信息相对应，以为后续的访问步骤提供路由路径。
(b)根据路由配置信息生成动态路由：根据路由配置信息动态生成路由列表，即生成动态路由表；其中，动态路由表是路由器根据网络系统的运行情况而自动调整的路由表。路由器根据路由选择协议(Routing Protocol)提供的功能，自动学习和记忆网络运行情况，在需要时自动计算数据传输的最佳路径。
(c)根据路由访问页面：通过路由列表的地址访问显示远程页面组件，以实现对远程页面组件的共用，从而，远程页面组件的维护更加方便快捷。
本发明不局限于上述可选实施方式，任何人在本发明的启示下都可得出其他各种形式的产品，但不论在其形状或结构上作任何变化，凡是落入本发明权利要求界定范围内的技术方案，均落在本发明的保护范围之内。
Claims (2)
1.一种单页面应用基于配置引用远程页面组件的方法，其特征在于，主要包括以下步骤：
(一)、开发与打包公用页面组件：
(1)新建公用页面组件开发项目工程：启动项目，复制已有的项目工程，修改工程名以用于开发公用页面组件；
(2)开发公用页面组件：启动路由，以路由为页面单位开发公用页面组件；
(3)打包公用页面组件：要配置一个以步骤(2)中各个公用页面组件的代码文件为入口的webpack配置选项，配置webpack以路由为单位打包每个公用页面组件以分别形成单独的js文件；
(4)发布公用页面组件：将各个单独的js文件发布至服务器上以形成远程页面组件，以用于多个项目工程进行调用；
(二)、调用远程页面组件：
(a)获取远程页面组件的配置信息：通过本地配置或者api地址获取当前项目工程所需要的远程页面组件的地址列表与对应的路由配置信息；
(b)根据路由配置信息生成动态路由：根据路由配置信息动态生成路由列表；
(c)根据路由访问页面：通过路由列表的地址访问显示远程页面组件。
2.根据权利要求1所述的单页面应用基于配置引用远程页面组件的方法，其特征在于，在步骤(二)中项目工程中的web应用采用单页面应用。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810805226.7A CN109032659B (zh) | 2018-07-20 | 2018-07-20 | 单页面应用基于配置引用远程页面组件的方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810805226.7A CN109032659B (zh) | 2018-07-20 | 2018-07-20 | 单页面应用基于配置引用远程页面组件的方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109032659A true CN109032659A (zh) | 2018-12-18 |
| CN109032659B CN109032659B (zh) | 2021-06-15 |
Family
ID=64644789
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810805226.7A Active CN109032659B (zh) | 2018-07-20 | 2018-07-20 | 单页面应用基于配置引用远程页面组件的方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109032659B (zh) |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109669683A (zh) * | 2018-12-25 | 2019-04-23 | 福建南威软件有限公司 | 一种功能组件自动打包的方法 |
| CN110531983A (zh) * | 2019-08-08 | 2019-12-03 | 国云科技股份有限公司 | 一种基于多项目构建的前端页面按需打包方法 |
| CN110928545A (zh) * | 2019-12-04 | 2020-03-27 | 北京小米移动软件有限公司 | 组件分发方法、单页应用的开发方法、装置及存储介质 |
| CN111367522A (zh) * | 2020-03-04 | 2020-07-03 | 上海上实龙创智慧能源科技股份有限公司 | 一种基于Vue.js框架的动态路由配置方法 |
| CN112732328A (zh) * | 2020-12-30 | 2021-04-30 | 望海康信(北京)科技股份公司 | webpack打包系统、方法及相应设备和存储介质 |
| CN113485695A (zh) * | 2021-07-07 | 2021-10-08 | 上海中通吉网络技术有限公司 | 一种前端页面生成方法 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1777154A (zh) * | 2004-11-16 | 2006-05-24 | 国际商业机器公司 | 用于对应用组件的接口的方法和系统 |
| CN104573066A (zh) * | 2015-01-26 | 2015-04-29 | 中国工商银行股份有限公司 | 页面复用方法及装置 |
| CN107562425A (zh) * | 2017-08-07 | 2018-01-09 | 上海斐讯数据通信技术有限公司 | 基于Hybrid应用的单页面应用创建方法及装置 |
| US20180052940A1 (en) * | 2016-08-16 | 2018-02-22 | Microsoft Technology Licensing, Llc | Serializing plug-in data in a web page |
-
2018
- 2018-07-20 CN CN201810805226.7A patent/CN109032659B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1777154A (zh) * | 2004-11-16 | 2006-05-24 | 国际商业机器公司 | 用于对应用组件的接口的方法和系统 |
| US20090049458A1 (en) * | 2004-11-16 | 2009-02-19 | International Business Machines Corporation | Interface for application components |
| CN104573066A (zh) * | 2015-01-26 | 2015-04-29 | 中国工商银行股份有限公司 | 页面复用方法及装置 |
| US20180052940A1 (en) * | 2016-08-16 | 2018-02-22 | Microsoft Technology Licensing, Llc | Serializing plug-in data in a web page |
| CN107562425A (zh) * | 2017-08-07 | 2018-01-09 | 上海斐讯数据通信技术有限公司 | 基于Hybrid应用的单页面应用创建方法及装置 |
Non-Patent Citations (1)
| Title |
|---|
| CHUNMANXI1749: "Vue+Webpack开发可复用的单页面富应用教程（组件篇）", 《HTTPS://BLOG.CSDN.NET/CHUNMANXI1749/ARTICLE/DETAILS/100899805》 * |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109669683A (zh) * | 2018-12-25 | 2019-04-23 | 福建南威软件有限公司 | 一种功能组件自动打包的方法 |
| CN110531983A (zh) * | 2019-08-08 | 2019-12-03 | 国云科技股份有限公司 | 一种基于多项目构建的前端页面按需打包方法 |
| CN110928545A (zh) * | 2019-12-04 | 2020-03-27 | 北京小米移动软件有限公司 | 组件分发方法、单页应用的开发方法、装置及存储介质 |
| CN110928545B (zh) * | 2019-12-04 | 2024-03-12 | 北京小米移动软件有限公司 | 组件分发方法、单页应用的开发方法、装置及存储介质 |
| CN111367522A (zh) * | 2020-03-04 | 2020-07-03 | 上海上实龙创智慧能源科技股份有限公司 | 一种基于Vue.js框架的动态路由配置方法 |
| CN112732328A (zh) * | 2020-12-30 | 2021-04-30 | 望海康信(北京)科技股份公司 | webpack打包系统、方法及相应设备和存储介质 |
| CN112732328B (zh) * | 2020-12-30 | 2021-11-12 | 望海康信(北京)科技股份公司 | webpack打包系统、方法及相应设备和存储介质 |
| CN113485695A (zh) * | 2021-07-07 | 2021-10-08 | 上海中通吉网络技术有限公司 | 一种前端页面生成方法 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109032659B (zh) | 2021-06-15 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109032659A (zh) | 单页面应用基于配置引用远程页面组件的方法 | |
| JP4857349B2 (ja) | ポータル・システム内で非同期ポータル・ページを提供するための方法、システム、およびコンピュータ・プログラム | |
| US7725560B2 (en) | Web service-enabled portlet wizard | |
| US7703022B2 (en) | Display and installation of portlets on a client platform | |
| CN101127655B (zh) | 集成现有基于万维网的系统的方法和系统 | |
| KR100900743B1 (ko) | 데이터 공유 시스템, 방법 및 소프트웨어 툴 | |
| KR100353585B1 (ko) | 표시 제어 정보 생성 방법 및 컴퓨터 | |
| CN110442811A (zh) | 一种页面的处理方法、装置、计算机设备和存储介质 | |
| US20040010598A1 (en) | Portal setup wizard | |
| US8527860B1 (en) | System and method for exposing the dynamic web server-side | |
| US9785452B2 (en) | Framework for dependency management and automatic file load in a network environment | |
| US20030177175A1 (en) | Method and system for display of web pages | |
| US20230036980A1 (en) | Micro-frontend system, sub-application loading method, electronic device, computer program product, and computer-readable storage medium | |
| US8819539B1 (en) | On-the-fly rewriting of uniform resource locators in a web-page | |
| WO2004031882A2 (en) | Method and apparatus for relaying session information from a portal server | |
| WO2004057492A2 (en) | System and method for dynamically integrating remote portal fragments into a local portal | |
| CN112114890A (zh) | 小程序的处理方法、装置、设备及存储介质 | |
| US20200150613A1 (en) | Method and device for operating and controlling a machine installation by means of a graphical development interface and generation of a field bus configuration | |
| US20050283719A1 (en) | HTML file processing technique | |
| JP5151696B2 (ja) | ユニフォームリソースロケータ情報を書き換えるプログラム | |
| US20090006634A1 (en) | Run-once static content generation using a descriptive file path | |
| US20080222157A1 (en) | Information providing method and information providing system | |
| CN103001981A (zh) | 一种调用能力服务的方法及系统 | |
| CN115695402A (zh) | 外链生成、内容访问方法、装置、系统、设备及存储介质 | |
| Heinzl et al. | The grid browser: improving usability in service-oriented grids by automatically generating clients and handling data transfers |
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 | ||
| CP01 | Change in the name or title of a patent holder |
Address after: 519000 1st floor, area D, South Software Park, No.1, Tangjiawan Software Park Road, Zhuhai City, Guangdong Province Patentee after: Hongqiao Hi Tech Group Co.,Ltd. Address before: 519000 1st floor, area D, South Software Park, No.1, Tangjiawan Software Park Road, Zhuhai City, Guangdong Province Patentee before: ZHUHAI HONGQIAO HIGH-TECH Co.,Ltd. |
|
| CP01 | Change in the name or title of a patent holder |