一种微前端可配置页面生成方法、装置、设备及介质
文献发布时间：2023-06-19 19:30:30
技术领域
本申请涉及前端应用技术领域，尤其是涉及到一种微前端可配置页面生成方法、装置、设备及介质。
背景技术
近年来，随着微服务架构的流行，前端微服务架构也日趋流行，微前端类似于微服务架构,主要面向于浏览器端,是一种由独立交付的多个前端应用组成整体的架构风格，将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块。松耦合低内聚，可维护性更高，独立部署降低风险。
微前端架构中，各个前端虽然各自独立开发、部署，但用户看起来仍然是个内聚的单个产品。在开发工作中，页面设计原则具有一致性，需要保持各子前端界面风格、交互风格一致性。现有技术中，一般的微前端设计模式，访问基座应用的前端页面布局通常是固定的，无法根据用户特点进行个性化配置，例如子应用A指定位置为左侧或右侧，而子应用B指定位置为上侧或下侧，无法依据用户偏好进行设置。
发明内容
有鉴于此，本申请提供了一种微前端可配置页面生成方法、装置、设备及介质，实现微应用的个性化配置，解决现有微前端设计模式不能灵活配置入口页面及布局的技术问题。
根据本申请的第一方面，提供了一种微前端可配置页面生成方法，包括：
获取用户身份标识；
根据所述用户身份标识，获取基座应用的应用配置信息，其中，所述应用配置信息包括至少一个子应用的标题、名称、标识、页面地址、布局属性、尺寸属性、监听事件和触发事件；
根据所述基座应用的应用配置信息，获取所述子应用的页面静态资源文件，绑定监听事件及触发事件，还原所述子应用的位置和大小，渲染生成微前端入口页面。
根据本申请的第二方面，提供了一种基于机器学习的页面缓存装置，包括：
第一获取模块，用于获取用户身份标识；
第二获取模块，用于根据所述用户身份标识，获取基座应用的应用配置信息，其中，所述应用配置信息包括至少一个子应用的标题、名称、标识、页面地址、布局属性、尺寸属性、监听事件和触发事件；
页面生成模块，用于根据所述基座应用的应用配置信息，获取所述子应用的页面静态资源文件，绑定监听事件及触发事件，还原所述子应用的位置和大小，渲染生成微前端入口页面。
根据本申请的第三方面，提供了一种计算机设备，包括存储器、处理器以及存储在存储器中并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述微前端可配置页面生成方法的步骤。
根据本申请的第四方面，提供了一种计算机可读存储介质，计算机可读存储介质存储有计算机程序，计算机程序被处理器执行时实现上述微前端可配置页面生成方法的步骤。
借由上述技术方案，本申请提供的一种微前端可配置页面生成方法、装置、设备及介质，首先，获取用户身份标识；根据所述用户身份标识，获取基座应用的应用配置信息，该应用配置信息包括至少一个子应用的标题、名称、标识、页面地址、布局属性、尺寸属性、监听事件和触发事件；根据所述基座应用的应用配置信息，获取所述子应用的页面静态资源文件，绑定监听事件及触发事件，还原所述子应用的位置和大小，渲染生成微前端入口页面，该微前端入口页面按照用户个性化应用配置信息生成，实现了个性化的入口页面搭建，自定义设置每个子应用的标题、名称、标识、页面地址、布局属性、尺寸属性、监听事件和触发事件，解决现有微前端设计模式不能灵活配置入口页面及布局的技术问题。
上述说明仅是本申请技术方案的概述，为了能够更清楚了解本申请的技术手段，并可依照说明书的内容予以实施，并且为了让本申请的上述和其它目的、特征和优点能够更明显易懂，以下特列举本申请的具体实施方式。
附图说明
此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
图1示出了本发明实施例中提供的一种微前端可配置页面生成方法应用场景的示意图；
图2示出了本发明实施例中提供的一种微前端可配置页面生成方法流程示意图；
图3示出了本发明实施例中提供的微前端配置流程示意图；
图4示出了本发明实施例中提供的一种微前端可配置页面生成装置示意图。
具体实施方式
下文中将参考附图并结合实施例来详细说明本申请。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。
如图1所示，为本发明实施例中提供的一种微前端可配置页面生成方法应用场景的示意图，基于微前端SingleSPA、Qiankun、Micro-app等微前端框架即通过由独立交付的多个微应用动态组成整体应用的架构模式。将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的子应用(应用1、应用2、应用3、应用4、应用5)。基座应用异步加载嵌入其内部的微应用的入口文件,动态创建微应用装载点。为了实现图1中应用入口页面的灵活配置，实现基于用户的可定制的应用入口页面布局，本发明实施例中提供了一种微前端可配置页面生成方法，通过用户的身份标识，获取应用入口页面的配置文件，渲染生成个性化的应用入口页面，该个性化的应用入口页面基于配置文件config.json实现，config.json通过在配置应用前端页面中，监听备选元素列表中应用图标的拖拽、尺寸调整等，生成应用入口页面的配置信息并通过调用配置微服务API接口将配置信息存入后端数据库中，实现了应用入口页面的个性化灵活配置，可根据不同的用户标识，生成用户个性化的应用入口页面及交互方式。
为了更加清晰的描述本发明实施例中提供的一种微前端可配置页面生成方法，如图2所示，包括：
步骤201、获取用户身份标识；
其中，为了获取用户身份标识，需要后端服务响应用户的访问请求，获取访问请求中携带的用户身份标识，用户身份标识可能存在与访问请求(POST请求或GET请求)的请求参数中或请求头Hearder或请求Cookie的键值对中，作为用户身份的唯一标识。
步骤202、根据用户身份标识，获取基座应用的应用配置信息；
其中，应用配置信息包括至少一个子应用的标题、名称、标识、页面地址、布局属性、尺寸属性、监听事件和触发事件。根据用户身份标识在数据库中进行查询，获取与用户身份标识对应的应用配置信息，应用配置信息可以JSON数组的形式存在，JSON数组可通过json文件方式提供(例如图1中的config.json文件)或通过数据响应中的数据字段提供(例如返回response中data字段中的JSON数组)，每个JSON元素属于为应用配置信息对象Object，该对象包括子应用的标题、名称、标识、页面地址、布局属性、尺寸属性、监听事件和触发事件等字段，例如以下具体的应用配置信息对象数组，如下：
/>
其中，“//”后的中文为实际代码片段中的注释，这里显示是为了更好的解释应用配置信息各个字段的含义，title为子应用的标题，name为子应用的名称，id为子应用的标识，remoteUrl为子应用的页面地址，Layout中的left和top为子应用的布局属性用于定位子应用入口图标在基座应用页面中的位置，Layout中的width和height为子应用的尺寸属性用于定义入口图标的尺寸大小(本实施例中还可以加入其它CSS样式定义，如圆角、阴影、毛玻璃效果、图片等加入Layout的定义中)，Listens为子应用的监听事件，actions为子应用的触发事件。
步骤203、根据基座应用的应用配置信息，获取子应用的页面静态资源文件，绑定监听事件及触发事件，还原子应用的位置和大小，渲染生成微前端入口页面。
步骤203具体可以包括：
步骤203-1、获取基座应用的页面静态资源文件；
步骤203-2、获取基座应用的页面静态资源文件中与子应用对应的子应用标签及绑定属性，绑定属性包括子应用的标识、子应用的页面地址、传入数据对象；
其中，对于micro-app微前端框架而言，通过基座应用的页面静态资源文件html中的子应用对应的子应用标签及绑定属性，例如：子应用标签为
步骤203-3、根据子应用的页面地址和传入数据对象，获取子应用的页面静态资源文件，加载子应用的页面；
其中，本步骤中可以采用懒加载(用户点击具体子应用时拉取子应用的页面静态资源文件)或预加载方式(用户登录时自动预拉取子应用的页面静态资源文件)加载子应用的页面静态资源文件。
步骤203-4、根据基座应用的页面静态资源文件，渲染生成微前端入口页面；
其中，基座应用的页面静态资源文件首先进行渲染生成基座应用的基础框架，渲染生成微前端入口页面，该入口页面中包括至少一个子应用的入口，而入口的样式、排列方式是通过应用配置信息提供的。
步骤203-5、根据子应用的页面标签、子应用的布局属性、子应用的尺寸属性在微前端入口页面中还原子应用的位置和大小。
步骤203之后，可在在基座应用中进行注册一次将该子应用标记为ready，并记录该子应用名称name，并通过消息总线全局广播该应用注册完成的事件。目的是监控所有子应用完成，确保子应用之间以及基座能够进行正常通信，可通过类似消息订阅发布的方式，实现子应用之间、子应用与基座应用之间的通信机制。为了避免消息传输的混乱，Listens和actions绑定中可限定数据流为基座应用一次只能向指定的子应用发送数据，子应用只能发送数据到基座应用，至于子应用之间的数据通信则通过基座应用进行控制，使得数据流就会变得更加清晰，可增加系统稳定性，同时便于开发和调试。
步骤203中为了避免变量冲突、样式冲突，在子应用页面加载、微前端入口页面生成中需要进行JS沙箱和样式隔离，每个子应用都需要一个独立的沙箱，通过class创建一个类：SandBox，当子应用被创建时，就创建一个新的沙箱与其绑定，当页面不支持Proxy，使用快照沙箱，当页面不支持Proxy时，则使用es6中的Proxy实现代理，可以支持创建多个沙箱；子应用的所有元素都被插入到micro-app标签中，且micro-app标签具有唯一的name值，所以通过添加属性选择器前缀micro-app[name＝xxx]可以让css样式在指定的micro-app内生效。
步骤201之前，还包括基座应用的应用配置信息生成的步骤，该步骤一般由用户操作，基于用户的属性，对用户的页面进行个性化配置，从而生成定制的应用配置信息并保存，如图3所示，具体步骤包括：
步骤301、根据用户身份标识，获取至少一个子应用配置信息的对象数组；
其中，应用配置信息的对象数组即为步骤202中的对象数组。
步骤302、遍历对象数组，生成子应用图标列表，其中，子应用图标列表包括子应用图标及子应用配置对象数据；
其中，可通过ForEach遍历对象数组，依据子应用名称name、id等生成一个用户可视的一维列表，前端页面可显示一个Table，该表中可显示应用名称及功能简介的元素或鼠标hover悬停时可显示该子应用的名称及功能简介。
步骤303、响应用户对子应用图标的操作指令，生成并存储应用配置信息。
其中，响应用户对子应用图标的拖拽操作，生成子应用的布局属性；响应用户对子应用图标的尺寸调整操作，生成子应用的尺寸属性。页面中可开启页面的dragable属性使其能使用鼠标拖动，并且使用HTML5提供的drag API监听drag事件，当触发drag事件时，记录该元素所对应的子应用信息，使用HTML5提供的dragAPI监听drop事件，此时记录drop触发时所在坐标所属区域，从而为drop的元素(子应用入口图标)记录布局坐标并保存位置数据，记录该元素左上角顶点所在坐标为Layout中数据的left和top，用于后续步骤中还原子应用页面显示区域的位置；用户拖动元素边框从而修改元素宽度与高度，并记录该数据为Layout中数据的width和layout，用于后续步骤中还原子应用页面的显示区域大小。另外，本步骤中还可以点击元素设置子应用入口图标样式，还可以拖动元素进行事件设置，例如：拖拽元素中心点至需要建立联系的元素中心点，选择事件名称与对应的事件处理函数。应用配置信息可通过图1中所示的配置微服务将配置数据保存至后端数据库或特定的JSON文件(例如图1中的config.json文件)中，便于步骤202中通过API接口请求配置微服务进行获取。
本发明实施例提供的一种微前端可配置页面生成方法，首先，获取用户身份标识；根据用户身份标识，获取基座应用的应用配置信息，该应用配置信息包括至少一个子应用的标题、名称、标识、页面地址、布局属性、尺寸属性、监听事件和触发事件；根据基座应用的应用配置信息，获取子应用的页面静态资源文件，绑定监听事件及触发事件，还原子应用的位置和大小，渲染生成微前端入口页面，该微前端入口页面按照用户个性化应用配置信息生成，实现了个性化的入口页面搭建，自定义设置每个子应用的标题、名称、标识、页面地址、布局属性、尺寸属性、监听事件和触发事件，解决了现有微前端设计模式不能灵活配置入口页面、布局样式、子应用组合方式的技术问题。
进一步地，作为图2方法的具体实现，本申请实施例中提供了一种基于微前端可配置页面生成装置，如图4所示，该装置包括：
第一获取模块410，用于获取用户身份标识；
第二获取模块420，用于根据用户身份标识，获取基座应用的应用配置信息，其中，应用配置信息包括至少一个子应用的标题、名称、标识、页面地址、布局属性、尺寸属性、监听事件和触发事件；
页面生成模块430，用于根据基座应用的应用配置信息，获取子应用的页面静态资源文件，绑定监听事件及触发事件，还原子应用的位置和大小，渲染生成微前端入口页面。
本发明实施例提供的一种微前端可配置页面生成装置，第一获取模块获取用户身份标识；第二获取模块根据用户身份标识，获取基座应用的应用配置信息，该应用配置信息包括至少一个子应用的标题、名称、标识、页面地址、布局属性、尺寸属性、监听事件和触发事件；页面生成模块根据基座应用的应用配置信息，获取子应用的页面静态资源文件，绑定监听事件及触发事件，还原子应用的位置和大小，渲染生成微前端入口页面，该微前端入口页面按照用户个性化应用配置信息生成，实现了个性化的入口页面搭建，自定义设置每个子应用的标题、名称、标识、页面地址、布局属性、尺寸属性、监听事件和触发事件，解决了现有微前端设计模式不能灵活配置入口页面、布局样式、子应用组合方式的技术问题。
本申请实施例中提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现以下步骤：
获取用户身份标识；
根据用户身份标识，获取基座应用的应用配置信息，其中，应用配置信息包括至少一个子应用的标题、名称、标识、页面地址、布局属性、尺寸属性、监听事件和触发事件；
根据基座应用的应用配置信息，获取子应用的页面静态资源文件，绑定监听事件及触发事件，还原子应用的位置和大小，渲染生成微前端入口页面。
本申请实施例中提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：
获取用户身份标识；
根据用户身份标识，获取基座应用的应用配置信息，其中，应用配置信息包括至少一个子应用的标题、名称、标识、页面地址、布局属性、尺寸属性、监听事件和触发事件；
根据基座应用的应用配置信息，获取子应用的页面静态资源文件，绑定监听事件及触发事件，还原子应用的位置和大小，渲染生成微前端入口页面。
需要说明的是，上述关于计算机可读存储介质或计算机设备所能实现的功能或步骤，可对应参阅前述方法实施例中，服务端侧以及客户端侧的相关描述，为避免重复，这里不再一一描述。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。
所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。
以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。