一种拓展微前端中基座应用场景的方法、装置及存储介质与流程

计算;推算;计数设备的制造及其应用技术1.本发明涉及微前端技术领域，尤其涉及一种拓展微前端中基座应 用场景的方法、装置及存储介质。背景技术：2.微前端是微服务的web前端架构，它将微服务的理念应用于浏览 器端，能将单一web前端应用聚合，提供给用户使用。且聚合的各个 前端应用可以独立开发、独立部署、独立运行。3.现有技术中，聚合的子应用通过微前端中的基座(即主应用)管 理，目前，主应用管理子应用的方式是：主应用只在页面内提供对应 各个子应用的不同链接，将链接作为激活不同子应用的入口，子应用 激活时，主应用调用子应用，并为子应用提供对应的框架页面进行加 载。主应用聚合的子应用都在主应用的框架页面中加载，但不同的子 应用有可能会有不同的需求，例如有的子应用不提供菜单，只提供功 能页面和链接，那么主应用提供的框架页面就需要具有统一管理子应 用菜单的能力；有的子应用有自己的菜单，但是需要主应用来管理登 录用户并在顶端显示登录信息，那么主应用提供的框架页面应有顶端 显示登录用户信息的状态栏；还有的子应用除依赖主应用加载页面外， 登录信息和菜单都由自己实现，那么主应用只提供子应用的内容区即 可；还有的子应用内部有诸如可视化大屏或其他需要全屏显示的功能， 那么主应用只提供一个空的框架即可。由于子应用场景需求的多样化， 目前技术中，主应用新增聚合子应用时，尤其是聚合第三方子应用时， 由于主应用适配的子应用固定，主应用为子应用提供的框架页面中的 内容一成不变，可能会面临需要未适配的应用场景，无法应对新增子 应用多样化的业务场景和页面形式。技术实现要素：4.为了解决上述技术问题或者至少部分地解决上述技术问题，本发 明提供一种拓展微前端中基座应用场景的方法、装置及存储介质。5.第一方面，本发明提供一种拓展微前端中基座应用场景的方法， 包括：6.在基座中配置可增删页面子部分的页面框架和若干可增删的页面 子部分；7.在基座中约定规则，所述规则将页面框架中包含不同页面子部分 的情况和不同的标志参数一一对应；8.将待聚合到基座的新增子应用在基座中注册时，基于子应用对页 面框架中包含的页面子部分的需求查询所述规则以获取标志参数，将 标志参数按设定格式添加到子应用的路由路径中；9.使用聚合于基座的任一子应用时，基座解析该子应用的路由路径 获取的标志参数，并基于标志参数和规则确定该子应用需要页面框架 中需增加的全部页面子部分，基座构建并提供相应页面框架来加载该 子应用。10.更进一步地，所述页面子部分包括：用于显示状态的状态页面子 部分、用于显示菜单的菜单页面子部分和用于显示内容的内容页面子 部分。11.更进一步地，将待聚合到基座的新增子应用在基座中注册时，基 座记录内容包括：新增子应用的ip地址、端口和服务名称；12.基座将服务名称与新增子应用的ip地址、端口关联建立对应关系；13.基座为新增子应用配置路由路径，将新增子应用的服务名称按预 设格式添加到新增子应用的根路由路径中。14.更进一步地，利用路由路径使用聚合于基座的子应用中的任一子 应用时，基座解析该子应用路由路径中的服务名称，并基于服务名称 和对应关系获取该子应用的ip地址和端口，进而通过该子应用的ip 地址和端口激活该子应用，将被激活子应用的内容加载到基座提供的 页面框架。15.更进一步地，在一子应用中配置需求数据，其中，所述需求数据 配置了该子应用所需的页面框架需增加的全部页面子部分；子应用注 册到基座时，将需求数据传递给基座，基座利用需求数据查询所述规 则获取对应需求数据的标志参数。16.更进一步地，在基座中预设各个页面子部分默认样式和在页面框 架中的默认布局位置，按各个页面子部分的默认样式和默认布局位置 在页面框架中添加页面子部分。17.更进一步地，在需个性化定制页面框架的子应用中为子应用所需 页面框架中包含的各个页面子部分添加相应的样式变量和布局位置变 量，并个性化赋值形成装饰参数集；18.子应用在基座注册时，基座获取装饰参数集，将装饰参数集按预 设格式添加到子应用的路由路径；19.使用任一子应用时，基座解析该子应用路由路径获取其装饰参数 集，并根据装饰参数集修改相应页面子部分的默认样式和默认布局位 置，按修改后样式和修改后布局在页面框架中添加页面子部分。20.更进一步地，在基座中预设各个页面子部分默认样式和在页面框 架中的默认布局位置，对于未配置装饰参数集的子应用，基座构建其 所需页面框架时，按照各个页面子部分默认样式和在页面框架中的默 认布局位置在页面框架中添加页面子部分。21.第二方面，本发明提供一种拓展微前端中基座应用场景的装置， 包括：处理单元、存储单元、通讯单元、显示单元和总线单元，所述 处理单元、存储单元、通讯单元和显示单元通过总线连接，所述通讯 单元通过网络通讯连接后端服务端，所述存储单元存储至少一条指令， 所述处理单元读取执行所述指令实现所述的拓展微前端中基座应用场 景的方法。22.第三方面，本发明提供一种存储介质，所述存储介质存储至少一 条指令，读取并执行所述指令，实现所述拓展微前端中基座应用场景 的方法。23.本发明实施例提供的上述技术方案与现有技术相比具有如下优 点：24.本发明中，在基座中配置可增删页面子部分的页面框架、可增删 到页面子部分和规则，所述规则将页面框架中包含不同页面子部分的 情况和不同的标志参数一一对应。子应用在基座中注册时，基于子应 用对页面框架中包含的页面子部分的需求查询所述规则以获取标志参 数，将标志参数按设定格式添加到子应用的路由路径中；基座可利用 任一子应用包含标志参数路由路径解析出该子应用的标志参数，并基 于标志参数和规则确定该子应用需要页面框架中需增加的全部页面子 部分，基座构建并提供相应页面框架来加载该子应用。基座根据子应 用的页面框架需求提供相应的页面框架来渲染加载子应用的数据，实 现基座对需要不同页面框架的子应用的自主适应，大大提高基座对不 同子应用的兼容性的适用范围，拓展了基座的应用场景。附图说明25.此处的附图被并入说明书中并构成本说明书的一部分，示出了符 合本发明的实施例，并与说明书一起用于解释本发明的原理。26.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面 将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而 易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前 提下，还可以根据这些附图获得其他的附图。27.图1为本发明实施例提供的一种拓展微前端中基座应用场景的方 法的流程图；28.图2为图1所示方法中基座基于子应用对页面架构中包含页面子 部分的需求，配置子应用的路由路径的流程图；29.图3为图1所示方法中基座基于所使用子应用的路由路径中的标 志参数构建并提供相应的页面框架的流程图；30.图4为图1所示方法中基座基于所使用子应用的路由路径中的服 务名称激活子应用的流程图；31.图5为实施例2中基于需个性化定制页面框架的子应用的装饰参 数集创建该子应用的路由路径的流程图；32.图6为实施例2中基座基于所使用子应用的路由路径中的标志参 数和装饰参数集或标志参数构建并提供相应的页面框架的流程图；33.图7为本发明实施例提供一种拓展微前端中基座应用场景的装置 示意图。具体实施方式34.为使本发明实施例的目的、技术方案和优点更加清楚，下面将结 合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、 完整地描述，显然，所描述的实施例是本发明的一部分实施例，而不 是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没 有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明 保护的范围。35.需要说明的是，在本文中，术语“包括”、“包含”或者其任何 其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、 方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的 其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的 要素。在没有更多限制的情况下，由语句“包括一个……”限定的要 素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在 另外的相同要素。36.实施例137.参阅图1所示，本发明实施例提供一种拓展微前端中基座应用场 景的方法，包括：38.s100，基座基于子应用对页面架构中包含页面子部分的需求，配 置子应用的路由路径。具体实施过程中，参阅图2所示，基座基于子 应用对页面架构中包含页面子部分的需求，配置子应用的路由路径包 括：39.s101，在基座中配置可增删页面子部分的页面框架和若干可增删 的页面子部分。具体的，所述页面子部分包括：用于显示状态的状态 页面子部分，一种状态页面子部分如显示用户登录信息和登录状态的 状态栏；用于显示菜单的菜单页面子部分，一种菜单页面子部分如显 示管理子应用菜单的菜单栏；用于显示内容的内容页面子部分，一种 内容页面子部分如显示子应用内容的内容窗口。40.基座在页面框架中灵活添加页面子部分，具体的，在基座中预设 各个页面子部分默认样式和在页面框架中的默认布局位置，按各个页 面子部分的默认样式和默认布局位置在页面框架中添加页面子部分。41.s102，在基座中约定规则，所述规则将页面框架中包含不同页面 子部分的情况和不同的标志参数一一对应。若基座用定义了n个页面 子部分，则需个标志参数来表征全部的页面框 架和页面子部分组合情况。具体的，如定义“empty”标志参数，对应 页面框架中不添加任何页面子部分的情况。42.s103，将待聚合到基座的新增子应用在基座中注册时，基座基于 子应用对页面框架中包含的页面子部分的需求查询所述规则以获取标 志参数，基座获取子应用服务名称。具体实施过程中，在一子应用中 配置需求数据，其中，所述需求数据配置了该子应用所需的页面框架 需增加的全部页面子部分。该子应用注册到基座时，将需求数据传递 给基座。基座利用需求数据查询所述规则获取对应需求数据的标志参 数。具体实施过程中，将待聚合到基座的新增子应用在基座中注册时， 基座记录获取的内容还包括：新增子应用的ip地址、端口和服务名称； 基座将服务名称与新增子应用的ip地址、端口关联建立对应关系。43.s104，基座将子应用的标志参数和子应用对应的服务名称按设定 格式添加到子应用的路由路径中。具体的，基座将对应子应用需求数 据的标志参数按设定格式添加到该子应用的路由路径中，将应用的服 务名称按预设格式添加到新增子应用的根路由路径中。44.s200，基座基于所使用子应用的路由路径中的标志参数构建并提 供相应的页面框架。具体实施过程中，参阅图3所示，基座基于所使 用子应用的路由路径中的标志参数构建并提供相应的页面框架包括：45.s201，基座解析子应用的路由路径获取的标志参数。使用聚合于 基座的任一子应用时，向基座传输该子应用的路由路径，基座解析该 子应用的路由路径获取该子应用的标志参数。46.s202，基座基于标志参数和规则确定该子应用需要页面框架中需 增加的全部页面子部分。47.s203，基座按s202中所确定的需增加的全部页面子部分构建并提 供相应页面框架。48.s300，基座基于所使用子应用的路由路径中的服务名称激活子应 用。具体实施过程中，参阅图4所示，基座基于所使用子应用的路由 路径中的服务名称激活子应用包括：49.s301，基座解析子应用路由路径获取服务名称。使用聚合于基座 的任一子应用时，向基座传输该子应用的路由路径，基座解析该子应 用的路由路径获取该子应用的服务名称。50.s302，基座基于服务名称和对应关系获取该子应用的ip地址和端 口。51.s303，基座通过该子应用的ip地址和端口激活该子应用。52.s400，将被激活子应用的内容渲染加载到基座为该子应用提供的 相应页面框架。53.实施例254.实施例2相比实施例1区别在于，将基座中页面子部分的默认样 式和默认布局位置配置为可调整的，使基座为需个性化定制的子应用 提供个性化的页面框架。具体的，利用页面子部分的样式变量构建各 个页面子部分的样式实例，并为样式变量赋值默认值将样式实例初始 化，利用页面子部分的布局位置变量构建各个页面子部分的布局实例， 并为布局位置变量赋值默认值将布局实例初始化。为布局实例和样式 实例提供传参接口使得样式实例中的样式变量能够从装饰参数集获取 相应的样式变量赋值，使得布局实例中的布局位置变量能够从装饰参 数局中获取相应的布局位置变量赋值。55.实施例2提供的一种拓展微前端中基座应用场景的方法还包括：56.基于需个性化定制页面框架的子应用的装饰参数集创建该子应用 的路由路径。参阅图5所示，过程如下：57.s11,在需个性化定制页面框架的子应用中为子应用所需页面框架 中包含的各个页面子部分添加相应的样式变量和布局位置变量并个性 化赋值，形成装饰参数集。58.s12，配置有装饰参数集的子应用在基座注册时，基座获取装饰参 数集。59.s13，基座将装饰参数集按预设格式添加到子应用的路由路径。若 子应用并未配置装饰参数集则其路由路径中不包含装饰参数集。60.实施例2提供的一种拓展微前端中基座应用场景的方法中，基座 基于所使用子应用的路由路径中的标志参数和装饰参数集或标志参数 构建并提供相应的页面框架。参阅图6所示，过程包括：61.s21，基座获取所使用子应用的路由路径。使用聚合于基座的任一 子应用时，向基座传输该子应用的路由路径。62.s22，基座检测其路由路径中是否含有装饰参数集；是则执行s23， 否则执行s25。63.s23，基座解析该子应用路由路径获取其装饰参数集，并根据装饰 参数集修改基于标志参数所增页面子部分的样式实例中的样式变量赋 值和/或布局实例中的布局位置变量赋值。64.s24，基座构建该子应用所需页面框架时，按修改后样式和修改后 布局在页面框架中添加页面子部分。65.s25，基座构建该子应用所需页面框架时，按照各个页面子部分默 认样式和在页面框架中的默认布局位置在页面框架中添加页面子部 分。66.实施例367.参阅图7所示，本发明实施例提供一种拓展微前端中基座应用场 景的装置，包括：处理单元、存储单元、通讯单元、显示单元和总线 单元，所述处理单元、存储单元、通讯单元和显示单元通过总线连接， 所述通讯单元通过网络通讯连接后端服务端，所述存储单元存储至少 一条指令，所述处理单元读取执行所述指令实现所述的拓展微前端中 基座应用场景的方法。68.实施例469.本发明实施例提供一种存储介质，所述存储介质存储至少一条指 令，读取并执行所述指令，实现所述拓展微前端中基座应用场景的方 法。70.本发明中，在基座中配置可增删页面子部分的页面框架、可增删 到页面子部分和规则，所述规则将页面框架中包含不同页面子部分的 情况和不同的标志参数一一对应。子应用在基座中注册时，基于子应 用对页面框架中包含的页面子部分的需求查询所述规则以获取标志参 数，将标志参数按设定格式添加到子应用的路由路径中；基座可利用 任一子应用包含标志参数路由路径解析出该子应用的标志参数，并基 于标志参数和规则确定该子应用需要页面框架中需增加的全部页面子 部分，基座构建并提供相应页面框架来加载该子应用。基座根据子应 用的页面框架需求提供相应的页面框架来渲染加载子应用的数据，实 现基座对需要不同页面框架的子应用的自主适应，大大提高基座对不 同子应用的兼容性的适用范围，拓展了基座的应用场景。71.本发明中对于配置了装饰参数集的子应用，将其装饰参数集添加 到路由路径中，基座基于路由路径中的标志参数和装饰参数集配合构 建相应的页面框架。其中，标志参数能够确定需增的页面子部分，装 饰参数集能够修改页面子部分的样式和布局位置。基座按修改的样式 和布局位置配置页面子部分。针对为配置装置参数集的子应用，基座 仅基于标志参数确定需增的页面子部分，并按默认样式和默认布局位 置配置需增的页面子部分。使基座能满足不同子应用页面框架的个性 化定制。72.在本发明所提供的实施例中，应该理解到，所揭露的装置和方法， 可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示 意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实 现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以 集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显 示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接 口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的 形式。73.所述作为分离部件说明的单元可以是或者也可以不是物理上分开 的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位 于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需 要选择其中的部分或者全部单元来实现本实施例方案的目的。74.另外，在本发明各个实施例中的各功能单元可以集成在一个处理 单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单 元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现， 也可以采用软件功能单元的形式实现。75.以上所述仅是本发明的具体实施方式，使本领域技术人员能够理 解或实现本发明。对这些实施例的多种修改对本领域的技术人员来说 将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精 神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限 制于本文所示的这些实施例，而是要符合与本文所申请的原理和新颖 特点相一致的最宽的范围。









图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!




内容声明：本文中引用的各种信息及资料（包括但不限于文字、数据、图表及超链接等）均来源于该信息及资料的相关主体（包括但不限于公司、媒体、协会等机构）的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理！本站为非盈利性质站点,发布内容不收取任何费用也不接任何广告!




免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理，本文部分文字与图片资源来自于网络，部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!的,若有来源标注错误或侵犯了您的合法权益，请立即通知我们，情况属实，我们会第一时间予以删除，并同时向您表示歉意,谢谢!