【技术实现步骤摘要】
本专利技术涉及前端工程化领域，具体提供一种基于qiankun的微前端构建方法及系统。
技术介绍
1、微前端(micro-frontends)是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将web应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。微前端不是单纯的前端框架或者工具，而是一套架构体系。
2、任何新技术的产生都是为了解决现有场景和需求下的技术难点，微前端也不例外：
3、1、拆分和细化：当下前端领域，单页面应用(spa)是非常流行的项目形态之一，而随着时间的推移以及应用功能的丰富，单页应用变得不再单一而是越来越庞大也越来越难以维护，由此带来的发版成本也越来越高。微前端的意义就是将这些庞大应用进行拆分，并随之解耦，每个部分可以单独进行维护和部署，提升效率。
4、2、整合历史系统：在不少的业务中，或多或少会存在一些历史项目，这些项目大多以采用老框架的管理系统为主，介于日常运营，这些系统需要结合到新框架中来使用还不能抛弃。微前端可以将这些系统进行整合，在基本不修改来逻辑的同时来同时兼容新老两套系统并行运行。
5、qiankun是一个基于single-spa的微前端实现库，旨在构建一个生产可用微前端架构系统。qiankun对于用户而言只是一个类似jquery的库，只需要调用几个qiankun的api即可完成应用的微前端改造。同时由于qiankun的html entry及沙箱的设计，使得微应用的接入像使用iframe
6、websocket是一种在单个tcp连接上进行全双工通信的协议。websocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在websocket api中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
7、鉴于以上问题和技术，本专利技术实现的微前端构建技术可以实现微项目的配置化、状态共享和动态变更等，使微前端项目的构建更加简单和灵活。
技术实现思路
1、本专利技术是针对上述现有技术的不足，提供一种实用性强的基于qiankun的微前端构建方法。
2、本专利技术进一步的技术任务是提供一种设计合理，安全适用的基于qiankun的微前端构建系统。
3、本专利技术解决其技术问题所采用的技术方案是：
4、一种基于qiankun的微前端构建方法，具有如下步骤：
5、s1、配置文件读取；
6、s2、以发布订阅模式为通信桥梁，实现状态的共享；
7、s3、启动后台服务，并建立websocket链接，通过调用添加、删除和更新接口通知服务进行相应的操作，进行动态更新；
8、s4、通过可视化界面进行变更。
9、进一步的，在步骤s1中，根据qiankun的微项目注册所需信息设置json配置文件，通过ajax读取配置文件获取注册信息，调用qiankun的注册apiloadmicroapp加载微应用。
10、进一步的，在步骤s2中，通信桥梁绑定到主项目的window对象上，采用发布订阅模式，当主项目或者微项目发布状态变更时，由通信桥梁通知到所有项目进行对应状态更新，以此达到所有项目的状态共享。
11、进一步的，在步骤s3中，启动后台服务，并建立websocket链接，通过调用添加、删除和更新接口通知服务进行相应的操作，服务收到操作指令后由websocket通道通知前端，前端调用qiankun提供的对应api进行微项目的添加、删除和修改。
12、进一步的，在步骤s4中，可视化界面的配置、或进行接口调用配置来进行变更，进行微项目的初始配置、项目的新增、删除和修改。
13、一种基于qiankun的微前端构建系统，首先进行配置文件读取，以发布订阅模式为通信桥梁，实现状态的共享，启动后台服务，并建立websocket链接，通过调用添加、删除和更新接口通知服务进行相应的操作，进行动态更新，在可视化界面上进行项目的新增、删除和修改。
14、进一步的，进行配置文件读取时，根据qiankun的微项目注册所需信息设置json配置文件，通过ajax读取配置文件获取注册信息，调用qiankun的注册apiloadmicroapp加载微应用。
15、进一步的，通信桥梁绑定到主项目的window对象上，采用发布订阅模式，当主项目或者微项目发布状态变更时，由通信桥梁通知到所有项目进行对应状态更新，以此达到所有项目的状态共享。
16、进一步的，启动后台服务，并建立websocket链接，通过调用添加、删除和更新接口通知服务进行相应的操作，服务收到操作指令后由websocket通道通知前端，前端调用qiankun提供的对应api进行微项目的添加、删除和修改。
17、进一步的，可视化界面的配置、或进行接口调用配置来进行变更，进行微项目的初始配置、项目的新增、删除和修改。
18、本专利技术的一种基于qiankun的微前端构建方法及系统和现有技术相比，具有以下突出的有益效果：
19、本专利技术提出的微前端构建方法，从开发者角度来说可配置、状态共享、动态变更、可视化；从开源角度来说具有可集成性，可扩展性。
20、具有以下技术优势：
21、1、本专利技术提出的微前端构建方案是可配置的。本方案则对qiankun框架进行进一封装，所有的api调用都在内部进行，开发者只需通过简单的配置即可，这极大简化了微前端项目的构建步骤，降低开发者的使用门槛；
22、2、本专利技术提出的微前端构建方案是可进行状态共享的。本方案实现一种采用发布订阅模式的通信桥梁，来连接微前端项目中的所有项目，以达到在不影响各个项目已有状态管理方案的前提下，一处状态更新，全局状态共享。
23、3、本专利技术提出的微前端构建方案是可动态变更的的。服务获取变更指令，通过前后端建立websocket连接，将指令以固定格式传输给前端，前端通过获取的信息来进行指定的变更，这使得微前端项目的构建管理更加灵活。
24、4、本专利技术提出的微前端构建方案是可动态变更的的。本方案采用配置和注册可视化来简化微前端项目的注册和配置，通过可视化的方式，使得微前端项目的配置、注册、构建和管理更加清晰明了，这大大提高了微前端项目的构建效率，降低了开发门槛。
本文档来自技高网...【技术保护点】
1.一种基于qiankun的微前端构建方法，其特征在于，具有如下步骤：
2.根据权利要求1所述的一种基于qiankun的微前端构建方法，其特征在于，在步骤S1中，根据qiankun的微项目注册所需信息设置JSON配置文件，通过Ajax读取配置文件获取注册信息，调用qiankun的注册ApiloadMicroApp加载微应用。
3.根据权利要求2所述的一种基于qiankun的微前端构建方法，其特征在于，在步骤S2中，通信桥梁绑定到主项目的window对象上，采用发布订阅模式，当主项目或者微项目发布状态变更时，由通信桥梁通知到所有项目进行对应状态更新，以此达到所有项目的状态共享。
4.根据权利要求3所述的一种基于qiankun的微前端构建方法，其特征在于，在步骤S3中，启动后台服务，并建立WebSocket链接，通过调用添加、删除和更新接口通知服务进行相应的操作，服务收到操作指令后由WebSocket通道通知前端，前端调用qiankun提供的对应Api进行微项目的添加、删除和修改。
5.根据权利要求3所述的一种基于qiankun的微前端
6.一种基于qiankun的微前端构建系统，其特征在于，首先进行配置文件读取，以发布订阅模式为通信桥梁，实现状态的共享，启动后台服务，并建立WebSocket链接，通过调用添加、删除和更新接口通知服务进行相应的操作，进行动态更新，在可视化界面上进行项目的新增、删除和修改。
7.根据权利要求6所述的一种基于qiankun的微前端构建系统，其特征在于，进行配置文件读取时，根据qiankun的微项目注册所需信息设置JSON配置文件，通过Ajax读取配置文件获取注册信息，调用qiankun的注册ApiloadMicroApp加载微应用。
8.根据权利要求7所述的一种基于qiankun的微前端构建系统，其特征在于，通信桥梁绑定到主项目的window对象上，采用发布订阅模式，当主项目或者微项目发布状态变更时，由通信桥梁通知到所有项目进行对应状态更新，以此达到所有项目的状态共享。
9.根据权利要求8所述的一种基于qiankun的微前端构建系统，其特征在于，启动后台服务，并建立WebSocket链接，通过调用添加、删除和更新接口通知服务进行相应的操作，服务收到操作指令后由WebSocket通道通知前端，前端调用qiankun提供的对应Api进行微项目的添加、删除和修改。
10.根据权利要求9所述的一种基于qiankun的微前端构建系统，其特征在于，可视化界面的配置、或进行接口调用配置来进行变更，进行微项目的初始配置、项目的新增、删除和修改。
...【技术特征摘要】
1.一种基于qiankun的微前端构建方法，其特征在于，具有如下步骤：
2.根据权利要求1所述的一种基于qiankun的微前端构建方法，其特征在于，在步骤s1中，根据qiankun的微项目注册所需信息设置json配置文件，通过ajax读取配置文件获取注册信息，调用qiankun的注册apiloadmicroapp加载微应用。
3.根据权利要求2所述的一种基于qiankun的微前端构建方法，其特征在于，在步骤s2中，通信桥梁绑定到主项目的window对象上，采用发布订阅模式，当主项目或者微项目发布状态变更时，由通信桥梁通知到所有项目进行对应状态更新，以此达到所有项目的状态共享。
4.根据权利要求3所述的一种基于qiankun的微前端构建方法，其特征在于，在步骤s3中，启动后台服务，并建立websocket链接，通过调用添加、删除和更新接口通知服务进行相应的操作，服务收到操作指令后由websocket通道通知前端，前端调用qiankun提供的对应api进行微项目的添加、删除和修改。
5.根据权利要求3所述的一种基于qiankun的微前端构建方法，其特征在于，在步骤s4中，可视化界面的配置、或进行接口调用配置来进行变更，进行微项目的初始配置、项目的新增、删除和修改。
6.一种基于qiankun的微前端构建系统，其特征在于，首先进行配置文件读取，...
【专利技术属性】
技术研发人员：林栋，
申请(专利权)人：浪潮云信息技术股份公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。