CN114385164A - 页面生成与渲染方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请实施例提供一种页面生成与渲染方法、装置、电子设备及存储介质。在本申请实施例中，页面配置平台根据应用系统对列表页/表单页的样式需求信息，获取目标框架代码；展示目标列表页/表单页包含的字段项，响应于针对字段项的配置操作，获取字段项对应的数据源地址和用于向数据源地址对应的数据源端请求数据的数据加载代码；根据数据源地址、数据加载代码和目标框架代码，生成目标列表页/表单页对应的描述文件，以供应用系统基于描述文件渲染出所需的目标列表页/表单页。由此，降低了页面开发时的代码冗余度，提高了页面开发灵活度，减少了资源浪费。

Description

页面生成与渲染方法、装置、电子设备及存储介质

技术领域

本申请涉及互联网技术领域，尤其涉及一种页面生成与渲染方法、装置、电子设备及存储介质。

背景技术

在一些应用系统中，列表页或表单页是非常常见的展现形式。列表页主要有列表搜索项、列表展示项等组成，表单页通常由一个或多个表单项组成。对于不同的列表页或表单页，其中的大部分内容需要定制化。在现有技术中，通常是由后端服务器生成带有不同内容的列表页或表单页，应用系统需要使用时，向后端服务器请求所需的列表页或表单页，并渲染至图形用户界面上进行展示。现有列表页或表单页的开发方式，存在开发灵活度较低、代码冗余度高、资源浪费等缺陷。

发明内容

本申请的多个方面提供一种页面生成与渲染方法、装置、电子设备及存储介质，用以降低页面开发时的代码冗余度，提高页面开发灵活度，减少资源浪费。

本申请实施例提供一种页面生成方法，应用于页面配置平台，上述方法包括：根据应用系统对列表页/表单页的样式需求信息，获取目标框架代码，目标框架代码用于描述目标列表页/表单页包含的字段项及其样式和布局；展示目标列表页/表单页包含的字段项，响应于针对字段项的配置操作，获取字段项对应的数据源地址和用于向数据源地址对应的数据源端请求数据的数据加载代码；根据数据源地址、数据加载代码和目标框架代码，生成目标列表页/表单页对应的描述文件，以供应用系统基于描述文件渲染出所需的目标列表页/表单页。

本申请实施例还提供一种页面渲染方法，应用于应用系统所在的电子设备，上述方法包括：接收页面配置平台提供的目标列表页/表单页对应的描述文件，描述文件包括目标列表页/表单页对应的数据源地址、数据加载代码和目标框架代码；运行目标框架代码，以渲染出目标列表页/表单页包含的字段项及其样式和布局，并在渲染字段项过程中，运行数据加载代码，以从数据源地址对应的数据源端请求目标数据，并渲染至字段项中，得到目标列表页/表单页。

本申请实施例还提供一种页面配置平台，包括：获取模块，用于根据应用系统对列表页/表单页的样式需求信息，获取目标框架代码，目标框架代码用于描述目标列表页/表单页包含的字段项及其样式和布局；展示模块，用于展示目标列表页/表单页包含的字段项，响应于针对字段项的配置操作，获取字段项对应的数据源地址和用于向数据源地址对应的数据源端请求数据的数据加载代码；生成模块，用于根据数据源地址、数据加载代码和目标框架代码，生成目标列表页/表单页对应的描述文件，以供应用系统基于描述文件渲染出所需的目标列表页/表单页。

本申请实施例还提供一种页面渲染装置，包括：接收模块，用于接收页面配置平台提供的目标列表页/表单页对应的描述文件，描述文件包括目标列表页/表单页对应的数据源地址、数据加载代码和目标框架代码；运行模块，用于运行目标框架代码，以渲染出目标列表页/表单页包含的字段项及其样式和布局，并在渲染字段项过程中，运行数据加载代码，以从数据源地址对应的数据源端请求目标数据，并渲染至字段项中，得到目标列表页/表单页。

本申请实施例还提供一种电子设备，包括：存储器和处理器；存储器，用于存储计算机程序；处理器耦合至存储器，用于执行计算机程序以用于执行页面生成方法或者页面渲染方法。

本申请实施例还提供一种存储有计算机程序的计算机可读存储介质，当计算机程序被处理器执行时，致使处理器实现页面生成方法或者页面渲染方法。

在本实施例中，页面配置平台根据应用系统对列表页/表单页的样式需求信息，获取目标框架代码，目标框架代码用于描述目标列表页/表单页包含的字段项及其样式和布局；展示目标列表页/表单页包含的字段项，响应于针对字段项的配置操作，获取字段项对应的数据源地址和用于向数据源地址对应的数据源端请求数据的数据加载代码；根据数据源地址、数据加载代码和目标框架代码，生成目标列表页/表单页对应的描述文件，以供应用系统基于描述文件渲染出所需的目标列表页/表单页。由此，降低了页面开发时的代码冗余度，提高了页面开发灵活度，减少了资源浪费。进一步的，应用系统基于页面配置平台提供的描述文件渲染页面，由于框架代码和页面数据解耦，这样渲染页面时，可以实时动态加载页面数据，具有通用性，提高了页面渲染的效率。

附图说明

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

图1为本申请一示例性实施例提供的页面生成方法的一种应用场景示意图；

图2为本申请一示例性实施例提供的一种页面生成方法的流程示意图；

图3为示例性的列表页；

图4为示例性的表单页；

图5为示例性的中间态的列表页/表单页；

图6为本申请一示例性实施例提供的一种页面渲染方法的流程示意图；

图7为本申请一示例性实施例提供的一种页面配置平台的结构示意图；

图8为本申请一示例性实施例提供的一种页面渲染装置的结构示意图；

图9为本申请又一示例性实施例提供的一种电子设备的结构示意图。

具体实施方式

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

针对现有列表页或表单页的开发方式，存在开发灵活度较低、代码冗余度高、资源浪费等缺陷，本申请实施例提供一种页面生成与渲染方法、装置、电子设备及存储介质，在本实施例中，页面配置平台根据应用系统对列表页/表单页的样式需求信息，获取目标框架代码，目标框架代码用于描述目标列表页/表单页包含的字段项及其样式和布局；展示目标列表页/表单页包含的字段项，响应于针对字段项的配置操作，获取字段项对应的数据源地址和用于向数据源地址对应的数据源端请求数据的数据加载代码；根据数据源地址、数据加载代码和目标框架代码，生成目标列表页/表单页对应的描述文件，以供应用系统基于描述文件渲染出所需的目标列表页/表单页。由此，降低了页面开发时的代码冗余度，提高了页面开发灵活度，减少了资源浪费。进一步的，应用系统基于页面配置平台提供的描述文件渲染页面，由于框架代码和页面数据解耦，这样渲染页面时，可以实时动态加载页面数据，具有通用性，提高了页面渲染的效率。

图1为本申请一示例性实施例提供的页面生成方法的一种应用场景示意图。如图1所示，该应用场景包括：电子设备10、安装在电子设备10中应用系统30、电子设备20以及安装在电子设备20中的页面配置平台40。可选的，电子设备10可以通过有线网络、或者无线网络与电子设备20进行交互。例如，有线网络可以包括同轴电缆、双绞线和光纤等，无线网络可以是2G网络、3G网络、4G网络或者5G网络、无线保真(Wireless Fidelity，简称WIFI)网络等。本申请对交互的具体类型或者具体形式并不做限定，只要其能够实现电子设备10和电子设备20交互的功能即可。其中，电子设备10或电子设备20可以是服务器、终端设备等具有处理能力的电子设备。终端设备例如为计算机、平板电脑、手机、可穿戴式智能设备、智能家居设备等，服务器例如为分布式服务器或者集中式服务器。需要说明的是，图1中示例性的给出了1个电子设备10和1个电子设备20，在实际应用中，本申请对电子设备10和电子设备20的数量不做特别限制。

其中，应用系统30可以是提供业务服务的应用程序(Application，App)，应用系统30例如包括但不限于打车类App、购物类App、房屋交易类App或者金融类APP。应用系统30在运行过程中需要使用列表页/表单页。在此说明，在本申请各实施例中，“/”表示“和/或”的意思。

页面配置平台40为提供页面配置功能的系统，其能够为应用系统提供待渲染的列表页/表单页所需的描述文件，并将描述文件提供给应用系统30。应用系统30可根据该描述文件渲染出所需的列表页/表单页。

在本申请实施例中，根据应用系统30对列表页/表单页的使用需求，可以抽取应用系统30对列表页/表单页的样式需求信息，把该样式需求信息给到页面配置平台40，供页面配置平台40为应用系统30提供符合该样式需求信息的列表页/表单页所需的描述文件。可选地，通过电子设备10向页面配置平台40提供列表页/表单页的样式需求信息，或者，接收页面配置人员向页面配置平台40输入的列表页/表单页的样式需求信息，如图1中①所示，其中，向页面配置平台40提供列表页/表单页的样式需求信息的电子设备10可以为任意电子设备，而不必须具有应用系统30。其中，页面配置平台40可以提供列表页/表单页的样式需求信息的输入界面，以供页面配置人员在该输入界面上输入列表页/表单页的样式需求信息的输入界面。

如图1中②所示，页面配置平台40根据应用系统对列表页/表单页的样式需求信息，获取目标框架代码，目标框架代码用于描述目标列表页/表单页包含的字段项及其样式和布局。页面配置平台40还展示目标列表页/表单页包含的字段项以供页面配置人员查看，页面配置人员在页面配置平台40上针对展示的字段项进行配置操作，页面配置平台40响应于页面配置人员针对字段项的配置操作，获取字段项对应的数据源地址和用于向数据源地址对应的数据源端请求数据的数据加载代码；根据数据源地址、数据加载代码和目标框架代码，生成目标列表页/表单页对应的描述文件。如图1中③所示，页面配置平台40可以将描述文件提供给应用系统30，应用系统30基于描述文件渲染出所需的目标列表页/表单页。其中，页面配置平台40可以将描述文件提供给任意电子设备中的应用系统30，而不限定为仅提供给向页面配置平台40提供列表页/表单页的样式需求信息的电子设备中应用系统30。另外，页面配置平台40也可以将描述文件存储在服务器中，以供任意电子设备中的应用系统30获取该描述文件。

以下结合附图，详细说明本申请各实施例提供的技术方案。

图2为本申请一示例性实施例提供的一种页面生成方法的流程示意图。该页面生成方法应用于页面配置平台，如图2所示，该方法可以包括以下步骤：

201、根据应用系统对列表页/表单页的样式需求信息，获取目标框架代码，目标框架代码用于描述目标列表页/表单页包含的字段项及其样式和布局。

202、展示目标列表页/表单页包含的字段项，响应于针对字段项的配置操作，获取字段项对应的数据源地址和用于向数据源地址对应的数据源端请求数据的数据加载代码。

203、根据数据源地址、数据加载代码和目标框架代码，生成目标列表页/表单页对应的描述文件。

具体而言，页面配置平台获取应用系统对列表页/表单页的样式需求信息，该样式需求信息描述了列表页/表单页包含的字段项及其样式和布局。其中，字段项的样式可以是指字段项在列表页/表单页中的UI(User Interface，用户界面)形态即展示样式，例如包括但不限于：字段项的大小、颜色、形状等；字段项的布局可以是指字段项在列表页/表单页中的相对位置信息，也即各字段项出现在列表页/表单页中哪些位置上。

针对列表页，由于列表页既要展示列表搜索项还要展示列表展示项，于是，页面需求人员提交的列表页的样式需求信息至少需要包括列表搜索项所在页面区域(也即搜索区)和列表展示项所在页面区域(也即展示区)的相对位置关系，列表搜索项涉及哪些字段项，列表展示项涉及哪些字段项，各个字段项的样式信息，列表搜索项所在页面区域的查询控件的样式信息等。

以图3所示的列表页为例，该列表页的样式需求信息指示列表搜索项所在页面区域(也即搜索区)在列表展示项所在页面区域(也即展示区)的上方。每个列表搜索项涉及一个字段项，展示在列表搜索项所在页面区域中的字段项分别为“渠道”字段项、“券类型”字段项、“用户id”字段项、“券名称”字段项、“状态”字段项、“发放方式”字段项、“发放节点”字段项、“姓名”字段项、“身份证号”字段项，各个字段项以文本控件的形态展示。该列表页的样式需求信息还指示在列表搜索项所在的页面区域设置查询控件，当用户以单击、双击、长按等触发方式触发查询控件时，可以以全部列表搜索项关联的搜索条件信息为查询条件发起查询操作，查询结果被展示到对应的列表展示项中。该列表页的样式需求信息还指示包括哪些列表展示项，各个列表展示项以文本控件的形态展示。同样地，列表展示项关联一个字段项，如图3所示，展示在列表展示项所在页面区域中的字段项分别为“券id”字段项、“姓名”字段项、“身份证号”字段项、“名称(是指卷名称)”字段项、“面值”字段项、“最低使用保费(元)”字段项、“生效开始时间”字段项等。值得注意的是，图3中展示区中的每个空白行是未加载数据的列表展示项。

针对表单页，表单页中的每个表单项涉及一个字段项，该表单页列表的样式需求信息可以指示各个字段项在表单页中的布局信息，各个字段项的UI形态。参见图4，该表单页涉及的字段项包括“接单状态”字段项、“船名”字段项、“公司名称”字段项、“姓名”字段项、“联系方式”字段项、“备注”字段项等，各个字段项以文本控件的形态展示。

在本申请实施例中，将已经在页面配置平台进行页面配置的页面称作为已有页面。其中，已有页面包括已有列表页和已有表单页，为了便于理解，将页面配置平台为已有列表页或者已有表单页配置的框架代码称作为已有框架代码。其中，已有框架代码用于描述已有列表页/表单页包含的字段项及其样式和布局。值得注意的是，现有的页面开发中，页面代码需要加载页面数据，运行页面代码能够渲染出包括页面数据的页面。而框架代码由于并不加载或者少量加载页面数据，运行框架代码仅仅能渲染出不包括或者少量页面数据的页面，但是框架代码渲染出的页面的样式或布局能够做到与页面代码渲染出页面的样式或布局相同。

在本申请实施例中，页面配置平台在为已有列表页或已有表单页配置已有框架代码之后，将已有框架代码进行保存，以便后续需要渲染的与已有页面具有同样样式需求信息的新的列表页/表单页时，无需重复开发新的列表页/表单页的框架代码。当然，若已有框架代码中不存在与需要渲染的新的列表页/表单页相适配的已有框架代码，则通过编写代码的方式编写相应的框架代码。于是，在一可选实施方式中，页面配置平台根据应用系统对列表页/表单页的样式需求信息，获取目标框架代码的一种实施过程是：根据应用系统对列表页/表单页的样式需求信息，在已有框架代码中进行匹配，已有框架代码用于描述已有列表页/表单页包含的字段项及其样式和布局；若匹配到与样式需求信息适配的已有框架代码，将匹配到的已有框架代码作为目标框架代码；若未匹配到与样式需求描述信息适配的已有框架代码，根据样式需求信息编写目标框架代码，并将目标框架代码添加至已有框架代码中。

在本实施例中，页面配置平台展示目标列表页/表单页包含的字段项，以供页面配置人员配置各个字段项的数据源地址和用于向数据源地址对应的数据源端请求数据的数据加载代码。

进一步可选的，页面配置平台在展示目标列表页/表单页包含的字段项时，可以运行目标框架代码，以渲染出中间态的列表页/表单页，在中间态的列表页/表单页上显示有代码配置框和待配置状态的字段项。于是，在一可选实施方式中，业务配置平台响应于针对字段项的配置操作，获取字段项对应的数据源地址和用于向数据源地址对应的数据源端请求数据的数据加载代码的一种实施过程是：响应于针对每个字段项的配置操作，获取每个字段项对应的数据源地址，并显示在每个字段项的关联区域内；响应于针对代码配置框的代码编辑操作，在代码配置框内中展示数据加载代码，且数据加载代码与各字段项对应的数据源地址相关联。

在本实施例中，为了便于页面配置人员执行配置操作，可以根据字段项的实际情况为字段项设置字段值配置控件。字段值配置控件的类型包括但不限于开关控件、文本输入框控件、下拉框控件等等。

在本实施例中，不同字段项的数据源地址可以相同或者不同，具体视实际情形而定。

在本实施例中，执行数据加载代码可以从数据源地址获取字段项的字段值，并渲染至页面的字段项中。值得注意的是，若目标框架代码是已有框架代码，则代码配置框内可以展示出已有的数据加载代码，页面配置人员可以对已有的数据加载代码进行适应性修改，得到目标列表页或目标表单页对应的数据加载代码。

例如，图5所示的是中间态的列表页/表单页。各个字段项的字段值输入框是各个字段项的关联区域，“sql语句”字段项的字段值输入框是代码配置框。

图5所示的页面分为基础信息配置区域和过滤展示字段项配置区域。其中，基础信息配置区域可展示以下字段项：“查询库”字段项、“查询表”字段项、“sql语句”字段项、“项目名称”字段项、“通用页面查看id”、“项目描述”。其中，在“查询库”字段项的字段值输入框配置提供数据的数据库。在“查询表”字段项的字段值输入框配置提供数据的数据表。在“sql语句”字段项的字段值输入框配置数据加载代码。在“项目名称”字段项的字段值输入框配置列表页/表单页的页面名称，在“通用页面查看id”字段项的字段值输入框配置列表页/表单页的页面id，在“秘钥”字段项的字段值输入框配置管理列表页/表单页的秘钥。在“项目描述”字段项的字段输入框中配置对列表页/表单页的描述信息。

在图5所示的中间态的列表页/表单页上，通过点击“添加”控件，可以增加一个过滤展示字段项。每个过滤展示字段项可以配置对应的数据表、数据表字段、过滤类型、下拉菜单列表、是否支持模糊搜索、是否支持sql(Structured Query Language，结构化查询语言数据库)等。其中，配置数据表也即配置过滤展示字段项的数据来源于哪个数据表，数据表字段是指过滤展示字段项在数据表中的字段名称，也即过滤展示字段项的字段值来源于哪个数据表字段。基于过滤展示字段项关联的数据表字段的字段名称，可以从数据表中获取关联的数据表字段的字段值，并作为该过滤展示字段项的字段值。过滤类型包括下拉框和输入框，也即过滤展示字段项的字段值是由用户在输入框中输入还是由用户在下拉框显示的多个字段值中选择一个字段值。“下拉菜单列表”字段的字段值输入框配置的是下拉框中出现的数据。

值得说明的是，过滤展示字段项是指必须要在最终渲染到应用系统的列表页或表单页上展示的字段项，例如图3中“渠道”字段项、“券类型”字段项、“用户id”字段项、“券名称”字段项、“状态”字段项、“发放方式”字段项、“发放节点”字段项、“姓名”字段项、“身份证号”字段项等均为过滤展示字段项。而图5所示的中间态的列表页/表单页上除去过滤展示字段项之外的其他字段项不是必须要展示在最终渲染到应用系统的列表页或表单页上的字段项。

在基础信息配置区域中配置的是列表页或表单页的数据源是来源于哪个数据库的哪些查询表。在过滤展示字段项的配置区域，则基于“数据表”字段的配置信息和“数据表字段”字段的配置信息共同决定过滤展示字段项的数据源地址是来源于哪个查询表下的哪个数据表字段。相应的，针对每个过滤展示字段项，需要在“sql语句”字段项的字段值输入框中输入关联的“在配置的数据库中查询该过滤展示字段项所配置的查询表下对应的数据表字段”sql语句，也即配置过滤展示字段项的数据加载代码，运行该相应的sql语句可以获取该过滤展示字段项的字段值，所获取到的过滤展示字段项的字段值后续被加载到最终渲染到应用系统的列表页或表单页的相应字段项中。

在本申请实施例中，页面配置平台配置完目标列表页/表单页包含的字段项的数据源地址和数据加载代码之后，根据数据源地址、数据加载代码和目标框架代码，生成目标列表页/表单页对应的描述文件。该目标列表页/表单页对应的描述文件用于提供给以供应用系统基于描述文件渲染出所需的目标列表页/表单页。其中，页面配置平台可以直接将描述文件提供给应用系统。进一步可选的，页面配置平台还可以将描述文件的下载地址提供给应用系统，以供应用系统下载描述文件并基于描述文件渲染出所需的目标列表页/表单页。

值得注意的是，在本申请实施例中，框架代码和页面数据解耦，只需通过可视化方式配置数据源地址和数据加载代码，这样，渲染页面时，可以实时动态加载页面数据，具有通用性。另外，向应用系统提供不包括页面数据的描述文件，还可以减少应用系统下载文件的大小，提高应用系统快速下载描述文件的下载速度。

现有的页面开发中，列表页和表单页面的页面内容需要写到页面代码中，当需要修改的时候，需要研发人员重新开发、上线。浪费人力和延缓上线时间。而本实施例中，不需要将列表页和表单页面的页面内容写到页面代码中，只需要配置数据源地址和数据加载代码，当需要修改的时候，修改数据源地址和数据加载代码即可，降低了研发人员的工作量，加快了页面重新上线效率，降低了页面开发时的代码冗余度，提高了页面开发灵活度，减少了资源浪费。

本申请实施例提供的页面生成方法，页面配置平台根据应用系统对列表页/表单页的样式需求信息，获取目标框架代码，目标框架代码用于描述目标列表页/表单页包含的字段项及其样式和布局；展示目标列表页/表单页包含的字段项，响应于针对字段项的配置操作，获取字段项对应的数据源地址和用于向数据源地址对应的数据源端请求数据的数据加载代码；根据数据源地址、数据加载代码和目标框架代码，生成目标列表页/表单页对应的描述文件，以供应用系统基于描述文件渲染出所需的目标列表页/表单页。由此，降低了页面开发时的代码冗余度，提高了页面开发灵活度，减少了资源浪费。

图6为本申请一示例性实施例提供的一种页面渲染方法的流程示意图。该页面渲染方法应用于应用系统所在的电子设备，如图6所示，该方法可以包括以下步骤：

601、接收页面配置平台提供的目标列表页/表单页对应的描述文件，描述文件包括目标列表页/表单页对应的数据源地址、数据加载代码和目标框架代码。

602、运行目标框架代码，以渲染出目标列表页/表单页包含的字段项及其样式和布局，并在渲染字段项过程中，运行数据加载代码，以从数据源地址对应的数据源端请求目标数据，并渲染至字段项中，得到目标列表页/表单页。

在本实施例中，页面配置平台可以直接将目标列表页/表单页对应的描述文件发送给应用系统。进一步可选的，页面配置平台将描述文件的下载地址提供给应用系统，这样，应用系统接收页面配置平台提供的目标列表页/表单页对应的描述文件的一种实施方式是：接收页面配置平台提供的描述文件的下载地址；根据下载地址，下载描述文件。

在一些实施例中，应用系统向页面配置平台提供对列表页/表单页的样式需求信息，以供页面配置平台获取目标框架代码；和/或向页面配置平台提供数据源地址，以供页面配置平台为字段项配置对应的数据源地址和数据加载代码。

在一些应用场景中，目标列表页或者目标表单页的整个页面都是展示区，则目标列表页或者目标表单页涉及的字段项是展示字段项。这时，运行目标框架代码，以渲染出目标列表页/表单页包含的字段项及其样式和布局的实施过程是：运行目标框架代码，在展示区显示展示字段项及其样式和布局。

在另一些应用场景中，目标列表页或者目标表单页划分为展示区和搜索区。展示在搜索区的字段项为展示字段项，展示在搜索区的字段项为搜索字段项。值得注意的是，搜索字段项的字段值反映的是展示字段项的搜索条件信息，展示字段项的字段值反映的是符合搜索条件的搜索结果。

于是，在一可选实施方式中，字段项包括搜索字段项和展示字段项；运行目标框架代码，以渲染出目标列表页/表单页包含的字段项及其样式和布局，包括：运行目标框架代码，在目标列表页/表单页的搜索区显示搜索字段项及其样式和布局，并在展示区显示展示字段项及其样式和布局；

相应的，在渲染字段项过程中，运行数据加载代码，以从数据源地址对应的数据源端请求目标数据，并渲染至字段项中，得到目标列表页/表单页的一种实施过程是：响应于针对至少一个搜索字段项的输入操作，根据输入至至少一个搜索字段项内的搜索条件值，运行数据加载代码，以根据至少一个搜索条件值从数据源地址对应的数据源端请求目标数据，并更新至对应的展示字段项中，得到目标列表页/表单页。

值得注意的是，针对至少一个搜索字段项的输入操作可以是指针对全部的搜索字段项的输入操作，也即在全部的搜索字段项内输入各自搜索条件值。针对至少一个搜索字段项的输入操作也可以是针对部分的搜索字段项的输入操作，也即在部分的搜索字段项内输入各自搜索条件值，而对于剩余的未输入搜索条件值的搜索字段项可以采用默认的搜索条件值，或者，不考虑剩余的未输入搜索条件值的搜索字段项，具体视实际应用需求而定。

以图3为例，在搜索区的各个搜索字段项的字段值输入框中输入各自的搜索条件值，点击查询控件，查询满足全部搜索条件值的查询结果，并渲染至展示区的各个展示字段项中。

本申请实施例提供的页面渲染方法，应用系统接收页面配置平台提供的目标列表页/表单页对应的描述文件，描述文件包括目标列表页/表单页对应的数据源地址、数据加载代码和目标框架代码；运行目标框架代码，以渲染出目标列表页/表单页包含的字段项及其样式和布局，并在渲染字段项过程中，运行数据加载代码，以从数据源地址对应的数据源端请求目标数据，并渲染至字段项中，得到目标列表页/表单页。由此，基于页面配置平台提供的描述文件渲染页面，由于框架代码和页面数据解耦，这样渲染页面时，可以实时动态加载页面数据，具有通用性，提高了页面渲染的效率。

需要说明的是，上述实施例所提供方法的各步骤的执行主体均可以是同一设备，或者，该方法也由不同设备作为执行主体。比如，步骤201至步骤203的执行主体可以为设备A；又比如，步骤201和202的执行主体可以为设备A，步骤203的执行主体可以为设备B；等等。

另外，在上述实施例及附图中的描述的一些流程中，包含了按照特定顺序出现的多个操作，但是应该清楚了解，这些操作可以不按照其在本文中出现的顺序来执行或并行执行，操作的序号如201、202等，仅仅是用于区分开各个不同的操作，序号本身不代表任何的执行顺序。另外，这些流程可以包括更多或更少的操作，并且这些操作可以按顺序执行或并行执行。需要说明的是，本文中的“第一”、“第二”等描述，是用于区分不同的消息、设备、模块等，不代表先后顺序，也不限定“第一”和“第二”是不同的类型。

图7为本申请一示例性实施例提供的一种页面配置平台的结构示意图。如图7所示，该装置可以包括：

获取模块71，用于根据应用系统对列表页/表单页的样式需求信息，获取目标框架代码，目标框架代码用于描述目标列表页/表单页包含的字段项及其样式和布局；

展示模块72，用于展示目标列表页/表单页包含的字段项，响应于针对字段项的配置操作，获取字段项对应的数据源地址和用于向数据源地址对应的数据源端请求数据的数据加载代码；

生成模块73，用于根据数据源地址、数据加载代码和目标框架代码，生成目标列表页/表单页对应的描述文件，以供应用系统基于描述文件渲染出所需的目标列表页/表单页。

进一步可选的，获取模块71，根据应用系统对列表页/表单页的样式需求信息，获取目标框架代码时，具体用于：根据应用系统对列表页/表单页的样式需求信息，在已有框架代码中进行匹配，已有框架代码用于描述已有列表页/表单页包含的字段项及其样式和布局；若匹配到与样式需求信息适配的已有框架代码，将匹配到的已有框架代码作为目标框架代码；若未匹配到与样式需求描述信息适配的已有框架代码，根据样式需求信息编写目标框架代码，并将目标框架代码添加至已有框架代码中。

进一步可选的，展示模块72展示目标列表页/表单页包含的字段项时，具体用于：运行目标框架代码，以渲染出中间态的列表页/表单页，在中间态的列表页/表单页上显示有代码配置框和待配置状态的字段项。

进一步可选的，展示模块72响应于针对字段项的配置操作，获取字段项对应的数据源地址和用于向数据源地址对应的数据源端请求数据的数据加载代码时，具体用于：响应于针对每个字段项的配置操作，获取每个字段项对应的数据源地址，并显示在每个字段项的关联区域内；响应于针对代码配置框的代码编辑操作，在代码配置框内中展示数据加载代码，且数据加载代码与各字段项对应的数据源地址相关联。

进一步可选的，生成模块73，还用于：将描述文件的下载地址提供给应用系统，以供应用系统下载描述文件并基于描述文件渲染出所需的目标列表页/表单页。

图7所示的页面配置平台可以执行图2所示实施例的页面生成方法，其实现原理和技术效果不再赘述。对于上述实施例中的页面配置平台其中各个模块、单元执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

图8为本申请一示例性实施例提供的一种页面渲染装置的结构示意图。

如图8所示，该装置可以包括：

接收模块81，用于接收页面配置平台提供的目标列表页/表单页对应的描述文件，描述文件包括目标列表页/表单页对应的数据源地址、数据加载代码和目标框架代码。

运行模块82，用于运行目标框架代码，以渲染出目标列表页/表单页包含的字段项及其样式和布局，并在渲染字段项过程中，运行数据加载代码，以从数据源地址对应的数据源端请求目标数据，并渲染至字段项中，得到目标列表页/表单页。

进一步可选的，字段项包括搜索字段项和展示字段项；运行模块82运行目标框架代码，以渲染出目标列表页/表单页包含的字段项及其样式和布局时，具体用于：运行目标框架代码，在目标列表页/表单页的搜索区显示搜索字段项及其样式和布局，并在展示区显示展示字段项及其样式和布局；

相应的，运行模块82在渲染字段项过程中，运行数据加载代码，以从数据源地址对应的数据源端请求目标数据，并渲染至字段项中，得到目标列表页/表单页时，具体用于：响应于针对至少一个搜索字段项的输入操作，根据输入至该搜索字段项内的至少一个搜索条件值，运行数据加载代码，以根据至少一个搜索条件值从数据源地址对应的数据源端请求目标数据，并更新至对应的展示字段项中，得到目标列表页/表单页。

进一步可选的，接收模块81接收页面配置平台提供的目标列表页/表单页对应的描述文件时，具体用于：接收页面配置平台提供的描述文件的下载地址；根据下载地址，下载描述文件。

进一步可选的，上述装置还包括：发送模块，用于向页面配置平台提供对列表页/表单页的样式需求信息，以供页面配置平台获取目标框架代码；和/或，向页面配置平台提供数据源地址，以供页面配置平台为字段项配置对应的数据源地址和数据加载代码。

图8所示的页面渲染装置可以执行图6所示实施例的页面渲染方法，其实现原理和技术效果不再赘述。对于上述实施例中的页面渲染装置其中各个模块、单元执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

图9为本申请一示例性实施例提供的一种电子设备的结构示意图。如图9所示，该电子设备可以包括：包括：存储器91和处理器92。

存储器91，用于存储计算机程序，并可被配置为存储其它各种数据以支持在计算平台上的操作。这些数据的示例包括用于在计算平台上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。

存储器91可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

处理器92，与存储器91耦合，用于执行存储器91中的计算机程序，以用于：根据应用系统对列表页/表单页的样式需求信息，获取目标框架代码，目标框架代码用于描述目标列表页/表单页包含的字段项及其样式和布局；展示目标列表页/表单页包含的字段项，响应于针对字段项的配置操作，获取字段项对应的数据源地址和用于向数据源地址对应的数据源端请求数据的数据加载代码；根据数据源地址、数据加载代码和目标框架代码，生成目标列表页/表单页对应的描述文件，以供应用系统基于描述文件渲染出所需的目标列表页/表单页；

或者，处理器92，与存储器91耦合，用于执行存储器91中的计算机程序，以用于：接收页面配置平台提供的目标列表页/表单页对应的描述文件，描述文件包括目标列表页/表单页对应的数据源地址、数据加载代码和目标框架代码；运行目标框架代码，以渲染出目标列表页/表单页包含的字段项及其样式和布局，并在渲染字段项过程中，运行数据加载代码，以从数据源地址对应的数据源端请求目标数据，并渲染至字段项中，得到目标列表页/表单页。

值得说明的是，关于电子设备执行页面生成方法或页面渲染方法的具体实现方式，可以参见前述实施例，在此不再赘述。

进一步，如图9所示，该电子设备还包括：通信组件93、显示器94、电源组件95、音频组件96等其它组件。图9中仅示意性给出部分组件，并不意味着电子设备只包括图9所示组件。另外，图9中虚线框内的组件为可选组件，而非必选组件，具体可视电子设备的产品形态而定。本实施例的电子设备可以实现为台式电脑、笔记本电脑、智能手机或IOT设备等终端设备，也可以是常规服务器、云服务器或服务器阵列等服务端设备。若本实施例的电子设备实现为台式电脑、笔记本电脑、智能手机等终端设备，可以包含图9中虚线框内的组件；若本实施例的电子设备实现为常规服务器、云服务器或服务器阵列等服务端设备，则可以不包含图9中虚线框内的组件。

相应地，本申请实施例还提供一种存储有计算机程序的计算机可读存储介质，计算机程序被执行时能够实现上述方法实施例中可由电子设备执行的各步骤。

上述通信组件被配置为便于通信组件所在设备和其他设备之间有线或无线方式的通信。通信组件所在设备可以接入基于通信标准的无线网络，如WiFi，2G、3G、4G/LTE、5G等移动通信网络，或它们的组合。在一个示例性实施例中，通信组件经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，通信组件还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

上述显示器包括屏幕，其屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与触摸或滑动操作相关的持续时间和压力。

上述电源组件，为电源组件所在设备的各种组件提供电力。电源组件可以包括电源管理系统，一个或多个电源，及其他与为电源组件所在设备生成、管理和分配电力相关联的组件。

上述音频组件，可被配置为输出和/或输入音频信号。例如，音频组件包括一个麦克风(MIC)，当音频组件所在设备处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器或经由通信组件发送。在一些实施例中，音频组件还包括一个扬声器，用于输出音频信号。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

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

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

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

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。

以上仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (13)

1.一种页面生成方法，其特征在于，应用于页面配置平台，所述方法包括：

根据应用系统对列表页/表单页的样式需求信息，获取目标框架代码，所述目标框架代码用于描述目标列表页/表单页包含的字段项及其样式和布局；

展示所述目标列表页/表单页包含的字段项，响应于针对所述字段项的配置操作，获取所述字段项对应的数据源地址和用于向所述数据源地址对应的数据源端请求数据的数据加载代码；

根据所述数据源地址、所述数据加载代码和所述目标框架代码，生成目标列表页/表单页对应的描述文件，以供所述应用系统基于所述描述文件渲染出所需的目标列表页/表单页。

2.根据权利要求1所述的方法，其特征在于，根据应用系统对列表页/表单页的样式需求信息，获取目标框架代码，包括：

根据应用系统对列表页/表单页的样式需求信息，在已有框架代码中进行匹配，所述已有框架代码用于描述已有列表页/表单页包含的字段项及其样式和布局；

若匹配到与所述样式需求信息适配的已有框架代码，将匹配到的已有框架代码作为所述目标框架代码；

若未匹配到与所述样式需求描述信息适配的已有框架代码，根据所述样式需求信息编写所述目标框架代码，并将所述目标框架代码添加至已有框架代码中。

3.根据权利要求1所述的方法，其特征在于，展示所述目标列表页/表单页包含的字段项，包括：

运行所述目标框架代码，以渲染出中间态的列表页/表单页，在所述中间态的列表页/表单页上显示有代码配置框和待配置状态的字段项。

4.根据权利要求3所述的方法，其特征在于，响应于针对所述字段项的配置操作，获取所述字段项对应的数据源地址和用于向所述数据源地址对应的数据源端请求数据的数据加载代码，包括：

响应于针对每个字段项的配置操作，获取每个字段项对应的数据源地址，并显示在每个字段项的关联区域内；

响应于针对所述代码配置框的代码编辑操作，在所述代码配置框内中展示数据加载代码，且所述数据加载代码与各字段项对应的数据源地址相关联。

5.根据权利要求1所述的方法，其特征在于，还包括：

将所述描述文件的下载地址提供给所述应用系统，以供所述应用系统下载所述描述文件并基于所述描述文件渲染出所需的目标列表页/表单页。

6.一种页面渲染方法，应用于应用系统所在的电子设备，其特征在于，所述方法包括：

接收页面配置平台提供的目标列表页/表单页对应的描述文件，所述描述文件包括所述目标列表页/表单页对应的数据源地址、数据加载代码和目标框架代码；

运行所述目标框架代码，以渲染出所述目标列表页/表单页包含的字段项及其样式和布局，并在渲染所述字段项过程中，运行所述数据加载代码，以从所述数据源地址对应的数据源端请求目标数据，并渲染至所述字段项中，得到所述目标列表页/表单页。

7.根据权利要求6所述的方法，其特征在于，所述字段项包括搜索字段项和展示字段项；运行所述目标框架代码，以渲染出所述目标列表页/表单页包含的字段项及其样式和布局，包括：

运行所述目标框架代码，在所述目标列表页/表单页的搜索区显示搜索字段项及其样式和布局，并在展示区显示展示字段项及其样式和布局；

在渲染所述字段项过程中，运行所述数据加载代码，以从所述数据源地址对应的数据源端请求目标数据，并渲染至所述字段项中，得到所述目标列表页/表单页，包括：

响应于针对至少一个搜索字段项的输入操作，根据输入至该搜索字段项内的至少一个搜索条件值，运行所述数据加载代码，以根据所述至少一个搜索条件值从所述数据源地址对应的数据源端请求目标数据，并更新至对应的展示字段项中，得到所述目标列表页/表单页。

8.根据权利要求6所述的方法，其特征在于，接收页面配置平台提供的目标列表页/表单页对应的描述文件，包括：

接收所述页面配置平台提供的所述描述文件的下载地址；

根据所述下载地址，下载所述描述文件。

9.根据权利要求6所述的方法，其特征在于，还包括：

向所述页面配置平台提供对列表页/表单页的样式需求信息，以供所述页面配置平台获取所述目标框架代码；

和/或

向所述页面配置平台提供数据源地址，以供所述页面配置平台为所述字段项配置对应的数据源地址和数据加载代码。

10.一种页面配置平台，其特征在于，包括：

获取模块，用于根据应用系统对列表页/表单页的样式需求信息，获取目标框架代码，所述目标框架代码用于描述目标列表页/表单页包含的字段项及其样式和布局；

展示模块，用于展示所述目标列表页/表单页包含的字段项，响应于针对所述字段项的配置操作，获取所述字段项对应的数据源地址和用于向所述数据源地址对应的数据源端请求数据的数据加载代码；

生成模块，用于根据所述数据源地址、所述数据加载代码和所述目标框架代码，生成目标列表页/表单页对应的描述文件，以供所述应用系统基于所述描述文件渲染出所需的目标列表页/表单页。

11.一种页面渲染装置，其特征在于，包括：

接收模块，用于接收页面配置平台提供的目标列表页/表单页对应的描述文件，所述描述文件包括所述目标列表页/表单页对应的数据源地址、数据加载代码和目标框架代码；

运行模块，用于运行所述目标框架代码，以渲染出所述目标列表页/表单页包含的字段项及其样式和布局，并在渲染所述字段项过程中，运行所述数据加载代码，以从所述数据源地址对应的数据源端请求目标数据，并渲染至所述字段项中，得到所述目标列表页/表单页。

12.一种电子设备，其特征在于，包括：存储器和处理器；

所述存储器，用于存储计算机程序；

所述处理器耦合至所述存储器，用于执行所述计算机程序以用于执行权利要求1-9任一项所述方法中的步骤。

13.一种存储有计算机程序的计算机可读存储介质，其特征在于，当所述计算机程序被处理器执行时，致使所述处理器实现权利要求1-9任一项所述方法中的步骤。

Images