可视化页面的搭建方法、装置及计算机设备

技术领域

本申请涉及数据处理技术领域，尤其涉及到一种可视化页面的搭建方法、装置及计算机设备。

背景技术

随着计算机技术的发展，越来越多的行业选择通过组合多个组件，创建可视化页面的方式，进行信息的传播和业务推广。

目前在搭建可视化页面时，针对不同的业务场景，往往需要编写大量代码来实现对图表类等基础组件的配置，导致工作量较大。且组件之间可实现的交互较少，进而使可视化页面形式单一，不能满足用户的应用需求。

发明内容

有鉴于此，本申请提供了一种可视化页面的搭建方法、装置及计算机设备，主要目的在于解决目前在搭建可视化页面时，需要编写大量代码，导致工作量较大，且组件之间可实现的交互较少，进而使可视化页面形式单一，不能满足用户的应用需求的技术问题。

根据本申请的一个方面，提供了一种可视化页面的搭建方法，该方法包括：

基于配置文件确定用于搭建目标页面的目标组件，所述配置文件中定义有所述目标页面的属性信息和配置信息，所述属性信息包括表征基础组件信息的第一属性和表征增量组件信息的第二属性，所述目标组件至少包括一个所述第一属性下的第一目标组件、一个所述第二属性下的第二目标组件和/或第三目标组件；

根据所述配置信息创建所述目标组件之间的交互关系，所述交互关系用于定义所述第一目标组件和所述第二目标组件，和/或所述第一目标组件和所述第三目标组件之间的耦合；

对创建交互关系的目标组件进行渲染处理，得到所述目标页面。

根据本申请的另一个方面，提供了一种可视化页面的搭建装置，该装置包括：

确定模块，用于基于配置文件确定用于搭建目标页面的目标组件，所述配置文件中定义有所述目标页面的属性信息和配置信息，所述属性信息包括表征基础组件信息的第一属性和表征增量组件信息的第二属性，所述目标组件至少包括一个所述第一属性下的第一目标组件、一个所述第二属性下的第二目标组件和/或第三目标组件；

创建模块，用于根据所述配置信息创建所述目标组件之间的交互关系，所述交互关系用于定义所述第一目标组件和所述第二目标组件，和/或所述第一目标组件和所述第三目标组件之间的耦合；

处理模块，用于对创建交互关系的目标组件进行渲染处理，得到所述目标页面。

根据本申请的又一个方面，提供了一种存储介质，其上存储有计算机程序，所述程序被处理器执行时实现上述可视化页面的搭建方法。

根据本申请的再一个方面，提供了一种计算机设备，包括存储介质、处理器及存储在存储介质上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述可视化页面的搭建方法。

借由上述技术方案，本申请提供的一种可视化页面的搭建方法、装置及计算机设备，可在接收到配置文件后，通过对配置文件中所定义属性信息和配置信息的分析，确定用于搭建目标页面的目标组件；进而可针对具体的业务场景对目标组件进行适应性修改，如根据配置信息创建目标组件之间的交互关系，以使目标组件具有不同的展现形式，最后通过对创建交互关系的目标组件进行渲染处理，即可得到目标页面。通过本申请中的技术方案，不需要重新编写代码生成与业务场景完全适配的页面组件，仅需要根据业务需求创建现有组件之间的数据交互以及事件交互，进而形成新的业务组件，在丰富组件表现形式的同时，还使配置生成的页面更能符合用户的实际需求。此外，通过低成本学习，产品等非开发人员也可直接实现对页面的配置及修改，且只需在组件库开发一次组件即可，后续只需根据需求快速迭代组件，增加组件的新功能和新配置项，从而减少前端组件的重复开发，进而能有效提高开发效率，降低开发成本。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本地申请的不当限定。在附图中：

图1示出了本申请实施例提供的一种可视化页面的搭建方法的流程示意图；

图2示出了本申请实施例提供的另一种可视化页面的搭建方法的流程示意图；

图3示出了本申请实施例提供的一种可视化页面的搭建装置的结构示意图；

图4示出了本申请实施例提供的另一种可视化页面的搭建装置的结构示意图。

具体实施方式

下文将参考附图并结合实施例来详细说明本申请。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互结合。

针对目前在搭建可视化页面时，需要编写大量代码，导致工作量较大，且组件之间可实现的交互较少，进而使可视化页面形式单一，不能满足用户的应用需求的技术问题。本申请实施例提供了一种可视化页面的搭建方法，如图1所示，该方法包括：

101、基于配置文件确定用于搭建目标页面的目标组件，配置文件中定义有目标页面的属性信息和配置信息。

其中，配置文件为用户方上传的页面生成需求，如可为文字形式的页面需求文本，也可为图片形式的UI视觉稿。当配置文件为文字形式的页面需求文本时，可通过关键词提取的方式对页面需求文本中的字符进行处理，进而提取得到目标页面对应的属性信息和配置信息；当配置文件为图片形式的UI视觉稿时，可首先通过光学字符识别(OpticalCharacter Recognition，OCR)技术识别UI视觉稿中的页面信息，进而通过关键词提取的方式，在页面信息中提取配置文件中的属性信息和配置信息。之后可在碎片化数据库中直接筛选与属性信息和配置信息匹配，且选用率高于预设阈值的目标组件。

其中，配置文件中定义的属性信息可为属性标签，属性标签对应不同组件类型，如可包括图表类、表格类、筛选类等基础组件对应的第一属性标签，还可包括A业务、B业务等增量业务组件对应的第二属性标签。相应的，属性信息可包括表征基础组件信息的第一属性和表征增量组件信息的第二属性。配置文件中定义的配置信息可包括参数配置信息、组件交互信息、页面结构信息等，用于对组件的参数配置、交互关系配置以及目标页面的整体布局提供数据参照。组件库具体可为碎片化组件库，在碎片化组件库中可存储有多个对应不同属性标签的碎片组件，碎片组件为配置有单一展示功能或协助展示功能的最小展示单元，通过将相关业务的碎片组件进行关联，可进一步得到能够展示完整数据的业务页面，根据属性划分，碎片组件可包括第一属性标签下的基础碎片组件和第二属性标签下的业务碎片组件，基础碎片组件为通用图表类、表格类、筛选类等常见的功能组件，通常与业务场景不关联；业务碎片组件为与业务应用场景相关的增量组件，如购物类组件、抽奖类组件、培训类组件、导航类组件等，用于与基础碎片组件建立交互关系，进而得到组件的全新展现形式。

为了方便对碎片组件的准确查取，在具体的应用场景中，可预先根据历史埋点数据确定各个组件类型对应的组件族群，每个组件族群中包含相同组件类型的不同碎片组件或包含不同展示形式下的同一碎片组件，还包含各个碎片组件的选用频率，选用频率用于确定碎片组件的选用优先级，选用频率越高对应的选用优先级越高。在本实施例中，可首先基于配置信息，在碎片化组件库中筛选用于搭建目标页面的目标组件，根据属性信息的划分，目标组件中应至少包括一个第一属性下的基础碎片组件(第一目标组件)和一个第二属性下的业务碎片组件(第二目标组件和/或第三目标组件)，以便根据业务需求创建各个基础碎片组件与相关业务碎片组件之间的交互关系，最终生成与具体业务场景适配的业务组件。

对于本申请的执行主体可为用于执行页面可视化配置操作的终端设备，例如手机、电脑等，但并不局限于此。在具体的应用场景中，终端设备用于接收用户上传的配置文件，并分析得到目标页面的属性信息和配置信息，进而基于配置信息筛选用于搭建目标页面的目标组件，并创建目标组件之间的交互关系，以保证目标组件与具体业务场景吻合，最后通过对创建交互关系的目标组件进行渲染处理，即可得到目标页面。

102、根据配置信息创建目标组件之间的交互关系，交互关系用于定义第一目标组件和第二目标组件，和/或第一目标组件和第三目标组件之间的耦合。

其中，配置信息可以包括组件交互信息，组件交互信息具体可包括数据交互信息和事件交互信息。

对于本实施例，为得到与业务场景完全适配的业务组件，可在提取出目标组件后，根据配置信息创建目标组件之间的交互关系，即根据配置信息中的组件交互信息，创建各个目标基础碎片组件与相关目标业务碎片组件之间的数据交互关系和/或事件交互关系。通过将目标业务碎片组件迭代至目标基础碎片组件中，增加目标基础碎片组件的新功能和新配置项，进而可实现对目标基础碎片组件的增量配置，丰富组件的表现形式，从而减少前端组件的重复开发。

103、对创建交互关系的目标组件进行渲染处理，得到目标页面。

对于本实施例，在具体的应用场景中，若在判定根据配置信息完成对目标组件的调整，且符合业务应用场景的需求后，可进一步按照组件之间的页面布局实现对目标组件的渲染处理，进而得到与页面生成请求匹配的目标页面。

通过本实施例中可视化页面的搭建方法，可在接收到配置文件后，通过对配置文件中所定义属性信息和配置信息的分析，确定用于搭建目标页面的目标组件；进而可针对具体的业务场景对目标组件进行适应性修改，如根据配置信息创建目标组件之间的交互关系，以使目标组件具有不同的展现形式，最后通过对创建交互关系的目标组件进行渲染处理，即可得到目标页面。通过本申请中的技术方案，不需要重新编写代码生成与业务场景完全适配的页面组件，仅需要根据业务需求创建现有组件之间的数据交互以及事件交互，进而形成新的业务组件，在丰富组件表现形式的同时，还使配置生成的页面更能符合用户的实际需求。此外，通过低成本学习，产品等非开发人员也可直接实现对页面的配置及修改，且只需在组件库开发一次组件即可，后续只需根据需求快速迭代组件，增加组件的新功能和新配置项，从而减少前端组件的重复开发，进而能有效提高开发效率，降低开发成本。

进一步地，作为上述实施例具体实施方式的细化和扩展，为了完整说明本实施例中的具体实施过程，提供了另一种可视化页面的搭建方法，如图2所示，该方法包括：

201、根据配置文件在组件库中筛选用于搭建目标页面的第一目标组件、用于与第一目标组件进行数据交互的第二目标组件和/或用于与第一目标组件进行事件交互的第三目标组件。

其中，配置文件中定义有目标页面的属性信息和配置信息，属性信息可包括第一属性和第二属性，第一属性为基础组件对应的可配置属性，用于表征基础组件信息，如可包括通用图表类、表格类、筛选类等不同组件类型；第二属性为具体的业务属性，用于表征增量属性信息，如可包括购物类、抽奖类、培训类等不同组件类型。通常第一属性与业务场景不关联，第二属性作为第一属性的增量属性，往往与具体的业务场景匹配。组件库是预先根据业务场景开发的，具体可为碎片化组件库，还可以为其他形式，如交互式组件库等，在此不进行具体限定。在本申请实施例中以碎片化组件库为例进行说明，在碎片化组件库中可以组件族群的形式，存储与各个属性信息和配置信息匹配的碎片组件，在碎片化组件库中除了通用图表类、表格类、筛选类等第一属性下的基础碎片组件外，还包括部分第二属性下的业务碎片组件，如购物类组件、抽奖类组件、培训类组件等。对于第一属性下的基础碎片组件以及第二属性下的业务碎片组件可分别按照组件类型划分为多个组件族群，如第一属性下的基础碎片组件可进一步划分：图表类组件族群、表格类组件族群、筛选类组件族群等，第二属性下的业务碎片组件可划分为：购物类组件族群、抽奖类组件族群、培训类组件族群等。具体的，终端设备在接收到配置文件后，会在碎片化组件库中根据属性信息和配置信息筛选匹配度高于预设阈值的碎片组件，并将碎片组件输出以供用户选取。

在具体的应用场景中，在筛选目标组件时，具体可通过响应于用户发送的页面生成请求，输出搭建系统操作界面，首先在系统操作界面实现对目标组件的选取。在选取用于搭建目标页面的目标组件时，作为一种可选方式，可接收用户的选取指令，并根据选取指令确定目标组件，其中，选取指令是在用户选中组件并连续触发移动到预设位置时发送的，在具体的应用场景中，选取指令具体可在用户选取拖拽组件列表中的组件到搭建区域时发送的。作为另一种可选方式，终端设备可依据用户上传的配置文件实现对目标组件的自动选取，具体的，可基于配置文件提取目标页面的属性信息和配置信息，进而根据配置信息确定第一属性下的第一目标组件类型，以及第二属性下的第二目标组件类型，之后在碎片化组件库对应第一目标组件类型的组件族群中筛选选用率高于预设阈值的基础碎片组件，在碎片化组件库对应第二目标组件类型的组件族群中筛选选用率高于预设阈值的业务碎片组件。相应的，实施例步骤具体可以包括：根据配置信息确定第一属性下的第一目标组件类型，以及第二属性下的第二目标组件类型；在组件库对应第一目标组件类型的组件族群中筛选选用率高于第一预设阈值的第一目标组件，在组件库对应第二目标组件类型的组件族群中筛选选用率高于第二预设阈值的第二目标组件和/或第三目标组件，第二目标组件用于与第一目标组件进行数据交互，第三目标组件用于与第一目标组件进行事件交互。其中，第一目标组件为用于搭建目标页面的基础碎片组件，第二目标组件为用于与第一目标组件进行事件交互的业务碎片组件，第三目标组件为用于与第一目标组件进行事件交互的业务碎片组件。第一预设阈值和第二预设阈值的数值，可根据实际应用场景进行设定，第一预设阈值和第二预设阈值的取值范围均应在0至1之间，设定的数值越接近于1，表征筛选出的第一目标组件、第二目标组件和/或第三目标组件越能符合用户关于目标页面的配置需求。

在具体的应用场景中，可首先根据配置信息在碎片化组件库中定位第一目标组件类型下的组件族群，以及第二目标组件类型下的组件族群，每个组件族群中包含相同属性标签的不同碎片组件或包含不同展示形式下的同一碎片组件，还包含各个碎片组件的选用频率，具体可在第一目标组件类型下的组件族群中筛选选用率高于第一预设阈值的第一目标组件，在第二目标组件类型下的组件族群中筛选选用率高于第二预设阈值的第二目标组件和/或第三目标组件。其中，第一目标组件对应为与业务场景不关联的基础碎片组件，如通用图表类、表格类、筛选类等常见的功能组件，第二目标组件、第三目标组件为与业务应用场景相关的增量组件，如购物类组件、抽奖类组件、培训类组件等，用于与基础碎片组件建立交互关系，进而得到组件的全新展现形式。例如，根据配置文件中所包含的配置信息确定第一目标组件类型为图表类，第二目标组件类型为购物类和抽奖类，依据配置信息，可确定页面展示需求为在可视化页面的图像展示中展示购物信息，并根据触发指令在可视化页面出现抽奖弹窗，以在购物信息所包含的订单用户中进行随机抽奖。故在确定目标组件时，可在碎片化数据库对应图表类的组件族群中筛选选用率最高的碎片组件作为第一目标组件，在碎片化数据库对应购物类的组件族群中筛选选用率最高的碎片组件作为第二目标组件，在碎片化数据库对应抽奖类的组件族群中筛选选用率最高的碎片组件作为第三目标组件，第目标二组件用于与第一目标组件进行数据交互，可依据第二目标组件将购物信息导入第一目标组件并进行页面展示，第三目标组件用于与第一目标组件进行事件交互，用于依据第三目标组件在第一目标组件中建立关于抽奖的弹窗任务，实现对订单用户的随机抽奖。

202、创建第一目标组件和第二目标组件的第一交互关系，和/或第一目标组件和第三目标组件的第二交互关系。

其中，第一交互关系用于定义第一目标组件和第二目标组件之间的耦合，用于支持第一目标组件获取第二目标组件的参数数据；第二交互关系用于定义第一目标组件和第三目标组件之间的耦合，用于支持第一目标组件监听第三目标组件的全局事件。

在具体的应用场景中，在实现对目标组件的交互关系的创建时，还可在碎片组件库中筛选出与配置信息匹配度高于预设阈值的页面配置模板，若接收到用户对页面配置模板的选取指令，则可依据页面配置模板的配置规则实现对目标组件对应交互关系的快速配置。页面配置模板具体是指历史开发过程中存储的交互组件样式模板，这种通过直接选取相应的交互组件样式模板，实现对目标组件快速配置的方法，相比于传统的通过一一编写程序代码的方法，不仅使得开发人员开发页面变的更方便、更快捷，同时更重要地是大大提高了开发效率，节省了资源，对编好的组件模板进行了重复利用。

然而在实际应用场景中，往往难以筛选到与用户需求完全匹配的页面配置模板，故作为另一种可选方式，若未筛选出与目标页面匹配的页面配置模板，或未接收到用户对页面配置模板的选取指令，则可直接依据配置信息中包含的组件交互信息，执行对目标组件之间的交互关系的自动创建，进而依据创建交互关系后的目标组件生成目标页面。

对于本实施例，在确定出需要创建交互关系的第一目标组件以及待与第一目标组件实现数据交互的第二目标组件后，可进一步基于组件交互信息创建第一目标组件和第二目标组件之间的数据交互关系(第一交互关系)。具体的，在依据组件交互信息创建第一目标组件与第二目标组件之间关于数据交互的第一交互关系时，由于对于碎片化组件库中的每一个碎片组件，在开发封装时都统一全局处理存储了：该碎片组件ID及该碎片组件对应抛出的参数、抛出的全局事件。故本实施例可首先提取第二目标组件的唯一标识；进而判断第一目标组件当前创建的历史数据交互关系是否与第二目标组件的唯一标识匹配；若匹配，则可直接将历史数据交互关系作为第一目标组件和第二目标组件之间的第二交互关系，并重新建立数据交互连接；反之，若判定历史数据交互关系中与第二目标组件的唯一标识不匹配，则可修改历史数据交互关系中第一目标组件所绑定的唯一标识，进而使第一目标组件与第二目标组件绑定。在成功建立第一交互关系后，第一目标组件可监听获取到第二目标组件抛出的参数数据，当组件库监听到参数变化便会用新的参数重新请求新的数据，故可使第一目标组件能够获取到第二目标组件中的数据，进而实现数据交互。相应的，实施例步骤具体可以包括：提取第二目标组件的第一唯一标识；判断第一目标组件中是否存在包含第一唯一标识的历史数据交互关系；若是，则将历史数据交互关系确定为第一目标组件和第二目标组件之间的第一交互关系；若否，则在第一目标组件中，创建与第一唯一标识绑定的第一交互关系。

例如，对于需要用折线图展示不同时间段内业务数据的业务场景，在实现参数过滤字段的配置时，对于“折线图”的第一属性组件(第一目标组件)，需要创建与“选取时间”的第二属性组件(第二目标组件)之间的数据交互关系(第一交互关系)，在配置参数字段时，只需在“折线图”的第一属性组件对应数据交互的接口处，绑定“选取时间”的第二属性组件的唯一标识(Identity document，ID)，即可实现业务数据交互，以实现当在可视化页面中选取不同时间时，折线图能够基于新的时间查询新的数据，然后更新折线图，如需和多个组件交互则绑定多个即可。

对于本实施例，在确定出需要创建交互关系的第一目标组件以及待与第一目标组件实现事件交互的第三目标组件后，可进一步基于组件交互信息创建第一目标组件和第三目标组件之间的事件交互关系(第二交互关系)。具体的，在依据组件交互信息创建第一目标组件与第三目标组件之间的第二交互关系时，由于对于碎片化组件库中的每一个碎片组件，在开发封装时都统一全局处理存储了：该碎片组件的ID及该碎片组件对应抛出的参数、抛出的全局事件，且若组件有事件抛出，会设置为全局事件抛出，方便别的碎片组件实时监听到；故可通过修改第三目标组件中绑定的碎片组件的ID，在第一目标组件中修改选取需要监听的事件，即可实现第一目标组件和第三目标组件之间的事件交互。具体的，可首先提取第一目标组件的唯一标识以及第三目标组件的全局事件；进而在第一目标组件中选定与第三目标组件匹配的全局事件，在第三目标组件中输入第一目标组件的唯一标识，进而创建与第一目标组件关于事件的第二交互关系。相应的，实施例步骤具体可以包括：提取第一目标组件的第二唯一标识，并基于组件交互信息确定第三目标组件中待监听的全局事件；通过在第一目标组件中创建关于全局事件的监听任务、在第三目标组件中绑定第二唯一标识，生成用于支持第一目标组件监听全局事件的第二交互关系。

鉴于目前主要的事件交互常见弹窗事件：即监听实现弹窗的显示。故在本实施例中以弹窗事件为例，如组件交互信息包括当点击查看昨日总调用量组件时需要有弹窗交互；因组件开发时都抛出了一些全局事件，其中就有弹窗事件；所以通过下述步骤即可完成事件交互的配置绑定：1)、配置昨日调用总量碎片组件(第一目标组件)时配置选取要抛出的事件，此处选择弹窗事件(popBox事件)；2)、弹窗组件(第三目标组件)配置里绑定碎片ID处输入“昨日调用总量碎片组件”的ID；3)、通过上述步骤即可实现昨日调用总量碎片组件和弹窗组件的事件交互关系绑定，当点击昨日调用总量碎片组件时弹窗就会出现。

在具体的应用场景中，配置信息还可以包括参数配置信息，参数配置信息具体可包括位置配置信息、组件的背景图、颜色、字体字号的大小、组件的大小，显示效果等。故在根据配置信息创建目标组件之间的交互关系之前或之后，还可依据参数配置信息执行对目标组件的参数配置操作。具体的，可通过调取目标组件的参数表单；判断参数表单中的第一参数值是否与参数配置信息中的第二参数值匹配；若否，则将第一参数值替换更新为第二参数值。其中，第一参数值为各个目标组件对应的默认参数值，第二参数值为与用户需求匹配的业务参数值，通过将目标组件中的默认参数值调整为与业务参数值匹配，可实现对目标组件的颜色、字体、大小等组件展示效果的调整，以实现想要的页面布局。

203、对创建第一交互关系和/或第二交互关系的目标组件进行渲染处理，得到目标页面。

在具体的应用场景中，配置信息还包括页面结构信息，页面结构信息用于提供页面布局，在对目标组件进行渲染处理时，可首先基于页面结构信息创建页面渲染实例，在页面渲染实例中规划有各个目标组件的展示形式，之后将各个目标组件添加到页面渲染实例中，进行实例化处理。其中，展示形式可包括目标组件的排布方式，如目标组件之间的位置排列关系；还可包括目标组件的展示方式，如直接显示、间接显示或隐藏显示等。最后通过调用目标组件之间的第一交互关系和/或第二交互关系，进行页面渲染，即可得到目标页面，具体渲染过程可为递归过程，通过依据目标组件之间的第一交互关系和/或第二交互关系进行嵌套，形成嵌套关系。其中，渲染实例是一种带渲染的PRT文件，创建渲染实例的目的在于，通过保存渲染参数，可以使每次打开PRT文件时，都能还原渲染效果，并对渲染效果进行反复调整。

通过上述可视化页面的搭建方法，可在接收到配置文件后，通过对配置文件中所定义属性信息和配置信息的分析，确定用于搭建目标页面的目标组件；进而可针对具体的业务场景对目标组件进行适应性修改，如根据配置信息创建目标组件之间的交互关系，以使目标组件具有不同的展现形式，最后通过对创建交互关系的目标组件进行渲染处理，即可得到目标页面。通过本申请中的技术方案，不需要重新编写代码生成与业务场景完全适配的页面组件，仅需要根据业务需求创建现有组件之间的数据交互以及事件交互，进而形成新的业务组件，在丰富组件表现形式的同时，还使配置生成的页面更能符合用户的实际需求。此外，通过低成本学习，产品等非开发人员也可直接实现对页面的配置及修改，且只需在组件库开发一次组件即可，后续只需根据需求快速迭代组件，增加组件的新功能和新配置项，从而减少前端组件的重复开发，进而能有效提高开发效率，降低开发成本。

进一步的，作为图1和图2所示方法的具体实现，本申请实施例提供了一种可视化页面的搭建装置，如图3所示，该装置包括：确定模块31、创建模块32、处理模块33；

确定模块31，可用于基于配置文件确定用于搭建目标页面的目标组件，配置文件中定义有目标页面的属性信息和配置信息，属性信息包括表征基础组件信息的第一属性和表征增量组件信息的第二属性，目标组件至少包括一个第一属性下的第一目标组件、一个第二属性下的第二目标组件和/或第三目标组件；

创建模块32，可用于根据配置信息创建目标组件之间的交互关系，交互关系用于定义第一目标组件和第二目标组件，和/或第一目标组件和第三目标组件之间的耦合；

处理模块33，可用于对创建交互关系的目标组件进行渲染处理，得到目标页面。

在具体的应用场景中，确定模块31，具体可用于根据配置信息确定第一属性下的第一目标组件类型，以及第二属性下的第二目标组件类型；在组件库对应第一目标组件类型的组件族群中筛选选用率高于第一预设阈值的第一目标组件，在组件库对应第二目标组件类型的组件族群中筛选选用率高于第二预设阈值的第二目标组件和/或第三目标组件，第二目标组件用于与第一目标组件进行数据交互，第三目标组件用于与第一目标组件进行事件交互。

相应的，创建模块32，具体可用于创建第一目标组件和第二目标组件的第一交互关系，第一交互关系用于支持第一目标组件获取第二目标组件的参数数据；和/或，创建第一目标组件和第三目标组件的第二交互关系，第二交互关系用于支持第一目标组件监听第三目标组件的全局事件。

在具体的应用场景中，在创建第一目标组件和第二目标组件的第一交互关系时，创建模块32，具体可用于提取第二目标组件的第一唯一标识；判断第一目标组件中是否存在包含第一唯一标识的历史数据交互关系；若是，则将历史数据交互关系确定为第一目标组件和第二目标组件之间的第一交互关系；若否，则在第一目标组件中，创建与第一唯一标识绑定的第一交互关系。

相应的，在创建第一目标组件和第三目标组件的第二交互关系时，创建模块32，具体可用于提取第一目标组件的第二唯一标识，并基于组件交互信息确定第三目标组件中待监听的全局事件；通过在第一目标组件中创建关于全局事件的监听任务、在第三目标组件中绑定第二唯一标识，生成用于支持第一目标组件监听全局事件的第二交互关系。

在具体的应用场景中，配置信息包括参数配置信息，如图4所示，该装置还包括：调取模块34、判断模块35、更新模块36；

调取模块34，可用于调取目标组件的参数表单；

判断模块35，可用于判断参数表单中的第一参数值是否与参数配置信息中的第二参数值匹配；

更新模块36，可用于若否，则将第一参数值替换更新为第二参数值。

相应的，配置信息还包括页面结构信息，页面结构信息用于提供页面布局；

处理模块33，具体可用于基于页面结构信息创建页面渲染实例；将各个目标组件添加到页面渲染实例中；调用目标组件之间的第一交互关系和/或第二交互关系，进行页面渲染，得到目标页面。

需要说明的是，本实施例提供的一种可视化页面的搭建装置所涉及各功能单元的其他相应描述，可以参考图1至图2的对应描述，在此不再赘述。

基于上述如图1至图2所示方法，相应的，本实施例还提供了一种存储介质，其上存储有计算机可读指令，该可读指令被处理器执行时实现上述如图1至图2所示的可视化页面的搭建方法。

基于这样的理解，本申请的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个存储介质(可以是CD-ROM，U盘，移动硬盘等)中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施场景的方法。

基于上述如图1至图2所示的方法和图3、图4所示的虚拟装置实施例，为了实现上述目的，本实施例还提供了一种计算机设备，该计算机设备包括存储介质和处理器；存储介质，用于存储计算机程序；处理器，用于执行计算机程序以实现上述如图1至图2所示的可视化页面的搭建方法。

可选的，该计算机设备还可以包括用户接口、网络接口、摄像头、射频(RadioFrequency，RF)电路，传感器、音频电路、WI-FI模块等等。用户接口可以包括显示屏(Display)、输入单元比如键盘(Keyboard)等，可选用户接口还可以包括USB接口、读卡器接口等。网络接口可选的可以包括标准的有线接口、无线接口(如WI-FI接口)等。

本领域技术人员可以理解，本实施例提供的一种计算机设备结构并不构成对该实体设备的限定，可以包括更多或更少的部件，或者组合某些部件，或者不同的部件布置。

存储介质中还可以包括操作系统、网络通信模块。操作系统是管理上述计算机设备硬件和软件资源的程序，支持信息处理程序以及其它软件和/或程序的运行。网络通信模块用于实现存储介质内部各组件之间的通信，以及与信息处理实体设备中其它硬件和软件之间通信。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到本申请可以借助软件加必要的通用硬件平台的方式来实现，也可以通过硬件实现。

通过应用本申请的技术方案，与目前现有技术相比，本申请可在接收到配置文件后，通过对配置文件中所定义属性信息和配置信息的分析，确定用于搭建目标页面的目标组件；进而可针对具体的业务场景对目标组件进行适应性修改，如根据配置信息创建目标组件之间的交互关系，以使目标组件具有不同的展现形式，最后通过对创建交互关系的目标组件进行渲染处理，即可得到目标页面。通过本申请中的技术方案，不需要重新编写代码生成与业务场景完全适配的页面组件，仅需要根据业务需求创建现有组件之间的数据交互以及事件交互，进而形成新的业务组件，在丰富组件表现形式的同时，还使配置生成的页面更能符合用户的实际需求。此外，通过低成本学习，产品等非开发人员也可直接实现对页面的配置及修改，且只需在组件库开发一次组件即可，后续只需根据需求快速迭代组件，增加组件的新功能和新配置项，从而减少前端组件的重复开发，进而能有效提高开发效率，降低开发成本。

本领域技术人员可以理解附图只是一个优选实施场景的示意图，附图中的模块或流程并不一定是实施本申请所必须的。本领域技术人员可以理解实施场景中的装置中的模块可以按照实施场景描述进行分布于实施场景的装置中，也可以进行相应变化位于不同于本实施场景的一个或多个装置中。上述实施场景的模块可以合并为一个模块，也可以进一步拆分成多个子模块。

上述本申请序号仅仅为了描述，不代表实施场景的优劣。以上公开的仅为本申请的几个具体实施场景，但是，本申请并非局限于此，任何本领域的技术人员能思之的变化都应落入本申请的保护范围。