微前端系统、生成方法及服务器系统与流程

1.本说明书涉及微前端技术领域，更具体地，涉及一种微前端系统、生成微前端系统的方法及微前端服务器系统。


背景技术：

2.前端是web系统中与用户直接交互的部分。前端开发可以包括网页的页面开发等。网站的前端是网站中用户可见的部分，例如，网页上的特效、网页的布局、图片、视频等内容。后端是与服务器、数据库等进行交互以及对它们进行控制的处理逻辑。前端和后端配合以在网页上向用户显示数据、内容以及与用户进行交互。
3.微前端架构是一种类似于微服务的架构。
4.微服务技术允许开发人员为后端服务器平台的不同部分进行独立部署各个微服务，而不会损害其他部分。微服务技术的独立部署能力允许开发人员构建孤立或松散耦合的微服务。前端应用可以调用这些微服务，以获取所需的资源。一个微服务通常包括一组接口，接口地址可以是url地址。为了使微服务体系结构更稳定，可以使得每个微服务仅承担一个很小的任务。这样，负责这项微服务的团队规模也可以很小。
5.随着技术发展，微前端越来越复杂。最常见的一个场景是，一个大型的系统往往需要数个团队来开发与维护。不同的团队有着不同的代码规约、开发习惯、提交代码模式、发布模式等等。因此，不同团队之间的工作结果可能产生冲突，从而降低工作效率。
6.需要提供一种有效产生微前端产品的方案。


技术实现要素：

7.本说明书的实施例提供微前端系统的新技术方案。
8.根据本说明书的第一方面，提供了一种微前端系统，包括：主工程模块；以及部署到主工程模块的至少一个插件池，其中，每个插件池包括多个插件，每个插件池被单独部署，以及每个插件池中的插件共同使用一个微服务以实现相应的微前端应用。
9.根据本说明书的第二方面，提供了一种生成微前端系统的方法，包括：生成至少一个插件池，其中，每个插件池包括多个插件，以及每个插件池中的插件共同使用一个微服务以实现相应的微前端应用；以及将每个插件池单独部署到主工程模块。
10.根据本说明书的第三方面，提供了一种微前端服务器系统，包括一个或多个服务器，其中，在所述服务器中部署根据实施例的微前端系统。
11.在不同实施例中，可以基于插件池来单独部署插件，从而至少在一定程度上增加不同插件池之间的隔离度。通过这种方式，在系统开发以及维护时，可以避免不同开发团队之间的工作结果产生冲突。由此，通过这种方式，可以提升工作效率。
12.通过以下参照附图对本说明书的示例性实施例的详细描述，本说明书的实施例的其它特征及其优点将会变得清楚。
附图说明
13.被结合在说明书中并构成说明书的一部分的附图示出了的实施例，并且连同其说明一起用于解释各个实施例的原理。
14.图1示出了根据一个实施例的微前端系统的示意性框图。
15.图2示出了根据另一个实施例的微前端系统的示意性框图。
16.图3示出了根据一个实施例的生成微前端系统的方法的示意性流程图。
17.图4示出了包括根据一个实施例的微前端服务器系统的网络的示意图。
18.图5示出了微前端系统的一个应用场景。
19.图6示出了微前端系统的一个应用例子。
具体实施方式
20.以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本发明及其应用或使用的任何限制。
21.下面，参照附图描述本说明书的不同实施例和例子。
22.图1示出了根据一个实施例的微前端系统的示意性框图。
23.微前端技术将微服务的理念应用于浏览器端，即，将web应用由单一的单页应用转变为多个小型前端应用聚合为一的应用。这里，每一个小型前端应用被称为一个微前端。各个微前端可以独立运行、独立开发并独立部署。在开发时，微应用是以单一、微小应用的形式存在的；而在运行时，通过构建微前端系统将这些微应用合并起来，组合成一个新的应用。
24.如图1所示，微前端系统包括：主工程模块10和部署到主工程模块的至少一个插件池12a、12b、
……
12n。
25.每个插件池12a、12b、
……
12n包括多个插件。每个插件池被单独部署。每个插件池中的插件共同使用一个微服务以实现相应的微前端应用。例如，每个插件池12a、12b、
……
12n中要部署的插件被打包在一起，以被部署到主工程模块10中。
26.通过这种方式，不同的插件池可以是相互隔离的。可以单独部署各个插件池。各个插件池的部署可以相互独立。例如，第一组设计人员开发完成第一插件池，而第二组设计人员尚未完成第二组插件池的设计工作。在这种情况下，可以将第一插件池首先部署到主工程中，而不必等待第二插件池的完成。用户可以使用主工程中的部分功能。
27.例如，在某些情况下，用户仅部分插件功能。这种架构的系统也可以提供这种便利。例如，通过这种方式，可以很容易设置为用户提供哪些插件池以及可以向用户提供哪些插件池的代码，等等。这为微前端系统的配置提供了更多的灵活性。
28.此外，当系统出现故障时，可以逐插件池进行检查。这可以更容易地定位错误。
29.本领域技术人员应当理解，主工程模块是相对于微前端的插件池而言的。主工程模块可以包括多个插件池。一个应用系统可以包括一个主工程模块，也可以包括多个主工程模块。这里的主工程模块包括至少一个插件池。但是，主工程模块还可以包括其他组件或者其他单独的插件，例如，主工程模块的整体框架或外观、公共的头部栏目、导航栏等。
30.在使用插件池的方式来部署主工程的情况下，相对于主工程模块的全部插件来说，每个插件池的插件数量较少。因此，针对每个插件池的处理时间较短，处理效率较高。因
此，使用插件池的方式可以实现分布式的部署方式，提升部署插件的效率。
31.图2示出了根据另一个实施例的微前端系统的示意性框图。
32.如图2所示，微前端系统还可以包括代理服务器26。插件池12a、12b、
……
12n可以通过代理服务器26访问对应微服务28a、28b
……
28n的资源。每个插件池12a、12b、
……
12n可以被分配一个微服务标识。微服务标识可以是数字、字符或者数字和字符的组合等。每个插件池12a、12b、
……
12n可以使用微服务标识来获取对应的微服务的资源。代理服务器28基于所述微服务标识为插件池12a、12b、
……
12n确定所要访问的微服务28a、28b
……
28n的资源。例如，微服务28a、28b
……
28n的资源可以分布在不同的服务器中，并且可以根据情况变化而被调整。在访问微服务的资源时，插件池12a、12b、
……
12n中的插件将微服务标识传递给所述代理服务器28。代理服务器28基于微服务标识确定与微服务对应的不同后端服务器地址，从所确定的后端服务器地址获取相应的微服务的资源，并将所获取的资源传递给插件。
33.在使用代理服务器的情况下，插件池不需要知道微服务的具体布置情况，可以在不需感知微服务的服务器的情况下利用微服务，从而减轻了插件设计的工作量。此外。当微服务的资源发生变化时，例如，服务器的部署发生变化时，不需要重新设计插件池，只需在代理服务器调整微服务标识与变化的资源的映射关系即可。这使得微前端的设计与后端隔离。
34.在图2的微前端系统中，插件池12a、12b、
……
12n可以通过相应的部署模块24a、24b
……
24n分别被部署到到主工程模块10中。
35.例如，每个插件池12a、12b、
……
12n在被开发完成之后被打包成一个打包文件及其清单文件，以供主工程模块10调用。清单文件例如是manifest文件。主工程模块10包括插件配置文件，例如，pool.config.json文件。插件配置文件可以包括打包文件及其清单文件的地址以及关于插件池中的插件的信息。主工程模块借助于部署模块24a、24b
……
24n的帮助，通过插件配置文件获取打包文件及其清单文件，并利用打包文件及其清单文件加载对应的插件池。
36.图2的微前端系统还包括版本控制模块22a、22b
……
22n。所述版本控制模块22a、22b
……
22n为每个插件池12a、12b、
……
12n分别设置版本控制，以便在主工程模块10中针对不同插件池单独设置插件池的版本。
37.例如，当一个插件池的版本出现问题时，可以将该插件池回滚到之前的版本，而不用将整个系统回滚到之前的版本。
38.如图2所示，主工程模块10还可以包括适配模块102。适配模块102用于确定和控制从将信息从主工程模块10传递给一个或多个插件池12a、12b、
……
12n的方式。
39.例如，适配模块102可以将公共信息传递给多个插件池。公用信息是多个插件池可以公用的信息。例如，主工程模块中的用户信息、认证信息、页面信息等是多个插件池都需要使用的信息。这些信息可以作为公用信息经由适配模块102传递到各个插件池12a、12b、
……
12n。此外，适配模块102还可以将单例信息传递给单个目标插件池。单例信息是仅供单个插件池使用的信息。例如，主工程模块包括数据跟踪工具，数据跟踪工具的跟踪参数是用于数据跟踪插件池的。因此，适配模块102可以将这种跟踪参数作为单例信息传递给用于数据跟踪插件池。
40.主工程模块10还可以包括分发配置文件104。适配模块102可以基于分发配置文件104确定公共信息和单例信息，以便分别将公共信息传递给多个插件池以及将单例信息传递给单个目标插件池。分发配置文件104可以是设计人员预先设置的，也可以说由使用主工程模块的用户根据需要所设置。在分发配置文件104中规定了公共信息和单例信息。当适配模块102从主工程模块102收到信息时，适配模块102在分发配置文件104进行查找，以确定所收到的信息是公共信息还是单例信息。随后，适配模块102公共信息传递给多个插件池以及将单例信息传递给单个目标插件池。
41.在用户使用主工程模块10所对应的应用时，主工程模块10接收用户对于插件池入口项的选择。例如，可以在主工程模块10的导航栏显示主工程模块包含的工具，例如，数据跟踪、认证等。每个工具对应于一个插件池，导航栏中的工具名称对应于插件池入口项。主工程模块10将所选择的插件池入口项发送给适配模块102，以动态调用相应的插件池12a、12b、
……
12n。
42.插件池12a、12b、
……
12n可以包括初始化模块。在插件池12a、12b、
……
12n的初始化阶段，适配模块102将主工程模块10中的共用组件传递给所述初始化模块。共用组件例如可以包括分页组件、加载组件等。初始化模块利用局部单例变量初始化共用组件，以供插件池12a、12b、
……
12n中的插件使用。可以使用懒加载技术，以在插件池中插件被指定后，开始加载对应的微服务的资源。例如，当用户操作页面并用到插件时，才加载对应的插件。这样可以提高微前端处理的性能，减少不必要处理资源浪费。
43.图3示出了根据一个实施例的生成微前端系统的方法的示意性流程图。
44.如图3所示，在步骤s32，生成至少一个插件池，其中，每个插件池包括多个插件，以及每个插件池中的插件共同使用一个微服务以实现相应的微前端应用。
45.在步骤s34将每个插件池单独部署到主工程模块。
46.此外，还可以设置所述插件池以通过代理服务器访问对应微服务的资源，其中每个插件池被分配一个微服务标识，代理服务器基于所述微服务标识为插件池确定所要访问的微服务的资源。
47.由于不同插件池之间具有较高的隔离度，因此，可以针对不同的插件池进行单独维护。例如，主工程模块可以包括至少两个插件池，在至少两个插件池中的至少一个插件池未生成的情况下，部署所述已生成的至少一个插件池。此外，所部署的插件池也可以包括至少两个插件池，以及在不改变其中的至少一个插件池的情况下更新其他插件池。通过这种方式，提高了插件池部署和维护的灵活性，提高了效率，减小了插件池部署和维护的处理成本。
48.在将每个插件池单独部署到主工程模块时，可以针对不同插件池单独设置插件池的版本。这里，将不同插件池之间的隔离度较高的特点与单独版本控制结合起来，从而可以实现针对插件池的较灵活的维护，并且最大程度地减小了维护成本。例如，当将插件池a的第一版本升级为第二版本时，可以不对其他插件池进行处理。在插件池a的第二版本出现问题时，可以将插件池a回退到第一版本。插件池a的升级和回退不会对其他插件池造成影响，从而将维护成本限制于对插件池a的处理。这减小了在插件池a的升级和回退时对其他插件的维护成本。
49.还可以设置适配模块，以确定从将信息从主工程模块传递给一个或多个插件池的
方式。通过适配模块，顶层的主工程模块和下层的插件池之间可以是隔离的，这样，插件池中的插件可以是独立运行且不依赖于顶层的主工程模块。另外，由于可以通过适配模块从主工程模块获取信息，因此，插件池不需要自己维护大量的共享资源，从而可以减小插件池的规模。另外，由于可以减小插件池的规模，因此，可以提高插件池的加载效能。由于插件池中的插件仅能通过适配模块与主工程模块通信，而无法直接控制主工程模块，因此，可以提高整个系统的安全性。
50.图4示出了包括根据一个实施例的微前端服务器系统的网络的示意图。
51.如图4所示，在网络41中包括多个服务器41a、
……
、41n。可以在所述服务器中的一个或多个服务器中部署后端微服务。还可以在所述服务器中的一个或多个服务器中部署上面所述的微前端系统。
52.用户可以使用终端421、422、423访问服务器中的主工程模块并使用其中的插件。
53.图5示出了微前端系统的一个应用场景。图5显示了微前端系统的主工程模块的框架。通过主工程模块显示公共头区块50、导航栏区块52和插件区块54。
54.例如，公共头区块50包括整个主工程的公共信息、到各个插件池的入口项等。当选择某个插件池的功能后，可以显示该插件池对应的导航栏区块52。使用导航栏区块52中的导航项目可以导航到对应的插件。可以由主工程模块提供公共头区块50与导航栏区块52。当使用导航栏区块52导航到目标插件时，可以根据导航结果在插件区块54中动态加载相应的插件。
55.图6示出了微前端系统的一个应用例子。
56.如图6所示，在主工程模块60中包括启动器部分61和工具部分62。启动器部分61包括用户信息、认证信息和页面信息。工具部分62包括路由、融合、数据跟踪、认证等。例如，启动器部分61和工具部分62可以被放置在图5的公共头区块50中。
57.适配模块63可以认为启动器部分61中的内容是全局信息，并将它们传递给各个插件池65、67。适配模块63还可以判断工具部分62中的各个条目对应于不同插件池。因此，适配模块63会将这些信息传递给对应的插件池，而不会发送到所有插件池。通过使用适配模块63。主工程模块60可以设置工程的架构而不需了解插件的具体设置。这使得主工程模块的设计和插件的设计隔离，从而有利于不同设计人员的分工合作。
58.可以通过初始化模块64、66分别初始化插件池65、67。在插件池65、67内部，使用插件内核接收模块651、671分别调用对应的插件652a、652b
……
以及672a、672b
……
等，以实现相应的功能。
59.图6中还示出了代理服务器68和微服务69a、69b
……
69n。
60.下面结合图5和图6说明这里公开的微前端系统的应用例子。
61.例如，在图6中，第一开发团队完成插件池65的开发，而第二开发团队尚未完成插件池67的开发。插件池65例如对应于工具入口项“数据跟踪”，插件池67例如对应于工具入口项“认证”。在这种情况下，可以首先生成插件池65并将插件池65部署到主工程模块60中。在这种情况下，由于不同插件池之间的隔离，因此，用户可以通过主工程模块60使用“数据跟踪”工具，但是，还不能使用“认证”工具。
62.例如，可以通过如下方式部署插件池65。首先，将开发完成的插件池65中的插件放置到相应的目录下。接着，利用打包工具，生成改插件池65的打包文件及其清单文件，以供
所主工程模块60调用。主工程模块还可包括插件配置文件，所述插件配置文件包括打包文件及其清单文件的地址以及关于插件池中的插件的信息。主工程模块60可以通过插件配置文件获取打包文件及其清单文件。在使用时，主工程模块60可以利用打包文件及其清单文件加载对应的插件池。
63.随后，第二开发团队完成插件池67的开发。可以生成插件池67并将插件池67部署到主工程模块60中，以便用户使用“认证”工具。
64.第一开发团队可以开发插件池65的升级版本。接着，在不改变插件池67的情况下更新插件池65为升级版本。例如，在使用插件池65的升级版本时出现故障，因此，第一开发团队希望将插件池65回退到原始版本。此时，可以在不改变插件池67的情况下，将插件池65从升级版本回退到原始版本。
65.如图5所示，在主工程模块的公共头区块50显示公共信息，例如，用户信息，包括用户姓名、年龄、联系方式等。此外，公共头区块50还可以显示表示用户是否通过验证的认证信息。此外，在图5所示的页面的底部还可以显示诸如版权信息、许可信息等信息。
66.在图5左侧的导航栏区块52中显示入口项，例如，路由、融合、数据跟踪、认证等工具入口项。每个工具入口项对应于一个插件池65、67。每个插件池65、67中要部署的插件652a、652b或672a、672b被打包在一起，以被部署到主工程模块60中。
67.插件池65、67可以通过图2中的代理服务器68访问对应微服务微服务69a、69b
……
69n的资源。每个插件池被分配一个微服务标识。代理服务器68基于微服务标识为插件池65、67确定所要访问的微服务微服务69a、69b
……
69n的资源。
68.在访问微服务69a、69b
……
69n的资源时，插件池65、67中的插件652a、652b或672a、672b将所微服务标识传递给代理服务器68。代理服务器68基于微服务标识确定与微服务69a、69b
……
69n对应的不同后端服务器地址，从所确定的后端服务器地址获取相应的微服务的资源，并将所获取的资源传递给插件652a、652b或672a、672b。
69.当微服务69a、69b
……
69n的资源发生变化时，代理服务器调整相应的微服务标识与变化的资源的映射关系。
70.适配模块63可以将公共信息传递给多个插件池65和67，以及将单例信息传递给单个目标插件池65或67。
71.适配模块63可以基于分发配置文件确定公共信息和单例信息，以便分别将公共信息传递给多个插件池65和67以及将单例信息传递给单个目标插件池65或67。
72.主工程模块60接收用户对于导航栏区块52中的入口项的选择，并将所选择的入口项发送给适配模块63，以动态调用相应的插件池65或67。所调用的插件池65或67被显示在插件区块54中。
73.当调用插件池65或67时，在插件池65或67的初始化阶段，适配模块63可以将主工程模块60中的共用组件传递给初始化模块64。共用组件例如可以是分页组件、加载组件等。初始化模块64利用局部单例变量初始化共用组件，以供插件池65或67中的插件652a、652b或672a、672b使用。
74.可以使用懒加载技术，以在插件池中65或67的插件652a、652b或672a、672b被指定后，开始加载对应的微服务69a、69b
……
69n的资源。
75.本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部
分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可
76.上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。