CN113448702A - 一种基于前端的微服务设计方法 - Google Patents
一种基于前端的微服务设计方法 Download PDFInfo
- Publication number
- CN113448702A CN113448702A CN202110672373.3A CN202110672373A CN113448702A CN 113448702 A CN113448702 A CN 113448702A CN 202110672373 A CN202110672373 A CN 202110672373A CN 113448702 A CN113448702 A CN 113448702A
- Authority
- CN
- China
- Prior art keywords
- sub
- application
- main application
- applications
- design method
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 32
- 238000013461 design Methods 0.000 title claims abstract description 20
- 238000012938 design process Methods 0.000 claims abstract description 3
- 230000006854 communication Effects 0.000 claims description 9
- 230000003068 static effect Effects 0.000 claims description 9
- 238000004891 communication Methods 0.000 claims description 6
- 238000002955 isolation Methods 0.000 claims description 6
- 230000008569 process Effects 0.000 claims description 4
- 238000012856 packing Methods 0.000 claims description 3
- 230000008878 coupling Effects 0.000 description 2
- 238000010168 coupling process Methods 0.000 description 2
- 238000005859 coupling reaction Methods 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 230000002776 aggregation Effects 0.000 description 1
- 238000004220 aggregation Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000007726 management method Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000004806 packaging method and process Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/46—Multiprogramming arrangements
- G06F9/48—Program initiating; Program switching, e.g. by interrupt
- G06F9/4806—Task transfer initiation or dispatching
- G06F9/4843—Task transfer initiation or dispatching by program, e.g. task dispatcher, supervisor, operating system
- G06F9/485—Task life-cycle, e.g. stopping, restarting, resuming execution
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/46—Multiprogramming arrangements
- G06F9/54—Interprogram communication
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
Abstract
本发明公开一种基于前端的微服务设计方法，涉及微服务技术领域，其设计过程包括：基于前端微服务的模块加载器，把用户第一时间访问的应用作为主应用，配置主应用信息，并注册将要接入主应用的多个子应用；子应用暴露出主应用可以访问的生命周期钩子函数，供主应用访问时使用；将子应用发布成第三方可以使用的库文件，以成功接入到主应用，或者，将子应用独立开发、独立部署到web服务器。本发明实现了主应用对可以访问子应用的自行加载，提高了用户体验。
Description
技术领域
本发明涉及计算机技术技术领域，具体的说是一种基于前端的微服务设计方法。
背景技术
后端开发的微服务架构，主要特征是组件化、松耦合、独立、去中心化。将项目中每个模块/每个职责拆分出来，专注做好一件事情；每个微服务又是一个单独的项目，独立运行在自己的进程里；各个服务之间相互独立又通过协议进行通讯，协作完成更复杂的业务。
但是，现有系统随着人员的增多、产品功能的复杂让工程越来越大，打包的速度也越来越慢，致使开发、交付陷入困境。现急需把系统按业务进行拆分，降低耦合，并且把拆分后的众多子系统进行聚合展示。目前，把众多子系统的前端界面集成到一起，组成统一平台管理界面，最大程度地提升保持用户体验一致，是项目团队首要解决的问题，在传统iframe方案不能满足项目需求情况下，基于前端的微服务设计应用而生。
发明内容
本发明针对目前技术发展的需求和不足之处，提供一种基于前端的微服务设计方法。
本发明的一种基于前端的微服务设计方法，解决上述技术问题采用的技术方案如下：
一种基于前端的微服务设计方法，其设计过程包括：
基于前端微服务的模块加载器，把用户第一时间访问的应用作为主应用，配置主应用信息，并注册将要接入主应用的多个子应用；
子应用暴露出主应用可以访问的生命周期钩子函数，供主应用访问时使用；
将子应用发布成第三方可以使用的库文件，以成功接入到主应用，或者，将子应用独立开发、独立部署到web服务器。
可选的，配置主应用信息时，在主应用中定义一个唯一的dom元素id，注册的子应用挂载到所述dom元素下；
注册多个子应用后，主应用会对每个子应用提供一个唯一的运行上下文，此时，即可根据用户访问浏览器URL中所包含的运行上下文，判断用户访问的哪个子应用，进而加载该子应用。
可选的，生命周期钩子函数包括生命周期函数一、生命周期函数二、生命周期函数三；
生命周期函数一是子应用加载初始化的时候调用，可以进行全局配置或者信息存储；
生命周期函数二是子应用加载的时候调用，可以把子应用传递过来的信息进行存储；
生命周期函数三是子应用卸载的时候调用，可以把子应用的全局变量销毁、挂载的元素置空。
可选的，注册的多个子应用可以独立开发或独立部署到web服务器。
进一步可选的，如果子应用在前端微服务的模式下运行，需要接收到主应用给的前缀信息，并且设置为路由的前缀，这样才能保证命中到该子应用；如果子应用独立运行时，每个子应用之间状态隔离、运行时状态不共享。
可选的，子应用成功接入到主应用后，通过实现子应用的样式隔离，确保子应用之间样式互不干扰、JS隔离确保子应用之间全局变量、事件之间不冲突。
进一步可选的，子应用成功接入到主应用后，可以实现资源预加载，在浏览器空闲时间预加载未打开的子应用资源，加速子应用的打开速度。
进一步可选的，资源预加载过程中：
将静态资源上传至cdn，css中直接引用cdn地址，
借助webpack的url-loader将静态资源打包成base64；
使用绝对地址，在nginx中设置静态目录。
可选的，子应用成功接入到主应用后，主应用和子应用之间、子应用和子应用之间通过发布/订阅模式进行通信。通信过程中采用单例模式，具体表现为：①一个工程内使用同一个实例；②首先加载主应用，随后根据配置加载对应的一个或者多个子应用；③父工程先一步生成实例，并传递给子工程，子工程则使用这个实例初始化自己的实例，实现父工程和子工程对同一个实例的共享。
进一步可选的，子应用成功接入到主应用后，先注册主应用和子应用的观察者到观察池中；在主应用或子应用发生了通信变化时，更新全局状态池，并通知观察池中的所有观察者，实现主应用和子应用之间、子应用和子应用之间的通信。
本发明的一种基于前端的微服务设计方法，与现有技术相比具有的有益效果是：
本发明首先基于前端微服务的模块加载器，确定主应用，并注册接入主应用的多个子应用，随后让子应用暴露出主应用可以访问的生命周期钩子函数，供主应用访问时使用，最后将子应用发布成第三方可以使用的库文件，以成功接入到主应用，或者，将子应用独立开发、独立部署到web服务器，这一过程实现了主应用对可以访问子应用的自行加载，提高了用户体验。
附图说明
附图1是本发明的实现框图；
附图2是本发明更新主应用或子应用的流程框图。
具体实施方式
为使本发明的技术方案、解决的技术问题和技术效果更加清楚明白，以下结合具体实施例，对本发明的技术方案进行清楚、完整的描述。
实施例一：
结合附图1，本实施例提出一种基于前端的微服务设计方法，其设计过程包括：
(一)基于前端微服务的模块加载器，把用户第一时间访问的应用作为主应用，配置主应用信息，并注册将要接入主应用的子应用A、子应用B、子应用C。子应用A部署在服务端A，子应用B部署在服务端B，子应用C部署在服务端C。
本步骤中，配置主应用信息时，在主应用中定义一个唯一的dom元素id，注册的子应用挂载到所述dom元素下。注册多个子应用后，主应用会对每个子应用提供一个唯一的运行上下文，此时，即可根据用户访问浏览器URL中所包含的运行上下文，判断用户访问的哪个子应用，进而加载该子应用。
(二)子应用暴露出主应用可以访问的生命周期钩子函数，供主应用访问时使用；
本步骤中，生命周期钩子函数包括生命周期函数一、生命周期函数二、生命周期函数三，其中：
生命周期函数一是子应用加载初始化的时候调用，可以进行全局配置或者信息存储；
生命周期函数二是子应用加载的时候调用，可以把子应用传递过来的信息进行存储；
生命周期函数三是子应用卸载的时候调用，可以把子应用的全局变量销毁、挂载的元素置空。
本实施例中，如果子应用在前端微服务的模式下运行，需要接收到主应用给的前缀信息，并且设置为路由的前缀，这样才能保证命中到该子应用；如果子应用独立运行时，每个子应用之间状态隔离、运行时状态不共享。
(三)将子应用发布成第三方可以使用的库文件，以成功接入到主应用，或者，将子应用独立开发、独立部署到web服务器。
子应用成功接入到主应用后，通过实现子应用的样式隔离，确保子应用之间样式互不干扰、JS隔离确保子应用之间全局变量、事件之间不冲突。
子应用成功接入到主应用后，可以实现资源预加载，在浏览器空闲时间预加载未打开的子应用资源，加速子应用的打开速度。资源预加载过程中：
将静态资源上传至cdn，css中直接引用cdn地址，
借助webpack的url-loader将静态资源打包成base64；
使用绝对地址，在nginx中设置静态目录。
子应用成功接入到主应用后，主应用和子应用之间、子应用和子应用之间通过发布/订阅模式进行通信。
通信过程中采用单例模式，具体表现为：①一个工程内使用同一个实例；②首先加载主应用，随后根据配置加载对应的一个或者多个子应用；③父工程先一步生成实例，并传递给子工程，子工程则使用这个实例初始化自己的实例，实现父工程和子工程对同一个实例的共享。
结合附图2，子应用成功接入到主应用后，先注册主应用和子应用的观察者到观察池中；在主应用或子应用发生了通信变化时，更新全局状态池，并通知观察池中的所有观察者，实现主应用和子应用之间、子应用和子应用之间的通信。
综上可知，采用本发明的一种基于前端的微服务设计方法，实现了主应用对可以访问子应用的自行加载，提高了用户体验。
基于本发明的上述具体实施例，本技术领域的技术人员在不脱离本发明原理的前提下，对本发明所作出的任何改进和修饰，皆应落入本发明的专利保护范围。
Claims (10)
1.一种基于前端的微服务设计方法，其特征在于,其设计过程包括：
基于前端微服务的模块加载器，把用户第一时间访问的应用作为主应用，配置主应用信息，并注册将要接入主应用的多个子应用；
子应用暴露出主应用可以访问的生命周期钩子函数，供主应用访问时使用；
将子应用发布成第三方可以使用的库文件，以成功接入到主应用，或者，将子应用独立开发、独立部署到web服务器。
2.根据权利要求1所述的一种基于前端的微服务设计方法，其特征在于，配置主应用信息时，在主应用中定义一个唯一的dom元素id，注册的子应用挂载到所述dom元素下；
注册多个子应用后，主应用会对每个子应用提供一个唯一的运行上下文，此时，即可根据用户访问浏览器URL中所包含的运行上下文，判断用户访问的哪个子应用，进而加载该子应用。
3.根据权利要求1所述的一种基于前端的微服务设计方法，其特征在于，生命周期钩子函数包括生命周期函数一、生命周期函数二、生命周期函数三；
生命周期函数一是子应用加载初始化的时候调用，可以进行全局配置或者信息存储；
生命周期函数二是子应用加载的时候调用，可以把子应用传递过来的信息进行存储；
生命周期函数三是子应用卸载的时候调用，可以把子应用的全局变量销毁、挂载的元素置空。
4.根据权利要求1所述的一种基于前端的微服务设计方法，其特征在于，子应用在前端微服务的模式下运行，需要接收到主应用给的前缀信息，并且设置为路由的前缀，这样才能保证命中到该子应用；
如果子应用独立运行时，每个子应用之间状态隔离、运行时状态不共享。
5.根据权利要求1所述的一种基于前端的微服务设计方法，其特征在于，子应用成功接入到主应用后，通过实现子应用的样式隔离，确保子应用之间样式互不干扰、JS隔离确保子应用之间全局变量、事件之间不冲突。
6.根据权利要求5所述的一种基于前端的微服务设计方法，其特征在于，子应用成功接入到主应用后，可以实现资源预加载，在浏览器空闲时间预加载未打开的子应用资源，加速子应用的打开速度。
7.根据权利要求6所述的一种基于前端的微服务设计方法，其特征在于，资源预加载过程中：
将静态资源上传至cdn，css中直接引用cdn地址，
借助webpack的url-loader将静态资源打包成base64；
使用绝对地址，在nginx中设置静态目录。
8.根据权利要求5所述的一种基于前端的微服务设计方法，其特征在于，子应用成功接入到主应用后，主应用和子应用之间、子应用和子应用之间通过发布/订阅模式进行通信。
9.根据权利要求8所述的一种基于前端的微服务设计方法，其特征在于，通信过程中采用单例模式，具体表现为：①一个工程内使用同一个实例；②首先加载主应用，随后根据配置加载对应的一个或者多个子应用；③父工程先一步生成实例，并传递给子工程，子工程则使用这个实例初始化自己的实例，实现父工程和子工程对同一个实例的共享。
10.根据权利要求8所述的一种基于前端的微服务设计方法，其特征在于，子应用成功接入到主应用后，先注册主应用和子应用的观察者到观察池中；在主应用或子应用发生了通信变化时，更新全局状态池，并通知观察池中的所有观察者，实现主应用和子应用之间、子应用和子应用之间的通信。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110672373.3A CN113448702A (zh) | 2021-06-16 | 2021-06-16 | 一种基于前端的微服务设计方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110672373.3A CN113448702A (zh) | 2021-06-16 | 2021-06-16 | 一种基于前端的微服务设计方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113448702A true CN113448702A (zh) | 2021-09-28 |
Family
ID=77811579
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110672373.3A Pending CN113448702A (zh) | 2021-06-16 | 2021-06-16 | 一种基于前端的微服务设计方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113448702A (zh) |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113986226A (zh) * | 2021-12-28 | 2022-01-28 | 中国电子科技网络信息安全有限公司 | 一种基于qiankun和Web Component的微前端架构及其构建方法 |
| CN114327688A (zh) * | 2022-03-15 | 2022-04-12 | Tcl通讯科技（成都）有限公司 | 基于微前端的数据处理方法、框架、存储介质及终端设备 |
| CN114860364A (zh) * | 2022-04-29 | 2022-08-05 | 联想(北京)有限公司 | 数据处理方法及装置 |
| CN115390897A (zh) * | 2022-08-22 | 2022-11-25 | 再惠(上海)网络科技有限公司 | 微前端管理的方法、装置、电子设备及存储介质 |
| CN115580642A (zh) * | 2022-09-21 | 2023-01-06 | 北京智能建筑科技有限公司 | 应用间的通信方法及装置、非易失性存储介质、处理器 |
| CN116795446A (zh) * | 2022-03-25 | 2023-09-22 | 西安即刻易用网络科技有限公司 | 一种子应用打开方法、配置方法及多应用管理平台 |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110708368A (zh) * | 2019-09-25 | 2020-01-17 | 北京计算机技术及应用研究所 | 一种基于路由分发的微前端系统和方法 |
| US20200026604A1 (en) * | 2018-07-23 | 2020-01-23 | Mastercard International Incorporated | Automated failover of data traffic routes for network-based applications |
| CN112000448A (zh) * | 2020-07-17 | 2020-11-27 | 北京计算机技术及应用研究所 | 基于微服务架构的应用管理方法 |
| CN112149169A (zh) * | 2020-10-12 | 2020-12-29 | Oppo广东移动通信有限公司 | 一种应用访问方法、装置及计算机可读存储介质 |
| CN112416415A (zh) * | 2020-09-18 | 2021-02-26 | 山东英信计算机技术有限公司 | 一种前端微服务实现方法及相关组件 |
| CN112948035A (zh) * | 2021-01-29 | 2021-06-11 | 北京高途云集教育科技有限公司 | 微前端页面的控制方法、装置、终端设备及存储介质 |
-
2021
- 2021-06-16 CN CN202110672373.3A patent/CN113448702A/zh active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20200026604A1 (en) * | 2018-07-23 | 2020-01-23 | Mastercard International Incorporated | Automated failover of data traffic routes for network-based applications |
| CN110708368A (zh) * | 2019-09-25 | 2020-01-17 | 北京计算机技术及应用研究所 | 一种基于路由分发的微前端系统和方法 |
| CN112000448A (zh) * | 2020-07-17 | 2020-11-27 | 北京计算机技术及应用研究所 | 基于微服务架构的应用管理方法 |
| CN112416415A (zh) * | 2020-09-18 | 2021-02-26 | 山东英信计算机技术有限公司 | 一种前端微服务实现方法及相关组件 |
| CN112149169A (zh) * | 2020-10-12 | 2020-12-29 | Oppo广东移动通信有限公司 | 一种应用访问方法、装置及计算机可读存储介质 |
| CN112948035A (zh) * | 2021-01-29 | 2021-06-11 | 北京高途云集教育科技有限公司 | 微前端页面的控制方法、装置、终端设备及存储介质 |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113986226A (zh) * | 2021-12-28 | 2022-01-28 | 中国电子科技网络信息安全有限公司 | 一种基于qiankun和Web Component的微前端架构及其构建方法 |
| CN113986226B (zh) * | 2021-12-28 | 2022-04-22 | 中国电子科技网络信息安全有限公司 | 一种基于qiankun和Web Component的微前端架构及其构建方法 |
| CN114327688A (zh) * | 2022-03-15 | 2022-04-12 | Tcl通讯科技（成都）有限公司 | 基于微前端的数据处理方法、框架、存储介质及终端设备 |
| CN114327688B (zh) * | 2022-03-15 | 2022-07-08 | Tcl通讯科技（成都）有限公司 | 基于微前端的数据处理方法、框架、存储介质及终端设备 |
| CN116795446A (zh) * | 2022-03-25 | 2023-09-22 | 西安即刻易用网络科技有限公司 | 一种子应用打开方法、配置方法及多应用管理平台 |
| CN114860364A (zh) * | 2022-04-29 | 2022-08-05 | 联想(北京)有限公司 | 数据处理方法及装置 |
| CN115390897A (zh) * | 2022-08-22 | 2022-11-25 | 再惠(上海)网络科技有限公司 | 微前端管理的方法、装置、电子设备及存储介质 |
| CN115580642A (zh) * | 2022-09-21 | 2023-01-06 | 北京智能建筑科技有限公司 | 应用间的通信方法及装置、非易失性存储介质、处理器 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113448702A (zh) | 一种基于前端的微服务设计方法 | |
| EP3408745B1 (en) | Automatically updating a hybrid application | |
| CN112534398B (zh) | 用于连接器开发和集成通道部署的系统和方法 | |
| CN105224466B (zh) | 一种基于Docker的集成测试方法及系统 | |
| US10440138B2 (en) | Provisioning IaaS services | |
| CN109643252B (zh) | 中间件接口和中间件接口生成器 | |
| JP2013541069A (ja) | サービス・レジストリからのサービス展開のための方法、サービス・レジストリ、およびコンピュータ・プログラム | |
| US11595299B2 (en) | System and method of suppressing inbound payload to an integration flow of an orchestration based application integration | |
| CN109408136A (zh) | 信息处理方法、装置、存储介质及电子设备 | |
| CN108268299A (zh) | 一种基于OpenStack云平台的Docker共享存储解决方法 | |
| CN104834541B (zh) | 功能模块挂载方法、挂载系统及更新挂载系统的方法 | |
| CN104750528A (zh) | 一种Android程序中的组件管理方法和装置 | |
| US20210042196A1 (en) | Data Migration For A Shared Database | |
| EP2842044A1 (en) | Platform runtime abstraction | |
| CN114706690B (zh) | 一种Kubernetes容器共享GPU方法及系统 | |
| US9235437B2 (en) | Method and integration component for integrating OSGi environments into a Service-oriented Architecture | |
| CN108334374A (zh) | 组件动态加载与执行的方法和装置 | |
| CN114756227A (zh) | 一种资源发布的处理方法和装置 | |
| CN115016862A (zh) | 基于Kubernetes集群的软件启动方法、装置、服务器及存储介质 | |
| US20180181382A1 (en) | Consuming persistent library bundles | |
| CN107846448B (zh) | 数据服务提供装置及实现方法 | |
| CN113050962A (zh) | 移动服务升级方法、装置和终端 | |
| CN112597408A (zh) | 一种系统融合方法、装置、设备和存储介质 | |
| CN112558941A (zh) | 基于ddd的微服务请求处理方法、系统、设备及介质 | |
| CN113364826B (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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210928 |