本申请提供一种微前端的应用访问方法、装置、计算机设备以及存储介质，可用于计算机技术领域。该方法包括：响应于访问请求，在访问请求所指示的目标页面中加载第一应用；对访问请求所包含的访问路由地址进行监听，并在监听到访问路由地址发生变化的情况下，确定变化后的访问路由地址对应的第二应用；在获取目标页面的全局快照信息之后，创建与第二应用相对应的第一沙箱环境，并将第一沙箱环境以超文本标记语言HTML文档的方式挂载到目标页面中。本申请的方法，可以通过全局快照信息以及沙箱环境，实现微前端中各应用的隔离，降低了前端的耦合性，解决了应用冲突或者层叠样式表CSS污染的问题。问题。问题。
【技术实现步骤摘要】
微前端的应用访问方法、装置、计算机设备以及存储介质
[0001]本申请涉及计算机
，尤其涉及一种微前端的应用访问方法、装置、计算机设备以及存储介质。
技术介绍
[0002]目前，分布式主要体现在后端分布式，前端系统依然聚合在一起，导致前端系统过于庞大，无法发挥分布式的优势。而且，在前端系统紧耦合的情况下，影响了前端系统的更新维护。
[0003]随着计算机技术的发展，为了改善前端的弊端，提出了一种微前端，将单个应用程序转变为结合多个小型前端应用程序的应用程序，每个前端应用程序可以独立运行、开发和部署，从而实现前端系统的解耦。
[0004]但是，现有的微前端的应用方式，无法实现各前端应用程序的隔离，容易出现应用冲突、层叠样式表CSS(Cascading Style Sheets)污染等问题。
技术实现思路
[0005]本申请提供一种微前端的应用访问方法、装置、计算机设备以及存储介质，用以解决前端应用程序无法隔离，导致的应用冲突和层叠样式表CSS污染的问题。
[0006]第一方面，本申请提供一种微前端的应用访问方法，包括：
[0007]响应于访问请求，在所述访问请求所指示的目标页面中加载第一应用；其中，所述访问请求用于指示访问目标页面，所述访问请求中包括访问路由地址；所述第一应用指示微前端的主应用；
[0008]对所述访问请求所包含的访问路由地址进行监听，并在监听到所述访问路由地址发生变化的情况下，确定变化后的访问路由地址对应的第二应用；其中，所述第二应用指示预先在所述第一应用中注册的子应用；
[0009]在获取所述目标页面的全局快照信息之后，创建与所述第二应用相对应的第一沙箱环境，并将所述第一沙箱环境以超文本标记语言HTML文档的方式挂载到所述目标页面中；所述第一沙箱环境为包括所述第二应用的完整生命周期的环境；所述全局快照信息指示所述目标页面中未加载任一所述子应用时所包含的信息。
[0010]一个示例中，所述方法还包括：
[0011]在将所述第一沙箱环境以超文本标记语言HTML文档的方式挂载到所述目标页面中之后，对所述访问请求所包含的访问路由地址进行监听；
[0012]在监听到所述访问路由地址发生变化的情况下，确定变化后的访问路由地址对应的第三应用；所述第三应用指示预先在所述第一应用中注册的子应用；
[0013]卸载所述第一沙箱环境，并释放所述全局快照信息；
[0014]基于所述全局快照信息确定所述目标页面的初始状态，并创建与所述第三应用相匹配的第二沙箱环境；
[0015]将所述第二沙箱环境以超文本标记语言HTML文档的方式挂载到所述初始状态下的目标页面中；所述第二沙箱环境为包括所述第三应用的完整生命周期的环境。
[0016]一个示例中，所述方法还包括：
[0017]在将所述第一沙箱环境以超文本标记语言HTML文档的方式挂载到所述目标页面中之后，监听所述目标页面中的全局状态信息；所述全局状态信息指示所述目标页面中各应用的应用执行信息；
[0018]在确定出所述全局状态信息发生变化的情况下，确定发生变化的目标状态信息；
[0019]基于所述目标状态信息更新所述目标页面中各应用的状态信息。
[0020]一个示例中，在所述目标页面中加载第一应用之前，所述方法还包括：
[0021]响应于对目标页面的访问请求，获取第一资源配置信息；所述第一资源配置信息中包含配置所述第一应用以及配置各所述子应用公共部分的配置文件；
[0022]基于所述配置文件对所述第一应用以及各所述子应用进行初始化，得到配置后的第一应用和配置后的子应用。
[0023]一个示例中，所述对所述访问请求所包含的访问路由地址进行监听，包括：
[0024]在检测到访问请求之后，获取每个所述访问请求所包含的访问路由地址；
[0025]将各所述访问路由地址保存至历史访问路由地址数据表中。
[0026]一个示例中，所述监听到所述访问路由地址发生变化，包括：
[0027]响应于当前时刻对所述目标页面的访问请求，获取当前访问路由地址；
[0028]将所述当前访问路由地址与所述历史访问路由地址数据表中的最近一次的访问路由地址进行对比；
[0029]在确定出所述当前访问路由地址与所述最近一次的访问路由地址不相同的情况下，确定监听到所述访问路由地址发生变化。
[0030]一个示例中，在创建与所述第二应用相对应的第一沙箱环境之后，将所述第一沙箱环境以超文本标记语言HTML文档的方式挂载到所述目标页面中之前，所述方法还包括：
[0031]获取第二资源配置信息；所述第二资源配置信息用于配置所述第二应用的非公共部分的配置文件；
[0032]基于所述第二资源配置信息配置所述第二应用，得到配置后的第二应用；其中，所述配置后的第二应用用于挂载在所述第一应用上。
[0033]第二方面，本申请提供一种微前端的应用访问装置，包括：
[0034]响应单元，用于响应于访问请求，在所述访问请求所指示的目标页面中加载第一应用；其中，所述访问请求用于指示访问目标页面，所述访问请求中包括访问路由地址；所述第一应用指示微前端的主应用；
[0035]监听单元，用于对所述访问请求所包含的访问路由地址进行监听，并在监听到所述访问路由地址发生变化的情况下，确定变化后的访问路由地址对应的第二应用；其中，所述第二应用指示预先在所述第一应用中注册的子应用；
[0036]挂载单元，用于在获取所述目标页面的全局快照信息之后，创建与所述第二应用相对应的第一沙箱环境，并将所述第一沙箱环境以超文本标记语言HTML文档的方式挂载到所述目标页面中；所述第一沙箱环境为包括所述第二应用的完整生命周期的环境；所述全局快照信息指示所述目标页面中未加载任一所述子应用时所包含的信息。
[0037]一个示例中，挂载单元，还用于：
[0038]在将所述第一沙箱环境以超文本标记语言HTML文档的方式挂载到所述目标页面中之后，对所述访问请求所包含的访问路由地址进行监听；
[0039]在监听到所述访问路由地址发生变化的情况下，确定变化后的访问路由地址对应的第三应用；所述第三应用指示预先在所述第一应用中注册的子应用；
[0040]卸载所述第一沙箱环境，并释放所述全局快照信息；
[0041]基于所述全局快照信息确定所述目标页面的初始状态，并创建与所述第三应用相匹配的第二沙箱环境；
[0042]将所述第二沙箱环境以超文本标记语言HTML文档的方式挂载到所述初始状态下的目标页面中；所述第二沙箱环境为包括所述第三应用的完整生命周期的环境。
[0043]一个示例中，该装置还包括：
[0044]状态更新单元，用于：
[0045]在将所述第一沙箱环境以超文本标记语言HTML文档的方式挂载到所述目标页面中之后，监听所述目标页面中的全局状态信息；所述全局状态信息指示所述目本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种微前端的应用访问方法，其特征在于，包括：响应于访问请求，在所述访问请求所指示的目标页面中加载第一应用；其中，所述访问请求用于指示访问目标页面，所述访问请求中包括访问路由地址；所述第一应用指示微前端的主应用；对所述访问请求所包含的访问路由地址进行监听，并在监听到所述访问路由地址发生变化的情况下，确定变化后的访问路由地址对应的第二应用；其中，所述第二应用指示预先在所述第一应用中注册的子应用；在获取所述目标页面的全局快照信息之后，创建与所述第二应用相对应的第一沙箱环境，并将所述第一沙箱环境以超文本标记语言HTML文档的方式挂载到所述目标页面中；所述第一沙箱环境为包括所述第二应用的完整生命周期的环境；所述全局快照信息指示所述目标页面中未加载任一所述子应用时所包含的信息。2.根据权利要求1所述的方法，其特征在于，所述方法还包括：在将所述第一沙箱环境以超文本标记语言HTML文档的方式挂载到所述目标页面中之后，对所述访问请求所包含的访问路由地址进行监听；在监听到所述访问路由地址发生变化的情况下，确定变化后的访问路由地址对应的第三应用；所述第三应用指示预先在所述第一应用中注册的子应用；卸载所述第一沙箱环境，并释放所述全局快照信息；基于所述全局快照信息确定所述目标页面的初始状态，并创建与所述第三应用相匹配的第二沙箱环境；将所述第二沙箱环境以超文本标记语言HTML文档的方式挂载到所述初始状态下的目标页面中；所述第二沙箱环境为包括所述第三应用的完整生命周期的环境。3.根据权利要求1所述的方法，其特征在于，所述方法还包括：在将所述第一沙箱环境以超文本标记语言HTML文档的方式挂载到所述目标页面中之后，监听所述目标页面中的全局状态信息；所述全局状态信息指示所述目标页面中各应用的应用执行信息；在确定出所述全局状态信息发生变化的情况下，确定发生变化的目标状态信息；基于所述目标状态信息更新所述目标页面中各应用的状态信息。4.根据权利要求1
‑
3中任一项所述的方法，其特征在于，在所述目标页面中加载第一应用之前，所述方法还包括：响应于对目标页面的访问请求，获取第一资源配置信息；所述第一资源配置信息中包含配置所述第一应用以及配置各所述子应用公共部分的配置文件；基于所述配置文件对所述第一应用以及各所述子应用进行初始化，得到配置后的第一应用和配置后的子应用。5.根据权利要求1或2所述的方法，其特征在于，所述对所述访问请求所...
【专利技术属性】
技术研发人员：梁文婧，
申请(专利权)人：中国银行股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。