基于SPA的低代码平台中多页面表单数据与事件隔离系统及方法与流程

本发明属于计算机，具体涉及基于spa的低代码平台中多页面表单数据与事件隔离系统及方法。

背景技术：

1、目前市面上的低代码平台基本都是单页面（spa）架构，这种架构会存在一系列问题，比如：（1）数据丢失：在访问菜单a后，再去访问菜单b，那么在a页面用户输入的数据和用户操作记录都会清除。这导致用户体验下降，可能需要重复输入信息；（2）每次打开页面都会重新获取页面元数据重新渲染页面。这个会增加用户等待时间，这可能导致应用响应速度变慢，尤其是在复杂页面或网络条件不佳的情况下。

2、为了解决上述单页面带来的问题，目前市面已有的低代码平台采用方式是 把每个页面的组件实例都存储在系统的定义的一个全局变量上，组件之间的通信直接操作组件实例。这种方案的问题有2个：（1）不能给组件添加自定义方法，只能使用组件内置的方法；（2）通信操作只能是一对一，这种方式难以满足复杂的业务场景需求，特别是在需要多组件协同工作的情况下。

技术实现思路

1、本发明旨在解决现有技术的不足，提供了如下方案：

2、基于spa的低代码平台中多页面表单数据与事件隔离系统，包括：插件替换模块、pubsubjs库改造模块和id拼接模块；

3、所述插件替换模块用于在项目入口文件引入react-router-cache-route插件替换原有的react-router插件；

4、所述pubsubjs库改造模块通过新增改造方法对原始pubsubjs库进行改造，完成核心结构搭建；

5、所述id拼接模块用于将每个页面的页面id和组件原始id进行拼接，得到新组件标识符，将每个页面的所述页面id和弹框页面id进行拼接，得到新弹框事件名；

6、所述id拼接模块还利用redux进行数据的存储和赋值，并生成普通页面和参照页面的表单id，利用所述新组件标识符、所述新弹框事件名和所述表单id完成数据与事件隔离。

7、优选的，所述pubsubjs库改造模块的工作流程包括：

8、新增setcurrentpathname方法，用于存储当前正在打开页面的地址，并且维护一个集合，包含所有已打开页面的信息；

9、新增registercomponent方法，在路由跳转时能够注入当前页面下所有组件的实例，并将这些实例与路由地址进行绑定；

10、新增unregistercomponent方法，在页面关闭时，销毁当前页面下的所有实例；

11、改造publish方法，重构事件匹配机制，利用registercomponent方法注入的组件唯一信息，确保正确的匹配到对应的组件实例；

12、新增deleteclosepathname方法，在页面关闭时，删除setcurrentpathname方法储存的已失效的信息数据。

13、优选的，所述id拼接模块中得到所述表单id的工作流程包括：

14、利用redux进行数据的存储和赋值，通过所述表单id唯一性策略为所述普通页面和所述参照页面生成所述表单id；

15、对于所述普通页面，所述表单id由服务中心名、分隔符和所述页面id构成；

16、对于所述参照页面，所述表单id由服务中心名、分隔符、参照页组件id、分隔符和所述页面id构成。

17、本发明还提供了基于spa的低代码平台中多页面表单数据与事件隔离方法，所述方法应用于上述任一项所述的系统，包括以下步骤：

18、在项目入口文件引入react-router-cache-route插件替换原有的react-router插件；

19、通过新增改造方法对原始pubsubjs库进行改造，完成核心结构搭建；

20、将每个页面的页面id和组件原始id进行拼接，得到新组件标识符，将每个页面的所述页面id和弹框页面id进行拼接，得到新弹框事件名；

21、利用redux进行数据的存储和赋值，并生成普通页面和参照页面的表单id，利用所述表单id完成数据与事件隔离，利用所述新组件标识符、所述新弹框事件名和所述表单id完成数据与事件隔离。

22、优选的，所述新增改造方法包括：

23、新增setcurrentpathname方法，用于存储当前正在打开页面的地址，并且维护一个集合，包含所有已打开页面的信息；

24、新增registercomponent方法，在路由跳转时能够注入当前页面下所有组件的实例，并将这些实例与路由地址进行绑定；

25、新增unregistercomponent方法，在页面关闭时，销毁当前页面下的所有实例；

26、改造publish方法，重构事件匹配机制，利用registercomponent方法注入的组件唯一信息，确保正确的匹配到对应的组件实例；

27、新增deleteclosepathname方法，在页面关闭时，删除setcurrentpathname方法储存的已失效的信息数据。

28、优选的，得到所述表单id的工作流程包括：

29、利用redux进行数据的存储和赋值，通过所述表单id唯一性策略为所述普通页面和所述参照页面生成所述表单id；

30、对于所述普通页面，所述表单id由服务中心名、分隔符和所述页面id构成；

31、对于所述参照页面，所述表单id由服务中心名、分隔符、参照页组件id、分隔符和所述页面id构成。

32、与现有技术相比，本发明的有益效果为：

33、利用本发明的系统，tab页面在路径不匹配时，其他菜单组件不会被卸载，数据和行为不会丢失。当打开多个页面的元数据id或者组件id相同时，表单数据不会错乱，事件不会失效/混淆。

技术特征：

1.基于spa的低代码平台中多页面表单数据与事件隔离系统，其特征在于，包括：插件替换模块、pubsubjs库改造模块和id拼接模块；

2.根据权利要求1所述基于spa的低代码平台中多页面表单数据与事件隔离系统，其特征在于，所述pubsubjs库改造模块的工作流程包括：

3.根据权利要求1所述基于spa的低代码平台中多页面表单数据与事件隔离系统，其特征在于，所述id拼接模块中得到所述表单id的工作流程包括：

4.基于spa的低代码平台中多页面表单数据与事件隔离方法，所述方法应用于权利要求1-3任一项所述的系统，其特征在于，包括以下步骤：

5.根据权利要求4所述基于spa的低代码平台中多页面表单数据与事件隔离方法，其特征在于，所述新增改造方法包括：

6.根据权利要求4所述基于spa的低代码平台中多页面表单数据与事件隔离方法，其特征在于，得到所述表单id的工作流程包括：

技术总结本发明公开了基于SPA的低代码平台中多页面表单数据与事件隔离系统及方法，属于计算机技术领域，系统包括：插件替换模块、pubsubJS库改造模块和ID拼接模块；插件替换模块用于在项目入口文件引入新的插件替换原有的插件；pubsubJS库改造模块通过新增改造方法对原始PubSubJS库进行改造，完成核心结构搭建；ID拼接模块用于将每个页面的页面ID和组件原始ID进行拼接得到新组件标识符，将每个页面的页面ID和弹框页面ID进行拼接得到新弹框事件名；ID拼接模块还利用Redux进行数据的存储和赋值，并生成普通页面和参照页面的表单ID，利用表单ID完成数据与事件隔离。技术研发人员：曾威,王文海,侯斌峰,朱青,郭凯,罗朝,马强受保护的技术使用者：奇秦科技（北京）股份有限公司技术研发日：技术公布日：2024/8/27