CN115268914A - 基于模块化的微前端页面生成方法、装置、设备及介质 - Google Patents

Abstract

本申请涉及一种基于模块化的微前端页面生成方法、装置、设备及介质，其中方法包括：基于预设指令，构建主页面，并获取开发端在主页面上所配置的数据库配置信息和页面数据配置信息；将数据库配置信息和页面数据配置信息对应的前端代码进行打包发布处理，得到目标组件；若接收到目标系统的微前端页面生成请求，获取目标组件，并配置目标组件对应的主界面路由，将主界面路由挂载到目标系统中，以使得在目标系统显示主页面；获取子页面路由，并将子页面路由挂载到目标系统中；通过配置目标系统对应的服务器代理，以使得目标系统生成微前端页面。本发明实现模块化和自动化生成微前端页面，有利于提高微前端页面生成的效率。

Description

基于模块化的微前端页面生成方法、装置、设备及介质

技术领域

本申请涉及前端页面技术领域，尤其涉及一种基于模块化的微前端页面生成方法、装置、设备及介质。

背景技术

在实际业务开发中，随着系统版本不断迭代、功能不断增加，原有的系统会越来越大，公共功能也会越来越多，而有的系统很多页面只需要增删改查功能，展示形式基本一致。面对此类大量频繁出现的公共功能，现有的应对方法主要采用自动生成表单或使用java等后台技术自动生成页面；然而这些方法缺乏与后端数据库的交互逻辑，使得在前后端分离的系统中无法自动生成页面，从而导致微前端页面生成效率较低。

发明内容

本申请实施例的目的在于提出一种基于模块化的微前端页面生成方法、装置、设备及介质，以实现在前后端分离系统中自动生成页面，提高微前端页面生成的效率。

为了解决上述技术问题，本申请实施例提供一种基于模块化的微前端页面生成方法，包括：

基于预设指令，构建主页面，并获取开发端在所述主页面上所配置的数据库配置信息和页面数据配置信息；

通过创建公共组件库的方式，将所述数据库配置信息和所述页面数据配置信息对应的前端代码进行打包发布处理，得到目标组件；

若接收到目标系统的微前端页面生成请求，从公共组件库中获取所述目标组件，并配置所述目标组件对应的主界面路由，将所述主界面路由挂载到所述目标系统中，以使得在所述目标系统显示所述主页面；

获取所述开发端在所述主页面中所配置的子页面配置信息，并基于所述子页面配置信息获取子页面路由，并将所述子页面路由挂载到所述目标系统中；

通过配置所述目标系统对应的服务器代理，以使得所述目标系统生成微前端页面。

为了解决上述技术问题，本申请实施例提供一种基于模块化的微前端页面生成装置，包括：

配置信息获取模块，用于基于预设指令，构建主页面，并获取开发端在所述主页面上所配置的数据库配置信息和页面数据配置信息；

目标组件生成模块，用于通过创建公共组件库的方式，将所述数据库配置信息和所述页面数据配置信息对应的前端代码进行打包发布处理，得到目标组件；

主页面路由配置模块，用于若接收到目标系统的微前端页面生成请求，从公共组件库中获取所述目标组件，并配置所述目标组件对应的主界面路由，将所述主界面路由挂载到所述目标系统中，以使得在所述目标系统显示所述主页面；

子页面路由配置模块，用于获取所述开发端在所述主页面中所配置的子页面配置信息，并基于所述子页面配置信息获取子页面路由，并将所述子页面路由挂载到所述目标系统中；

微前端页面生成模块，用于通过配置所述目标系统对应的服务器代理，以使得所述目标系统生成微前端页面。

为解决上述技术问题，本发明采用的一个技术方案是：一种计算机设备，所述计算机设备包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器执行所述计算机程序时实现上述任意一项所述的基于模块化的微前端页面生成方法。

为解决上述技术问题，本发明采用的一个技术方案是：一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述任意一项所述的基于模块化的微前端页面生成方法。

本发明实施例提供了一种基于模块化的微前端页面生成方法、装置、设备及介质。其中，方法包括：基于预设指令，构建主页面，并获取开发端在主页面上所配置的数据库配置信息和页面数据配置信息；通过创建公共组件库的方式，将数据库配置信息和页面数据配置信息对应的前端代码进行打包发布处理，得到目标组件；若接收到目标系统的微前端页面生成请求，从公共组件库中获取目标组件，并配置目标组件对应的主界面路由，将主界面路由挂载到目标系统中，以使得在目标系统显示主页面；获取开发端在主页面中所配置的子页面配置信息，并基于子页面配置信息获取子页面路由，并将子页面路由挂载到目标系统中；通过配置目标系统对应的服务器代理，以使得目标系统生成微前端页面。本发明实施例将数据库配置信息和页面数据配置信息对应的前端代码打包成目标组件，在目标系统需要微前端页面生成时，直接获取目标组件，并配置对应的路由，再配置服务器代理，从而在前后端分离系统中，实现模块化和自动化生成微前端页面，有利于提高微前端页面生成的效率。

附图说明

为了更清楚地说明本申请中的方案，下面将对本申请实施例描述中所需要使用的附图作一个简单介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请实施例提供的基于模块化的微前端页面生成方法流程的一实现流程图；

图2是本申请实施例提供的基于模块化的微前端页面生成方法中子流程的又一实现流程图；

图3是本申请实施例提供的基于模块化的微前端页面生成方法中子流程的又一实现流程图；

图4是本申请实施例提供的基于模块化的微前端页面生成方法中子流程的又一实现流程图；

图5是本申请实施例提供的基于模块化的微前端页面生成方法中子流程的又一实现流程图；

图6是本申请实施例提供的基于模块化的微前端页面生成方法中子流程的又一实现流程图；

图7是本申请实施例提供的基于模块化的微前端页面生成装置示意图；

图8是本申请实施例提供的计算机设备的示意图。

具体实施方式

除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同；本文中在申请的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本申请；本申请的说明书和权利要求书及上述附图说明中的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。本申请的说明书和权利要求书或上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。

在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。

为了使本技术领域的人员更好地理解本申请方案，下面将结合附图，对本申请实施例中的技术方案进行清楚、完整地描述。

下面结合附图和实施方式对本发明进行详细说明。

需要说明的是，本申请实施例所提供的基于模块化的微前端页面生成方法一般由服务器执行，相应地，基于模块化的微前端页面生成装置一般配置于服务器中。

请参阅图1，图1示出了基于模块化的微前端页面生成方法的一种具体实施方式。

需注意的是，若有实质上相同的结果，本发明的方法并不以图1所示的流程顺序为限，该方法包括如下步骤：

S1：基于预设指令，构建主页面，并获取开发端在主页面上所配置的数据库配置信息和页面数据配置信息。

具体地，本申请实施例是运用在为前后端分离的系统中，实现微前端页面生成的方法。其中，微前端是指多个独立发布功能的团队一起构建现代化web应用程序的技术、策略和方法，将大而可怕的事物分割成更小、更易于管理的部分，然后明确它们之间的依赖关系。应用开发的技术选择、代码库、团队以及发布过程都能够相互独立地操作，而不需要过度地协调。

具体地，根据预设指令，构建一个主页面，将主页面返回开发端，以使得开发端能够在该主页面上配置数据库配置信息和页面数据配置信息。其中，预设指令是指构建主页面指令。当开发端完成数据库配置信息和页面数据配置信息的配置时，将数据库配置信息和页面数据配置信息转化为JSON文件的格式进行保存。

请参阅图2，图2示出了步骤S1的一种具体实施方式，详叙如下：

S11：基于预设指令，构建主页面。

S12：将主页面返回开发端，以使得开发端在主页面上配置数据库配置信息和页面数据配置信息。

S13：当开发端配置完数据库配置信息和页面数据配置信息配置完成时，获取数据库配置信息和页面数据配置信息，并将数据库配置信息和页面数据配置信息转化为JSON文件，并将JSON文件保存于数据库中。

具体地，数据库配置信息包括数据表名、数据库类型、表名、表字段、外键以及索引等，页面数据配置信息包括是否可新增和修改、字段是否显示在查询结果表格中、是否支持排序、显示的控件类型、控件长度、是否用于查询、是否包括默认值以及是否需要校验等。显示的控件类型包括文本框、密码、下拉框、单选框、多选框、开关、多行文本、下拉多选框、下拉搜索框、日期、省市区组件、联动组件以及平行组件等。

在本申请实施例中，构建一个主页面，将主页面返回开发端，开发端通过在主页面上填写表单的形式，来创建数据库数据和页面显示数据，也即配置数据库配置信息和页面数据配置信息。当开发端配置完数据库配置信息和页面数据配置信息配置完成时，获取数据库配置信息和页面数据配置信息，并将数据库配置信息和页面数据配置信息转化为JSON文件，并将JSON文件保存于数据库中。

进一步地，在主页面中配置路由功能，通过配置路由功能，能够获取页面路由地址。

请参阅图3，图3示出了步骤S1之后的一种具体实施方式，详叙如下：

S1A：响应同步数据库操作指令，创建数据库配置信息和页面数据配置信息对应的数据库信息。

S1B：若接收到预览指令，则基于数据库信息，将JSON文件生成预览页面，并将预览页面通过前端进行展示。

具体地，当在前端完成数据库配置信息和页面数据配置信息的配置后，开发端会向服务器发送同步数据库操作指令，服务器接收到同步数据库操作指令后，在后端创建数据库配置信息和页面数据配置信息对应的数据库信息。其中，数据库信息以数据库、配置信息对应表以及表字段组成。通过创建数据库配置信息和页面数据配置信息对应的数据库信息，实现前后端数据的交互。

进一步地，在完成数据同步后，开发端若想查看页面效果。开发端可以点击预览获取JSON文件，以向服务器发送预览指令，服务器响应预览指令，基于数据库信息，通过前后端数据的交互，将JSON文件生成预览页面，并将预览页面通过前端进行展示。

请参阅图4，图4示出了步骤S1B之后的一种具体实施方式，详叙如下：

S1C：若接收到页面修改指令，则将主页面、数据库配置信息以及页面数据配置信息返回开发端，以使得开发端在主页面上修改配置信息，得到配置修改信息。

S1D：将配置修改信息转化为JSON文件，并将JSON文件保存于数据库中。

具体地，开发端在查看预览页面后，若需要对页面修改，则向服务器发送页面修改指令，则服务器响应页面修改指令，将主页面、数据库配置信息以及页面数据配置信息返回开发端，以使得开发端在主页面上修改配置信息，得到配置修改信息，然后将配置修改信息重新转化为JSON文件，并将JSON文件保存于数据库中。

S2：通过创建公共组件库的方式，将数据库配置信息和页面数据配置信息对应的前端代码进行打包发布处理，得到目标组件。

具体地，通过创建公共组件库的方式，将数据库配置信息和页面数据配置信息对应的前端代码进行打包发布处理，生成一个安装包，也即生成目标组件。目标组件是一个公共组件库，任何系统需要使用时只需安装目标组件作为一个依赖包，配置出对应路由，便可以生成微前端页面。其中，创建公共组件库的方式是指将需要的代码进行打包成一个安装包，并将其路由对外进行暴露。

进一步地，目标组件会对外暴露出主界面路由路径。在需要目标组件时，可以快速获取到目标组件对应的主界面路由路径，从而便于创建出对应的主界面路由。

S3：若接收到目标系统的微前端页面生成请求，从公共组件库中获取目标组件，并配置目标组件对应的主界面路由，将主界面路由挂载到目标系统中，以使得在目标系统显示主页面。

具体地，上述步骤已经生成了一个目标组件，并且目标组件是一个公开组件库。所以在目标系统需要进行微前端页面生成时，向服务器发送微前端页面生成请求，服务器响应微前端页面生成请求，从公共组件库中获取目标组件，以使得目标组件安装于目标系统中，再配置目标组件对应的主界面路由和页面路由，且将主界面路由和页面路由挂载到目标系统中。其中，目标系统是指需要进行微前端页面生成的系统。

请参阅图5，图5示出了步骤S4的一种具体实施方式，详叙如下：

S31：若接收到目标系统的微前端页面生成请求，从公共组件库中获取目标组件，以使得目标组件安装于目标系统中。

S32：获取目标组件向外暴露的主界面路由路径，且基于主界面路由路径，通过Vue-router配置主界面路由。

S33：将主界面路由挂载到目标系统中，以使得在目标系统显示主页面。

具体地，若接收到目标系统的微前端页面生成请求，从公共组件库中获取目标组件，以使得目标组件安装于目标系统中。由于目标组合库会向外暴露主界面路由路径，所以通过获取目标组件向外暴露的主界面路由路径，然后根据主界面路由路径，通过Vue-router配置出主界面路由，最后将主界面路由挂载到目标系统中，以使得在目标系统显示主页面。

其中，路由是指用来跟后端服务器进行交互的一种方式，通过不同的路径来请求不同的资源，而请求不同的页面是路由的其中一种功能。Vue-router是vue.js官方路由管理器。vue的单页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。

请参阅图6，图6示出了步骤S32的一种具体实施方式，详叙如下：

S321：获取目标组件向外暴露的主界面路由路径，并通过Vue-router创建路由组件。

S322：构建路由组件与主界面路由路径的映射关系。

S323：基于映射关系，渲染路由组件，以配置主界面路由。

具体地，在通过Vue-router配置主界面路由过程中，先通过Vue-router创建路由组件，然后构建路由组件与主界面路由路径的映射关系，最后使用主界面路由，也即基于映射关系，将路由组件渲染成标签，然后标签根据当前的路径，渲染出不同的组件，从而实现配置主界面路由。

S4：获取开发端在主页面中所配置的子页面配置信息，并基于子页面配置信息获取子页面路由，并将子页面路由挂载到目标系统中。

具体地，在主界面路由挂载到目标系统后，在目标系统中显示出主页面，开发端可以再主页面配置子页面配置信息，每条子页面配置信息可以转为为一个JSON文件，并且每条子页面配置信息对应一个子页面路由。所以开发端可以在主页面上配置多条子页面配置信息，通过Vue-router基于子页面配置信息获取子页面路由，并将子页面路由挂载到目标系统中，从而使得目标系统可以实现显示子页面。

S5：通过配置目标系统对应的服务器代理，以使得目标系统生成微前端页面。

具体地，通过配置目标系统对应的服务器代理，实现目标系统的前后端数据进行交互，以使得目标系统生成微前端页面。

进一步的，步骤S5包括：获取目标系统的后端接口信息，并基于后端接口信息，配置目标系统对应的服务器代理，使得目标系统的前后端进行数据交互，以使得目标系统生成微前端页面。

具体地，通过后端接口信息，配置目标系统对应的服务器代理，实现前后端数据交互，从而实现目标系统生成微前端页面。若有多个子系统，可以配置多个子系统对应的服务器代理，实现在每个子系统中生成微前端页面。本实施中实现由主界面配置生成任意多个子界面，通过把子界面路由配置到本地Vue应用中，子界面即可成为本地Vue应用的界面，实现无需写一行代码即可配置出无限多个界面。

本实施例中，基于预设指令，构建主页面，并获取开发端在主页面上所配置的数据库配置信息和页面数据配置信息，且将数据库配置信息和页面数据配置信息转换为JSON文件；响应同步数据库操作指令，创建数据库配置信息和页面数据配置信息对应的数据库信息，若接收页面预览指令，则基于数据库信息，生成预览页面；通过创建公共组件库的方式，将数据库配置信息和页面数据配置信息对应的前端代码进行打包发布处理，得到目标组件；若接收到目标系统的微前端页面生成请求，从公共组件库中获取目标组件，并配置目标组件对应的主界面路由和页面路由，且将主界面路由和页面路由挂载到目标系统中；通过配置目标系统对应的服务器代理，以使得目标系统生成微前端页面。本发明实施例通过获取数据库配置信息和页面数据配置信息，并将其同步至后台数据库中，有利于前后端的数据交互；同时本申请实施例还将数据库配置信息和页面数据配置信息对应的前端代码打包成目标组件，在目标系统需要微前端页面生成时，直接获取目标组件，并配置对应的路由，再配置服务器代理，从而在前后端分离系统中，实现模块化和自动化生成微前端页面，有利于提高微前端页面生成的效率。

请参考图7，作为对上述图1所示方法的实现，本申请提供了一种基于模块化的微前端页面生成装置的一个实施例，该装置实施例与图1所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。

如图7所示，本实施例的基于模块化的微前端页面生成装置包括：配置信息获取模块61、目标组件生成模块62、主页面路由配置模块63、子页面路由配置模块64及微前端页面生成模块65，其中：

配置信息获取模块61，用于基于预设指令，构建主页面，并获取开发端在主页面上所配置的数据库配置信息和页面数据配置信息；

目标组件生成模块62，用于通过创建公共组件库的方式，将数据库配置信息和页面数据配置信息对应的前端代码进行打包发布处理，得到目标组件；

主界面路由配置模块63，用于若接收到目标系统的微前端页面生成请求，从公共组件库中获取目标组件，并配置目标组件对应的主界面路由，将主界面路由挂载到目标系统中，以使得在目标系统显示主页面；

子页面路由配置模块64，用于获取开发端在主页面中所配置的子页面配置信息，并基于子页面配置信息获取子页面路由，并将子页面路由挂载到目标系统中；

微前端页面生成模块65，用于通过配置目标系统对应的服务器代理，以使得目标系统生成微前端页面。

进一步的，主界面路由配置模块63包括：

目标组件提取单元，用于若接收到目标系统的微前端页面生成请求，从公共组件库中获取目标组件，以使得目标组件安装于目标系统中；

路由配置单元，用于获取目标组件向外暴露的主界面路由路径，且基于主界面路由路径，通过Vue-router配置主界面路由；

主界面挂载单元，用于将主界面路由挂载到目标系统中，以使得在目标系统显示主页面。

进一步的，路由配置单元包括：

路由组件创建子单元，用于获取目标组件向外暴露的主界面路由路径，并通过Vue-router创建路由组件；

映射关系子单元，用于构建路由组件与主界面路由路径的映射关系；

路由组件渲染子单元，用于基于映射关系，渲染路由组件，以配置主界面路由。

进一步的，配置信息获取模块61包括：

主页面构建单元，用于基于预设指令，构建主页面；

主页面返回单元，用于将主页面返回开发端，以使得开发端在主页面上配置数据库配置信息和页面数据配置信息，其中，数据库配置信息包括数据表名、数据库类型、表名、表字段、外键以及索引，页面数据配置信息包括是否可新增和修改、字段是否显示在查询结果表格中、是否支持排序、显示的控件类型、控件长度、是否用于查询、是否包括默认值以及是否需要校验；

配置信息存储单元，用于当开发端配置完数据库配置信息和页面数据配置信息配置完成时，获取数据库配置信息和页面数据配置信息，并将数据库配置信息和页面数据配置信息转化为JSON文件，并将JSON文件保存于数据库中。

进一步的，配置信息获取模块61之后还包括：

数据库信息创建模块，用于响应同步数据库操作指令，创建数据库配置信息和页面数据配置信息对应的数据库信息；

预览页面展示模块，用于若接收到预览指令，则基于数据库信息，将JSON文件生成预览页面，并将预览页面通过前端进行展示。

进一步的，预览页面展示模块之后还包括：

配置信息修改模块，用于若接收到页面修改指令，则将主页面、数据库配置信息以及页面数据配置信息返回开发端，以使得开发端在主页面上修改配置信息，得到配置修改信息；

修改信息转化模块，用于将配置修改信息转化为JSON文件，并将JSON文件保存于数据库中。

进一步的，微前端页面生成模块65包括：

数据交互单元，用于获取目标系统的后端接口信息，并基于后端接口信息，配置目标系统对应的服务器代理，使得目标系统的前后端进行数据交互，以使得目标系统生成微前端页面。

为解决上述技术问题，本申请实施例还提供计算机设备。具体请参阅图8，图8为本实施例计算机设备基本结构框图。

计算机设备7包括通过系统总线相互通信连接存储器71、处理器72、网络接口73。需要指出的是，图中仅示出了具有三种组件存储器71、处理器72、网络接口73的计算机设备7，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。其中，本技术领域技术人员可以理解，这里的计算机设备是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(Application SpecificI ntegrated Circuit，ASIC)、可编程门阵列(Field－Programmable Gate Array，FPGA)、数字处理器(Digital Signal Processor，DSP)、嵌入式设备等。

计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。计算机设备可以与用户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互。

存储器71至少包括一种类型的可读存储介质，可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器71可以是计算机设备7的内部存储单元，例如该计算机设备7的硬盘或内存。在另一些实施例中，存储器71也可以是计算机设备7的外部存储设备，例如该计算机设备7上配备的插接式硬盘，智能存储卡(SmartMedia Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。当然，存储器71还可以既包括计算机设备7的内部存储单元也包括其外部存储设备。本实施例中，存储器71通常用于存储安装于计算机设备7的操作系统和各类应用软件，例如基于模块化的微前端页面生成方法的程序代码等。此外，存储器71还可以用于暂时地存储已经输出或者将要输出的各类数据。

处理器72在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器72通常用于控制计算机设备7的总体操作。本实施例中，处理器72用于运行存储器71中存储的程序代码或者处理数据，例如运行上述基于模块化的微前端页面生成方法的程序代码，以实现基于模块化的微前端页面生成方法的各种实施例。

网络接口73可包括无线网络接口或有线网络接口，该网络接口73通常用于在计算机设备7与其他电子设备之间建立通信连接。

本申请还提供了另一种实施方式，即提供一种计算机可读存储介质，计算机可读存储介质存储有计算机程序，计算机程序可被至少一个处理器执行，以使至少一个处理器执行如上述的一种基于模块化的微前端页面生成方法的步骤。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本申请各个实施例的方法。

显然，以上所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例，附图中给出了本申请的较佳实施例，但并不限制本申请的专利范围。本申请可以以许多不同的形式来实现，相反地，提供这些实施例的目的是使对本申请的公开内容的理解更加透彻全面。尽管参照前述实施例对本申请进行了详细的说明，对于本领域的技术人员来而言，其依然可以对前述各具体实施方式所记载的技术方案进行修改，或者对其中部分技术特征进行等效替换。凡是利用本申请说明书及附图内容所做的等效结构，直接或间接运用在其他相关的技术领域，均同理在本申请专利保护范围之内。

Claims (10)

1.一种基于模块化的微前端页面生成方法，其特征在于，包括：

基于预设指令，构建主页面，并获取开发端在所述主页面上所配置的数据库配置信息和页面数据配置信息；

通过创建公共组件库的方式，将所述数据库配置信息和所述页面数据配置信息对应的前端代码进行打包发布处理，得到目标组件；

若接收到目标系统的微前端页面生成请求，从公共组件库中获取所述目标组件，并配置所述目标组件对应的主界面路由，将所述主界面路由挂载到所述目标系统中，以使得在所述目标系统显示所述主页面；

获取所述开发端在所述主页面中所配置的子页面配置信息，并基于所述子页面配置信息获取子页面路由，并将所述子页面路由挂载到所述目标系统中；

通过配置所述目标系统对应的服务器代理，以使得所述目标系统生成微前端页面。

2.根据权利要求1所述的基于模块化的微前端页面生成方法，其特征在于，所述若接收到目标系统的微前端页面生成请求，从公共组件库中获取所述目标组件，并配置所述目标组件对应的主界面路由，将所述主界面路由挂载到所述目标系统中，以使得在所述目标系统显示所述主页面，包括：

若接收到所述目标系统的微前端页面生成请求，从公共组件库中获取所述目标组件，以使得所述目标组件安装于所述目标系统中；

获取所述目标组件向外暴露的主界面路由路径，并基于所述主界面路由路径，通过Vue-router配置所述主界面路由；

将所述主界面路由挂载到所述目标系统中，以使得在所述目标系统显示所述主页面。

3.根据权利要求2所述的基于模块化的微前端页面生成方法，其特征在于，所述获取所述目标组件向外暴露的主界面路由路径，且基于所述主界面路由路径，通过Vue-router配置所述主界面路由，包括：

获取所述目标组件向外暴露的主界面路由路径，并通过所述Vue-router创建路由组件；

构建所述路由组件与所述主界面路由路径的映射关系；

基于所述映射关系，渲染所述路由组件，以配置所述主界面路由。

4.根据权利要求1所述的基于模块化的微前端页面生成方法，其特征在于，所述基于预设指令，构建主页面，并获取开发端在所述主页面上所配置的数据库配置信息和页面数据配置信息，包括：

基于所述预设指令，构建所述主页面；

将所述主页面返回所述开发端，以使得开发端在所述主页面上配置所述数据库配置信息和所述页面数据配置信息，其中，所述数据库配置信息包括数据表名、数据库类型、表名、表字段、外键以及索引，所述页面数据配置信息包括是否可新增和修改、字段是否显示在查询结果表格中、是否支持排序、显示的控件类型、控件长度、是否用于查询、是否包括默认值以及是否需要校验；

当所述开发端配置完所述数据库配置信息和所述页面数据配置信息配置完成时，获取所述数据库配置信息和所述页面数据配置信息，并将所述数据库配置信息和所述页面数据配置信息转化为JSON文件，并将所述JSON文件保存于数据库中。

5.根据权利要求1所述的基于模块化的微前端页面生成方法，其特征在于，所述基于预设指令，构建主页面，并获取开发端在所述主页面上所配置的数据库配置信息和页面数据配置信息，且将所述数据库配置信息和页面数据配置信息转换为JSON文件之后，所述方法还包括：

响应同步数据库操作指令，创建所述数据库配置信息和所述页面数据配置信息对应的数据库信息；

若接收到预览指令，则基于所述数据库信息，将所述JSON文件生成预览页面，并将所述预览页面通过前端进行展示。

6.根据权利要求5所述的基于模块化的微前端页面生成方法，其特征在于，所述若接收到预览指令，则基于所述数据库信息，将所述JSON文件生成预览页面，并将所述预览页面通过前端进行展示之后，所述方法还包括：

若接收到页面修改指令，则将所述主页面、所述数据库配置信息以及所述页面数据配置信息返回所述开发端，以使得所述开发端在所述主页面上修改配置信息，得到配置修改信息；

将所述配置修改信息转化为JSON文件，并将所述JSON文件保存于数据库中。

7.根据权利要求1至6任一项所述的基于模块化的微前端页面生成方法，其特征在于，所述通过配置所述目标系统对应的服务器代理，以使得所述目标系统生成微前端页面，包括：

获取所述目标系统的后端接口信息，并基于所述后端接口信息，配置所述目标系统对应的服务器代理，使得所述目标系统的前后端进行数据交互，以使得所述目标系统生成所述微前端页面。

8.一种基于模块化的微前端页面生成装置，其特征在于，包括：

配置信息获取模块，用于基于预设指令，构建主页面，并获取开发端在所述主页面上所配置的数据库配置信息和页面数据配置信息；

目标组件生成模块，用于通过创建公共组件库的方式，将所述数据库配置信息和所述页面数据配置信息对应的前端代码进行打包发布处理，得到目标组件；

主界面路由配置模块，用于若接收到目标系统的微前端页面生成请求，从公共组件库中获取所述目标组件，并配置所述目标组件对应的主界面路由，将所述主界面路由挂载到所述目标系统中，以使得在所述目标系统显示所述主页面；

子页面路由配置模块，用于获取所述开发端在所述主页面中所配置的子页面配置信息，并基于所述子页面配置信息获取子页面路由，并将所述子页面路由挂载到所述目标系统中；

微前端页面生成模块，用于通过配置所述目标系统对应的服务器代理，以使得所述目标系统生成微前端页面。

9.一种计算机设备，其特征在于，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器执行所述计算机程序时实现如权利要求1至7中任一项所述的基于模块化的微前端页面生成方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至7中任一项所述的基于模块化的微前端页面生成方法。

Images