CN112711418B - 多组件的前端界面布局方法、装置、电子设备和存储介质 - Google Patents

Abstract

本发明的实施例的提供了一种多组件的前端界面布局方法、装置、电子设备和存储介质，该多组件的前端界面布局方法包括：接收界面布局请求，界面布局请求包括请求布局的多个组件以及各组件的组件布局信息；根据各组件的组件布局信息确定多个组件中的父组件以及子组件；基于父组件的组件布局信息生成初始布局界面和与初始布局界面对应的初始界面标识；根据初始界面标识生成子组件的组件标识，基于子组件的组件标识和子组件的组件布局信息在初始布局界面上的基础上生成最终的布局界面。本发明实施例提供的多组件的前端界面布局方法，方法简洁，提高了前端界面的开发效率。

Description

多组件的前端界面布局方法、装置、电子设备和存储介质

技术领域

本发明涉及计算机技术领域，尤其涉及一种多组件的前端界面布局方法、装置、电子设备和存储介质。

背景技术

随着互联网和计算机技术的迅速发展和移动终端设备的普及，通过移动终端设备处理日常生活中的各种事情已经常态化。随之而来的，越来越多针对移动终端设备的服务业务进入日常生活的各个领域。为适应更多用户对服务业务的要求，使用户能够获得更好的使用体验，对服务业务的前端开发要求也越来越高。其中，前端开发是指创建并编写如服务程序页面、网页等用户界面的过程。但是开发前端界面布局构造是一项非常重要而又繁琐的工作，尤其是在例如金融业许多管理系统的界面布局中，数据项庞大复杂，而且层次嵌套深，如何高效的开发前端界面布局一直是个很大的挑战。

为了解决这种挑战，目前的前端开源框架虽然封装了各种布局组件，比如分割条、多页签等，但布局还是比较复杂，尤其是处理多层次组件的布局嵌套时，代码量非常大，层次太深，可读性较差。因此，如何提高前端界面的开发效率，成为目前界面开发过程中亟待解决的技术问题。

发明内容

本发明提供了一种多组件的前端界面布局方法、装置、电子设备和存储介质，目的在于提供一种减少开发时间，提高前端界面的开发效率的方法、装置、电子设备和存储介质，解决目前在前端界面开发过程中，代码量大导致可读性较差进而开发效率低的技术问题。

第一方面，本发明提供一种多组件的前端界面布局方法，所述方法包括：

接收界面布局请求，所述界面布局请求包括请求布局的多个组件以及各组件的组件布局信息；

根据所述各组件的组件布局信息确定所述多个组件中的父组件以及子组件；

基于所述父组件的组件布局信息生成初始布局界面和与所述初始布局界面对应的初始界面标识；

根据所述初始界面标识生成所述子组件的组件标识，基于所述子组件的组件标识和所述子组件的组件布局信息在所述初始布局界面上的基础上生成最终的布局界面。

在一实施例中，所述根据所述各组件的组件布局信息确定所述多个组件中的父组件以及子组件，包括：

根据所述各组件的组件布局信息，确定待布局界面的布局层级和与所述各组件的组件布局信息对应的组件配置顺序；

根据所述布局层级和所述组件配置顺序确定所述多个组件中的父组件以及子组件。

在一实施例中，所述根据所述各组件的组件布局信息确定所述多个组件中的父组件以及子组件，包括：

基于预设的组件配置数据库，确定与所述组件配置顺序对应的各组件的组件配置信息；

根据所述各组件的组件配置信息生成所述父组件以及子组件。

在一实施例中，所述基于所述父组件的组件布局信息生成初始布局界面和与所述初始布局界面对应的初始界面标识，包括：

基于所述父组件的组件布局信息，从预设的组件配置数据库中确定所述父组件的组件配置信息和组件标识；

根据所述父组件的组件配置信息生成所述初始布局界面；

基于所述父组件的组件标识生成与所述初始布局界面对应的初始界面标识。

在一实施例中，所述根据所述初始界面标识生成所述子组件的组件标识，基于所述子组件的组件标识和所述子组件的组件布局信息在所述初始布局界面上的基础上生成最终的布局界面，包括：

根据所述子组件的组件布局信息，从所述预设的组件配置数据库中获取所述子组件的组件配置信息；

根据所述初始界面标识和所述子组件的组件配置信息生成所述子组件的组件标识；

基于所述子组件的组件标识和所述子组件的组件配置信息在所述初始布局界面上的基础上生成最终的布局界面。

在一实施例中，所述根据所述布局层级和所述组件配置顺序确定所述多个组件中的父组件以及子组件，包括：

根据所述布局层级确定所述待布局界面的层级数目；

根据所述待布局界面的层级数目确定所述子组件中是否存在待布局的子组件；

当所述子组件中存在待布局的子组件时，所述基于所述子组件的组件标识和所述子组件的组件布局信息在所述初始布局界面上的基础上生成最终的布局界面，包括：

基于所述子组件的组件标识生成所述子组件中存在的待布局的子组件的组件标识，根据所述子组件中存在的待布局的子组件的组件标识和与其对应的组件布局信息生成最终的布局界面。

在一实施例中，所述基于所述子组件的组件标识和所述子组件的组件布局信息在所述初始布局界面上的基础上生成最终的布局界面，包括：

基于预设的组件配置数据库，确定所述父组件的组件配置信息和所述子组件的组件配置信息；

根据所述父组件的组件配置信息和所述子组件的组件配置信息在所述初始布局界面上进行渲染，得到最终的布局界面。

第二方面，本发明提供了一种界面布局装置，所述装置包括：

请求接收模块，用于接收界面布局请求；

组件确定模块，用于根据所述各组件的组件布局信息确定所述多个组件中的父组件以及子组件；

第一生成模块，用于基于所述父组件的组件布局信息生成初始布局界面和与所述初始布局界面对应的初始界面标识；

第二生成模块，用于根据所述初始界面标识生成所述子组件的组件标识，基于所述子组件的组件标识和所述子组件的组件布局信息在所述初始布局界面上的基础上生成最终的布局界面。

第三方面，本发明还提供一种电子设备，所述设备包括：

处理器；

存储器，存储有计算机程序，当所述计算机程序被处理器执行时，实现如上所述的任意一种多组件的前端界面布局方法。

第四方面，本发明还提供了一种存储指令的计算机可读存储介质，其中，当所述指令被至少一个计算装置运行时，促使所述至少一个计算装置执行如上所述的任意一种多组件的前端界面布局方法。

本发明的实施例的有益效果在于：

本发明实施例提供了一种多组件的前端界面布局方法、装置、电子设备和存储介质，该多组件的前端界面布局方法包括：接收界面布局请求，界面布局请求包括请求布局的多个组件以及各组件的组件布局信息；根据各组件的组件布局信息确定多个组件中的父组件以及子组件；基于父组件的组件布局信息生成初始布局界面和与初始布局界面对应的初始界面标识；根据初始界面标识生成子组件的组件标识，基于子组件的组件标识和子组件的组件布局信息在初始布局界面上的基础上生成最终的布局界面。本发明实施例提供的多组件的前端界面布局方法，根据布局组件信息，确定待布局界面上的父组件和子组件，并进一步根据父组件生成初始布局界面和初始界面标识，在初始布局界面的基础上，根据子组件生成最终的布局界面，通过初始界面标识将初始布局界面和最终生成的布局界面联系起来，形成布局界面中组件间的嵌套关系，由初始界面标识进一步得到最终的布局界面，通过扁平化的结构实现组件嵌套关系的布局，由此产生的界面布局方法简洁，提高了前端界面的开发效率。

附图说明

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

图1为本发明实施例多组件的前端界面布局方法的一种流程示意图；

图2为本发明实施例界面布局装置的逻辑功能结构示意图；

图3为本发明实施例界面布局后的界面展示效果示意图；

图4为本发明实施例界面布局后的界面展示效果示意图；

图5为本发明实施例界面布局后的界面展示效果示意图；

图6为本发明实施例界面布局后的界面展示效果示意图；

图7为本发明实施例界面布局后的界面展示效果示意图；

图8为本发明实施例电子设备的结构示意图；

图9为本发明实施例计算机存储介质的结构示意图。

具体实施方式

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

目前的前端开发技术主要包括两种方法，第一种是JQuery，JQuery是一个快速、简洁的JavaScript框架，比如jQuery EasyUI 为网页开发提供了一堆的常用UI组件，包括菜单、对话框、布局、窗帘、表格、表单等等组件，可以直接操作文档对象模型（DocumentObject Model，简称DOM）来创建组件，第二种是MVVM(Model-View-ViewModel)技术，是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。其中，主要包含Angular/React/Vue三个框架，最流行的是Vue框架，双向数据绑定的核心思想是，开发人员不直接操作DOM，而是只要修改组件的数据，组件会监听数据变化然后同步DOM的更新，开发人员只需面向业务对象数据编程，开发过程更为简便。

但是上述两种方法，无论是JQuery还是Vue，都是一种嵌套结构的超文本标记语言(Hyper Text Markup Language，简称html)标签或自定义标签，如果层次越深，则对应的代码嵌套也越深，代码量也非常庞大，可读性不好。进而导致上述两种方法的开发效率较低，为了解决这一技术问题，本发明实施例提出了一种多组件的前端界面布局方法，可以应用在金融业管理信息系统、银行管理系统中等，以下对本发明实施例的方案进行详细描述。

图1为本发明实施例多组件的前端界面布局方法的一种流程示意图。如图1所示，该多组件的前端界面布局方法可以应用在前端，例如电脑端（呈现在浏览器端）、手机端等，主要包括以下步骤：

步骤S101，接收界面布局请求；

该界面布局请求中可以包括请求布局的多个组件以及各组件的组件布局信息，当用户请求对前端界面进行创建或者重新进行布局时，会生成触发操作命令，例如请求创建一个新的界面、对当前界面进行重新布局、对界面上的某个组件的字段进行修改、添加某组件的字段或者删除某组件的字段等，可以是但不限于用户的点击操作、滑动操作、语音指令、手势控制操作和触摸操作等，或者其他非接触式触发操作命令。

示例性地，触发操作可以是点击某个页面中的图标、链接、下拉菜单等，响应于用户的触发操作，会生成界面布局请求，接收界面布局请求，该界面布局请求中可以包括用户请求布局的组件，这里的组件可以包括表单、表格、树型、查询框、卡片、实体值对象（valueobject，简称VO）等组件。

根据界面布局请求可以确定请求布局的多个组件，以及每个组件的组件布局信息。其中可以包括的组件可以为表单、表格、树型、查询框、卡片、实体值对象等，还可以包括的组件的具体信息，例如树型的具体结构，卡片的层次，表格的大小、查询框的长度和宽度等。通过界面布局请求中携带的组件布局信息可以确定待布局界面上的组件的布局位置（例如在界面的左侧还是右侧）、布局小大(所占页面上的面积)、布局方式（例如平铺、内部嵌套结构）等，便于进行后续布局组件的进一步配置。

步骤S102，根据各组件的组件布局信息确定多个组件中的父组件以及子组件；

在一实施例中，确定多个组件中的父组件以及子组件的方法可以包括：根据各组件的组件布局信息，确定待布局界面的布局层级和与各组件的组件布局信息对应的组件配置顺序；根据布局层级和组件配置顺序确定多个组件中的父组件以及子组件。根据各组件的组件布局信息中的组件的布局位置、布局小大、布局方式等布局信息可以确定待布局界面的布局层级，该布局层级可以包括各组件之间的层级关系，例如，组件1和组件2并列设置在界面的左右两侧，所占有的面积相同，组件3和组件2是嵌套关系，组件3设置于组件2内，此时该界面的布局层级数目是2，根据得到的布局层级可以确定各组件的组件配置顺序，例如，上述的例子中，组件1和组件2的组件配置顺序先于组件3，而组件配置顺序在先的可以确定为父组件，组件配置顺序在父组件之后的为子组件，即需要优先配置的为父组件，紧随父组件之后进行配置的为子组件。在本实施例中，布局层级可以确定当前需要布局的界面上共需要布局的组件之间的层级关系、层级数目等，布局层级与组件配置顺序结合可以确定当前需要布局的界面上组件的布局顺序。

在一实施例中，确定多个组件中的父组件以及子组件的方法可以包括：基于预设的组件配置数据库，确定与组件配置顺序对应的各组件的组件配置信息；根据各组件的组件配置信息生成父组件以及子组件。在本实施例中，可以先确定的布局组件信息中包括的待布局界面上的组件，例如该界面上需要包括的组件有分割器、页签、表格等，还可以包括需创建或布局的组件的个数，例如该界面上需要包括两个表格、三个分割器等。待布局界面包括的组件对应的配置数据，可以从预设的组件配置数据库获取，该预设的组件配置数据库是预先存储在前端内存中的数据库，预设的组件配置数据库中包括有各个组件的具体组件配置数据，可以包括界面中组件的组件标识、组件类型等，组件标识可以用于唯一识别该组件，具体可以为组件的URL（Uniform Resource Locator，统一资源定位器），以使界面组件加载装置根据该组件的URL实现对组件的加载。根据上述的得到组件配置顺序的方法，在预设的组件配置数据库中确定与组件配置顺序对应的各组件的组件配置信息，可以根据各组件的组件配置信息确定需要优先进行配置的组件，例如该组件中的信息，员工工号或者身份证号等唯一傻标识需要优先显示，则需要将该组件配置信息对应的组件优先显示，可以将该组件确定为父组件，而需要跟随员工工号或者身份证号显示的为员工姓名，则与包含员工姓名这一字段的配置信息对应的组件确定为子组件。

在一实施例中，根据布局层级和组件配置顺序确定多个组件中的父组件以及子组件的方法，还可以包括：

步骤S1021，根据布局层级确定待布局界面的层级数目；

步骤S1022，根据待布局界面的层级数目确定子组件中是否存在待布局的子组件；

步骤S1023，当子组件中存在待布局的子组件时，基于子组件的组件标识和子组件的组件布局信息在初始布局界面上的基础上生成最终的布局界面，包括：

步骤S1024，基于子组件的组件标识生成子组件中存在的待布局的子组件的组件标识，根据子组件中存在的待布局的子组件的组件标识和与其对应的组件布局信息生成最终的布局界面。

在本实施例中，可以根据布局层级确定待布局界面的层级数目，例如根据组件布局信息得到需要布局的层级为三层，应用于上述的例子中，如果在组件3中嵌套有组件4，则布局层级的数目为3。可以理解的是，当布局层级的数目为2时，可以确定各组件中的父组件以及子组件，当布局层级的数目为3时，可以确定子组件中是否存在待布局的子组件，即需要在子组件完成布局后需要布局的组件。当子组件中存在待布局的子组件时，可以理解为孙子组件，基于子组件的组件标识和子组件的组件布局信息在初始布局界面上的基础上生成最终的布局界面的方法为，在子组件的组件标识基础上，生成该孙子组件的组件标识，根据该孙子组件的组件标识和孙子组件的组件布局信息生成最终的布局界面，根据该孙子组件的组件标识，在预设的组件配置数据库获取与孙子组件的组件布局信息对应的孙子组件的组件配置数据，进行渲染得到最终的布局界面，需要说明的是，当布局层级为4时，说明该孙子组件中还存在待布局的子组件，需要在基于该孙子组件生成的布局界面的基础上，再生成最终的布局界面。下文将以具体的例子进一步阐述。

步骤S103，基于父组件的组件布局信息生成初始布局界面和与初始布局界面对应的初始界面标识；

在本步骤中，基于父组件的组件布局信息生成初始布局界面和与初始布局界面对应的初始界面标识，可以包括如下步骤：

步骤S1031，基于父组件的组件布局信息，从预设的组件配置数据库中确定父组件的组件配置信息和组件标识；

根据父组件的组件布局信息，从预设的组件配置数据库中确定父组件的组件配置信息和父组件的组件标识，各组件具有唯一的组件标识。

步骤S1032，根据父组件的组件配置信息生成初始布局界面；

在生成初始布局界面时，根据父组件的组件配置信息将界面进行第一次布局，例如，如果父组件的组件配置信息中包括添加一个分割器先进行界面的左右分割，那么得到的初始布局界面就是左右分割的界面，并且组件配置信息中还可以包括左右分割的比例是1:1，即得到的左右分割界面是对称的；如果父组件的组件配置信息中包括添加一个分割器进行界面的上下分割，那么得到的初始布局界面就是上下分割的界面，并且组件配置信息中还可以包括上下分割的比例是1:1，即得到的上下分割界面是对称的。

步骤S1033，基于父组件的组件标识生成与初始布局界面对应的初始界面标识；

在生成初始布局界面的同时，还会基于父组件的组件标识生成与初始布局界面对应的初始界面标识，例如上述例子中，父组件为分割器，组件标识为d1，生成的左右分割界面的标识分别为d1_A与d1_B，或者对应的，上下分割界面的标识分别为d1_A与d1_B，该初始界面标识不仅可以表明当前初始布局界面的组件关系，更重要的是，当存在需要进一步在当前初始布局界面进行嵌套的组件时，是基于当前的初始布局界面进一步生成的，嵌套后的布局界面上的组件标识是基于当前的初始布局界面的标识进一步生成的，因此初始界面标识是一个非常重要的参考参数，可以标识组件之间的嵌套关系，下文将以具体的例子进一步阐述。

步骤S104，根据初始界面标识生成子组件的组件标识，基于子组件的组件标识和子组件的组件布局信息在初始布局界面上的基础上生成最终的布局界面。

在本步骤中，根据初始界面标识生成子组件的组件标识，基于子组件的组件标识和子组件的组件布局信息在初始布局界面上的基础上生成最终的布局界面的方法可以包括：

步骤S1041，根据子组件的组件布局信息，从预设的组件配置数据库中获取子组件的组件配置信息；

步骤S1042，根据初始界面标识和子组件的组件配置信息生成子组件的组件标识；

步骤S1043，基于子组件的组件标识和子组件的组件配置信息在初始布局界面上的基础上生成最终的布局界面。

通过预设的组件配置数据库确定待布局界面中的子组件的组件配置信息，基于初始界面标识生成子组件的组件标识和子组件的组件配置信息生成子组件的组件标识。可以通过组件配置信息确定在初始布局界面上的基础上进一步需要配置布局的组件确定为子组件，在初始布局界面的基础之上，基于父组件的组件标识d1生成子组件的组件标识，例如，当父组件的组件标识为d1时，对应生成的子组件标识就是d1_A与d1_B，进而得到初始布局界面，即进行左右分割处理后的界面。

在一实施例中，基于子组件的组件标识和子组件的组件布局信息在初始布局界面上的基础上生成最终的布局界面，可以包括：基于预设的组件配置数据库，确定父组件的组件配置信息和子组件的组件配置信息；根据父组件的组件配置信息和子组件的组件配置信息在初始布局界面上进行渲染，得到最终的布局界面。在初始布局界面的基础上，根据父组件的组件配置信息和子组件的组件配置信息，将父组件和子组件的组件数据进行渲染，得到最终的布局界面。

需要说明的是，这里生成的最终的布局界面可能在初始布局界面上的基础上生成的，也可能不是，当各组件的组件布局信息还包括需要进一步布局的组件时，还可以在初始布局界面的基础上，进一步进行界面布局，直到根据界面布局请求，将请求布局的组件全部配置布局完成后，得到最终的布局界面。

本发明实施例提供了一种多组件的前端界面布局方法，该多组件的前端界面布局方法包括：接收界面布局请求，界面布局请求包括请求布局的多个组件以及各组件的组件布局信息；根据各组件的组件布局信息确定多个组件中的父组件以及子组件；基于父组件的组件布局信息生成初始布局界面和与初始布局界面对应的初始界面标识；根据初始界面标识生成子组件的组件标识，基于子组件的组件标识和子组件的组件布局信息在初始布局界面上的基础上生成最终的布局界面。本发明实施例提供的多组件的前端界面布局方法，根据布局组件信息，确定待布局界面上的父组件和子组件，并进一步根据父组件生成初始布局界面和初始界面标识，在初始布局界面的基础上，根据子组件生成最终的布局界面，通过初始界面标识将初始布局界面和最终生成的布局界面联系起来，形成布局界面中组件间的嵌套关系，由初始界面标识进一步得到最终的布局界面，通过扁平化的结构实现组件嵌套关系的布局，由此产生的界面布局方法简洁，提高了前端界面的开发效率。

在一实施例中，基于各组件的组件布局信息，确定多个组件中的父组件以及子组件，可以包括：针对各组件的组件布局信息，基于预设的组件配置数据库确定父组件动态组件配置信息以及子组件的动态组件配置信息。界面布局请求中可以包括请求布局的组件，这里的组件可以包括上述的表单、表格、树型、查询框、卡片、实体值对象等组件，根据界面布局请求中包括的内容，其中也可以包括对于某组件中字段的增加、删除、修改等操作，当需要对某组件中字段的增加、删除、修改等操作时，也会涉及到对当面界面的布局，基于预设的组件配置数据库生成待布局界面的动态组件配置信息，该动态组件配置信息是在前端内存生成的，可以用于直接对当前界面组件中配置的更改，通过预设的组件配置数据库，进一步读取组件的模板配置表，然后拼接字符串，动态组件配置信息可以在前端的内存中生成动态的html与js代码，并在前端的浏览器端输出。

示例性的，可以根据界面布局请求和预设的组件配置数据库中包括的各组件的配置信息，生成父组件以及子组件的动态组件配置信息，其中，预设的组件配置数据库中可以包括的各组件的配置信息具体内容如表1所示，表1为各组件的配置项和每个配置项对应的含义：

表1 各组件的配置项和每个配置项对应的含义

配置项	含义
		表格配置--是否有查询框	表格显示时，上面带不带查询条件框
表格配置--是否分页	表格是否显示与支持分页功能
		表格配置--列表分页条数	表格分页时，每页的记录数
表格配置--是否自动查询	表格创建后，是否立即查询数据
		表格配置--列表可否多选	表格是否支持多选，即行号是勾选框
表格配置--标题风格	表格左上角的标题显示风格
		表格配置--行高自适应	表格行高是否根据数据自动撑高与变化
表格配置--行高	表格每一行的高度
		表格配置--列表按钮	表格上面的按钮定义
卡片配置--控件行间距	卡片每一行控件之间的间距
		卡片配置--输入框高度	卡片中文本框，参照左边的文本框的高度
卡片配置--输入框字体	卡片中文本框，下拉框，多行文本框等输入控件的字体大小
		卡片配置--卡片是否带锚点	卡片是否自带锚点导航条，即右上角有一个导航条，点击后会自动跳转定位到对应的分组位置
卡片配置--卡片大小	卡片表单的最适宜大小,在弹出新增/修改窗口时，会根据这个配置决定窗口大小
		卡片配置--卡片按钮	卡片上面的按钮
卡片配置--卡片初始后逻辑	卡片创建后的初始化逻辑代码
		卡片配置--保存前逻辑	卡片表单保存数据前的校验逻辑代码
卡片配置--增/改窗口引入js	弹出新增/修改窗口后引入的自定义js
		树配置--树型模型	构造树的数据模型，有3种，第一种是id与parentid自关联,第二种是group，即一个表中多个字段分组统计，第三种是多张表关联
树配置--树是否勾(多)选	树是否是多选操作(也叫勾选)，多选即每个结点前面是个勾选框
		树配置--勾选联动Y	如果是勾选状态，在选中时，点击父结点时，所有子孙结点的是否也跟着联动被选中
树配置--勾选联动N	如果是勾选状态，在取消选中时，点击父结点时，所有子孙结点的是否也跟着联动被取消选中
		树配置--是否自动查询	树创建后是否立即查询数据
树配置--linkcode	树控件对应的物理表中的linkcode的字段名，即以00010001为样式拼接的编码
		树配置--linkname	树控件对应的物理表中的linkname的字段名，即把树的路径拼接在一起

如表1中所示，可以在界面上进行配置的组件有表格、卡片、树，这里仅仅是示例性的说明，还可以包括其它常用的组件，例如，表单、页签等。如表1中所示，具体在进行表格配置时，配置项可以为是否有查询框，对应的含义为表格显示时，带不带查询条件框；在进行树配置时，配置项可以为是否自动查询，对应的含义为树创建后是否立即查询数据，针对不同组件的不同配置项及其含义在此不一一赘述，具体内容参照表1。

在实际应用中，各个组件中还可能包括子组件，用户也可以对子组件中的配置项请求配置，各子组件的配置项及其含义如下表2所示：

表2 各子组件的配置项和每个配置项对应的含义

配置项	含义
		字段key	字段的唯一性key名,如果与数据库查询的字段名相同，就自动加载数据
字段名	字段显示的名称，即卡片中各控件前面的label显示名，在中文环境就是中文名称
		卡片配置--卡片是否显示	在卡片表单中是否显示该控件
卡片配置--卡片是否换行	在卡片表单中是否另起一行显示
		卡片配置--卡片是否可编辑	在卡片表单中是否可以编辑，不可编辑就是禁用状态
卡片配置--卡片宽度	在卡片表单中的控件显示宽度，可以是120,400*70的格式，即也定义前面Label宽度与控件高度
		卡片配置--参照点击前逻辑	点击参照右边的按钮时，预先做的校验逻辑
卡片配置--参照打开后初始化逻辑	点击参照弹出窗口后的初始化逻辑
		卡片配置--参加返回前校验逻辑	参加返回值时，做的校验逻辑，校验失败就不能返回
表格配置--列表是否显示	定义某字段是否在表格中显示,有的字段只在卡片中显示,有的只在表格中显示,有的都显示,有的都不显示
		表格配置--列表是否可编辑	某字段在表格中是否可以编辑
表格配置--列表是否分组	表格中是否参与分组
		表格配置--列表是否页脚汇总	表格最底下是否有汇总，只有数字框才可以汇总
表格配置--列表宽度	某字段在表格中显示的宽度
		查询配置--查询框是否显示	某字段是否在查询框中显示
查询配置--查询框是否换行	在查询框中是否换行显示
		查询配置--是否参与SQL计算	是否实际参与查询框的SQL条件计算与拼接
查询配置--查询框是否可编辑	在查询框中是否可以编辑
		查询配置--查询是否必输	查询框中是否是必输项，即必输查询条件
查询配置--查询控件宽度	查询框显示的宽度
		查询配置--查询控件定义	查询框中控件的定义，比如下拉框需要定义数据参数

如表2中所示，示例性的，各组件中还可以包括子组件，例如在进行表格配置时，配置项可以为列表是否分组时，对应的含义为表格中是否参与分组；在进行查询配置时，当配置项为查询框是否换行时，对应的含义为在查询框中是否换行显示，针对不同子组件的不同配置项及其含义在此不再一一赘述，具体参照表2中的内容所示。

本发明实施例中的自由界面布局的最后呈现效果是创建实际数据组件，比如如上所述的表格、表单、树，即创建在d1这个父组件上，或者创建在d1_A、d1_B这些自由布局生成的子组件上。

对于每个组件而言，根据该组件对应的组件配置信息，在该组件对应的界面位置处进行渲染，使得该组件可以在该位置显示相应的数据，比如该组件为表格，待生成的界面上的数据为表格的行数和列数，以及每个格子里的显示数据，位置为界面顶端，从而对在该组件进行渲染后，可以在界面顶端显示出该表格的具体内容。在对初始布局界面中的每个组件进行渲染后，可以生成待布局界面。

基于与图1所示的多组件的前端界面布局方法相同的发明构思，本发明实施例还提供了一种多组件的前端界面布局装置，如下面实施例所述。由于该装置解决问题的原理与图1中的多组件的前端界面布局方法相似，因此该装置的实施可以参见图1的多组件的前端界面布局方法的实施，重复之处不再赘述。其结构如图2所示，该多组件的前端界面布局装置20包括：请求接收模块21、组件确定模块22、第一生成模块23、第二生成模块24；其中，

布局信息确定模块21，用于接收界面布局请求；

组件确定模块22，用于根据各组件的组件布局信息确定多个组件中的父组件以及子组件；

第一生成模块23，用于基于父组件的组件布局信息生成布局界面和与初始布局界面对应的初始界面标识；

第二生成模块24，用于根据初始界面标识生成子组件的组件标识，基于子组件的组件标识和子组件的组件布局信息在初始布局界面上的基础上生成最终的布局界面。

在一实施例中，组件确定模块22，可以用于根据各组件的组件布局信息，确定待布局界面的布局层级和与各组件的组件布局信息对应的组件配置顺序；

根据布局层级和组件配置顺序确定多个组件中的父组件以及子组件。

在一实施例中，组件确定模块22，可以用于基于预设的组件配置数据库，确定与组件配置顺序对应的各组件的组件配置信息；

根据所述各组件的组件配置信息生成所述父组件以及子组件。

在一实施例中，组件确定模块22，可以用于根据布局层级确定待布局界面的层级数目；

根据待布局界面的层级数目确定多个组件中是否存在孙子组件；

当存在孙子组件时，第二生成模块24，可以用于基于子组件的组件标识生成孙子组件的组件标识，根据孙子组件的组件标识和孙子组件的组件布局信息生成最终的布局界面。

在一实施例中，第一生成模块23，可以用于基于父组件的组件布局信息，从预设的组件配置数据库中确定父组件的组件配置信息和组件标识；

根据父组件的组件配置信息生成初始布局界面；

基于父组件的组件标识生成与初始布局界面对应的初始界面标识。

在一实施例中，第二生成模块24，可以用于根据子组件的组件布局信息，从预设的组件配置数据库中获取子组件的组件配置信息；

根据初始界面标识和子组件的组件配置信息生成子组件的组件标识；

基于子组件的组件标识和子组件的组件配置信息在初始布局界面上的基础上生成最终的布局界面。

在一实施例中，第二生成模块24，可以用于基于预设的组件配置数据库，确定父组件和子组件的组件配置信息；

根据父组件和子组件的组件配置信息在初始布局界面上进行渲染，得到最终的布局界面。

下面通过一具体实施例对本发明实施例提供的多组件的前端界面布局方法及装置进行详细说明。

本发明实施例提供的多组件的前端界面布局方法，可以用较少的代码量，实现界面自由布局的效果，通过以下代码可以实现如图3所示的界面布局：

function AfterInit() {

YuXP.createSplit("d1", "左右", 250);

YuXP.createSplit("d1_B", "上下", '50%');

}

实现如图3所示的界面布局共两行代码，第一行代码的意思是把整个页面做左右分割，第二行代码的意思是把右边区域再做上下分割。

第一行代码在做左右分割时，当前页面的分割器作为父组件，父组件的组件标识为d1，在d1这个“父组件”上操作的，通过本发明实施例的多组件的前端界面布局方法在前端的内存中创建这两个“子组件”，此时的初始布局界面为一个左右分割的界面，初始界面标识别为d1_A与d1_B，第二行代码的含义是在右界面上进行上下分割，即在d1_B的基础上再做上下分割，在前端的内存中创建“子组件”d1_B的两个“子组件”，上面的界面标识为d1_B_A，下面的界面标识为d1_B_B，其中，d1、d1_A、d1_B、d1_B_A、d1_B_B这些组件在内存内部会形成“父亲-儿子-孙子”一样的嵌套层次关系，此时的布局层级为3，在内存内部生成的实际html代码有30行左右，但通过本发明实施例的多组件的前端界面布局方法，只通过两行代码即可实现，并且是在内存中动态创建，并不需要实际的html文件。

第一行代码在左右分割时，左边界面的宽度是250像素，第二行在上下分割时，上下区域的分割比例是50%，即各取一半。鼠标移到分割条上时，可以拖动改变左右或上下的宽度。

在一实施例中，通过以下代码可以实现如图4所示的界面布局：

function AfterInit() {

YuXP.createSplit("d1", "左右", 250);

YuXP.createSplit("d1_B", "上下", '50%');

YuXP.createSplit("d1_B_A", "左右", 300);

YuXP.createSplit("d1_B_B", "左右", 450);

}

此时的布局层级为3，实现如图4所示的界面布局共四行代码，第一行代码是先把页面左右分割，左边的宽度是250像素；第二行代码再把右边界面进行上下分割，上下区域的分割比例是50%，即各取一半；第三行代码再把“右上区域”做左右分割，左边的宽度是300像素；第四行代码“右下区域”也做左右分割，左边的宽度是450像素，形成了5个区域，每个区域的id名如图4中所示，同时通过本发明实施例提供的方法可以继续以这5个区域的id名为参数，继续创建子布局。即一行代码创建一个布局，然后形成“父子嵌套”关系，但代码是平铺的命令行方式，即一行行的执行顺序，最后在前端内存中动态创建了非常复杂的嵌套关系的html。

在一实施例中，通过以下代码可以实现如图5所示的界面布局：

function AfterInit() {

YuXP.createSplit("d1", "左右", 250);

YuXP.createSplit("d1_B", "上下", '50%');

YuXP.createTabb("d1_B_A", ["机构", "人员","角色"]);

YuXP.createTabb("d1_B_B", ["岗位", "权限"]);

}

实现如图5所示的界面布局共四行代码，第一行代码把整个界面做左右分割，左边的宽度是250像素；第二行代码是把右边区域再做上下分割，上下区域的分割比例是50%，即各取一半；第三行代码是在“右上区域”再创建多页签，多页签的展示内容分别为"机构"，"人员"，"角色"；第四行代码是在“右下区域”再创建多页签，多页签的展示内容分别为"岗位"，"权限"，因为每个页签里面都是一个待布局的子组件，所以得到d1_A、d1_B_A_1、d1_B_B_1这些子组件。以现有技术实现这样的嵌套布局最终在内存中创建的html代码是非常复杂的，内存中的代码量在80行左右，但通过本发明实施例的方法却只需要4行代码，极大提高了前端界面的开发效率。

在一实施例中，通过以下代码可以实现如图6所示的界面布局：

function AfterInit() {

YuXP.createSplit("d1", "上下", 350);

YuXP.createBillList("yuxpservice","d1_A","zzz_user3_CODE1");

YuXP.createBillList("yuxpservice","d1_B","zzz_user3_CODE1");

}

实现如图6所示的界面布局只有三行代码，第一行代码的意思是创建了上下分割布局，上边的高度是350像素；第二行代码中的"yuxpservice"是微服务名称，在本发明实施例中采用微服务架构，"zzz_user3_CODE1"表示模板代码，第二行代码的意思是在上方区域创建了表格，表格内容如图6所示，第三行代码的意思是在下方区域创建了表单，表单内容如图6所示，创建表格与创建表单可以使用同一个代码，因为表格、表单、树、查询框可以配置在同一个配置模板里，因此创建表格与表单只需要一行代码，在前端的内存中动态创建非常复杂的html，最后整体形成一个嵌套复杂的界面，如果采用现有技术方法实现如图6所示的界面，至少要200行html与js代码，而本发明实施例不需要html文件，采用js代码并且js代码共计3行，极大提高了界面开发的效率。

在一实施例中，通过以下代码可以实现如图7所示的界面布局：

function AfterInit() {

YuXP.createSplit("d1", "左右", 300);

YuXP.createBillTree("yuxpservice","d1_A","admin_sm_org");

YuXP.createBillCard("yuxpservice","d1_B","admin_sm_org");

}

实现如图7所示的界面布局只有三行代码，第一行代码的意思是创建左右布局，左边的宽度是300像素；第二行代码中的"admin_sm_org"表示模板代码，第二行代码的意思是在左边区域创建机构树，机构树的内容如图7左侧区域所示；第三行代码的意思是在右边创建机构表单，机构表单的内容如图7右侧区域所示，如上所述，表格、表单、树、查询框可以配置在同一个配置模板里，创建表格与创建表单可以使用同一个代码，所以创建树型控件与表单控件只需要一行代码，在前端内存中动态创建html代码，可以极大提高前端界面开发的效率。

上述的五个界面布局效果图，比如创建分割器的方法，分割器html标签为<div>，其算法逻辑就是定义一个字符串，然后动态拼接这个字符串，这个字符串中的内容就是左右或者上下两个<div>，然后通过一个总的<div>包起来，中间再有一个小的分隔条的<div>，然后在分割条的<div>上面监听鼠标拖动事件，即拖动中间的分割条时，会动态更改左右或者上下两个<div>的宽度与高度，最终输出字符串，在浏览器界面上输出实际界面，从而实现一种左右或者上下的分割布局的效果。即本发明实施例的算法逻辑都被包装在一个函数中，而该函数内部的算法逻辑就相当于传统模式的静态html，并且在前端内存中动态生成的，而且随着用户的界面布局请求改变，组件配置信息也会随之改变，最终输出的代码也会改变。

再比如创建多页签的方法，其算法逻辑也是定义一个字符串，然后根据参数动态拼接字符串，这个字符串中的内容就是创建两层<div>，上面一层<div>中是根据参数，创建多个页签按钮，下面一层是一个总的<div>，其内部又包含了各个页签内容<div>，然后在上面的各个按钮中监听鼠标点击事件，点击某个按钮时，就会把下面对应的页签内容<div>显示出来，同时把其他页签内容<div>隐藏，从而实现点击页签按钮自动切换对应内容的效果。即本发明实施例的算法逻辑封装在这一个算法函数中，只需要通过一行代码就能实现传统方法可以实现的逻辑。本发明实施例提供的方法在前端内存中动态生成html，存储在最终输出的字符串中，并在浏览器界面上输出实际界面。

本发明实施例能够实现将后面创建的布局与前面创建的布局成为父子或者嵌套关系，以第一个分割器为例，即与<div>的id名称有很大关系，在一个<div>上创建新的布局界面时，可以理解在一个“父组件”上创建多个“子组件”，父子组件就是一种嵌套层次关系，“子组件”是在算法逻辑中动态创建的，但“子组件”的id名字与“父组件”有着嵌套关系，例如，具体而言就是“子组件”的id名是以“父组件”的id名为前辍，然后加上后辍，比如如果是分割器，则就是加上_A、_B后辍，即如果父组件是d1，则子组件是d1_A与d1_B，如果然后在d1_B上再创建分割，则又会生成d1_B_A与d1_B_B，多页签的后辍是_1、_2、_3，比如在d1上创建三个页签，就会生成d1_1、d1_2、d1_3…，并且因为每一行对应的算法都在内存中动态创建复杂的html代码段，又能在平铺代码结构中把先后创建的组件联结起来，形成树型嵌套关系，所以能够实现用简单的几行代码就能实现传统方法中的采用许多行代码才能实现的功能。

在创建一个表格与表单时，也提炼成一行代码，而传统模式创建一个表格或表单的代码量是非常大的，一个20个字段的表格，需要的html代码量是上百行，而这些代码与前面的布局组件代码是混合在一起的，一般一个复杂的功能往往有好几个表格或表单，多则有七八个页签，每个页签内部还可以包括左右分割或上下分割。页签内部又可以包括表格或表单，界面布局非常复杂，这样最终的代码量通常是上千行，而把创建表格与表单也封装成一个算法，然后把创建的上百行代码都在内存中动态创建，整个功能最终只需要十行代码左右就能完成一个实际功能界面创建。

本发明的实施例的有益效果在于，提供了一种多组件的前端界面布局方法、装置、电子设备和存储介质，该多组件的前端界面布局方法包括：接收界面布局请求，界面布局请求包括请求布局的多个组件以及各组件的组件布局信息；根据各组件的组件布局信息确定多个组件中的父组件以及子组件；基于父组件的组件布局信息生成初始布局界面和与初始布局界面对应的初始界面标识；根据初始界面标识生成子组件的组件标识，基于子组件的组件标识和子组件的组件布局信息在初始布局界面上的基础上生成最终的布局界面。本发明实施例提供的多组件的前端界面布局方法，根据布局组件信息，确定待布局界面上的父组件和子组件，并进一步根据父组件生成初始布局界面和初始界面标识，在初始布局界面的基础上，根据子组件生成最终的布局界面，通过初始界面标识将初始布局界面和最终生成的布局界面联系起来，形成布局界面中组件间的嵌套关系，由初始界面标识进一步得到最终的布局界面，通过扁平化的结构实现组件嵌套关系的布局，由此产生的界面布局方法简洁，提高了前端界面的开发效率。

图8是根据本发明实施例提供的用于多组件的前端界面布局的计算机设备的示意图。如图8所示，该设备可以包括处理器801以及存储有计算机程序指令的存储器802。

具体地，上述处理器801可以包括中央处理器（CPU），或者特定集成电路（Application Specific Integrated Circuit ，ASIC），或者可以被配置成实施本发明实施例的一个或多个集成电路。

存储器802可以包括用于数据或指令的大容量存储器。举例来说而非限制，存储器802可包括硬盘驱动器（Hard Disk Drive，HDD）、软盘驱动器、闪存、光盘、磁光盘、磁带或通用串行总线（Universal Serial Bus，USB）驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器802可包括可移除或不可移除(或固定)的介质。在特定实施例中，存储器802是非易失性固态存储器。在特定实施例中，存储器802包括只读存储器（ROM）。在合适的情况下，该ROM可以是掩模编程的ROM、可编程ROM（PROM）、可擦除PROM（EPROM）、电可擦除PROM（EEPROM）、电可改写ROM（EAROM）或闪存或者两个或更多个以上这些的组合。

处理器801通过读取并执行存储器802中存储的计算机程序指令，以实现上述实施例中的用于多组件的前端界面布局的方法。

在一个示例中，上述的计算机设备还可包括通信接口803和总线804。其中，如图8所示，处理器801、存储器802、通信接口803通过总线804连接并完成相互间的通信。

通信接口803，主要用于实现本发明实施例中各模块、设备、单元和/或设备之间的通信。

总线804包括硬件、软件或两者，用于将上述部件彼此耦接在一起。举例来说，总线可包括加速图形端口（AGP）或其他图形总线、增强工业标准架构（EISA）总线、前端总线（FSB）、超传输（HT）互连、工业标准架构（ISA）总线、无限带宽互连、低引脚数（LPC）总线、存储器总线、微信道架构（MCA）总线、外围组件互连（PCI）总线、PCI-Express（PCI-X）总线、串行高级技术附件（SATA）总线、视频电子标准协会局部（VLB）总线或其他合适的总线或者两个或更多个以上这些的组合。在合适的情况下，总线X10可包括一个或多个总线。尽管本发明实施例描述和示出了特定的总线，但本发明考虑任何合适的总线或互连。

该计算机设备可以执行本发明实施例中的用于多组件的前端界面布局的方法，从而实现结合图1和图2描述的用于多组件的前端界面布局方法及装置。

此外，参照图1所描述的用于多组件的前端界面布局方法可通过记录在计算机可读存储介质上的程序（或指令）来实现。例如，如图9所示，根据本发明的示例性实施例，可提供存储指令的计算机可读存储介质901，其中，当所述指令被至少一个计算装置运行时，促使所述至少一个计算装置执行用于多组件的前端界面布局的方法。

上述计算机可读存储介质901中的计算机程序可在诸如客户端、主机、代理装置、服务器等计算机设备中部署的环境中运行，应注意，计算机程序还可用于执行除了上述步骤以外的附加步骤或者在执行上述步骤时执行更为具体的处理，这些附加步骤和进一步处理的内容已经在参照图1进行相关方法的描述过程中提及，因此这里为了避免重复将不再进行赘述。

本发明是参照根据本发明实施例的方法、设备（系统）、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

本发明中应用了具体实施例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (10)

1.一种多组件的前端界面布局方法，其特征在于，所述方法包括：

接收界面布局请求，所述界面布局请求包括请求布局的多个组件以及各组件的组件布局信息；

根据所述各组件的组件布局信息确定所述多个组件中的父组件以及子组件，其包括：根据所述各组件的组件布局信息，确定待布局界面的布局层级和与所述各组件的组件布局信息对应的组件配置顺序；在预设的组件配置数据库中确定与组件配置顺序对应的各组件的组件配置信息，根据各组件的组件配置信息确定需要进行配置的所述各组件的优先级；根据所述各组件的优先级确定所述多个组件中的父组件以及子组件；

基于所述父组件的组件布局信息生成初始布局界面和与所述初始布局界面对应的初始界面标识，其包括：根据所述父组件的组件布局信息，从预设的组件配置数据库中确定所述父组件的组件配置信息和所述父组件的组件标识；根据所述父组件的组件配置信息生成初始布局界面；基于所述父组件的组件标识生成与所述初始布局界面对应的初始界面标识；

根据所述初始界面标识生成所述子组件的组件标识，基于所述子组件的组件标识和所述子组件的组件布局信息在所述初始布局界面上的基础上生成最终的布局界面。

2.根据权利要求1所述的方法，其特征在于，所述根据所述各组件的组件布局信息，确定待布局界面的布局层级，包括：

根据所述各组件的组件布局信息中的组件的布局位置、布局大小和布局方式确定待布局界面的布局层级。

3.根据权利要求1所述的方法，其特征在于，所述根据所述初始界面标识生成所述子组件的组件标识，基于所述子组件的组件标识和所述子组件的组件布局信息在所述初始布局界面上的基础上生成最终的布局界面，包括：

根据所述子组件的组件布局信息，从所述预设的组件配置数据库中获取所述子组件的组件配置信息；

根据所述初始界面标识和所述子组件的组件配置信息生成所述子组件的组件标识；

基于所述子组件的组件标识和所述子组件的组件配置信息在所述初始布局界面上的基础上生成最终的布局界面。

4.根据权利要求1所述的方法，其特征在于，所述基于所述子组件的组件标识和所述子组件的组件布局信息在所述初始布局界面上的基础上生成最终的布局界面，包括：

基于预设的组件配置数据库，确定所述父组件的组件配置信息和所述子组件的组件配置信息；

根据所述父组件的组件配置信息和所述子组件的组件配置信息在所述初始布局界面上进行渲染，得到最终的布局界面。

5.一种界面布局装置，其特征在于，所述装置包括：

请求接收模块，用于接收界面布局请求，所述界面布局请求包括请求布局的多个组件以及各组件的组件布局信息；

组件确定模块，用于根据所述各组件的组件布局信息确定所述多个组件中的父组件以及子组件，其包括：根据所述各组件的组件布局信息，确定待布局界面的布局层级和与所述各组件的组件布局信息对应的组件配置顺序；在预设的组件配置数据库中确定与组件配置顺序对应的各组件的组件配置信息，根据各组件的组件配置信息确定需要进行配置的所述各组件的优先级；根据所述各组件的优先级确定所述多个组件中的父组件以及子组件；

第一生成模块，用于基于所述父组件的组件布局信息生成初始布局界面和与所述初始布局界面对应的初始界面标识，其包括：根据所述父组件的组件布局信息，从预设的组件配置数据库中确定所述父组件的组件配置信息和所述父组件的组件标识；根据所述父组件的组件配置信息生成初始布局界面；基于所述父组件的组件标识生成与所述初始布局界面对应的初始界面标识；

第二生成模块，用于根据所述初始界面标识生成所述子组件的组件标识，基于所述子组件的组件标识和所述子组件的组件布局信息在所述初始布局界面上的基础上生成最终的布局界面。

6.根据权利要求5所述的装置，其特征在于，所述组件确定模块，具体用于根据所述各组件的组件布局信息中的组件的布局位置、布局大小和布局方式确定待布局界面的布局层级。

7.根据权利要求5所述的装置，其特征在于，所述第二生成模块具体用于：

根据所述子组件的组件布局信息，从所述预设的组件配置数据库中获取所述子组件的组件配置信息；

根据所述初始界面标识和所述子组件的组件配置信息生成所述子组件的组件标识；

基于所述子组件的组件标识和所述子组件的组件配置信息在所述初始布局界面上的基础上生成最终的布局界面。

8.根据权利要求5所述的装置，其特征在于，所述第二生成模块具体用于：

基于预设的组件配置数据库，确定所述父组件的组件配置信息和所述子组件的组件配置信息；

根据所述父组件的组件配置信息和所述子组件的组件配置信息在所述初始布局界面上进行渲染，得到最终的布局界面。

9.一种电子设备，其特征在于，所述设备包括：

处理器；

存储器，存储有计算机程序，当所述计算机程序被处理器执行时，实现如权利要求1-4中的任一项所述的多组件的前端界面布局方法。

10.一种存储指令的计算机可读存储介质，其中，当所述指令被至少一个计算装置运行时，促使所述至少一个计算装置执行如权利要求1-4中的任意一项所述的多组件的前端界面布局方法。

Images