微前端的应用访问方法、装置、计算机设备以及存储介质与流程

本技术涉及计算机，尤其涉及一种微前端的应用访问方法、装置、计算机设备以及存储介质。

背景技术：

1、目前，分布式主要体现在后端分布式，前端系统依然聚合在一起，导致前端系统过于庞大，无法发挥分布式的优势。而且，在前端系统紧耦合的情况下，影响了前端系统的更新维护。

2、随着计算机技术的发展，为了改善前端的弊端，提出了一种微前端，将单个应用程序转变为结合多个小型前端应用程序的应用程序，每个前端应用程序可以独立运行、开发和部署，从而实现前端系统的解耦。

3、但是，现有的微前端的应用方式，无法实现各前端应用程序的隔离，容易出现应用冲突、层叠样式表css(cascading style sheets)污染等问题。

技术实现思路

1、本技术提供一种微前端的应用访问方法、装置、计算机设备以及存储介质，用以解决前端应用程序无法隔离，导致的应用冲突和层叠样式表css污染的问题。

2、第一方面，本技术提供一种微前端的应用访问方法，包括：

3、响应于访问请求，在所述访问请求所指示的目标页面中加载第一应用；其中，所述访问请求用于指示访问目标页面，所述访问请求中包括访问路由地址；所述第一应用指示微前端的主应用；

4、对所述访问请求所包含的访问路由地址进行监听，并在监听到所述访问路由地址发生变化的情况下，确定变化后的访问路由地址对应的第二应用；其中，所述第二应用指示预先在所述第一应用中注册的子应用；

5、在获取所述目标页面的全局快照信息之后，创建与所述第二应用相对应的第一沙箱环境，并将所述第一沙箱环境以超文本标记语言html文档的方式挂载到所述目标页面中；所述第一沙箱环境为包括所述第二应用的完整生命周期的环境；所述全局快照信息指示所述目标页面中未加载任一所述子应用时所包含的信息。

6、一个示例中，所述方法还包括：

7、在将所述第一沙箱环境以超文本标记语言html文档的方式挂载到所述目标页面中之后，对所述访问请求所包含的访问路由地址进行监听；

8、在监听到所述访问路由地址发生变化的情况下，确定变化后的访问路由地址对应的第三应用；所述第三应用指示预先在所述第一应用中注册的子应用；

9、卸载所述第一沙箱环境，并释放所述全局快照信息；

10、基于所述全局快照信息确定所述目标页面的初始状态，并创建与所述第三应用相匹配的第二沙箱环境；

11、将所述第二沙箱环境以超文本标记语言html文档的方式挂载到所述初始状态下的目标页面中；所述第二沙箱环境为包括所述第三应用的完整生命周期的环境。

12、一个示例中，所述方法还包括：

13、在将所述第一沙箱环境以超文本标记语言html文档的方式挂载到所述目标页面中之后，监听所述目标页面中的全局状态信息；所述全局状态信息指示所述目标页面中各应用的应用执行信息；

14、在确定出所述全局状态信息发生变化的情况下，确定发生变化的目标状态信息；

15、基于所述目标状态信息更新所述目标页面中各应用的状态信息。

16、一个示例中，在所述目标页面中加载第一应用之前，所述方法还包括：

17、响应于对目标页面的访问请求，获取第一资源配置信息；所述第一资源配置信息中包含配置所述第一应用以及配置各所述子应用公共部分的配置文件；

18、基于所述配置文件对所述第一应用以及各所述子应用进行初始化，得到配置后的第一应用和配置后的子应用。

19、一个示例中，所述对所述访问请求所包含的访问路由地址进行监听，包括：

20、在检测到访问请求之后，获取每个所述访问请求所包含的访问路由地址；

21、将各所述访问路由地址保存至历史访问路由地址数据表中。

22、一个示例中，所述监听到所述访问路由地址发生变化，包括：

23、响应于当前时刻对所述目标页面的访问请求，获取当前访问路由地址；

24、将所述当前访问路由地址与所述历史访问路由地址数据表中的最近一次的访问路由地址进行对比；

25、在确定出所述当前访问路由地址与所述最近一次的访问路由地址不相同的情况下，确定监听到所述访问路由地址发生变化。

26、一个示例中，在创建与所述第二应用相对应的第一沙箱环境之后，将所述第一沙箱环境以超文本标记语言html文档的方式挂载到所述目标页面中之前，所述方法还包括：

27、获取第二资源配置信息；所述第二资源配置信息用于配置所述第二应用的非公共部分的配置文件；

28、基于所述第二资源配置信息配置所述第二应用，得到配置后的第二应用；其中，所述配置后的第二应用用于挂载在所述第一应用上。

29、第二方面，本技术提供一种微前端的应用访问装置，包括：

30、响应单元，用于响应于访问请求，在所述访问请求所指示的目标页面中加载第一应用；其中，所述访问请求用于指示访问目标页面，所述访问请求中包括访问路由地址；所述第一应用指示微前端的主应用；

31、监听单元，用于对所述访问请求所包含的访问路由地址进行监听，并在监听到所述访问路由地址发生变化的情况下，确定变化后的访问路由地址对应的第二应用；其中，所述第二应用指示预先在所述第一应用中注册的子应用；

32、挂载单元，用于在获取所述目标页面的全局快照信息之后，创建与所述第二应用相对应的第一沙箱环境，并将所述第一沙箱环境以超文本标记语言html文档的方式挂载到所述目标页面中；所述第一沙箱环境为包括所述第二应用的完整生命周期的环境；所述全局快照信息指示所述目标页面中未加载任一所述子应用时所包含的信息。

33、一个示例中，挂载单元，还用于：

34、在将所述第一沙箱环境以超文本标记语言html文档的方式挂载到所述目标页面中之后，对所述访问请求所包含的访问路由地址进行监听；

35、在监听到所述访问路由地址发生变化的情况下，确定变化后的访问路由地址对应的第三应用；所述第三应用指示预先在所述第一应用中注册的子应用；

36、卸载所述第一沙箱环境，并释放所述全局快照信息；

37、基于所述全局快照信息确定所述目标页面的初始状态，并创建与所述第三应用相匹配的第二沙箱环境；

38、将所述第二沙箱环境以超文本标记语言html文档的方式挂载到所述初始状态下的目标页面中；所述第二沙箱环境为包括所述第三应用的完整生命周期的环境。

39、一个示例中，该装置还包括：

40、状态更新单元，用于：

41、在将所述第一沙箱环境以超文本标记语言html文档的方式挂载到所述目标页面中之后，监听所述目标页面中的全局状态信息；所述全局状态信息指示所述目标页面中各应用的应用执行信息；

42、在确定出所述全局状态信息发生变化的情况下，确定发生变化的目标状态信息；

43、基于所述目标状态信息更新所述目标页面中各应用的状态信息。

44、一个示例中，响应单元，还用于：

45、响应于对目标页面的访问请求，获取第一资源配置信息；所述第一资源配置信息中包含配置所述第一应用以及配置各所述子应用公共部分的配置文件；

46、基于所述配置文件对所述第一应用以及各所述子应用进行初始化，得到配置后的第一应用和配置后的子应用。

47、一个示例中，监听单元，还用于：

48、在检测到访问请求之后，获取每个所述访问请求所包含的访问路由地址；

49、将各所述访问路由地址保存至历史访问路由地址数据表中。

50、一个示例中，监听单元，还用于：

51、响应于当前时刻对所述目标页面的访问请求，获取当前访问路由地址；

52、将所述当前访问路由地址与所述历史访问路由地址数据表中的最近一次的访问路由地址进行对比；

53、在确定出所述当前访问路由地址与所述最近一次的访问路由地址不相同的情况下，确定监听到所述访问路由地址发生变化。

54、一个示例中，挂载单元，还用于：

55、获取第二资源配置信息；所述第二资源配置信息用于配置所述第二应用的非公共部分的配置文件；

56、基于所述第二资源配置信息配置所述第二应用，得到配置后的第二应用；其中，所述配置后的第二应用用于挂载在所述第一应用上。

57、第三方面，本技术提供一种计算机设备，包括：处理器，以及与所述处理器通信连接的存储器；

58、所述存储器存储计算机执行指令；

59、所述处理器执行所述存储器存储的计算机执行指令，以实现第一方面所述的方法。

60、第四方面，本技术提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，所述计算机执行指令被处理器执行时用于实现第一方面所述的方法。

61、第五方面，本技术提供一种计算机程序产品，所述计算机程序产品包括：计算机执行指令，所述计算机执行指令存储在可读存储介质中，计算机设备的至少一个处理器可以从所述可读存储介质读取所述计算机执行指令，所述至少一个处理器执行所述计算机执行指令，使得计算机设备执行第一方面所述的方法。

62、本技术实施例提供的微前端的应用访问方法、装置、计算机设备以及存储介质，可以响应于访问请求，在访问请求所指示的目标页面中加载第一应用，然后，对访问请求所包含的访问路由地址进行监听，并在监听到访问路由地址发生变化的情况下，确定变化后的访问路由地址对应的第二应用。这种方式可以在前端访问目标页面的时候，优先加载主应用，并根据访问路由地址按需确定子应用，从而可以降低前端的耦合性，实现了前端主应用与各子应用之间的分离，提高了前端的开发效率和执行效率，增强了前端功能的可扩展性，进而提升了前端的性能。同时，在本技术实施例中，可以在确定出第二应用之后，挂载第二应用之前，先获取目标页面的全局快照信息，以基于该全局快照信息，对目标页面进行快速恢复，保证了目标页面的全局环境不被污染。之后，再创建与第二应用相对应的第一沙箱环境，并在该第一沙箱环境中执行第二应用的完成的生命周期，使第二应用在运行时不受干扰，进一步保证了主应用和子应用以及各个子应用之间的隔离，避免出现应用冲突或者层叠样式表css污染的问题，提升了访问体验。