CN111708537A - 基于组件模板的页面渲染方法、设备及可读存储介质 - Google Patents

Abstract

本发明公开了一种基于组件模板的页面渲染方法、设备及可读存储介质，所述方法包括：确定基于组件配置所构建页面中包含的待渲染组件，并从封装的各预设组件模板中确定出与各所述待渲染组件分别对应的目标组件模板；获取各所述待渲染组件的属性信息，并将各所述属性信息分别输入到各所述目标组件模板进行渲染，获得各所述待渲染组件的渲染结果；将各所述渲染结果显示在所述页面中，完成所述页面的渲染。本发明通过封装预设组件模板对各种类型的组件进行渲染，对于由各种组件构建得到的各种样式页面中的同类组件，调用相同的预设组件模板即可进行渲染处理，提高了对各种样式页面渲染的效率。

Description

基于组件模板的页面渲染方法、设备及可读存储介质

技术领域

本发明涉及金融科技(Fintech)技术领域，尤其涉及一种基于组件模板的页面渲染方法、设备及可读存储介质。

背景技术

随着金融科技(Fintech)，尤其是互联网科技金融的不断发展，越来越多的技术(如人工智能、大数据、云存储等)应用在金融领域，但金融领域也对各类技术提出了更高的要求，如要求提高渲染各种样式页面的效率。

目前，页面通常以页面组件的形式构建，但是现有页面组件是固定的，支持组件选择但不支持自定义组件，以此所构建的页面通常以页面维度进行渲染。即，不同样式页面建立各自的渲染逻辑，且每个页面上的各个组件逐一设定各自的渲染机制进行渲染。但无论是对不同样式页面建立渲染逻辑，还是对每个页面中的组件设定各自的渲染机制，都存在重复建立相同渲染机制进行渲染的情形，影响了对各种样式页面的渲染效率。

因此，如何提高对各种样式页面渲染的效率是当前亟待解决的技术问题。

发明内容

本发明的主要目的在于提供一种基于组件模板的页面渲染方法、设备及可读存储介质，旨在解决现有技术中如何提高对各种样式页面渲染的效率的技术问题。

为实现上述目的，本发明提供一种基于组件模板的页面渲染方法，所述基于组件模板的页面渲染方法包括以下步骤：

确定基于组件配置所构建页面中包含的待渲染组件，并从封装的各预设组件模板中确定出与各所述待渲染组件分别对应的目标组件模板；

获取各所述待渲染组件的属性信息，并将各所述属性信息分别输入到各所述目标组件模板进行渲染，获得各所述待渲染组件的渲染结果；

将各所述渲染结果显示在所述页面中，完成所述页面的渲染。

可选地，所述将各所述渲染结果显示在所述页面中，完成所述页面的渲染的步骤之后，所述方法还包括：

当接收到基于所述页面中按钮组件触发的查询请求时，获取与所述查询请求对应的结果数据；

将所述结果数据存入预设存储单元，并查找与所述按钮组件对应的关联组件模板；

将所述预设存储单元中的结果数据，传输到所述关联组件模板渲染，获得数据渲染结果显示在所述页面中，更新所述页面。

可选地，所述待渲染组件至少包括第一类待渲染组件；

所述当接收到基于所述页面中按钮组件触发的查询请求时，获取与所述查询请求对应的结果数据的步骤之前，所述方法还包括：

当侦测到各所述第一类待渲染组件中任一所述第一类待渲染组件的第一属性信息变化时，分别获取各所述第一类待渲染组件的第一输出数据；

基于各所述第一类待渲染组件的预设字段对获取的各所述第一类待渲染组件的第一输出数据进行存储，形成为请求参数对象，并基于所述请求参数对象形成所述查询请求。

可选地，所述获取与所述查询请求对应的结果数据的步骤包括：

根据所述查询请求中的各第一输出数据，对所述查询请求中的请求参数进行限定，并基于限定的所述请求参数，获取所述结果数据；

所述结果数据为多项，所述关联组件模板为多个，所述将所述预设存储单元中的结果数据，传输到所述关联组件模板渲染的步骤包括：

将所述预设存储单元中的各结果数据，分别传输到各所述关联组件模板，替换各所述关联组件模板的预设变量；

基于各所述关联组件模板将各所述结果数据分别填充至待渲染字段，以基于各所述待渲染字段对各所述结果数据进行渲染。

可选地，所述将所述结果数据存入预设存储单元，并查找与所述按钮组件对应的关联组件模板的步骤之前，所述方法还包括：

基于预设请求序列号，建立所述页面中的按钮组件与所述预设组件模板之间的关联关系，以基于所述关联联系，查找与所述按钮组件对应的关联组件模板。

可选地，所述待渲染组件至少包括第二类待渲染组件；

所述将各所述渲染结果显示在所述页面中，完成所述页面的渲染的步骤之后，所述方法还包括：

当侦测到各所述第二类待渲染组件中任一所述第二类待渲染组件的第二属性信息变化时，触发实时更新事件；

从各所述待渲染组件的预设字段中获取与所述实时更新事件对应的第二输出数据，并对各所述第二输出数据渲染后显示在所述页面。

可选地，所述从封装的各预设组件模板中确定出与各所述待渲染组件分别对应的目标组件模板的步骤包括：

读取各所述待渲染组件中预设属性字段内的模板关联标识，以及封装的各所述预设组件模板的模板标识；

将各所述模板关联标识分别和各所述模板标识对比，确定与各所述模板关联标识匹配的目标模板标识；

将封装的各所述预设组件模板中与所述目标模板标识对应的预设组件模板，确定为与各所述待渲染组件分别对应的目标组件模板。

可选地，所述确定基于组件配置所构建页面中包含的待渲染组件的步骤之前，所述方法还包括：

当接收到组件配置指令时，根据所述组件配置指令，确定待配置组件；

接收与所述待配置组件对应的属性配置指令，并根据所述属性配置指令确定所述待配置组件的属性信息，以基于所述配置信息构建所述页面。

进一步地，为实现上述目的，本发明还提供一种基于组件模板的页面渲染装置，所述基于组件模板的页面渲染装置包括：

确定模块，用于确定基于组件配置所构建页面中包含的待渲染组件，并从封装的各预设组件模板中确定出与各所述待渲染组件分别对应的目标组件模板；

渲染模块，用于获取各所述待渲染组件的属性信息，并将各所述属性信息分别输入到各所述目标组件模板进行渲染，获得各所述待渲染组件的渲染结果；

显示模块，用于将各所述渲染结果显示在所述页面中，完成所述页面的渲染。

进一步地，为实现上述目的，本发明还提供一种基于组件模板的页面渲染设备，所述基于组件模板的页面渲染设备包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的基于组件模板的页面渲染程序，所述基于组件模板的页面渲染程序被所述处理器执行时实现如上述所述的基于组件模板的页面渲染方法的步骤。

进一步地，为实现上述目的，本发明还提供一种可读存储介质，所述可读存储介质上存储有基于组件模板的页面渲染程序，所述基于组件模板的页面渲染程序被处理器执行时实现如上所述的基于组件模板的页面渲染方法的步骤。

本发明的基于组件模板的页面渲染方法、设备及可读存储介质，与现有技术以页面维度对构建的页面进行渲染相比，本发明采用的手段为：针对各种类型的组件预先设定有封装的预设组件模板，用以对各种类型的组件进行渲染。对于通过组件配置所构建得到的页面，先确定其中包含的待渲染组件，并从封装的各预设组件模板中确定出与各待渲染组件各自对应的目标组件模板。进而获取各待渲染组件的属性信息输入到各目标组件模板，由目标组件模板进行渲染，得到各待渲染组件的渲染结果显示在页面中，以此完成对页面的渲染。该手段通过封装预设组件模板对各种类型的组件进行渲染，对于由各种组件构建得到的各种样式页面中的同类组件，调用相同的预设组件模板即可进行渲染处理，克服了现有技术中针对页面上的各个组件设定各自的渲染机制进行渲染，所导致渲染效率低的缺陷，提高了对各种样式页面渲染的效率。

附图说明

图1为本发明基于组件模板的页面渲染设备实施例方案涉及的设备硬件运行环境的结构示意图；

图2为本发明基于组件模板的页面渲染方法第一实施例的流程示意图；

图3为本发明基于组件模板的页面渲染方法第一实施例的流程示意图；

图4为本发明基于组件模板的页面渲染方法第一实施例的流程示意图；

图5为本发明基于组件模板的页面渲染方法一具体实施例中构建页面并渲染显示的流程示意图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。

本发明提供一种基于组件模板的页面渲染设备，参照图1，图1为本发明基于组件模板的页面渲染设备实施例方案涉及的设备硬件运行环境的结构示意图。

如图1所示，该基于组件模板的页面渲染设备可以包括：处理器1001，例如CPU，通信总线1002、用户接口1003，网络接口1004，存储器1005。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(Display)、输入单元比如键盘(Keyboard)，可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。存储器1005可以是高速RAM存储器，也可以是稳定的存储器(non-volatile memory)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储设备。

本领域技术人员可以理解，图1中示出的基于组件模板的页面渲染设备的硬件结构并不构成对基于组件模板的页面渲染设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

如图1所示，作为一种可读存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接口模块以及基于组件模板的页面渲染程序。其中，操作系统是管理和控制基于组件模板的页面渲染设备与软件资源的程序，支持网络通信模块、用户接口模块、基于组件模板的页面渲染程序以及其他程序或软件的运行；网络通信模块用于管理和控制网络接口1004；用户接口模块用于管理和控制用户接口1003。

在图1所示的基于组件模板的页面渲染设备硬件结构中，网络接口1004主要用于连接后台服务器，与后台服务器进行数据通信；用户接口1003主要用于连接客户端(用户端)，与客户端进行数据通信；处理器1001可以调用存储器1005中存储的基于组件模板的页面渲染程序，并执行以下操作：

确定基于组件配置所构建页面中包含的待渲染组件，并从封装的各预设组件模板中确定出与各所述待渲染组件分别对应的目标组件模板；

获取各所述待渲染组件的属性信息，并将各所述属性信息分别输入到各所述目标组件模板进行渲染，获得各所述待渲染组件的渲染结果；

将各所述渲染结果显示在所述页面中，完成所述页面的渲染。

进一步地，所述将各所述渲染结果显示在所述页面中，完成所述页面的渲染的步骤之后，处理器1001可以调用存储器1005中存储的基于组件模板的页面渲染程序，并执行以下操作：

当接收到基于所述页面中按钮组件触发的查询请求时，获取与所述查询请求对应的结果数据；

将所述结果数据存入预设存储单元，并查找与所述按钮组件对应的关联组件模板；

将所述预设存储单元中的结果数据，传输到所述关联组件模板渲染，获得数据渲染结果显示在所述页面中，更新所述页面。

进一步地，所述待渲染组件至少包括第一类待渲染组件；

所述当接收到基于所述页面中按钮组件触发的查询请求时，获取与所述查询请求对应的结果数据的步骤之前，处理器1001可以调用存储器1005中存储的基于组件模板的页面渲染程序，并执行以下操作：

当侦测到各所述第一类待渲染组件中任一所述第一类待渲染组件的第一属性信息变化时，分别获取各所述第一类待渲染组件的第一输出数据；

基于各所述第一类待渲染组件的预设字段对获取的各所述第一类待渲染组件的第一输出数据进行存储，形成为请求参数对象，并基于所述请求参数对象形成所述查询请求。

进一步地，所述获取与所述查询请求对应的结果数据的步骤包括：

根据所述查询请求中的各第一输出数据，对所述查询请求中的请求参数进行限定，并基于限定的所述请求参数，获取所述结果数据；

所述结果数据为多项，所述关联组件模板为多个，所述将所述预设存储单元中的结果数据，传输到所述关联组件模板渲染的步骤包括：

将所述预设存储单元中的各结果数据，分别传输到各所述关联组件模板，替换各所述关联组件模板的预设变量；

基于各所述关联组件模板将各所述结果数据分别填充至待渲染字段，以基于各所述待渲染字段对各所述结果数据进行渲染。

进一步地，所述将所述结果数据存入预设存储单元，并查找与所述按钮组件对应的关联组件模板的步骤之前，处理器1001可以调用存储器1005中存储的基于组件模板的页面渲染程序，并执行以下操作：

基于预设请求序列号，建立所述页面中的按钮组件与所述预设组件模板之间的关联关系，以基于所述关联联系，查找与所述按钮组件对应的关联组件模板。

进一步地，所述待渲染组件至少包括第二类待渲染组件；

所述将各所述渲染结果显示在所述页面中，完成所述页面的渲染的步骤之后，处理器1001可以调用存储器1005中存储的基于组件模板的页面渲染程序，并执行以下操作：

当侦测到各所述第二类待渲染组件中任一所述第二类待渲染组件的第二属性信息变化时，触发实时更新事件；

从各所述待渲染组件的预设字段中获取与所述实时更新事件对应的第二输出数据，并对各所述第二输出数据渲染后显示在所述页面。

进一步地，所述从封装的各预设组件模板中确定出与各所述待渲染组件分别对应的目标组件模板的步骤包括：

读取各所述待渲染组件中预设属性字段内的模板关联标识，以及封装的各所述预设组件模板的模板标识；

将各所述模板关联标识分别和各所述模板标识对比，确定与各所述模板关联标识匹配的目标模板标识；

将封装的各所述预设组件模板中与所述目标模板标识对应的预设组件模板，确定为与各所述待渲染组件分别对应的目标组件模板。

进一步地，所述确定基于组件配置所构建页面中包含的待渲染组件的步骤之前，处理器1001可以调用存储器1005中存储的基于组件模板的页面渲染程序，并执行以下操作：

当接收到组件配置指令时，根据所述组件配置指令，确定待配置组件；

接收与所述待配置组件对应的属性配置指令，并根据所述属性配置指令确定所述待配置组件的属性信息，以基于所述配置信息构建所述页面。

本发明基于组件模板的页面渲染设备的具体实施方式与下述基于组件模板的页面渲染方法各实施例基本相同，在此不再赘述。

本发明还提供一种基于组件模板的页面渲染方法。

参照图2，图2为本发明基于组件模板的页面渲染方法第一实施例的流程示意图。

本发明实施例提供了基于组件模板的页面渲染方法的实施例，需要说明的是，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。具体地，本实施例中的基于组件模板的页面渲染方法包括：

步骤S10，确定基于组件配置所构建页面中包含的待渲染组件，并从封装的各预设组件模板中确定出与各所述待渲染组件分别对应的目标组件模板；

本实施例中基于组件模板的页面渲染方法应用于页面渲染设备，该页面渲染设备可以是服务器，也可以是客户端。对于服务器，则与多个具有页面渲染需求的客户端通信连接，本实施例以客户端为例进行说明。其中页面通过预设设置的组件构建生成，预先设定用于构建显示页面的预设组件，预设组件用于实现显示页面的各项功能，如实现参数请求的请求参数类组件、实现按钮功能的按钮组件、实现输入框功能的输入框组件、实现数据展示功能的数据组件等。同时针对不同的预设组件设定多种不同的属性，如按钮组件的属性至少包括按钮形状、尺寸、大小等，输入框组件的属性至少包括输入数据的范围、文本框还是下拉框等，数据组件的属性至少包括折线图、柱形图等展示形状，展示时间范围等。通过从预设组件中选择所需求的组件，并配置所选择组件的属性来形成页面进行渲染，得到最终的页面进行显示。

其中，预设组件依据所实现功能的不同而具有不同的分类，如用于实现表单的各类组件所属的分类为表单组件，用于实现表格的各类组件所属的分类为表格组件，用于实现显示页面中各项基础功能的组件所属的分类为基础组件，用于实现数据展示的各类组件所属的分类为数据组件。并且，属性依据渲染形式的不同而具有不同的分类，如针对text渲染的文本框类型，针对select渲染的下拉框类型等，以依据组件所配置属性的类型，对属性进行渲染显示。

同时，各个预设组件通过组件配置表注册、存储和扩展，各个预设组件在组件配置表中均以同样的数据结构存在，该类数据结构包含组件唯一标识、组件名字、组件类型、组件属性、组件渲染temp文件、processtype属性等。其中processtype属性表示对组件渲染的处理器类型，处理器类型主要有表单元素处理器(formItemProcessor)、数据展示处理器(dataDisplayProcessor)、按钮处理器(btnProcessor)等，每一类处理器有其对应的特定处理逻辑。在组件渲染时，根据组件的不同处理器类型绑定不同的渲染输入和输出方式。

不同类型组件通过组件类型配置表分类管理，设置不同的数组，同一类型预设组件的标识添加到同一数组中统一管理，不同类型预设组件的标识添加到不同数组中分类管理。同样地，各个属性通过属性配置表注册、存储和扩展，各个属性在属性配置表中也以同样的数据结构存在，该类数据结构包括属性名、属性类型(渲染标签)、属性选项、联动选项等。并且，对于支持不同渲染形式的属性，通过属性类型配置表分类管理，针对支持的各个渲染形式设定属性类型字段，添加到属性类型配置表存储管理。

更进一步地，本实施例针对各种类型的组件预先设定封装好的预设组件模板，对于形成页面中的各种类型组件，通过对应的预设组件模板进行渲染，得到最终的页面显示。因对形成页面的各类组件的渲染，以通过各组件构建形成页面为前提，故在基于预设组件模板对页面中的各类组件进行渲染之前，先通过对组件配置表、属性配置表、组件类型配置表和属性类型配置表的配置，构建形成页面。具体地，确定基于组件配置所构建页面中包含的待渲染组件的步骤之前，还包括：

步骤a1，当接收到组件配置指令时，根据所述组件配置指令，确定待配置组件；

步骤a2，接收与所述待配置组件对应的属性配置指令，并根据所述属性配置指令确定所述待配置组件的属性信息，以基于所述配置信息构建所述页面。

进一步地，将组件类型配置表以表格、浮动窗等方式分类显示在客户端的显示界面，用户依据需求从组件类型配置表中选择所需要的组件，发起组件配置指令。客户端在接收到该组件配置指令时，读取其中携带的组件标识，依据组件标识确定表征用户需求的待配置组件。进而依据属性配置表，对待配置组件的属性进行配置。待配置组件中包含有表征其所支持配置属性的属性名，遍历属性配置表，得到的各个属性即为待配置组件所支持配置的属性。进而依据属性中所携带的属性类型标识，从属性类型配置表中确定对各属性进行渲染的渲染形式，并将各属性依据各自的渲染形式渲染后显示在待配置组件的配置显示界面。用户依据需求从显示的属性中选择所需要的属性，发起与待配置组件对应的属性配置指令。客户端在接收到该属性配置指令后，依据其中携带的属性标识，确定用户对待配置组件所需要的属性信息。进而由待配置组件及其属性信息形成页面，实现通过组件配置来构建页面。

需要说明的是，上述通过组件配置所构建的页面，因未经渲染，故不能在客户端的显示界面显示，其仅表示所构建页面中包含的组件，以及各组件所配置的属性信息。并且，对于经组件配置所构建的页面，可通过页面中所包含组件的标识，来确定页面中所包含需要渲染的组件，并将该类组件作为待渲染组件进行处理。

进一步地，预先设定并封装的用于对各种类型组件进行渲染的组件模板，与各种类型组件之间建立有关联关系；并且，可通过组件的数据结构中的预设属性建立与预设组件模板之间的关联关系。如预设属性为temp属性，将表征预设组件模板唯一性的模板标识添加为temp属性的字段，作为组件的模板关联标识，以此在预设组件模板与组件类型之间建立关联关系。在确定页面中所包含的各待渲染组件后，通过各待渲染组件的该类模板关联标识，即可从封装的各预设组件模板中确定出与各待渲染组件对应关联，用于对各待渲染组件进行渲染的目标组件模板。具体地，从封装的各预设组件模板中确定出与各待渲染组件分别对应的目标组件模板的步骤包括：

步骤S11，读取各所述待渲染组件中预设属性字段内的模板关联标识，以及封装的各所述预设组件模板的模板标识；

步骤S12，将各所述模板关联标识分别和各所述模板标识对比，确定与各所述模板关联标识匹配的目标模板标识；

步骤S13，将封装的各所述预设组件模板中与所述目标模板标识对应的预设组件模板，确定为与各所述待渲染组件分别对应的目标组件模板。

更进一步地，从各待渲染组件中的预设属性字段内读取出模板关联标识，并从封装的各预设组件模板中读取出模板标识。将每个模板关联标识分别和各模板标识对比，确定各模板标识中与每个模板关联标识一致的模板标识，一致的模板标识即为与模板关联标识匹配的目标模板标识。依据各目标模板标识，对封装的各预设组件模板进行查询，查询其中携带有目标模板标识的预设组件模板，作为与各待渲染组件分别对应的目标组件模板。其中，当待渲染组件的模板关联标识与目标组件模板的目标模板标识一致时，则该待渲染组件与目标组件模板之间具有对应关系。

步骤S20，获取各所述待渲染组件的属性信息，并将各所述属性信息分别输入到各所述目标组件模板进行渲染，获得各所述待渲染组件的渲染结果；

更进一步地，通过属性配置指令对待渲染组件所配置的各项属性信息存储在待渲染组件的数据结构中的conf属性内，因而从各待渲染组件的conf属性内获取出各待渲染组件的属性信息，并且将各项属性信息分别输入到与各个待渲染组件对应的目标组件模板，由各个目标组件依据各自的渲染逻辑进行渲染，得到各待渲染组件的渲染结果。

需要说明的是，页面与其中所包含组件之间为父、子关系，页面为父组件，组件为子组件。属性信息的输入在父组件与子组件之间形成单向下行数据流，即先确定父组件中包含的属性信息进行渲染，形成页面框架；再对父组件中包含的各子组件进行遍历，确定各子组件的属性信息进行渲染，得到各子组件的渲染结果。本实施例中每个预设组件模板都包含props对象，props对象包含键名config，其键值为组件的配置属性集合。获取的组件的属性信息通过props.config方式输入到组件模板进行组件的UI(User Interface，用户界面)渲染和静态数据渲染，得到渲染结果。并且，对于数据展示处理器(dataDisplayProcessor)的组件模板的props需要包含键名originaldata，其键值为通过组件获取的动态数据，以用于组件的动态数据渲染。

步骤S30，将各所述渲染结果显示在所述页面中，完成所述页面的渲染。

进一步地，在各个待渲染组件的属性信息均经渲染，得到各待渲染组件的渲染结果后，则依据各待渲染组件在页面中的显示位置，将各渲染结果显示在页面中，以此完成页面的渲染。

本发明的基于组件模板的页面渲染方法，与现有技术以页面维度对构建的页面进行渲染相比，本发明采用的手段为：针对各种类型的组件预先设定有封装的预设组件模板，用以对各种类型的组件进行渲染。对于通过组件配置所构建得到的页面，先确定其中包含的待渲染组件，并从封装的各预设组件模板中确定出与各待渲染组件各自对应的目标组件模板。进而获取各待渲染组件的属性信息输入到各目标组件模板，由目标组件模板进行渲染，得到各待渲染组件的渲染结果显示在页面中，以此完成对页面的渲染。该手段通过封装预设组件模板对各种类型的组件进行渲染，对于由各种组件构建得到的各种样式页面中的同类组件，调用相同的预设组件模板即可进行渲染处理，克服了现有技术中针对页面上的各个组件设定各自的渲染机制进行渲染，所导致渲染效率低的缺陷，提高了对各种样式页面渲染的效率。

进一步地，请参照图3，基于本发明基于组件模板的页面渲染方法的第一实施例，提出本发明基于组件模板的页面渲染方法第二实施例。

所述基于组件模板的页面渲染方法第二实施例与所述基于组件模板的页面渲染方法第一实施例的区别在于，所述将各所述渲染结果显示在所述页面中，完成所述页面的渲染的步骤之后，所述方法还包括：

步骤S40，当接收到基于所述页面中按钮组件触发的查询请求时，获取与所述查询请求对应的结果数据；

本实施例通过经属性信息渲染所显示的页面，获取动态数据渲染显示。具体地，显示的页面中包含有按钮组件，当接收到基于该按钮组件触发的查询请求时，基于按钮组件绑定的API(Application Programming Interface，应用程序接口)请求，向API请求对应的接口发起访问。接口响应于API请求，返回请求数据，客户端将该请求数据作为与查询请求对应的结果数据进行获取，添加到用于对各结果数据进行显示的数据组件，由对数据组件进行渲染的组件模板，对添加的结果数据进行渲染显示。

需要说明的是，预设组件模板除了包含有输入之外，还包含有输出。在将属性信息或结果数据作为输入传输到对应的预设组件模板进行渲染，渲染后显示的属性值或数据值形成预设组件模板的输出。并且，预设组件模板的输出依据页面中子组件状态的变化是否需要实时通知父组件而具有不同的处理机制。其中，对于子组件状态变化不引起父组件响应的情形，为不需要实时通知父组件的情形，如通过子组件配置筛选条件的情形。对于子组件状态变化引起父组件响应的情形，为需要实时通知父组件的情况，如通过子组件分页的情形。本实施例中将子组件状态变化不需要实时通知父组件的子组件，确定为待渲染组件的第一类待渲染组件，而将状态变化需要实时通知父组件的子组件，确定为待渲染组件的第二类待渲染组件。

进一步地，按钮组件所触发的查询请求基于查询条件生成，而查询条件通过页面的请求参数类组件形成。并且，请求参数类组件可以以下拉框形式存在，以下拉选择查询条件，如选择获取一个月之内的数据；也可以以文本框形式存在，以输入查询条件，如输入包含产品A字样，以获取产品A的销售数据等。对于该类作为子组件的请求参数类组件，查询条件的配置，并不需要通知作为父组件的页面组件，因此属于第一类待渲染组件。在通过按钮组件触发查询请求前，先依据第一类待渲染组件配置查询条件，由配置的查询条件来生成查询请求。具体地，当接收到基于页面中按钮组件触发的查询请求时，获取与查询请求对应的结果数据的步骤之前，还包括：

步骤b1，当侦测到各所述第一类待渲染组件中任一所述第一类待渲染组件的第一属性信息变化时，分别获取各所述第一类待渲染组件的第一输出数据；

步骤b2，基于各所述第一类待渲染组件的预设字段对获取的各所述第一类待渲染组件的第一输出数据进行存储，形成为请求参数对象，并基于所述请求参数对象形成所述查询请求。

更进一步地，客户端在侦测到页面包含的各第一类待渲染组件中，存在任意一个第一类待渲染组件的第一属性信息发生变化时，则对页面中包含的所有第一类待渲染组件中的第一输出数据进行获取，即获取各第一类待渲染组件当前显示的最新属性值或数据值，作为第一输出数据。其中，第一属性信息为第一类待渲染组件的属性值变化信息，如下拉框中的下拉选项的变化、单选框的选择等。将来源于各第一类待渲染组件的第一输出数据，分别对应添加至各第一类待渲染组件的预设字段内存储。

其中，预设字段为针对每个第一类待渲染组件所预先设定的字段。具体地，在确定各子组件的属性信息进行渲染的过程中，给各子组件设定组件名字，如WidgetRefName；该类组件名字其实质由"组件temp+组件页面序列号order"组成，以避免重名，并且通过子组件的ref属性将组件名字注册到子组件上。同时，每个子组件内部都规范定义了一个hbvalue的data属性，以用来存储子组件的(可变)输出数据。该hbvalue即为第一类待渲染组件的预设字段，将各个第一输出数据传输到预设字段中存储，整合形成为一个请求参数对象，以便于通过请求参数对象触发查询请求。请求参数对象为由各个第一类待渲染组件配置的各个查询条件的集合，通过其形成查询请求进行触发，所获得的结果数据可满足各项查询条件的要求。

可理解地，因查询请求由查询条件生成，使得通过查询请求所获取的结果数据受查询条件的限制。具体地，获取与查询请求对应的结果数据的步骤包括：

步骤c，根据所述查询请求中的各第一输出数据，对所述查询请求中的请求参数进行限定，并基于限定的所述请求参数，获取所述结果数据；

进一步地，各第一类待渲染组件的第一输出数据经存储形成为请求参数对象，进而形成为查询请求，使得查询请求对应包含第一输出数据。从而可依据查询请求中表征查询条件的各第一输出数据，对查询请求中的请求参数进行限定，进而依据限定后的请求参数，发起查询请求，获取结果数据。其中请求参数的限定为对请求参数添加查询条件，以查询过滤出符合要求的结果数据。如通过第一类待渲染组件所配置的查询条件为一星期之内的数据，则第一输出数据为一星期之内的数据；进而依据该第一输出数据，对查询请求中的请求参数进行限定，如请求参数为产品类型a，则将请求参数限定为查询产品类型a在一星期之内的数据；以此发起访问请求，获取符合该查询条件的结果数据。

步骤S50，将所述结果数据存入预设存储单元，并查找与所述按钮组件对应的关联组件模板；

更进一步地，预先设置有用于存储结果数据的预设存储单元，如resultDataSet对象，在依据查询请求获取到结果数据后，将结果数据传输到预设存储单元存储。同时查找与按钮组件对应的关联组件模板，该关联组件模板用于对存储的结果数据进行渲染。并且，按钮组件与关联组件模板之间通过预设请求序列号建立对应关系；具体地，将结果数据存入预设存储单元，并查找与按钮组件对应的关联组件模板的步骤之前，还包括：

步骤d，基于预设请求序列号，建立所述页面中的按钮组件与所述预设组件模板之间的关联关系，以基于所述关联联系，查找与所述按钮组件对应的关联组件模板。

可理解地，页面中的按钮组件用于获取满足不同过滤条件的结果数据返回到页面中的数据组件，由预设组件模板渲染后显示。为了确定结果数据所返回的数据组件，以及确定对结果数据渲染的预设组件模板，预先设置有预设请求序列号，将预设序列号添加到按钮组件、数据组件和预设组件模板中，以建立三者之间的关联关系。在通过按钮组件触发查询请求时，为查询请求添加按钮组件的预设请求序列号，进而在依据查询请求获取到结果数据时，依据查询请求携带的预设请求序列号，查找关联的预设组件模板作为关联组件模板对结果数据进行渲染。

步骤S60，将所述预设存储单元中的结果数据，传输到所述关联组件模板渲染，获得数据渲染结果显示在所述页面中，更新所述页面。

进一步地，将预设存储单元中存储的结果数据，传输到经查找得到的按钮组件，由按钮组件对结果数据进行渲染，得到数据渲染结果显示在页面中与按钮组件关联的数据组件中，实现对页面所显示数据的更新。

需要说明的是，按钮组件绑定的API请求为多个，以从不同的接口请求多项结果数据，返回到不同的数据组件显示；如分别从不同接口获取接口数据以折线图的数据组件形式显示，以及以柱状图的数据组件形式显示。此时，通过查询请求所触发的API请求为多个，获得的结果数据为多项，用于对结果数据进行渲染的关联组件模板也多个，以通过不同的关联组件模板对各结果数据进行渲染，生成多项数据渲染结果显示。具有地，所述将所述预设存储单元中的结果数据，传输到所述关联组件模板渲染的步骤包括：

步骤S61，将所述预设存储单元中的各结果数据，分别传输到各所述关联组件模板，替换各所述关联组件模板的预设变量；

步骤S62，基于各所述关联组件模板将各所述结果数据分别填充至待渲染字段，以基于各所述待渲染字段对各所述结果数据进行渲染。

进一步地，针对于按钮组件绑定多个API请求的情形，将各个API请求形成为按钮组件的接口序列，并依据各个API请求在接口请求序列中的排列顺序生成预设序列号，进而将各个预设接口序列号添加到对各个接口请求所返回数据进行显示的数据组件，以及对各数据组件进行渲染的预设组件模板，以此在API请求、数据组件和预设组件模板之间的关联关系。对于通过触发的API请求获取到的各个结果数据，依据所来源API请求携带的预设序列号，存储至预设存储单元中。在对各个结果数据渲染时，从预设存储单元中读取出各项结果数据，并依据各自存储的预设序列号，查找各自具有关联关系的预设组件模板，作为各自的关联组件模板。

更进一步地，各个关联组件模板均设置有用于接收结果数据的预设变量，如props.originaldata，将读取到各结果数据传输到各自的关联组件模板，对各个关联组件模板中的预设变量进行替换。各个关联组件模板中包含有用于渲染的待渲染字段，如option，在通过预设变量接收到结果数据后，将各个结果数据分别填充到各自关联组件模板的待渲染字段。进而在对各个结果数据进行填充处理后，通过待渲染字段实现对各结果数据的渲染，得到数据渲染结果在页面显示，实现对页面的更新。

本实施例在第一类待渲染组件的第一属性信息变化时，获取各第一类渲染组件的第一输出数据形成为请求参数对象；进而由请求参数对象形成为查询请求触发，获取结果数据存入预设存储单元，查找对应的关联组件模板渲染显示，更新显示页面。以此，通过各种查询条件获取动态数据，有利于页面的动态显示；同时通过从预先设置封装的预设组件模板中，查找关联组件模板进行调用，即可进行渲染显示，提升了渲染效率。

进一步地，请参照图4，基于本发明基于组件模板的页面渲染方法的第一或第二实施例，提出本发明基于组件模板的页面渲染方法第三实施例。

所述基于组件模板的页面渲染方法第三实施例与所述基于组件模板的页面渲染方法第一或第二实施例的区别在于，所述待渲染组件至少包括第二类待渲染组件；

所述将各所述渲染结果显示在所述页面中，完成所述页面的渲染的步骤之后，所述方法还包括：

步骤S70，当侦测到各所述第二类待渲染组件中任一所述第二类待渲染组件的第二属性信息变化时，触发实时更新事件；

步骤S80，从各所述待渲染组件的预设字段中获取与所述实时更新事件对应的第二输出数据，并对各所述第二输出数据渲染后显示在所述页面。

本实施例对子组件状态变化需要实时通知父组件的情形，即待渲染组件中包含的第二类待渲染组件进行处理。具体地，客户端在侦测到页面包含的各第二类待渲染组件中，存在任意一个第二类待渲染组件的第二属性信息发生变化时，则触发父组件的实时更新事件，以对页面中各待配置组件的属性进行更新。其中第二类属性信息为第二类带渲染组件的属性值变化信息，如下一页按钮的触发。

可理解地，第二类待渲染组件的第二属性信息的变化，触发页面中各待渲染组件的属性信息的变化。如下一页按钮触发后，页面中包含待渲染组件中的属性信息变化；若页面以表格的形式显示公司中各类产品的数据，下一页按钮触发前，显示的产品类型为w1类；下一页按钮触发后，显示的产品类型为w2；此时，页面中的待渲染组件没有变化，但其中所显示的属性数据变化。因此，从各待渲染组件的预设字段中，读取因实时更新事件所触发变化的第二输出数据，并且，对各第二输出数据渲染后显示在页面，实现页面的响应更新。

需要说明的是，在确定页面中各子组件的属性信息进行渲染的过程中，针对各子组件内部规范定义一个hbvalue的data属性，以用来存储子组件的(可变)输出数据，该hbvalue即形成各待渲染组件的预设字段。并且对于所触发的实时更新事件，对属性信息变化需要实时输出的子组件，如数据展示处理器dataDisplayProcessor对应的第二类待渲染组件，通过$on方法绑定update:myPropName，作为监听事件。在通过监听事件侦测到该第二类待渲染组件的第二属性信息变化时，在第二类待渲染组件内部通过$emit('update:myPropName',updateVal)触发实时更新事件，并将第二类待渲染组件的第二属性信息变化所导致的其他待渲染组件变化的最新数据，通过updateVal输出。父组件则接收事件并获得最新输出的updateVal进行渲染显示。

本实施例对于第二类待渲染组件的第二属性信息变化时，触发实时更新事件，并获取因实时更新事件所触发变化的第二输出数据进行渲染显示，有利于页面变化的实时渲染显示。

进一步地，请参照图5，图5为通过组件模板对页面进行渲染的一具体实施例的示意图。在该实施例中页面的渲染过程包括五个部分，分别为：①新建页面、②新建页面中配置信息渲染形成结果页面、③结果页面动态获取结果数据、④结果数据渲染、⑤结果数据经渲染形成结果页面。具体地，先通过预设组件新建包含请求参数类组件、按钮组件和数据组件等组件的页面，并在新建页面中配置请求参数类的属性、按钮组件的属性和数据组件的属性，进而将属性配置后的按钮组件和数据组件，通过预设标识关联，预设标识以请求序列号reqOrder的形式存在。此后针对页面中的各类组件，在各自的temp属性中映射对应的组件模板，以表征对各组件进行渲染的组件模板。在通过组件模板进行渲染的过程中，将针对组件进行配置的信息通过props.config输入到组件模板中，由组件模板按照渲染需求对配置信息处理后，对配置信息进行渲染，形成结果页面。在结果页面中点击查询按钮发起查询请求，获取页面中请求参数类组件hbvalue表征的查询条件值；由查询条件值处理请求参数，对查询请求进行限制后发起访问，获得结果数据；依据请求序列号，对结果数据进行存储。此后向组件模板发起渲染请求，将结果数据作为输入通过props.originaldata传输到组件模板中，由组件模板按照渲染需求对配置信息处理后，对结果数据进行渲染，以此形成最终的结果页面显示。

本发明还提供一种基于组件模板的页面渲染装置。

本发明基于组件模板的页面渲染装置第一实施例的功能模块示意图。所述基于组件模板的页面渲染装置包括：

确定模块，用于确定基于组件配置所构建页面中包含的待渲染组件，并从封装的各预设组件模板中确定出与各所述待渲染组件分别对应的目标组件模板；

渲染模块，用于获取各所述待渲染组件的属性信息，并将各所述属性信息分别输入到各所述目标组件模板进行渲染，获得各所述待渲染组件的渲染结果；

显示模块，用于将各所述渲染结果显示在所述页面中，完成所述页面的渲染。

进一步地，所述基于组件模板的页面渲染装置还包括：

获取模块，用于当接收到基于所述页面中按钮组件触发的查询请求时，获取与所述查询请求对应的结果数据；

查找模块，用于将所述结果数据存入预设存储单元，并查找与所述按钮组件对应的关联组件模板；

传输模块，用于将所述预设存储单元中的结果数据，传输到所述关联组件模板渲染，获得数据渲染结果显示在所述页面中，更新所述页面。

进一步地，所述待渲染组件至少包括第一类待渲染组件；所述获取模块还包括：

获取单元，用于当侦测到各所述第一类待渲染组件中任一所述第一类待渲染组件的第一属性信息变化时，分别获取各所述第一类待渲染组件的第一输出数据；

存储单元，用于基于各所述第一类待渲染组件的预设字段对获取的各所述第一类待渲染组件的第一输出数据进行存储，形成为请求参数对象，并基于所述请求参数对象形成所述查询请求。

进一步地，所述获取模块还用于：

根据所述查询请求中的各第一输出数据，对所述查询请求中的请求参数进行限定，并基于限定的所述请求参数，获取所述结果数据；

所述结果数据为多项，所述关联组件模板为多个，所述将所述预设存储单元中的结果数据，传输到所述关联组件模板渲染的步骤包括：

将所述预设存储单元中的各结果数据，分别传输到各所述关联组件模板，替换各所述关联组件模板的预设变量；

基于各所述关联组件模板将各所述结果数据分别填充至待渲染字段，以基于各所述待渲染字段对各所述结果数据进行渲染。

进一步地，所述基于组件模板的页面渲染装置还包括：

建立模块，用于基于预设请求序列号，建立所述页面中的按钮组件与所述预设组件模板之间的关联关系，以基于所述关联联系，查找与所述按钮组件对应的关联组件模板。

进一步地，所述待渲染组件至少包括第二类待渲染组件；所述基于组件模板的页面渲染装置还包括：

触发模块，用于当侦测到各所述第二类待渲染组件中任一所述第二类待渲染组件的第二属性信息变化时，触发实时更新事件；

所述获取模块还用于从各所述待渲染组件的预设字段中获取与所述实时更新事件对应的第二输出数据，并对各所述第二输出数据渲染后显示在所述页面。

进一步地，所述确定模块还包括：

读取单元，用于读取各所述待渲染组件中预设属性字段内的模板关联标识，以及封装的各所述预设组件模板的模板标识；

对比单元，用于将各所述模板关联标识分别和各所述模板标识对比，确定与各所述模板关联标识匹配的目标模板标识；

确定单元，用于将封装的各所述预设组件模板中与所述目标模板标识对应的预设组件模板，确定为与各所述待渲染组件分别对应的目标组件模板。

进一步地，所述基于组件模板的页面渲染装置还包括：

第一接收模块，用于当接收到组件配置指令时，根据所述组件配置指令，确定待配置组件；

第二接收模块，用于接收与所述待配置组件对应的属性配置指令，并根据所述属性配置指令确定所述待配置组件的属性信息，以基于所述配置信息构建所述页面。

本发明基于组件模板的页面渲染装置具体实施方式与上述基于组件模板的页面渲染方法各实施例基本相同，在此不再赘述。

此外，本发明实施例还提出一种可读存储介质。

可读存储介质上存储有基于组件模板的页面渲染程序，基于组件模板的页面渲染程序被处理器执行时实现如上所述的基于组件模板的页面渲染方法的步骤。

本发明可读存储介质可以是计算机可读存储介质，其具体实施方式与上述基于组件模板的页面渲染方法各实施例基本相同，在此不再赘述。

上面结合附图对本发明的实施例进行了描述，但是本发明并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本发明的启示下，在不脱离本发明宗旨和权利要求所保护的范围情况下，还可做出很多形式，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，这些均属于本发明的保护之内。

Claims (10)

1.一种基于组件模板的页面渲染方法，其特征在于，所述基于组件模板的页面渲染方法包括以下步骤：

确定基于组件配置所构建页面中包含的待渲染组件，并从封装的各预设组件模板中确定出与各所述待渲染组件分别对应的目标组件模板；

获取各所述待渲染组件的属性信息，并将各所述属性信息分别输入到各所述目标组件模板进行渲染，获得各所述待渲染组件的渲染结果；

将各所述渲染结果显示在所述页面中，完成所述页面的渲染。

2.如权利要求1所述的基于组件模板的页面渲染方法，其特征在于，所述将各所述渲染结果显示在所述页面中，完成所述页面的渲染的步骤之后，所述方法还包括：

当接收到基于所述页面中按钮组件触发的查询请求时，获取与所述查询请求对应的结果数据；

将所述结果数据存入预设存储单元，并查找与所述按钮组件对应的关联组件模板；

将所述预设存储单元中的结果数据，传输到所述关联组件模板渲染，获得数据渲染结果显示在所述页面中，更新所述页面。

3.如权利要求2所述的基于组件模板的页面渲染方法，其特征在于，所述待渲染组件至少包括第一类待渲染组件；

所述当接收到基于所述页面中按钮组件触发的查询请求时，获取与所述查询请求对应的结果数据的步骤之前，所述方法还包括：

当侦测到各所述第一类待渲染组件中任一所述第一类待渲染组件的第一属性信息变化时，分别获取各所述第一类待渲染组件的第一输出数据；

基于各所述第一类待渲染组件的预设字段对获取的各所述第一类待渲染组件的第一输出数据进行存储，形成为请求参数对象，并基于所述请求参数对象形成所述查询请求。

4.如权利要求3所述的基于组件模板的页面渲染方法，其特征在于，所述获取与所述查询请求对应的结果数据的步骤包括：

根据所述查询请求中的各第一输出数据，对所述查询请求中的请求参数进行限定，并基于限定的所述请求参数，获取所述结果数据；

所述结果数据为多项，所述关联组件模板为多个，所述将所述预设存储单元中的结果数据，传输到所述关联组件模板渲染的步骤包括：

将所述预设存储单元中的各结果数据，分别传输到各所述关联组件模板，替换各所述关联组件模板的预设变量；

基于各所述关联组件模板将各所述结果数据分别填充至待渲染字段，以基于各所述待渲染字段对各所述结果数据进行渲染。

5.如权利要求2所述的基于组件模板的页面渲染方法，其特征在于，所述将所述结果数据存入预设存储单元，并查找与所述按钮组件对应的关联组件模板的步骤之前，所述方法还包括：

基于预设请求序列号，建立所述页面中的按钮组件与所述预设组件模板之间的关联关系，以基于所述关联联系，查找与所述按钮组件对应的关联组件模板。

6.如权利要求1-5任一项所述的基于组件模板的页面渲染方法，其特征在于，所述待渲染组件至少包括第二类待渲染组件；

所述将各所述渲染结果显示在所述页面中，完成所述页面的渲染的步骤之后，所述方法还包括：

当侦测到各所述第二类待渲染组件中任一所述第二类待渲染组件的第二属性信息变化时，触发实时更新事件；

从各所述待渲染组件的预设字段中获取与所述实时更新事件对应的第二输出数据，并对各所述第二输出数据渲染后显示在所述页面。

7.如权利要求1-5任一项所述的基于组件模板的页面渲染方法，其特征在于，所述从封装的各预设组件模板中确定出与各所述待渲染组件分别对应的目标组件模板的步骤包括：

读取各所述待渲染组件中预设属性字段内的模板关联标识，以及封装的各所述预设组件模板的模板标识；

将各所述模板关联标识分别和各所述模板标识对比，确定与各所述模板关联标识匹配的目标模板标识；

将封装的各所述预设组件模板中与所述目标模板标识对应的预设组件模板，确定为与各所述待渲染组件分别对应的目标组件模板。

8.如权利要求1-5任一项所述的基于组件模板的页面渲染方法，其特征在于，所述确定基于组件配置所构建页面中包含的待渲染组件的步骤之前，所述方法还包括：

当接收到组件配置指令时，根据所述组件配置指令，确定待配置组件；

接收与所述待配置组件对应的属性配置指令，并根据所述属性配置指令确定所述待配置组件的属性信息，以基于所述配置信息构建所述页面。

9.一种基于组件模板的页面渲染设备，其特征在于，所述基于组件模板的页面渲染设备包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的基于组件模板的页面渲染程序，所述基于组件模板的页面渲染程序被所述处理器执行时实现如权利要求1-8中任一项所述基于组件模板的页面渲染方法的步骤。

10.一种可读存储介质，其特征在于，所述可读存储介质上存储有基于组件模板的页面渲染程序，所述基于组件模板的页面渲染程序被处理器执行时实现如权利要求1-8中任一项所述基于组件模板的页面渲染方法的步骤。

Images