(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210951813.3 (22)申请日 2022.08.09 (71)申请人 华润数字科技有限公司 地址 518000 广东省深圳市福田区梅林街 道梅都社区中康路136号深圳新一代 产业园2栋801 (72)发明人 谢平　田智慧　石小海　颉伟　 蔡迪昌　 (74)专利代理 机构 深圳市精英专利事务所 44242 专利代理师 李珂 (51)Int.Cl. G06F 8/38(2018.01) G06F 8/34(2018.01) G06F 9/445(2018.01) (54)发明名称 基于模块化的微前端页面生成方法、 装置、 设备及介质 (57)摘要 本申请涉及一种基于模块化的微前端页面 生成方法、 装置、 设备及介质， 其中方法包括： 基 于预设指令， 构建主页面， 并获取开发端在主页 面上所配置的数据库配置信息和页面数据配置 信息； 将数据库配置信息和页面数据配置信息对 应的前端代码进行打包发布处理， 得到目标组 件； 若接收到目标系统的微前端页面生成请求， 获取目标组件， 并配置目标组件对应的主界面路 由， 将主界面路由挂载到目标系统中， 以使得在 目标系统显示主页面； 获取子页面路由， 并将子 页面路由挂载到目标系统中； 通过配置目标系统 对应的服务器代理， 以使 得目标系统生成微前端 页面。 本发 明实现模块化和自动化生成微前端页 面， 有利于提高微前端页面 生成的效率。 权利要求书3页 说明书9页 附图4页 CN 115268914 A 2022.11.01 CN 115268914 A 1.一种基于模块 化的微前端页面 生成方法， 其特 征在于， 包括： 基于预设指令， 构建主页面， 并获取开发端在所述主页面上所配置的数据库配置信息 和页面数据配置信息； 通过创建公共组件库的方式， 将所述数据库配置信 息和所述页面数据配置信 息对应的 前端代码进行打包发布处 理， 得到目标组件； 若接收到目标系统的微前端页面生成请求， 从公共组件库中获取所述目标组件， 并配 置所述目标组件对应的主界面路由， 将所述主界面路由挂载到所述 目标系统中， 以使得在 所述目标系统显示所述主页面； 获取所述开发端在所述主页面中所配置的子页面配置信 息， 并基于所述子页面配置信 息获取子页面路由， 并将所述子页面路由挂载到所述目标系统中； 通过配置所述目标系统对应的服 务器代理， 以使得 所述目标系统生成微前端页面。 2.根据权利要求1所述的基于模块化的微前端页面生成方法， 其特征在于， 所述若接收 到目标系统的微前端页面生成请求， 从公共组件库中获取所述 目标组件， 并配置所述 目标 组件对应的主界面路由， 将所述主界面路由挂载到所述 目标系统中， 以使得在所述 目标系 统显示所述主页面， 包括： 若接收到所述目标系统的微前端页面生成请求， 从公共组件库中获取所述目标组件， 以使得所述目标组件安装于所述目标系统中； 获取所述目标组件向外暴露的主界面路由路径， 并基于所述主界面路由路径， 通过 Vue‑router配置所述主界面路由； 将所述主界面路由挂载到所述目标系统中， 以使得在所述目标系统显示所述主页面。 3.根据权利要求2所述的基于模块化的微前端页面生成方法， 其特征在于， 所述获取所 述目标组件向外暴露的主界面路由路径， 且基于所述主界面路由路径， 通过Vue ‑router配 置所述主界面路由， 包括： 获取所述目标组件向外暴露的主界面路由路径， 并通过所述Vue ‑router创建路由组 件； 构建所述路由组件与所述主界面路由路径的映射关系； 基于所述映射关系， 渲染所述路由组件， 以配置所述主界面路由。 4.根据权利要求1所述的基于模块化的微前端页面生成方法， 其特征在于， 所述基于预 设指令， 构建主页面， 并获取开发端在所述主页面上所配置的数据库配置信息和页面数据 配置信息， 包括： 基于所述预设指令， 构建所述主页面； 将所述主页面返回所述开发端， 以使得开发端在所述主页面上配置所述数据库配置信 息和所述页面数据配置信息， 其中， 所述数据库配置信息包括数据 表名、 数据库类型、 表名、 表字段、 外键以及索引， 所述页面数据配置信息包括是否可新增和修改、 字段是否显示在查 询结果表格中、 是否支持排序、 显示的控件类型、 控件长度、 是否用于查询、 是否包括默认 值 以及是否需要校验； 当所述开发端配置完所述数据库配置信 息和所述页面数据配置信 息配置完成时， 获取 所述数据库配置信息和所述页面数据配置信息， 并将所述数据库配置信息和所述页面数据 配置信息转 化为JSON文件， 并将所述JSON文件保存于数据库中。权　利　要　求　书 1/3 页 2 CN 115268914 A 25.根据权利要求1所述的基于模块化的微前端页面生成方法， 其特征在于， 所述基于预 设指令， 构建主页面， 并获取开发端在所述主页面上所配置的数据库配置信息和页面数据 配置信息， 且将所述数据库配置信息和页面数据配置信息转换为JSON文件之后， 所述方法 还包括： 响应同步数据库操作指令， 创建所述数据库配置信 息和所述页面数据配置信 息对应的 数据库信息； 若接收到预览指令， 则基于所述数据库信息， 将所述JS ON文件生成预览页面， 并将所述 预览页面 通过前端进行展示。 6.根据权利要求5所述的基于模块化的微前端页面生成方法， 其特征在于， 所述若接收 到预览指 令， 则基于所述数据库信息， 将所述 JSON文件生 成预览页面， 并将所述预览页面通 过前端进行展示之后， 所述方法还 包括： 若接收到页面修改指令， 则将所述主页面、 所述数据库配置信息以及所述页面数据配 置信息返回所述开发端， 以使得所述开发端在所述主页面上修改配置信息， 得到配置修改 信息； 将所述配置修改信息转 化为JSON文件， 并将所述JSON文件保存于数据库中。 7.根据权利要求1至6任一项所述的基于模块化的微前端页面生成方法， 其特征在于， 所述通过配置所述 目标系统对应的服务器代理， 以使得所述 目标系统生成微前端页面， 包 括： 获取所述目标系统的后端接口信息， 并基于所述后端接口信息， 配置所述目标系统对 应的服务器代理， 使得所述 目标系统的前后端进行数据 交互， 以使得所述 目标系统生成所 述微前端页面。 8.一种基于模块 化的微前端页面 生成装置， 其特 征在于， 包括： 配置信息获取模块， 用于基于预设指令， 构建主页面， 并获取开发端在所述主页面上所 配置的数据库配置信息和页面数据配置信息； 目标组件生成模块， 用于通过创建公共组件库的方式， 将所述数据库配置信息和所述 页面数据配置信息对应的前端代码进行打包发布处 理， 得到目标组件； 主界面路由配置模块， 用于若接收到目标系统的微前端页面生成请求， 从公共组件库 中获取所述 目标组件， 并配置所述 目标组件对应的主界面路由， 将所述主界面路由挂载到 所述目标系统中， 以使得在所述目标系统显示所述主页面； 子页面路由配置模块， 用于获取所述开发端在所述主页面中所配置的子页面配置信 息， 并基于所述子页面配置信息获取子页面路由， 并将所述子页面路由挂载到所述 目标系 统中； 微前端页面生成模块， 用于通过配置所述目标系统对应的服务器代理， 以使得所述目 标系统生成微前端页面。 9.一种计算机设备， 其特征在于， 包括存储器和处理器， 所述存储器中存储有计算机程 序， 所述处理器执行所述计算机程序时实现如权利要求 1至7中任一项 所述的基于模块化的 微前端页面 生成方法。 10.一种计算机可读存储介质， 其特征在于， 所述计算机可读存储介质上存储有计算机 程序， 所述计算机程序被处理器执行时实现如权利要求 1至7中任一项 所述的基于模块化的权　利　要　求　书 2/3 页 3 CN 115268914 A 3