微前端服务的实现方法、设备以及存储介质

技术领域

本公开涉及互联网微前端技术领域，尤其涉及微前端服务的实现方法、设备以及存储介质。

背景技术

当下前端领域中，单页面应用是非常流行的前端趋势。比如，一些复杂的网站、应用等，通常都是由很多相对独立的功能模块组合而成，而这些模块负责的是相互独立的多个团队，这些独立的团队由于专业分工不同，会负责特定的业务领域，以及完成特定的开发任务，并且，通常这些独立的团队在人员组成方面囊括了从前端开发到服务端开发，从界面设计到数据库设计的端到端的跨职能人员。但是由于网站、应用将各功能模块部署在同一个代码包内，在功能模块不断迭代和更新的过程中，代码包体积越来越大，导致最后打包时间过长，性能缓慢；同时由于技术栈必须保持统一，导致多团队协作过程中存在消息不一致的情况，使得项目进展缓慢；此外，随着项目的迭代，功能和代码会越来越繁杂，耦合度也越来也高。所以，亟需将这些繁杂的代码和功能模块进行拆分和细化的微前端系统和平台，以保证每个团队都能独立开发、升级，提高开发效率。

发明内容

本公开提供了一种微前端服务的实现方法、设备以及存储介质。

根据本公开的第一方面，提供了一种微前端服务的实现方法，应用于微前端服务平台，该方法包括：

接收客户端的登陆指令；所述登陆指令携带有用户信息；

根据所述用户信息获取项目列表并进行项目展示；

接收所述客户端的项目选择指令；

根据所述项目选择指令获取对应的子应用信息；所述子应用信息包括应用跳转地址、应用包服务器地址；

根据所述应用跳转地址进行地址跳转，并根据所述应用包服务器地址拉取所述子应用对应的子应用文件；

将所述子应用文件挂载至所述子应用对应的容器内，在客户端进行展示。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，在根据所述用户信息获取项目列表并进行项目展示之前，包括：

根据所述用户信息查询是否存在默认应用设置；

若存在默认应用设置，则根据所述默认应用设置，加载对应的子应用文件并挂载至对应的容器内，在客户端进行展示。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述微前端服务平台包括功能模块，所述功能模块包括权限处理模块和功能包；

所述子应用信息是由所述权限处理模块获取，并将所述子应用信息发送给功能包下的通信组件，由通信组件根据子应用信息中的应用跳转地址实现应用跳转。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述微前端服务平台还包括微前端应用框架；

所述子应用文件是由微前端应用框架根据所述应用包服务器地址进行拉取的。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述微前端应用框架配置有webpack打包模块和插件；

由webpack打包模块分别对各个子应用进行分开打包；

使用插件对各个子应用进行样式隔离。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述用户信息包括用户权限信息；

在将所述子应用文件挂载至所述子应用对应的容器内之前，包括：

由所述权限处理模块根据所述用户权限信息对所述子应用文件进行权限处理。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述微前端服务平台还包括页面容器，

所述页面容器包括状态管理模块，

所述功能模块还包括应用缓存模块，

所述方法还包括：

当接收到用户的应用切换指令时，通过应用缓存模块缓存历史应用，同时触发应用切换事件并将当前应用信息保存到状态管理模块中，调用功能包下的切换应用功能模块，切换至对应应用。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述微前端应用框架还配置有对各个子应用进行统一监管的主应用；

所述应用切换事件是由主应用对所述应用切换指令进行监听并触发的。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，各个子应用与所述主应用之间的交互通过@ice/stark-data来实现。

根据本公开的第二方面，提供了一种电子设备。该电子设备包括：存储器和处理器，所述存储器上存储有计算机程序，所述处理器执行所述程序时实现如以上所述的方法。

根据本公开的第三方面，提供了一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现如根据本公开的第一方面所述的方法。

本公开实施例提供的微前端服务的实现方法、设备以及存储介质，通过一个微前端服务平台可以实现各子项目单独开发，单独部署，同时，各子项目可以在一个主应用交互中心的统一管理下，实现各子应用间的通信和交互，以保证每个团队都能独立开发、升级，提高开发效率。

应当理解，发明内容部分中所描述的内容并非旨在限定本公开的实施例的关键或重要特征，亦非用于限制本公开的范围。本公开的其它特征将通过以下的描述变得容易理解。

附图说明

结合附图并参考以下详细说明，本公开各实施例的上述和其他特征、优点及方面将变得更加明显。附图用于更好地理解本方案，不构成对本公开的限定在附图中，相同或相似的附图标记表示相同或相似的元素，其中：

图1示出了根据本公开的实施例的微前端服务平台的运行框架图；

图2示出了根据本公开的实施例的微前端服务平台的页面布局架构图；

图3示出了根据本公开的实施例的微前端服务平台的通信架构图；

图4示出了根据本公开的实施例的微前端服务的实现方法的流程图；

图5示出了能够实施本公开的实施例的示例性电子设备的方框图。

具体实施方式

为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中的附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本公开一部分实施例，而不是全部的实施例。基于本公开中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的全部其他实施例，都属于本公开保护的范围。

另外，本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。

本公开中，通过一个微前端服务平台可以实现各子项目单独开发，单独部署，增量升级，松耦合代码等，同时，各子项目间可以通信，交互，以保证每个团队都能独立开发、升级，提高开发效率。对复杂web app或者网站的加载方式优化，它基于qiankun微服务框架，开发适用于巨石应用或多场景下子应用的单独加载、发布，迭代以及缓存管理，保证应用间样式隔离，单独沙箱运行，也能让多团队协作功能开发。

如图1所示的微前端服务平台的运行框架图，包括：modules功能模块、页面容器、前端工程和web应用(基于qiankun框架实现项目功能的微前端应用框架)。其中，web应用处于最外层，主要基于qiankun框架实现项目功能，包含主应用容器并能加载各个子应用，其中，主应用能够对各个子应用进行统一监管。微前端应用框架配置有webpack打包模块和插件；由webpack打包模块分别对各个子应用进行分开打包；使用插件对各个子应用进行样式隔离。具体地，前端工程使用webpack(前端工程化工具)打包，实现不同环境(主要包括开发环境、测试环境和生产环境)打包配置，同时通过webpack插件(例如happy-pack，bunble-analysis等)，优化打包体积，主应用和子应用分开打包，异步上传，从而减小打包体积，加速上传，并实现子应用间样式隔离和组件样式隔离等。子应用样式和组件样式通过后缀命名来区分。例如，开发环境为dev、测试环境为stg/uat、生产环境为prod/test。由于css都会挂载在页面中，但是不同子应用中同名样式会产生干涉，最后会导致样式错乱，所以需要通过qiankun添加子应用全局样式前缀实现应用间隔离，同时组件样式隔离通过postcss-change-css-prefix和change-prefix实现修改组件命名以及相对应样式，避免同名组件样式干涉。页面容器(即主应用容器：用于在主应用中加载子应用，相当于子应用所有对象会挂载该容器上)，包含通用组件(用以实现组件库的二次封装)、业务组件(例如图表组件、3d模型组件等，主要与处理场景相关，和公司产品绑定)和页面组件(头部、底部导航组件)等功能组件，丰富容器功能，满足各种场景下用户的使用需求。具体地，通用组件用于通用页面开发、表单、按钮等普通功能；业务组件用于公司相关业务功能、数据可视化、3d的模型交互；页面组件用于页面功能、交互处理。页面容器是基于vue框架进行部署，还设计了vuex状态管理模块和vue-router(history)路由模式单元。最后，功能模块提供给主应用和子应用调用，包括：filters过滤器、libs功能包、config项目配置、permisssion权限处理模块和cache应用缓存模块，能实现所有组件、应用间通讯，跳转，交互，缓存以及权限控制等。

图2为微前端服务平台的页面布局架构图，包含三个部分，nav导航页面组件(nav模块)、子应用加载容器container以及悬浮导航页面组件(位于页面底部的悬浮导航模块)。具体地，nav模块展示logo、用户个人信息、状态、天气、消息等；子应用加载容器container为子应用展示容器，通过加载子应用服务，独立展示应用；底部悬浮导航模块包含子应用相关操作：常用应用、应用中心、设置中心和桌面等。

图3为微前端服务平台的通信架构图，通信框架属于功能模块的核心(libs功能包的主要功能)，通信方式为以主应用为中心，通过事件分发控制子应用通信，交互。子应用可以通过@ice/stark-data来与主应用交互，即通过@ice/stark-data封装通信组件，包含数据传递，权限获取，用户个人信息等，也可以触发事件，如应用间跳转、切换缓存、返回首页、注销登录等。主应用通过监听事件来做出相应的事件转发和控制，相当于交互中心。例如，应用切换事件是由主应用对所述应用切换指令进行监听并触发的。微前端服务平台采用主应用和业务应用模块(子应用)相互隔离的方式，能在开发大型复杂应用的时候，保证项目性能，同时也增加了灵活性，各团队能分而治之，打包部署分离。

下面结合具体的实现流程，对微前端服务平台实现微前端服务进行说明。

图4示出了根据本公开实施例的微前端服务的实现方法400的流程图。

方法400包括：

步骤410，接收客户端的登陆指令；所述登陆指令携带有用户信息。

在一些实施例中，用户登陆微前端服务平台，微前端服务平台获取该用户有权限的所有项目列表，并将用户信息保存到vuex中做状态管理。

步骤420，根据所述用户信息获取项目列表并进行项目展示。

在一些实施例中，在根据所述用户信息获取项目列表并进行项目展示之前，包括：根据所述用户信息查询是否存在默认应用设置；若存在默认应用设置，则根据所述默认应用设置，加载对应的子应用文件并挂载至对应的容器内，在客户端进行展示。例如，如果用户设置默认应用，则自动加载默认应用到子应用容器，否则跳转首页提供应用列表组件展示给用户，可供用户做应用一系列相关操作，包括打开、设置常用、设置默认应用等操作。

步骤430，接收所述客户端的项目选择指令。

在一些实施例中，将应用列表组件展示给用户后，由用户根据自身需要选择对应的项目，生成项目选择指令。

步骤440，根据所述项目选择指令获取对应的子应用信息；所述子应用信息包括应用跳转地址、应用包服务器地址。

在一些实施例中，根据用户的项目选择指令，获取对应的子应用信息，包括应用跳转地址、应用包服务器地址。例如，某一选定的项目下所有子应用。也可以是用户根据展示的某一选定的项目下的所有子应用之后点击其中的某一子应用，根据用户的点击指令，由权限处理模块获取对应的子应用信息，具体包括：name-用户名称，entry-应用包服务器地址，container-应用加载容器id，activeRule-应用跳转地址。然后将子应用信息发送给功能包下的通信组件。

步骤450，根据所述应用跳转地址进行地址跳转，并根据所述应用包服务器地址拉取所述子应用对应的子应用文件。

在一些实施例中，由通信组件根据子应用信息中的应用跳转地址实现应用跳转，例如跳转到activeRule，其中路由模式为history。然后微前端应用框架根据应用包服务器地址拉取子应用文件，例如，通过http请求加载指定地址的首屏内容即html页面，然后解析这个html模版得到模板结构template、行为scripts、地址entry和样式styles等。

步骤460，将所述子应用文件挂载至所述子应用对应的容器内，在客户端进行展示。

在一些实施例中，将微前端应用框架拉取到的子应用文件挂载到子应用容器，即子应用container下，并在客户端进行展示。

基于上述实施方式，在本公开提供的又一实施方式的在将所述子应用文件挂载至所述子应用对应的容器内之前，包括：由权限处理模块根据用户权限信息对子应用文件进行权限处理。其中，用户权限信息包括在用户信息中。

基于上述实施方式，在本公开提供的又一实施方式的所述方法还包括：切换应用的操作实现，具体包括：当接收到用户的应用切换指令时，通过应用缓存模块缓存历史应用，同时触发应用切换事件并将当前应用信息保存到状态管理模块中，调用功能包下的切换应用功能模块，切换至对应应用。

在一些实施例中，用户可以通过底部的悬浮导航模块，调用功能包中切换应用功能模块，实现应用切换，微前端服务平台会通过应用缓存模块缓存历史应用，同时触发应用切换事件并将当前应用信息保存到状态管理模块中，同时子应用中也可根据权限处理模块获取当前登录用户的权限信息做出相应的交互。

需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本公开并不受所描述的动作顺序的限制，因为依据本公开，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于可选实施例，所涉及的动作和模块并不一定是本公开所必须的。

根据本公开的实施例，本公开还提供了一种电子设备、一种可读存储介质。

图5示出了可以用来实施本公开的实施例的电子设备500的示意性框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。

电子设备500包括计算单元501，其可以根据存储在ROM502中的计算机程序或者从存储单元508加载到RAM503中的计算机程序，来执行各种适当的动作和处理。在RAM503中，还可存储电子设备500操作所需的各种程序和数据。计算单元501、ROM502以及RAM503通过总线504彼此相连。I/O接口505也连接至总线504。

电子设备500中的多个部件连接至I/O接口505，包括：输入单元506，例如键盘、鼠标等；输出单元507，例如各种类型的显示器、扬声器等；存储单元508，例如磁盘、光盘等；以及通信单元509，例如网卡、调制解调器、无线通信收发机等。通信单元509允许电子设备500通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。

计算单元501可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元501的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元501执行上文所描述的各个方法和处理，例如微前端服务的实现方法。例如，在一些实施例中，微前端服务的实现方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元508。在一些实施例中，计算机程序的部分或者全部可以经由ROM502和/或通信单元509而被载入和/或安装到电子设备500上。当计算机程序加载到RAM503并由计算单元501执行时，可以执行上文描述的微前端服务的实现方法的一个或多个步骤。备选地，在其他实施例中，计算单元501可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行微前端服务的实现方法。

本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、现场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，也可以为分布式系统的服务器，或者是结合了区块链的服务器。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本公开中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本公开公开的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本公开保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本公开的精神和原则之内所作的修改、等同替换和改进等，均应包含在本公开保护范围之内。