基于微前端的系统集成方法及系统与流程

本发明涉及计算机，特别涉及一种基于微前端的系统集成方法及系统。

背景技术：

1、随着计算机网络技术的发展，计算机网络的技术栈多种多样，如操作系统（windows、linux、mac os等）、开发语言（java、python、javascript、c#等）、后端框架（spring、django、flask、express等）、前端框架（react、angular、vue等）、数据库（mysql、postgresql、mongodb等）、缓存（redis、memcache等）、服务器（tomcat、nginx、apache等）、测试框架（junit、selenium等）、部署工具（docker、jenkins等）及日志分析（elk、splunk等）等。不同的应用程序可能会采用不同的技术栈，甚至相同的应用程序在不同的公司或团队也可能采用不同的技术栈。选择合适的技术栈可以提高开发效率、降低开发成本、提高应用程序的性能和稳定性。

2、然而，在现有应用过程中，不同技术栈之间一般无法直接兼容集成，因此，需要搭建一个集成系统实现多种不同技术栈的集成，从而能够统一使用入口和认知方式。目前，常见的集成方案有两种：一种是iframe集成，一种是微前端集成。iframe集成是最常见的集成方法，虽然iframe集成可以解决统一使用入口、兼容不同技术栈，且支持不同应用间通讯，但是iframe集成存在跨域限制，且其页面加载性能较差、样式和布局也不够灵活。微前端集成是更深层次的集成方法，虽然微前端集成也可以解决统一使用入口、兼容不同技术栈，且微前端使用相同域名，拥有更丰富的应用数据交互方式，但是微前端集成并未解决子应用的用户态问题，主应用和子应用样式会受到污染，且微前端没有统一的解决方案，导致配置门槛太高、部署过于复杂。

技术实现思路

1、本发明的目的在于提供一种基于微前端的系统集成方法及系统，以解决如何提供一种主应用和子应用样式无污染、且部署简单的技术栈集成方案的问题。

2、为解决上述技术问题，本发明提供一种基于微前端的系统集成方法，包括：

3、基于微前端框架搭建集成系统，所述集成系统包括通信连接的主应用和子应用；

4、对所述集成系统进行改造；

5、对改造后的所述集成系统进行技术约定，基于约定，所述子应用的入口包括微应用入口和子应用入口；

6、对所述集成系统构建部署和配置设置。

7、可选的，在所述的基于微前端的系统集成方法中，所述基于微前端框架搭建集成系统的方法包括：

8、基于微前端框架搭建主应用和子应用；

9、对所述主应用进行初始化，并注册子应用；

10、在所述主应用中设置应用管理模块，并通过所述应用管理模块实现所述主应用与所述子应用的通信。

11、可选的，在所述的基于微前端的系统集成方法中，所述对所述集成系统进行改造的方法包括：

12、将所述主应用和所述子应用改造为使用hash路由模式；

13、将所述主应用的页面路由和所述子应用的页面路由封装在routers数组中；

14、所述routers数组放置于main.js入口文件中；

15、设置mount钩子函数，当所述mount钩子函数被调用时，构建页面路由，并初始化所述子应用的页面。

16、可选的，在所述的基于微前端的系统集成方法中，所述对改造后的所述集成系统进行技术约定的方法包括：

17、建立约定技术，以将所述子应用的入口分为微应用入口和子应用入口；

18、在所述微应用入口中搭建微应用注册规则，以通过所述主应用的微前端框架加载微应用；

19、在所述子应用入口中搭建子应用菜单，以通过所述子应用菜单加载子应用。

20、可选的，在所述的基于微前端的系统集成方法中，所述微应用入口为kebab case命名的微应用入口；所述子应用入口为pascal case命名的子应用入口。

21、可选的，在所述的基于微前端的系统集成方法中，所述对所述集成系统构建部署和配置设置的方法包括：

22、基于jenkins和docker对所述集成系统进行微前端构建部署；

23、基于nginx对所述集成系统进行服务端反向代理服务器配置设置。

24、可选的，在所述的基于微前端的系统集成方法中，所述基于jenkins和docker对所述集成系统进行微前端构建部署的方法包括：

25、基于jenkins分别对所述主应用和所述子应用持续集成并自动化构建部署；

26、基于docker配置所述主应用和所述子应用的运行环境，并编译前端应用。

27、可选的，在所述的基于微前端的系统集成方法中，所述基于jenkins分别对所述主应用和所述子应用持续集成并自动化构建部署的方法包括：

28、构建镜像，并将所述镜像保存至tar文件中；

29、将所述tar文件中的镜像上传至目标服务器；

30、对所述镜像解压，并运行所述镜像。

31、可选的，在所述的基于微前端的系统集成方法中，所述基于docker配置所述主应用和所述子应用的运行环境，并编译前端应用的方法包括：

32、创建中间容器以编译前端应用，并获得前端文件；

33、将所述前端文件复制于工作目录，并安装依赖包；

34、构建生产环境代码，以运行生成静态资源命令；

35、使用nginx镜像作为基础镜像以创建最终容器；

36、将所述生产环境代码复制于nginx默认服务的静态资源位置；

37、将自定义的nginx配置文件复制于所述最终容器中，并覆盖默认的配置文件。

38、可选的，在所述的基于微前端的系统集成方法中，在对所述集成系统构建部署和配置设置之后，所述基于微前端的系统集成方法还包括：对所述集成系统进行统一认证。

39、可选的，在所述的基于微前端的系统集成方法中，所述对所述集成系统进行统一认证的方法包括：

40、当用户访问所述集成系统时，基于oauth2.0从认证中心获取授权码；

41、所述集成系统的后端通过所述授权码获取token并存储；

42、所述主应用和所述子应用根据所述token获取授权资源。

43、为解决上述技术问题，本发明还提供一种基于微前端的系统集成系统，包括通信连接的主应用和子应用；

44、所述主应用包括初始化模块、应用管理模块和主通信模块；所述初始化模块用于对所述主应用进行初始化；所述应用管理模块用于查找应用并加载应用；所述主通信模块用于与所述子应用进行通信；

45、所述子应用包括单页应用模块和子通信模块；所述单页应用模块用于加载子应用；所述子通信模块用于与所述主应用进行通信。

46、本发明提供的基于微前端的系统集成方法及系统，包括：基于微前端框架搭建集成系统，所述集成系统包括通信连接的主应用和子应用；对所述集成系统进行改造；对改造后的所述集成系统进行技术约定，基于约定，所述子应用的入口包括微应用入口和子应用入口；对所述集成系统构建部署和配置设置。通过对集成系统进行改造、技术约定以及构建部署和配置设置，使得子应用入口包括微应用入口和子应用入口，解决了目前主流集成技术对于用户体系共享的问题，进而避免了主应用和子应用样式污染的问题。