一种微前端子应用前台统一版本兼容后台多版本的方法与流程

1.本发明涉及微前端领域，尤其涉及一种微前端子应用前台统一版本兼容后台多版本的方法。


背景技术：

2.微前端是一种多个团队通过独立发布功能的方式来共同构建现代化web应用的技术手段及方法策略。主应用不限制接入的子应用技术栈，子应用拥有完全自主权。所接入的子应用之间也相互独立，没有任何直接或间接的技术栈、依赖、以及实现上的耦合。独立部署的能力在微前端体系中至关重要。
3.但在子应用中存在前台统一集中部署，后台分省部署，各后台软件版本由各省公司控制升级，可能出现前后台版本不一致的问题。
4.现有解决该问题的方案一个是子应用前台按版本部署为多个应用，则需要由主应用从子应用后台获取版本来决定访问那个子应用。此种解决方案违背了主应用和各子应用解耦和独立开发的初衷。比如用户信息在用户系统也作为一个子应用，收付费系统作为一个子应用，用户登录后主应用需要先从用户系统拿到配置的收付费系统的该用户该省的版本信息，再由主应用来根据该信息去路由访问到收付费子应用对应版本部署的应用。造成了三个系统得协同开发耦合解决，且多版本部署升级维护相关工作将会更加复杂。


技术实现要素：

5.本发明提供了一种微前端子应用前台统一版本兼容后台多版本的方法，解决了子应用无法独立部署应用，主应用和子应用耦合度较高等的问题。
6.一种微前端子应用前台统一版本兼容后台多版本的方法，包括：
7.主应用接收用户访问请求，将用户信息放入浏览器的缓存中；
8.子应用获取缓存中的用户信息，确定所述用户信息中的位置信息，根据所述位置信息调用对应位置的后台接口获取后台版本和相应的版本号；
9.子应用根据所述版本号生成路由，获取相应版本文件路径下的前台页面进行显示；
10.其中，所述子应用的前台版本为最新版本。
11.在本发明的一种实施例中，所述方法还包括：在最新前台版本开发完毕后，建立所有前台版本的前台页面对应的文件夹，将与各个前台页面相关的文件放入对应的文件夹下；其中，每一个前台版本的前台页面为一个前台页面版本，所述所有前台版本包括所有历史前台版本和最新前台版本；在完成与所述前台页面版本对应的后台版本后，配置与所述后台版本对应的版本号。
12.在本发明的一种实施例中，根据所述位置信息调用对应位置的后台接口获取版本号，具体包括：在用户第一次登录页面时，主应用调用用户相关信息接口获取用户所在的省份信息存储到缓存中；子应用根据用户位置信息调用对应位置的后台接口，根据所述用户
所在的省份信息获取对应的版本号。
13.在本发明的一种实施例中，所述主应用将用户信息放入浏览器的缓存中，子应用获取缓存中的用户信息，具体包括：主应用将用户信息加密成一个token字符串放入浏览器cookie缓存中，子应用进入时先从缓存里取出token解密，得到用户的代码、位置信息。
14.在本发明的一种实施例中，所述建立所有前台版本的前台页面对应的文件夹，将与各个前台页面相关的文件放入对应的文件夹下，具体包括：在每个前台页面版本开发测试完成后，在views文件路径下建立对应前台页面版本的文件夹；将所述前台页面版本相关的文件复制后放入所述文件夹中。
15.在本发明的一种实施例中，所述方法还包括：判断版本号是否获取到，若获取到，则在访问路径中间增加相应的版本号，生成相应的路由；若未获取到，则直接访问views文件夹下的最新文件夹。
16.在本发明的一种实施例中，所述方法还包括：在后台版本发布时在升级脚本中加入相关语句更新所述版本号。
17.一种微前端子应用前台统一版本兼容后台多版本的装置，包括：
18.主应用模块，用于接收用户访问请求，将用户信息放入浏览器的缓存中；
19.子应用模块，用于获取缓存中的用户信息，确定所述用户信息中的位置信息，根据所述位置信息调用对应位置的后台接口获取后台版本和相应的版本号；根据所述版本号生成路由，获取相应版本文件路径下的前台页面进行显示；其中，所述子应用的前台版本为最新版本。
20.一种微前端子应用前台统一版本兼容后台多版本的设备，包括：
21.至少一个处理器；以及，
22.与所述至少一个处理器通过总线通信连接的存储器；其中，
23.所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被执行，以实现：
24.主应用接收用户访问请求，将用户信息放入浏览器的缓存中；
25.子应用获取缓存中的用户信息，确定所述用户信息中的位置信息，根据所述位置信息调用对应位置的后台接口获取后台版本和相应的版本号；
26.子应用根据所述版本号生成路由，获取相应版本文件路径下的前台页面进行显示；
27.其中，所述子应用的前台版本为最新版本。
28.一种非易失性存储介质，存储有计算机可执行指令，所述计算机可执行指令由处理器执行，以实现下述步骤：
29.主应用接收用户访问请求，将用户信息放入浏览器的缓存中；
30.子应用获取缓存中的用户信息，确定所述用户信息中的位置信息，根据所述位置信息调用对应位置的后台接口获取后台版本和相应的版本号；
31.子应用根据所述版本号生成路由，获取相应版本文件路径下的前台页面进行显示；
32.其中，所述子应用的前台版本为最新版本。
33.本发明提供了一种微前端子应用前台统一版本兼容后台多版本的方法，至少包括
以下有益效果：只需通过主应用配置子应用调用地址，无需主应用增加配置适应子应用版本，实现了子应用自行控制前台统一版本与后台多版本的兼容性，且部署简单，实现了与主应用的完全解耦。
附图说明
34.此处所说明的附图用来提供对本发明的进一步理解，构成本发明的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：
35.图1为本发明实施例提供的一种前台版本和不同省份的后台版本不匹配示意图；
36.图2为本发明实施例提供的一种微前端子应用前台统一版本兼容后台多版本的方法步骤示意图；
37.图3为本发明实施例提供的一种微前端子应用前台统一版本兼容后台多版本的装置示意图；
38.图4为本发明实施例提供的一种微前端子应用前台统一版本兼容后台多版本的设备示意图。
具体实施方式
39.为了使本发明的目的、技术方案和优点更加清楚，下面将结合本发明具体实施例对本发明进行清楚、完整的描述。显然，所描述的实施例仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
40.需要说明的是，本领域普通技术人员显式地和隐式地理解的是，本发明所描述的实施例在不冲突的情况下，可以与其它实施例相结合。除非另作定义，本发明所涉及的技术术语或者科学术语应当为本发明所属技术领域内具有一般技能的人士所理解的通常意义。本发明所涉及的“一”、“一个”、“一种”、“该”等类似词语并不表示数量限制，可表示单数或复数。本发明所涉及的术语“包括”、“包含”、“具有”以及它们任何变形，意图在于覆盖不排他的包含；本发明所涉及的术语“第一”、“第二”、“第三”等仅仅是区别类似的对象，不代表针对对象的特定排序。
41.针对本发明提出的问题，有一种解决方案是子应用前后台接口交互时，自行对每个接口进行兼容，新版本改动前后台交互的接口都要考虑历史版本是否有问题，通过增加很多版本的代码判断逻辑分支来实现兼容。这种方案的开发难度较大，测试需要覆盖所有版本进行测试且风险较大容易出错。本发明最核心的改进之处在于完全由子应用自行独立控制解决版本问题，且本发明相较于上述方案开发简单，测试难度低。下面进行具体说明。
42.业务系统为全国系统，在不同省份都分布有运维该业务系统的子公司，为了能够适应不同省份的业务需求，各个子应用在不同省份的后台版本不同，子应用分为前台版本和后台版本，前台版本和后台版本的升级往往不同步，如图1所示，子应用的前台版本在各省份统一为最新版本，但有的省份的后台版本在未升级前无法匹配最新前台版本的页面，所以，为了保证前台版本与后台版本的兼容，需要通过后台版本的版本号路由到与后台版本对应的前台页面版本，以此实现前台版本和不同后台版本的兼容。
43.子应用有前台页面改造需求的后台版本，前台页面一定有对应版本同步升级，前
台版本升级时间需早于第一个省份升级后台版本的时间，由前台路由动态配置访问不同版本页面来向下兼容后台不同版本。
44.在本发明的一种实施例中，在最新前台版本开发完毕后，建立所有前台版本的前台页面对应的文件夹，将与各个前台页面相关的文件放入对应的文件夹下；其中，每一个前台版本的前台页面为一个前台页面版本，所有前台版本包括所有历史前台版本和最新前台版本；在完成与前台页面版本对应的后台版本后，配置与后台版本对应的版本号。
45.具体地，以vue框架举例，在views文件路径下保留各个前台版本的所有前台页面代码，页面开发还是在views文件路径下开发。每个前台页面版本开发测试完成后，建立对应前台页面版本的文件夹，将相应的前台页面文件复制放入该文件夹。
46.例如，开发测试完成老架构1470正式版本，建立views/1470c00路径文件夹拷贝所有页面代码，发布测试环境，测试选部分用例验证下最新功能，检查下版本文件与外层文件不存在差异即可。
47.具体地，后台版本在开发测试完成后，增加配置最新版本号，并增加接口返回调用方用户所在省份对应的最新版本号。后台只要有前台对应改造的后台版本，在后台版本发布时即在升级脚本中加入相关语句更新版本号。
48.采用该方案开发难度和测试难度最低，每个新的前台版本的开发无需考虑对后台历史版本的兼容，仅需简单的建立版本文件夹拷贝所有前台版本的页面代码，即可实现对后台历史版本的兼容。
49.图2为本发明实施例提供的一种微前端子应用前台统一版本兼容后台多版本的方法的步骤示意图，可以包括以下步骤：
50.s210：主应用接收用户访问请求，将用户信息放入浏览器的缓存中。
51.具体地，用户在访问业务系统时，由主应用接收用户登录信息，将用户信息加密成一个token字符串放入浏览器cookie缓存中，供子应用使用，子应用进入时先从缓存里取出token进行解密，得到用户的代码、位置信息。
52.s220：子应用获取缓存中的用户信息，确定用户信息中的位置信息，根据位置信息调用对应位置的后台接口获取后台版本和相应的版本号。
53.在本发明的一种实施例中，根据位置信息调用对应位置的后台接口获取版本号，具体包括：在用户第一次登录页面时，主应用调用用户相关信息接口获取用户所在的省份信息存储到缓存中；子应用根据用户位置信息调用对应位置的后台接口，根据用户所在的省份信息获取对应的版本号。版本号的命名规则为常规版本数字+c00，补丁版本数字+b0x。版本号命名原则：1.每个版本号唯一代表这个版本，不和其他版本号重复；2.命名的版本号，在对应后台版本数据库配置的名称、页面对应版本建立文件夹的名称，需保持一致。
54.具体地，当用户第一次登录页面时，主应用将用户信息加密成一个token字符串放入浏览器cookie缓存中，子应用根据用户所属的省份信息独立调用对应省份的后台接口获取相关省份的后台版本及其版本号，根据版本号到前台获取与该后台对应的前台页面版本。当用户刷新页面时，对主应用来说token仍然存在浏览器缓存的cookie里，不会再去调用接口，子应用可直接在缓存中获取用户信息。
55.s230：子应用根据版本号生成路由，获取相应版本文件路径下的前台页面进行显示。
56.在本发明的一种实施例中，建立所有前台版本的前台页面对应的文件夹，将与各个前台页面相关的文件放入对应的文件夹下，具体包括：在每个前台页面版本开发测试完成后，在views文件路径下建立对应前台页面版本的文件夹；将前台页面版本相关的文件复制后放入文件夹中。
57.在本发明的一种实施例中，判断版本号是否获取到，若获取到，则在访问路径中间增加相应的版本号，生成相应的路由；若未获取到，则直接访问views文件夹下的最新文件夹。
58.具体地，前台实现动态路由配置的方法具体为：
59.1.permission.js里用户第一次登录页面或刷新页面，子应用根据获取的用户所在的省份信息调用对应省份的后台接口以获取版本号。
60.2.动态生成路由generateroutes方法里传入获取到的版本号。
61.3.路由配置方法里，判断版本号存在则配置的访问路径在views文件夹的下一层级增加版本号这一层级，如果没有版本号则直接访问views文件夹下的最新页面。
62.通过使用上述方案，即可实现子应用自行控制，不同省份用户浏览相同地址路径也能访问自己所在省版本对应页面的文件，配套调用接口的入参反参也能直接与后台版本匹配。为了控制应用程序大小，当后台版本都高于某一历史版本时，则在将匹配不到的前台页面版本的文件夹删除即可。
63.以上为本发明实施例提供的一种微前端子应用前台统一版本兼容后台多版本的方法，基于同样的发明思路，本发明实施例还提供了相应的一种微前端子应用前台统一版本兼容后台多版本的装置，如图3所示。
64.主应用模块302，用于接收用户访问请求，将用户信息放入浏览器的缓存中；子应用模块304，用于获取缓存中的用户信息，确定用户信息中的位置信息，根据位置信息调用对应位置的后台接口获取后台版本和相应的版本号；根据版本号生成路由，获取相应版本文件路径下的前台页面进行显示；其中，子应用的前台版本为最新版本。
65.本发明实施例还提供了相应的一种微前端子应用前台统一版本兼容后台多版本的设备，如图4所示，包括：
66.至少一个处理器402(processor)、通信接口404(communications interface)、存储器406(memory)和通信总线408；其中，处理器402，通信接口404，存储器406通过通信总线408完成相互间的通信；处理器402可以调用存储器406中存储的逻辑指令，以使至少一个处理器402执行：
67.主应用接收用户访问请求，将用户信息放入浏览器的缓存中；子应用获取缓存中的用户信息，确定用户信息中的位置信息，根据位置信息调用对应位置的后台接口获取后台版本和相应的版本号；子应用根据版本号生成路由，获取相应版本文件路径下的前台页面进行显示；其中，子应用的前台版本为最新版本。
68.基于同样的思路，本发明的一些实施例还提供了上述方法对应的介质。
69.本发明的一些实施例提供的一种存储介质，存储有计算机可执行指令，计算机可执行指令由处理器执行，以实现下述步骤：
70.主应用接收用户访问请求，将用户信息放入浏览器的缓存中；子应用获取缓存中的用户信息，确定用户信息中的位置信息，根据位置信息调用对应位置的后台接口获取后
台版本和相应的版本号；子应用根据版本号生成路由，获取相应版本文件路径下的前台页面进行显示；其中，子应用的前台版本为最新版本。
71.本发明中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于设备和介质实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
72.本发明实施例提供的设备和介质与方法是一一对应的，因此，设备和介质也具有与其对应的方法类似的有益技术效果，由于上面已经对方法的有益技术效果进行了详细说明，因此，这里不再赘述设备和介质的有益技术效果。
73.还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程方法商品或者方法不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程方法商品或者方法所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括要素的过程方法商品或者方法中还存在另外的相同要素。
74.以上仅为本发明的实施例而已，并不用于限制本发明。虽然，上文中已经用一般性说明及具体实施方案对本发明作了详尽的描述，但在本发明基础上，可以对之作一些修改或改进，这对本领域技术人员而言是显而易见的。因此，在不偏离本发明精神的基础上所做的这些修改或改进，均属于本发明要求保护的范围。

技术特征：
1.一种微前端子应用前台统一版本兼容后台多版本的方法，其特征在于，包括：主应用接收用户访问请求，将用户信息放入浏览器的缓存中；子应用获取缓存中的用户信息，确定所述用户信息中的位置信息，根据所述位置信息调用对应位置的后台接口获取后台版本和相应的版本号；子应用根据所述版本号生成路由，获取相应版本文件路径下的前台页面进行显示；其中，所述子应用的前台版本为最新前台版本。2.根据权利要求1所述的方法，其特征在于，所述方法还包括：在最新前台版本开发完毕后，建立所有前台版本的前台页面对应的文件夹，将与各个前台页面相关的文件放入对应的文件夹下；其中，每一个前台版本的前台页面为一个前台页面版本，所述所有前台版本包括所有历史前台版本和最新前台版本；在完成与所述前台页面版本对应的后台版本后，配置与所述后台版本对应的版本号。3.根据权利要求1所述的方法，其特征在于，根据所述位置信息调用对应位置的后台接口获取版本号，具体包括：在用户第一次登录页面时，主应用调用用户相关信息接口获取用户所在的省份信息存储到缓存中；子应用根据用户位置信息调用对应位置的后台接口，根据所述用户所在的省份信息获取对应的版本号。4.根据权利要求1所述的方法，其特征在于，所述主应用将用户信息放入浏览器的缓存中，子应用获取缓存中的用户信息，具体包括：主应用将用户信息加密成一个token字符串放入浏览器cookie缓存中，子应用进入时先从缓存里取出token解密拿到用户的代码、位置信息。5.根据权利要求2所述的方法，其特征在于，所述建立所有前台版本的前台页面对应的文件夹，将与各个前台页面相关的文件放入对应的文件夹下，具体包括：在每个前台页面版本开发测试完成后，在views文件路径下建立对应前台页面版本的文件夹；将所述前台页面版本相关的文件复制后放入所述文件夹中。6.根据权利要求1所述的方法，其特征在于，所述方法还包括：判断版本号是否获取到，若获取到，则在访问路径中间增加相应的版本号，生成相应的路由；若未获取到，则直接访问views文件夹下的最新文件夹。7.根据权利要求1所述的方法，其特征在于，所述方法还包括：在后台版本发布时在升级脚本中加入相关语句更新所述版本号。8.一种微前端子应用前台统一版本兼容后台多版本的装置，其特征在于，包括：主应用模块，用于接收用户访问请求，将用户信息放入浏览器的缓存中；子应用模块，用于获取缓存中的用户信息，确定所述用户信息中的位置信息，根据所述位置信息调用对应位置的后台接口获取后台版本和相应的版本号；根据所述版本号生成路由，获取相应版本文件路径下的前台页面进行显示；其中，所述子应用的前台版本为最新版本。
9.一种微前端子应用前台统一版本兼容后台多版本的设备，其特征在于，包括：至少一个处理器；以及，与所述至少一个处理器通过总线通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被执行，以实现：主应用接收用户访问请求，将用户信息放入浏览器的缓存中；子应用获取缓存中的用户信息，确定所述用户信息中的位置信息，根据所述位置信息调用对应位置的后台接口获取后台版本和相应的版本号；子应用根据所述版本号生成路由，获取相应版本文件路径下的前台页面进行显示；其中，所述子应用的前台版本为最新版本。10.一种非易失性存储介质，存储有计算机可执行指令，其特征在于，所述计算机可执行指令由处理器执行，以实现下述步骤：主应用接收用户访问请求，将用户信息放入浏览器的缓存中；子应用获取缓存中的用户信息，确定所述用户信息中的位置信息，根据所述位置信息调用对应位置的后台接口获取后台版本和相应的版本号；子应用根据所述版本号生成路由，获取相应版本文件路径下的前台页面进行显示；其中，所述子应用的前台版本为最新版本。

技术总结
本发明公开了一种微前端子应用前台统一版本兼容后台多版本的方法，该方法包括：主应用接收用户访问请求，将用户信息放入浏览器的缓存中；子应用获取缓存中的用户信息，确定用户信息中的位置信息，根据位置信息调用对应位置的后台接口获取后台版本和相应的版本号；子应用根据版本号生成路由，获取相应版本文件路径下的前台页面进行显示；其中，子应用的前台版本为最新版本。版本为最新版本。版本为最新版本。


技术研发人员：周道涵 刘昭昭 钟明均
受保护的技术使用者：中国人民财产保险股份有限公司
技术研发日：2023.06.19
技术公布日：2023/9/20