CN114265658B - 页面显示方法、装置及设备 - Google Patents

Abstract

本申请提供一种页面显示方法、装置及设备，通过终端设备接收用户输入的第一输入项内容，并将第一输入项内容和目标页面的标识发送至服务器。服务器接收终端设备发送的第一输入项内容和目标页面的标识，根据第一输入项内容和目标页面的标识，以及预先存储在数据库中的第四映射关系，获取目标待输入项信息，并将目标待输入项信息发送至终端设备。终端设备接收服务器返回的目标待输入项信息，根据目标待输入项信息中每个第一待输入项对应的组件的类型，将目标待输入项信息中每个第一待输入项的名称和对应的第一待输入项内容在动态变化区域中进行显示。目标页面无需预先存储大量代码就能够获取动态变化区域中应更新的内容，响应速度较快。

Description

页面显示方法、装置及设备

技术领域

本申请涉及计算机技术领域，尤其涉及一种页面显示方法、装置及设备。

背景技术

在浏览器/服务器(Browser/Server，B/S)架构的项目中，前端页面承载着与用户交互的主要职责。随着业务复杂性的提升，前端页面需要承载显示的内容越来越多，往往需要根据该页面某输入项的输入内容更新其他区域的待输入项，以此提高前端页面的灵活性。

目前，在***开发时往往需要开发人员在前端页面中编写所有输入项和待输入项的代码。在该***投入使用后，根据前端页面某输入项的输入内容更新前端页面中其他区域的待输入项主要是前端页面获取输入项的输入内容，通过JavaScript函数根据该输入内容，控制其他区域中各待输入项是否需要进行显示。

然而，现有技术中，需要开发人员针对每一个输入项和待输入项编写对应的代码，导致页面代码较臃肿，可能存在响应不及时的问题。

发明内容

本申请提供一种页面显示方法、装置及设备，以解决现有技术中，需要开发人员针对每一个输入项和待输入项编写对应的代码，导致页面代码较臃肿，可能存在响应不及时的问题。

第一方面，本申请实施例提供一种页面显示方法，应用于终端设备，所述终端设备的可视化图形界面上显示有目标页面，所述目标页面包括固定样式区域和动态变化区域，所述固定样式区域显示有至少一个输入项的名称，以及每个输入项对应的至少一个输入项内容，所述方法包括：

接收用户输入的第一输入项内容；

将所述第一输入项内容和目标页面的标识发送至服务器；

接收所述服务器返回的目标待输入项信息，所述目标待输入项信息包括至少一个第一待输入项的名称，每个第一待输入项对应的第一待输入项内容，以及每个第一待输入项对应的组件的类型，组件用于对待输入项内容进行显示；

根据每个第一待输入项对应的组件的类型，将每个第一待输入项的名称和对应的第一待输入项内容在所述动态变化区域中进行显示。

在第一方面的一种可能设计中，所述根据每个第一待输入项对应的组件的类型，将每个第一待输入项的名称和对应的第一待输入项内容在所述动态变化区域中进行显示，包括：

根据每个第一待输入项的名称和每个第一待输入项对应的组件的类型，生成所述动态变化区域的代码；

根据所述动态变化区域的代码，对所述目标页面进行渲染；

根据每个第一待输入项和所述代码中名称与显示位置的第一映射关系，确定每个第一待输入项对应的目标显示位置；

将每个第一待输入项显示在对应的目标显示位置，并通过每个第一待输入项对应的组件显示第一待输入项内容。

在第一方面的另一种可能设计中，所述方法还包括：

根据所述目标页面的标识，用户输入的第二待输入项的名称以及每个第二待输入项对应的组件的类型，生成第二映射关系，所述第二映射关系用于表示标识，名称与组件的类型三者的关系；

将所述第二映射关系发送至所述服务器；

或者，

根据用户输入的第二输入项内容以及每个第二输入项内容对应的第三待输入项的名称，生成输入项内容与名称的第三映射关系；

将所述第三映射关系发送至所述服务器。

第二方面，本申请实施例提供一种页面显示方法，应用于服务器，所述方法包括：

接收终端设备发送的第一输入项内容和目标页面的标识；

根据所述第一输入项内容和所述目标页面的标识，以及预先存储在数据库中的第四映射关系，获取目标待输入项信息，所述第四映射关系用于表示输入项内容，标识，名称，待输入项内容，组件的类型五者之间的关系，所述目标待输入项信息包括至少一个第一待输入项的名称，每个第一待输入项对应的第一待输入项内容，以及每个第一待输入项对应的组件的类型；

将所述目标待输入项信息发送至所述终端设备。

在第二方面的一种可能设计中，所述第四映射关系包括第二映射关系，第三映射关系以及第五映射关系，所述第二映射关系用于表示标识，名称与组件的类型三者之间的关系，所述第三映射关系用于表示输入项内容与名称之间的关系，所述第五映射关系用于表示标识，名称与待输入项内容三者之间的关系；

所述数据库包括关系数据库，属性值数据库以及属性数据库，所述关系数据库用于存储所述第三映射关系，所述属性值数据库用于存储所述第五映射关系，所述属性数据库用于存储所述第二映射关系；

相应的，所述根据所述第一输入项内容和所述目标页面的标识，以及预先存储在数据库中的第四映射关系，获取目标待输入项信息，包括：

根据所述第一输入项内容和预先存储在关系数据库中的所述第三映射关系，确定所述第一输入项内容对应的第一待输入项的名称；

根据所述目标页面的标识，每个第一待输入项的名称以及预先存储在属性值数据库中所述第五映射关系，确定所述每个第一待输入项的名称对应的第一待输入项内容；

根据所述目标页面的标识，每个第一待输入项的名称以及预先存储在属性数据库中的所述第二映射关系，确定所述目标页面的标识和每个第一待输入项的名称对应的组件的类型；

将每个第一待输入项的名称，每个第一待输入项对应的第一待输入项内容，以及每个第一待输入项对应的组件的类型确定为目标待输入项信息。

可选的，所述方法还包括：

接收所述终端设备发送的所述第二映射关系，并将所述第二映射关系存储至所述属性数据库中；

或者，

接收所述终端设备发送的所述第二映射关系，并将所述第三映射关系发送至所述关系数据库。

第三方面，本申请实施例提供一种页面显示装置，应用于终端设备，所述终端设备的可视化图形界面上显示有目标页面，所述目标页面包括固定样式区域和动态变化区域，所述固定样式区域显示有至少一个输入项的名称，以及每个输入项对应的至少一个输入项内容，所述装置包括：

接收模块，用于接收用户输入的第一输入项内容；

发送模块，用于将所述第一输入项内容和目标页面的标识发送至服务器；

所述接收模块，还用于接收所述服务器返回的目标待输入项信息，所述目标待输入项信息包括至少一个第一待输入项的名称，每个第一待输入项对应的第一待输入项内容，以及每个第一待输入项对应的组件的类型，组件用于对待输入项内容进行显示；

显示模块，用于根据每个第一待输入项对应的组件的类型，将每个第一待输入项的名称和对应的第一待输入项内容在所述动态变化区域中进行显示。

在第三方面的一种可能设计中，所述显示模块，具体用于：

根据每个第一待输入项的名称和每个第一待输入项对应的组件的类型，生成所述动态变化区域的代码；

根据所述动态变化区域的代码，对所述目标页面进行渲染；

根据每个第一待输入项和所述代码中名称与显示位置的第一映射关系，确定每个第一待输入项对应的目标显示位置；

将每个第一待输入项显示在对应的目标显示位置，并通过每个第一待输入项对应的组件显示第一待输入项内容。

在第三方面的另一种可能设计中，所述装置还包括：

处理模块，用于根据所述目标页面的标识，用户输入的第二待输入项的名称以及每个第二待输入项对应的组件的类型，生成第二映射关系，所述第二映射关系用于表示标识，名称与组件的类型三者的关系；

所述发送模块，还用于将所述第二映射关系发送至所述服务器；

或者，

所述处理模块，还用于根据用户输入的第二输入项内容以及每个第二输入项内容对应的第三待输入项的名称，生成输入项内容与名称的第三映射关系；

所述发送模块，还用于将所述第三映射关系发送至所述服务器。

第四方面，本申请实施例提供一种页面显示装置，应用于服务器，所述装置包括：

接收模块，用于接收终端设备发送的第一输入项内容和目标页面的标识；

处理模块，用于根据所述第一输入项内容和所述目标页面的标识，以及预先存储在数据库中的第四映射关系，获取目标待输入项信息，所述第四映射关系用于表示输入项内容，标识，名称，待输入项内容，组件的类型五者之间的关系，所述目标待输入项信息包括至少一个第一待输入项的名称，每个第一待输入项对应的第一待输入项内容，以及每个第一待输入项对应的组件的类型；

发送模块，用于将所述目标待输入项信息发送至所述终端设备。

在第四方面的一种可能设计中，所述第四映射关系包括第二映射关系，第三映射关系以及第五映射关系，所述第二映射关系用于表示标识，名称与组件的类型三者之间的关系，所述第三映射关系用于表示输入项内容与名称之间的关系，所述第五映射关系用于表示标识，名称与待输入项内容三者之间的关系；

相应的，所述处理模块，具体用于：

根据所述第一输入项内容和预先存储在关系数据库中的所述第三映射关系，确定所述第一输入项内容对应的第一待输入项的名称；

根据所述目标页面的标识，每个第一待输入项的名称以及预先存储在属性值数据库中所述第五映射关系，确定所述每个第一待输入项的名称对应的第一待输入项内容；

根据所述目标页面的标识，每个第一待输入项的名称以及预先存储在属性数据库中的所述第二映射关系，确定所述目标页面的标识和每个第一待输入项的名称对应的组件的类型；

将每个第一待输入项的名称，每个第一待输入项对应的第一待输入项内容，以及每个第一待输入项对应的组件的类型确定为目标待输入项信息。

第五方面，本申请实施例提供一种终端设备，包括：处理器、收发器、显示器、存储器及存储在所述存储器上并可在处理器上运行的计算机程序指令，所述处理器执行所述计算机程序指令时用于实现第一方面以及各可能设计提供的方法。

第六方面，本申请实施例提供一种服务器，包括：处理器、收发器、存储器及存储在所述存储器上并可在处理器上运行的计算机程序指令，所述处理器执行所述计算机程序指令时用于实现第二方面以及各可能设计提供的方法。

本申请实施例提供的页面显示方法、装置及设备，通过终端设备接收用户输入的第一输入项内容，并将第一输入项内容和目标页面的标识发送至服务器。服务器接收终端设备发送的第一输入项内容和目标页面的标识，根据第一输入项内容和目标页面的标识，以及预先存储在数据库中的第四映射关系，获取目标待输入项信息，并将目标待输入项信息发送至终端设备。终端设备接收服务器返回的目标待输入项信息，根据目标待输入项信息中每个第一待输入项对应的组件的类型，将目标待输入项信息中每个第一待输入项的名称和对应的第一待输入项内容在动态变化区域中进行显示。本方案中，目标页面无需预先存储大量代码，终端设备可以与服务器进行交互，从而获取动态变化区域中应更新的内容，响应速度较快。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。

图1A为现有技术提供的前端页面实施例一的界面示意图；

图1B为现有技术提供的前端页面实施例二的界面示意图；

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

图3为本申请实施例提供的页面显示方法实施例一的流程示意图；

图4为本申请实施例提供的页面显示方法实施例二的流程示意图；

图5为本申请实施例提供的页面显示方法实施例三的流程示意图；

图6为本申请实施例提供的页面显示方法实施例四的流程示意图；

图7为本申请实施例提供的页面显示方法实施例五的流程示意图；

图8为本申请实施例提供的页面显示方法实施例六的流程示意图；

图9为本申请实施例提供的页面显示装置实施例一的结构示意图；

图10为本申请实施例提供的页面显示装置实施例二的结构示意图；

图11为本申请实施例提供的终端设备的结构示意图；

图12为本申请实施例提供的服务器的结构示意图。

通过上述附图，已示出本公开明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本公开构思的范围，而是通过参考特定实施例为本领域技术人员说明本公开的概念。

具体实施方式

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

在介绍本申请的实施例之前，首先对本申请实施例的应用背景进行解释：

目前B/S架构是信息***最流行的架构之一，在B/S架构中，用户通过浏览器显示的前端界面与***进行交互，因此，前端界面是影响用户体验的重要因素。在大量实际场景中，前端页面往往可分为固定样式区域和动态变化区域，前端页面针对用户在固定样式区域某个输入项的输入项内容，更新动态变化区域的待输入项和对应的待输入项内容。

示例性的，图1A为现有技术提供的前端页面实施例一的界面示意图，图1B为现有技术提供的前端页面实施例二的界面示意图。结合图1A和图1B所示，前端页面分为固定样式区域和动态变化区域，固定样式区域显示有输入项1、输入项2、输入项3。如图1A所示，输入项1的输入项内容为类型1时，动态变化区域显示有待输入项1、待输入项2、待输入项3、待输入项4、待输入项5以及待输入项6。如图1B所示，在用户将输入项1的输入项内容更改为类型2时，前端页面响应于用户的操作，对动态变化区域中的待输入项进行更新，在动态变化区域中显示待输入项7、待输入项8、待输入项9以及待输入项10。

目前，在***开发时往往需要开发人员在前端页面中编写所有输入项和待输入项的代码。在该***投入使用后，前端页面更新动态变化区域的待输入项和对应的待输入项内容主要是前端页面获取输入项更新的输入项内容，通过JavaScript函数根据该输入项内容，控制动态变化区域的待输入项和对应的待输入项内容是否需要进行显示。

然而，现有技术中，需要开发人员针对每一个输入项和待输入项编写对应的代码，导致页面代码较臃肿且逻辑复杂，可能存在响应不及时的问题。

进一步的，在对***进行维护的过程中，假设需要对前端页面增加或删减某些输入项或待输入项，只能通过修改代码的方式实现，维护难度较大。且在现代大型项目管理中，修改代码具有复杂的流程，人力成本和功能开发成本较高。

针对上述问题，本申请的发明构思如下：针对于每一个前端页面，开发人员可以预先配置该前端页面中输入项数据和待输入项数据，并将其发送至服务器，其中输入项数据包括每个输入项的名称、每个输入项对应的输入项内容、每个输入项对应的组件的类型；待输入项数据包括每个输入项内容对应的待输入项的名称、每个待输入项对应的待输入项内容、每个待输入项对应的组件的类型。服务器则接收输入项数据和待输入项数据，并将其存储至数据库中。在实际应用过程中，终端设备将第一输入项内容和当前页面的标识发送给服务器，以使获取服务器返回的目标待输入项信息，从而根据目标待输入项信息对目标页面进行显示，目标待输入项信息是服务器根据第一输入项内容，当前页面的标识和数据库中的输入项数据和待输入项数据获取的信息。该技术方案中，无需开发人员针对每一个输入项和待输入项编写对应的代码，仅需要少量的代码就能够对动态变化区域中的待输入项进行显示，就能解决现有技术中响应不及时，维护难度较大的问题，从而减少人力成本和功能开发成本。

示例性的，本申请实施例提供的页面显示方法可以应用于图2所示的一种应用场景示意图中。图2为本申请实施例提供的页面显示方法的一种应用场景示意图，用以解决上述技术问题。如图2所示，该应用场景可以包括：终端设备21和服务器22，还可以包括与服务器连接的至少一个数据库(如图2中的关系数据库23，属性值数据库24以及属性数据库25)。

其中，终端设备包括页面渲染层和维护层，该页面渲染层包括动态变化区域中待输入项对应的组件，目标页面，以及控制函数。其中，目标页面包括固定样式区域和动态变化区域，固定样式区域显示有至少一个输入项的名称，以及每个输入项对应的至少一个输入项内容。

服务器包括数据传输层，该数据传输层用于数据格式转换，数据校验以及数据类型转换。

在本申请实施例中，终端设备的可视化图形界面上显示有目标页面，用户对目标页面进行操作，从而输入第一输入项内容。终端设备响应于用户的操作，获取用户输入的第一输入项内容，并将第一输入项内容和目标页面的标识发送至服务器。其中，该操作可以为对组件的点击操作，还可以为在输入框组件中的输入操作。

进一步的，对于服务器而言，则接收终端设备发送的第一输入项内容和目标页面的标识，通过数据库中存储的数据获取目标待输入项信息，并发送给终端设备。终端设备接收到目标待输入项信息，根据目标待输入项信息对目标页面中各第一待输入项的名称和对应的第一待输入项内容进行显示。

需要说明的是，附图2仅是本申请实施例提供的一种应用场景的示意图，本申请实施例不对图2中包括的设备进行限定，也不对图2中设备之间的位置关系进行限定，例如，在图2中，数据库相对服务器可以是外部存储器，在其它情况下，也可以将数据库置于服务器中。

下面，通过具体实施例对本申请的技术方案进行详细说明。

需要说明的是，下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。

图3为本申请实施例提供的页面显示方法实施例一的流程示意图。如图3所示，该页面显示方法可以包括如下步骤：

S31、终端设备接收用户输入的第一输入项内容。

本申请实施例提供的页面显示方案，需要为用户提供可视化图形界面，该可视化图形界面显示有目标页面，并且为了进行数据的存储和分析，还需要后台服务平台，以使用户能够通过安装在终端设备上的浏览器或者应用程序等对服务平台进行访问。

可选的，目标页面可以为终端设备中用户当前正在使用的浏览器或者应用程序的页面。

其中，用户可以根据自己的实际需求，对目标页面进行操作，从而输入第一输入项内容，以使终端设备后续根据第一输入项内容在动态变化区域显示第一输入项内容对应的第一待输入项的名称和对应的第一待输入项内容。对于终端设备来说，则响应于用户对目标页面的操作，获取用户输入的第一输入项内容。

示例性的，用户可以对第一输入项的组件进行点击，选取第一输入项内容，如点击下拉框组件，根据实际需求点击显示在下拉框组件中的输入项内容，终端设备响应于用户的点击操作，将被点击的输入项内容确定为第一输入项内容，从而获取用户输入的第一输入项内容。用户还可以在输入框组件中输入第一输入项内容，终端设备响应于用户的输入操作，获取用户输入的第一输入项内容。

可选的，组件是预先基于React编写的输入项和待输入项所可能使用的各种输入样式，举例来说，如文本框组件、下拉框组件、单选框组件、日期框组件、数字框组件等。应理解，组件还可以包括其他现有技术中存在的输入样式，可以根据实际需求进行确定，本申请实施例对此不进行具体限制。

其中，React是一个用于构建用户页面的JavaScript库，JavaScript是一种具有函数优先的轻量级、解释型或即时编译型的编程语言。

S32、终端设备将第一输入项内容和目标页面的标识发送至服务器。

可选的，可以通过调用ajax请求将第一输入项内容和目标页面的标识发送至服务器。其中，ajax是一种创建交互式、快速动态网页应用的网页开发技术，主要用于前后端数据交换。

相应的，对于服务器来说，则接收终端设备发送的第一输入项内容和目标页面的标识。

S33、服务器根据第一输入项内容和目标页面的标识，以及预先存储在数据库中的第四映射关系，获取目标待输入项信息。

其中，目标待输入项信息包括至少一个第一待输入项的名称，每个第一待输入项对应的第一待输入项内容，以及每个第一待输入项对应的组件的类型。

其中，第四映射关系用于表示输入项内容，标识，名称，待输入项内容，组件的类型五者之间的关系。在***开发阶段或***维护过程中，用户，开发人员或维护人员可以预先通过终端设备将第四映射关系发送给服务器，以使服务器将其存储至数据库，还可以是用户，开发人员或维护人员通过其他存储有第四映射关系的数据存储设备，将该第四映射关系存储至数据库中的。

示例性的，上述第四映射关系可以如下表1所示：

表1

以表1所示的第四映射关系为例，假设第一输入项内容为输入项内容1，目标页面的标识为页面1，则根据第四映射关系，服务器确定的第一待输入项的名称为名称1和名称2。其中，名称为名称1的第一待输入项对应的组件的类型为类型1，对应的待输入项内容为待输入项内容1和待输入项内容2。名称为名称2的第一待输入项对应的组件的类型为类型2，对应的待输入项内容为待输入项内容3和待输入项内容4。

S34、服务器将目标待输入项信息发送至终端设备。

可选的，服务器可以将目标待输入项信息的每个第一待输入项的名称以及每个第一待输入项对应的组件的类型发送至终端设备，并将每个第一待输入项对应的第一待输入项内容转化为Json格式的字符串，将该字符串发送至终端设备。

相应的，对于终端设备来说，则接收服务器返回的目标待输入项信息，目标待输入项信息包括至少一个第一待输入项的名称，每个第一待输入项对应的第一待输入项内容，以及每个第一待输入项对应的组件的类型，组件用于对待输入项内容进行显示。

S35、终端设备根据每个第一待输入项对应的组件的类型，将每个第一待输入项的名称和对应的第一待输入项内容在动态变化区域中进行显示。

在一种可能的实现方式中，可以根据每个第一待输入项的名称和每个第一待输入项对应的组件的类型，生成动态变化区域的代码，并根据动态变化区域的代码，对目标页面进行渲染。

其中，在生成该代码后，可以将该代码存储至目标页面对应的state属性，覆盖掉state属性中原先存储的代码，并根据state属性中的代码对目标页面进行渲染。

在该方式下，根据每个第一待输入项和代码中名称与显示位置的第一映射关系，确定每个第一待输入项对应的目标显示位置，将每个第一待输入项显示在对应的目标显示位置，并通过每个第一待输入项对应的组件显示第一待输入项内容。举例来说，可以将每个第一待输入项的名称和对应的第一待输入项内容回填至动态变化区域对应的表单中。

在该方式下，能够根据每个第一待输入项的名称和每个第一待输入项对应的组件的类型，实时生成动态变化区域的代码，以使目标页面不需要预先存储大量的代码，有效提高页面的响应速度。

本申请实施例提供的页面显示方法，通过终端设备接收用户输入的第一输入项内容，并将第一输入项内容和目标页面的标识发送至服务器。服务器接收终端设备发送的第一输入项内容和目标页面的标识，根据第一输入项内容和目标页面的标识，以及预先存储在数据库中的第四映射关系，获取目标待输入项信息，并将目标待输入项信息发送至终端设备。终端设备接收服务器返回的目标待输入项信息，根据目标待输入项信息中每个第一待输入项对应的组件的类型，将目标待输入项信息中每个第一待输入项的名称和对应的第一待输入项内容在动态变化区域中进行显示。本方案中，目标页面无需预先存储大量代码，终端设备可以与服务器进行交互，从而获取动态变化区域中应更新的内容，响应速度较快。

进一步的，与现有技术只能更新动态变化区域的图片、文字、图片地址等非供用户输入的类型信息相比，本技术方案可以根据第一输入项内容对动态变化区域中可供用户输入的待输入项进行更新，且用户感知不到固定样式区域中的输入项和动态变化区域中的待输入项之间的差异，提高了目标页面的灵活性和适应性。

在实际应用中，示例性的，本方案可以应用于金融机构的资产管理***中，在该资产管理***中，输入项的名称为资产名称，输入项内容为资产类型，待输入项的名称为资产的属性，待输入项内容为资产要素。

图4为本申请实施例提供的页面显示方法实施例二的流程示意图。如图4所示，在上述任一实施例的基础上，该页面显示方法可以包括如下步骤：

S41、终端设备生成目标页面。

S42、终端设备接收用户输入的第一输入项内容。

S43、终端设备将第一输入项内容和目标页面的标识发送至服务器。

可选的，可以调用ajax请求，将第一输入项内容和目标页面的标识发送至服务器。

相应的，针对于服务器，则接收终端设备发送的第一输入项内容和目标页面的标识。

S44、服务器根据第一输入项内容和目标页面的标识，以及预先存储在数据库中的第四映射关系，获取目标待输入项信息。

目标待输入项信息包括至少一个第一待输入项的名称，每个第一待输入项对应的第一待输入项内容，以及每个第一待输入项对应的组件的类型。

S45、服务器将每个第一待输入项对应的第一待输入项内容转化为字符串。

其中，该字符串的格式为Json格式。

S46、服务器将目标待输入项信息的每个第一待输入项的名称，每个第一待输入项对应的组件的类型以及字符串发送至终端设备。

对于终端设备来说，则接收服务器发送的目标待输入项信息的每个第一待输入项的名称，每个第一待输入项对应的组件的类型以及字符串。

S47、终端设备将字符串进行解析，获取解析后的数据。

其中，该数据为Json数据。

S48、终端设备根据每个第一待输入项的名称，每个第一待输入项对应的组件的类型以及解析后的数据，对固定样式区域的表单和动态变化区域的表单进行数据回填。

可选的，在上述实施例的基础上，第四映射关系可以包括第二映射关系，第三映射关系以及第五映射关系，第二映射关系用于表示标识，名称与组件的类型三者之间的关系，第三映射关系用于表示输入项内容与名称之间的关系，第五映射关系用于表示标识，名称与待输入项内容三者之间的关系。数据库包括关系数据库，属性值数据库以及属性数据库，关系数据库用于存储第三映射关系，属性值数据库用于存储第五映射关系，属性数据库用于存储第二映射关系。

图5为本申请实施例提供的页面显示方法实施例三的流程示意图。如图5所示，在上述任意实施例的基础上，针对于服务器来说，该页面显示方法可以包括如下步骤：

S51、根据第一输入项内容和预先存储在关系数据库中的第三映射关系，确定第一输入项内容对应的第一待输入项的名称。

示例性的，上述第三映射关系可以如下表2所示：

表2

以表2所示的第三映射关系为例，假设第一输入项内容为输入项内容1，则根据第三映射关系，服务器确定的第一待输入项的名称为名称1和名称2。假设第一输入项内容为输入项内容2，则根据第三映射关系，服务器确定的第一待输入项的名称为名称3和名称4。

S52、根据目标页面的标识，每个第一待输入项的名称以及预先存储在属性值数据库中第五映射关系，确定每个第一待输入项的名称对应的第一待输入项内容。

示例性的，上述第五映射关系可以如下表3所示：

表3

以表3所示的第五映射关系为例，假设目标页面的标识为页面1，第一待输入项的名称为名称1，则第一待输入项内容为第一待输入项内容1和第一待输入项内容2。假设目标页面的标识为页面2，第一待输入项的名称为名称3，则第一待输入项内容为第一待输入项内容6和第一待输入项内容7。

S53、根据目标页面的标识，每个第一待输入项的名称以及预先存储在属性数据库中的第二映射关系，确定目标页面的标识和每个第一待输入项的名称对应的组件的类型。

示例性的，上述第二映射关系可以如下表4所示：

表4

以表4所示的第二映射关系为例，假设目标页面的标识为页面1，第一待输入项的名称为名称1，则对应的组件的类型为类型1。假设目标页面的标识为页面2，第一待输入项的名称为名称3，则对应的组件的类型为类型3。

S54、将每个第一待输入项的名称，每个第一待输入项对应的第一待输入项内容，以及每个第一待输入项对应的组件的类型确定为目标待输入项信息。

在上述实施例中，服务器根据第一输入项内容，目标页面的标识以及各服务器中预先存储的映射关系，获取目标待输入项信息，不同的数据库存储不同的映射关系，有效的提高了数据存储的有序性，提高了获取信息的准确度和速度。

可选的，在使用目标页面的过程中，还可以对目标页面进行维护。图6为本申请实施例提供的页面显示方法实施例四的流程示意图。如图6所示，该页面显示方法可以包括如下步骤：

S61、终端设备根据目标页面的标识，用户输入的第二待输入项的名称以及每个第二待输入项对应的组件的类型，生成第二映射关系。

S62、终端设备将第二映射关系发送至服务器。

相应的，对于服务器而言，则接收终端设备发送的第二映射关系，并将第二映射关系存储至属性数据库中。

图7为本申请实施例提供的页面显示方法实施例五的流程示意图。如图7所示，该页面显示方法可以包括如下步骤：

S71、终端设备根据用户输入的第二输入项内容以及每个第二输入项内容对应的第三待输入项的名称，生成输入项内容与名称的第三映射关系。

S72、终端设备将第三映射关系发送至服务器。

相应的，对于服务器而言，则接收终端设备发送的第三映射关系，并将第三映射关系发送至关系数据库。

在上述实施例中，前端网页中可以包括属性数据库维护模块和关系数据库维护模块，分别用于更新属性数据库中的第二映射关系和关系数据库中的第三映射关系，无需改动代码便可对动态变化区域的数据进行增删改查操作，减低了维护成本，且维护后的页面可以即可投入使用，无需等待***开发、测试、投产等复杂流程，提升了***的灵活性。

进一步的，与现有技术相比，本实施例的动态变化区域增加了展示可交互、可维护内容的能力，且用户维护动态变化区域的待输入项与维护固定样式区域的输入项的方式和原理没有差别，具有广阔的应用场景。

可选的，在开发***阶段，需要对目标页面进行配置。图8为本申请实施例提供的页面显示方法实施例六的流程示意图。如图8所示，在S31之前，该页面显示方法可以包括如下步骤：

S81、终端设备将固定样式区域的表单和动态变化区域的表单分别进行序列化处理，得到序列化后的固定样式区域的表单和序列化后的动态变化区域的表单。

S82、终端设备将序列化后的动态变化区域的表单赋值到序列化后的固定样式区域的表单中的预设字段中，获取处理后的表单。

S83、终端设备将处理后的表单发送给服务器。

相应的，针对于服务器来说，则接收终端设备发送的处理后的表单。

S84、服务器将处理后的表单中固定样式区域的数据存储至实体数据库中。

示例性的，可以对固定样式区域的数据进行进一步处理，获取标识，输入项内容之间的第六映射关系，上述第六映射关系可以如下表5所示：

表5

以表5所示的第六映射关系为例，在页面1中，输入项1对应的输入项内容包括输入项内容1、输入项内容2、输入项内容3，输入项2对应的输入项内容包括输入项内容3、输入项内容4、输入项内容5，输入项3对应的输入项内容包括输入项内容6、输入项内容7、输入项内容8。

S85、服务器将处理后的表单中动态变化区域的数据进行反序列化处理，得到动态变化区域的键值对数据。

S86、服务器根据动态变化区域的键值对数据以及目标页面的标识，获取第五映射关系，并将第五映射关系存储至属性值数据库中。

在上述实施例中，在***开发阶段，通过简单配置即可修改页面动态变化区域的展示内容，无需开发新代码，提升了开发效率。

下述为本申请装置实施例，可以用于执行本申请方法实施例。对于本申请装置实施例中未披露的细节，请参照本申请方法实施例。

图9为本申请实施例提供的页面显示装置实施例一的结构示意图。如图9所示，该页面显示装置应用于终端设备，终端设备的可视化图形界面上显示有目标页面，目标页面包括固定样式区域和动态变化区域，固定样式区域显示有至少一个输入项的名称，以及每个输入项对应的至少一个输入项内容，该装置包括：

接收模块91，用于接收用户输入的第一输入项内容；

发送模块92，用于将第一输入项内容和目标页面的标识发送至服务器；

接收模块91，还用于接收服务器返回的目标待输入项信息，目标待输入项信息包括至少一个第一待输入项的名称，每个第一待输入项对应的第一待输入项内容，以及每个第一待输入项对应的组件的类型，组件用于对待输入项内容进行显示；

显示模块93，用于根据每个第一待输入项对应的组件的类型，将每个第一待输入项的名称和对应的第一待输入项内容在动态变化区域中进行显示。

在本申请实施例的一种可能设计中，显示模块93，具体用于：

根据每个第一待输入项的名称和每个第一待输入项对应的组件的类型，生成动态变化区域的代码；

根据动态变化区域的代码，对目标页面进行渲染；

根据每个第一待输入项和代码中名称与显示位置的第一映射关系，确定每个第一待输入项对应的目标显示位置；

将每个第一待输入项显示在对应的目标显示位置，并通过每个第一待输入项对应的组件显示第一待输入项内容。

在本申请实施例的另一种可能设计中，装置还包括：

处理模块，用于根据目标页面的标识，用户输入的第二待输入项的名称以及每个第二待输入项对应的组件的类型，生成第二映射关系，第二映射关系用于表示标识，名称与组件的类型三者的关系；

发送模块92，还用于将第二映射关系发送至服务器；

或者，

处理模块，还用于根据用户输入的第二输入项内容以及每个第二输入项内容对应的第三待输入项的名称，生成输入项内容与名称的第三映射关系；

发送模块92，还用于将第三映射关系发送至服务器。

本申请实施例提供的页面显示装置，可用于执行上述任一实施例中的终端设备侧的页面显示方法，其实现原理和技术效果类似，在此不再赘述。

图10为本申请实施例提供的页面显示装置实施例二的结构示意图。如图10所示，该页面显示装置包括：

接收模块101，用于接收终端设备发送的第一输入项内容和目标页面的标识；

处理模块102，用于根据第一输入项内容和目标页面的标识，以及预先存储在数据库中的第四映射关系，获取目标待输入项信息，第四映射关系用于表示输入项内容，标识，名称，待输入项内容，组件的类型五者之间的关系，目标待输入项信息包括至少一个第一待输入项的名称，每个第一待输入项对应的第一待输入项内容，以及每个第一待输入项对应的组件的类型；

发送模块103，用于将目标待输入项信息发送至终端设备。

在本申请实施例的一种可能设计中，第四映射关系包括第二映射关系，第三映射关系以及第五映射关系，第二映射关系用于表示标识，名称与组件的类型三者之间的关系，第三映射关系用于表示输入项内容与名称之间的关系，第五映射关系用于表示标识，名称与待输入项内容三者之间的关系；

数据库包括关系数据库，属性值数据库以及属性数据库，关系数据库用于存储第三映射关系，属性值数据库用于存储第五映射关系，属性数据库用于存储第二映射关系；

相应的，处理模块102，具体用于：

根据第一输入项内容和预先存储在关系数据库中的第三映射关系，确定第一输入项内容对应的第一待输入项的名称；

根据目标页面的标识，每个第一待输入项的名称以及预先存储在属性值数据库中第五映射关系，确定每个第一待输入项的名称对应的第一待输入项内容；

根据目标页面的标识，每个第一待输入项的名称以及预先存储在属性数据库中的第二映射关系，确定目标页面的标识和每个第一待输入项的名称对应的组件的类型；

将每个第一待输入项的名称，每个第一待输入项对应的第一待输入项内容，以及每个第一待输入项对应的组件的类型确定为目标待输入项信息。

本申请实施例提供的页面显示装置，可用于执行上述任一实施例中的服务器侧的页面显示方法，其实现原理和技术效果类似，在此不再赘述。

需要说明的是，应理解以上装置的各个模块的划分仅仅是一种逻辑功能的划分，实际实现时可以全部或部分集成到一个物理实体上，也可以物理上分开。且这些模块可以全部以软件通过处理元件调用的形式实现；也可以全部以硬件的形式实现；还可以部分模块通过处理元件调用软件的形式实现，部分模块通过硬件的形式实现。此外，这些模块全部或部分可以集成在一起，也可以独立实现。这里所述的处理元件可以是一种集成电路，具有信号的处理能力。在实现过程中，上述方法的各步骤或以上各个模块可以通过处理器元件中的硬件的集成逻辑电路或者软件形式的指令完成。

图11为本申请实施例提供的终端设备的结构示意图。如图11所示，该终端设备21可以包括：处理器111、收发器112、显示器113、存储器114及存储在所述存储器114上并可在处理器111上运行的计算机程序指令，所述处理器111执行所述计算机程序指令时实现前述任一实施例提供的终端设备侧的页面显示方法。

可选的，该终端设备21的上述各个器件之间可以通过***总线连接。

可选的，终端设备21还可以包括与其他设备进行交互的接口。

可选的，在硬件实现上，上述图9所示实施例中的：接收模块91和发送模块92对应于本实施例中的收发器112。

显示器113用于显示处理器111的处理结果，可视化图形界面上的目标页面以及实现人机交互功能。可选的，显示器113可以是用户界面，该用户界面可以包括图形、文本、图标、视频及其它们的任意组合。在一些实施例中，显示器113可以为终端设备21的前面板；在另一些实施例中，显示器113可以是柔性显示屏，设置在终端设备21的弯曲表面上或折叠面上。甚至，显示器113还可以设置成非矩形的不规则图形的显示屏，也即异形屏。显示器113可以采用液晶显示屏(Liquid Crystal Display，LCD)、有机发光二极管(Organic Light-Emitting Diode，OLED)等材质制备。

本申请实施例提供的终端设备，可用于执行上述任一方法实施例提供的终端设备侧的页面显示方法，其实现原理和技术效果类似，在此不再赘述。

图12为本申请实施例提供的服务器的结构示意图。如图12所示，该服务器22可以包括：处理器121、收发器122、存储器及存储在所述存储器123上并可在处理器121上运行的计算机程序指令，所述处理器121执行所述计算机程序指令时实现前述任一实施例提供的服务器侧的页面显示方法。

可选的，该服务器22的上述各个器件之间可以通过***总线连接。

可选的，服务器22还可以包括与其他设备进行交互的接口。

可选的，在硬件实现上，上述图10所示实施例中的：接收模块101和发送模块103对应于本实施例中的收发器122，处理模块102对应于本实施例中的处理器121。

本申请实施例提供的服务器22，可用于执行上述任一方法实施例提供的服务器22侧的页面显示方法，其实现原理和技术效果类似，在此不再赘述。

存储器可以是单独的存储单元，也可以是集成在处理器中的存储单元。处理器的数量为一个或者多个。

收发器用于和其他计算机进行通信，该收发器构成通信接口。

应理解，处理器可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本申请所公开的方法的步骤可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。

***总线可以是外设部件互连标准(peripheral component interconnect，PCI)总线或扩展工业标准结构(extended industry standard architecture，EISA)总线等。***总线可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。存储器可能包括随机存取存储器(randomaccess memory，RAM)，也可能还包括非易失性存储器(non-volatile memory，NVM)，例如至少一个磁盘存储器。

实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一可读取存储器中。该程序在执行时，执行包括上述各方法实施例的步骤；而前述的存储器(存储介质)包括：只读存储器(read-only memory，ROM)、RAM、快闪存储器、硬盘、固态硬盘、磁带(英文：magnetic tape)、软盘(英文：floppy disk)、光盘(英文：optical disc)及其任意组合。

本申请实施例提供的电子设备，可用于执行上述任一方法实施例提供的页面显示方法，其实现原理和技术效果类似，在此不再赘述。

本申请实施例提供一种计算机可读存储介质，该计算机可读存储介质中存储有计算机指令，当该计算机指令在计算机上运行时，使得计算机执行上述页面显示方法。

上述的计算机可读存储介质，上述可读存储介质可以是由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器，电可擦除可编程只读存储器，可擦除可编程只读存储器，可编程只读存储器，只读存储器，磁存储器，快闪存储器，磁盘或光盘。可读存储介质可以是通用或专用计算机能够存取的任何可用介质。

可选的，将可读存储介质耦合至处理器，从而使处理器能够从该可读存储介质读取信息，且可向该可读存储介质写入信息。当然，可读存储介质也可以是处理器的组成部分。处理器和可读存储介质可以位于专用集成电路(Application Specific IntegratedCircuits，ASIC)中。当然，处理器和可读存储介质也可以作为分立组件存在于设备中。

本申请实施例还提供一种计算机程序产品，该计算机程序产品包括计算机程序，该计算机程序存储在计算机可读存储介质中，至少一个处理器可以从该计算机可读存储介质中读取该计算机程序，所述至少一个处理器执行所述计算机程序时可实现上述页面显示方法。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求书来限制。

Claims (8)

1.一种页面显示方法，其特征在于，应用于终端设备，所述终端设备的可视化图形界面上显示有目标页面，所述目标页面包括固定样式区域和动态变化区域，所述固定样式区域显示有至少一个输入项的名称，以及每个输入项对应的至少一个输入项内容，所述方法包括：

接收用户输入的第一输入项内容；

将所述第一输入项内容和目标页面的标识发送至服务器；

接收所述服务器返回的目标待输入项信息，所述目标待输入项信息包括至少一个第一待输入项的名称，每个第一待输入项对应的第一待输入项内容，以及每个第一待输入项对应的组件的类型，组件用于对待输入项内容进行显示；

根据每个第一待输入项的名称和每个第一待输入项对应的组件的类型，生成所述动态变化区域的代码；

根据所述动态变化区域的代码，对所述目标页面进行渲染；

根据每个第一待输入项和所述代码中名称与显示位置的第一映射关系，确定每个第一待输入项对应的目标显示位置；

将每个第一待输入项显示在对应的目标显示位置，并通过每个第一待输入项对应的组件显示第一待输入项内容。

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

根据所述目标页面的标识，用户输入的第二待输入项的名称以及每个第二待输入项对应的组件的类型，生成第二映射关系，所述第二映射关系用于表示标识，名称与组件的类型三者的关系；

将所述第二映射关系发送至所述服务器；

或者，

根据用户输入的第二输入项内容以及每个第二输入项内容对应的第三待输入项的名称，生成输入项内容与名称的第三映射关系；

将所述第三映射关系发送至所述服务器。

3.一种页面显示方法，其特征在于，应用于服务器，所述方法包括：

接收终端设备发送的第一输入项内容和目标页面的标识；

根据所述第一输入项内容和所述目标页面的标识，以及预先存储在数据库中的第四映射关系，获取目标待输入项信息，所述第四映射关系用于表示输入项内容，标识，名称，待输入项内容，组件的类型五者之间的关系，所述目标待输入项信息包括至少一个第一待输入项的名称，每个第一待输入项对应的第一待输入项内容，以及每个第一待输入项对应的组件的类型；

将所述目标待输入项信息发送至所述终端设备；

所述第四映射关系包括第二映射关系，第三映射关系以及第五映射关系，所述第二映射关系用于表示标识，名称与组件的类型三者之间的关系，所述第三映射关系用于表示输入项内容与名称之间的关系，所述第五映射关系用于表示标识，名称与待输入项内容三者之间的关系；

所述数据库包括关系数据库，属性值数据库以及属性数据库，所述关系数据库用于存储所述第三映射关系，所述属性值数据库用于存储所述第五映射关系，所述属性数据库用于存储所述第二映射关系；

相应的，所述根据所述第一输入项内容和所述目标页面的标识，以及预先存储在数据库中的第四映射关系，获取目标待输入项信息，包括：

根据所述第一输入项内容和预先存储在所述关系数据库中的所述第三映射关系，确定所述第一输入项内容对应的第一待输入项的名称；

根据所述目标页面的标识，每个第一待输入项的名称以及预先存储在所述属性值数据库中所述第五映射关系，确定所述每个第一待输入项的名称对应的第一待输入项内容；

根据所述目标页面的标识，每个第一待输入项的名称以及预先存储在所述属性数据库中的所述第二映射关系，确定所述目标页面的标识和每个第一待输入项的名称对应的组件的类型；

将每个第一待输入项的名称，每个第一待输入项对应的第一待输入项内容，以及每个第一待输入项对应的组件的类型确定为目标待输入项信息。

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

接收所述终端设备发送的所述第二映射关系，并将所述第二映射关系存储至所述属性数据库中；

或者，

接收所述终端设备发送的所述第二映射关系，并将所述第三映射关系发送至所述关系数据库。

5.一种页面显示装置，其特征在于，应用于终端设备，所述终端设备的可视化图形界面上显示有目标页面，所述目标页面包括固定样式区域和动态变化区域，所述固定样式区域显示有至少一个输入项的名称，以及每个输入项对应的至少一个输入项内容，所述装置包括：

接收模块，用于接收用户输入的第一输入项内容；

发送模块，用于将所述第一输入项内容和目标页面的标识发送至服务器；

所述接收模块，还用于接收所述服务器返回的目标待输入项信息，所述目标待输入项信息包括至少一个第一待输入项的名称，每个第一待输入项对应的第一待输入项内容，以及每个第一待输入项对应的组件的类型，组件用于对待输入项内容进行显示；

显示模块，用于根据每个第一待输入项对应的组件的类型，将每个第一待输入项的名称和对应的第一待输入项内容在所述动态变化区域中进行显示；

所述显示模块，具体用于根据每个第一待输入项的名称和每个第一待输入项对应的组件的类型，生成所述动态变化区域的代码；根据所述动态变化区域的代码，对所述目标页面进行渲染；根据每个第一待输入项和所述代码中名称与显示位置的第一映射关系，确定每个第一待输入项对应的目标显示位置；将每个第一待输入项显示在对应的目标显示位置，并通过每个第一待输入项对应的组件显示第一待输入项内容。

6.一种页面显示装置，其特征在于，应用于服务器，所述装置包括：

接收模块，用于接收终端设备发送的第一输入项内容和目标页面的标识；

处理模块，用于根据所述第一输入项内容和所述目标页面的标识，以及预先存储在数据库中的第四映射关系，获取目标待输入项信息，所述第四映射关系用于表示输入项内容，标识，名称，待输入项内容，组件的类型五者之间的关系，所述目标待输入项信息包括至少一个第一待输入项的名称，每个第一待输入项对应的第一待输入项内容，以及每个第一待输入项对应的组件的类型；

发送模块，用于将所述目标待输入项信息发送至所述终端设备；

所述第四映射关系包括第二映射关系，第三映射关系以及第五映射关系，所述第二映射关系用于表示标识，名称与组件的类型三者之间的关系，所述第三映射关系用于表示输入项内容与名称之间的关系，所述第五映射关系用于表示标识，名称与待输入项内容三者之间的关系；

所述数据库包括关系数据库，属性值数据库以及属性数据库，所述关系数据库用于存储所述第三映射关系，所述属性值数据库用于存储所述第五映射关系，所述属性数据库用于存储所述第二映射关系；

相应的，所述处理模块，具体用于根据所述第一输入项内容和预先存储在所述关系数据库中的所述第三映射关系，确定所述第一输入项内容对应的第一待输入项的名称；根据所述目标页面的标识，每个第一待输入项的名称以及预先存储在所述属性值数据库中所述第五映射关系，确定所述每个第一待输入项的名称对应的第一待输入项内容；根据所述目标页面的标识，每个第一待输入项的名称以及预先存储在所述属性数据库中的所述第二映射关系，确定所述目标页面的标识和每个第一待输入项的名称对应的组件的类型；将每个第一待输入项的名称，每个第一待输入项对应的第一待输入项内容，以及每个第一待输入项对应的组件的类型确定为目标待输入项信息。

7.一种终端设备，其特征在于，包括：处理器、收发器、显示器、存储器及存储在所述存储器上并可在处理器上运行的计算机程序指令，所述处理器执行所述计算机程序指令时用于实现如权利要求1或2任一项所述的页面显示方法。

8.一种服务器，其特征在于，包括：处理器、收发器、存储器及存储在所述存储器上并可在处理器上运行的计算机程序指令，所述处理器执行所述计算机程序指令时用于实现如权利要求3或4任一项所述的页面显示方法。