CN114741064B - 页面生成方法、装置、系统及存储介质 - Google Patents

Abstract

本申请提供一种页面生成方法、装置、系统及存储介质。该方法包括：显示表单页面的设计页面。响应于用户针对设计页面的操作，显示表单页面的布局配置页面。响应于用户在布局配置页面输入的M个表单控件的描述信息，根据M个表单控件的描述信息生成表单页面；表单控件的描述信息包括：表单控件的标识、表单控件的索引排列标识、以及，表单控件的类别，其中，索引排列用于表征表单控件在M个表单控件中的布局位置，M为大于或等于1的整数。本申请的方法，简化了表单页面的生成操作，提高了表单页面的生成效率。

Description

页面生成方法、装置、系统及存储介质

技术领域

本申请涉及人机交互领域，尤其涉及一种页面生成方法、装置、系统及存储介质。

背景技术

主要负责数据采集功能的表单在人机交互领域中具有十分重要的作用，目前，人机交互领域的表单页面的排版设计方式主要是通过集成开发环境(IntegratedDevelopment Environment，IDE)编程，搭建骨架页面，控制表单控件位置，编写表单控件后台JavaScript逻辑等，并通过人工放置对应标签控制表单控件的位置和顺序，或是将表单控件设计成可拖拽的组件，使用者根据需要，把表单控件拖拽进控制台中组成符合使用需求的表单页面。

然而，现有的表单页面的排版设计的方式效率较低。

发明内容

本申请提供一种页面生成方法、装置、系统及存储介质，用以解决目前表单页面的生成操作较为繁琐，表单页面的生成效率较低的问题。

第一方面，本申请提供一种页面生成方法，包括：显示表单页面的设计页面。响应于用户针对所述设计页面的操作，显示表单页面的布局配置页面。响应于用户在所述布局配置页面输入的M个表单控件的描述信息，根据所述M个表单控件的描述信息生成表单页面；所述表单控件的描述信息包括：所述表单控件的标识、所述表单控件的索引排列标识、以及，所述表单控件的类别，其中，所述索引排列用于表征所述表单控件在M个表单控件中的布局位置，所述M为大于或等于1的整数。

可选地，所述设计页面包括布局模式设计控件。所述响应于用户针对所述设计页面的操作，显示表单页面的布局配置页面，包括：响应用户针对所述设计页面的布局模式设计控件的操作，显示布局模式菜单，所述布局模式菜单中包括至少一种布局模式，不同布局模式下，索引排列所表征的布局排列的方式不同。响应于用户针对所述布局模式菜单中目标布局模式的选中操作，显示表单布局配置页面。

所述根据所述M个表单控件的描述信息生成表单页面，包括：根据所述M个表单控件的描述信息，以及，所述目标布局模式，生成表单页面。

可选地，所述至少一种布局模式包括：第一布局模式、第二布局模式。第一布局模式对应的索引排列标识为索引排列的编号，第二布局模式对应的索引排列标识包括：第一字段和第二字段，其中，第一字段用于表征表单控件所在的行，所述第二字段用于表征表单控件所在的列。

所述根据所述M个表单控件的描述信息，以及，所述目标布局模式，生成表单页面，包括：

若所述目标布局模式为所述第一布局模式，则按照M个表单控件的索引排列标识从小到大的顺序，在基础页面中依次排列M个表单控件，得到所述表单页面，其中，所述表单页面中每行包括一个表单控件。

若所述目标布局模式为所述第二布局模式，则按照M个表单控件的索引排列标识的第一字段的顺序和第二字段的顺序，在基础页面中排列M个表单控件，得到所述表单页面，其中，所述表单页面中每行包括至少一个表单控件。

可选地，所述按照M个表单控件的索引排列标识的第一字段和第二字段的顺序，在基础页面中排列M个表单控件，得到所述表单页面，包括：将M个表单控件的索引排列标识的第二字段的取值中的最大值，作为所述表单页面包括的控件单元格列数。一个控件单元格用于布局一个表单控件。根据所述表单页面包括的控件单元格列数，以及，M个表单控件的索引排列标识的第一字段的顺序和第二字段的顺序，在基础页面中排列M个表单控件，得到所述表单页面。

可选地，所述根据所述表单页面包括的表单控件列数，以及，M个表单控件的索引排列标识的第一字段的顺序和第二字段的顺序，在基础页面中排列M个表单控件，包括：若第i个表单控件的索引排列标识的第二字段的取值为预设值，则在基础页面合并所述第i个表单控件的索引排列标识的第一字段所表征的行的所有控件单元格，得到合并控件单元格；所述i为大于或等于1且小于或等于M的整数。在所述合并控件单元格上布局所述第i个表单控件。

可选地，所述生成表单页面之后，所述方法还包括：显示所述表单页面。响应于用户针对所述表单页面的修改操作，显示所述布局配置页面。响应于用户在所述布局配置页面针对至少一个表单控件的描述信息的修改操作，重新生成表单页面。

可选地，所述生成表单页面之后，所述方法还包括：输出所述表单页面。

第二方面，本申请提供一种页面生成装置，包括：第一显示模块，用于显示表单页面的设计界面。第二显示模块，用于响应于用户针对所述设计界面的操作，显示表单页面的布局配置页面。控制模块，用于响应于用户在所述布局配置页面输入的所述M个表单控件的描述信息，根据所述M个表单控件的描述信息生成表单页面。所述表单控件的描述信息包括：所述表单控件的标识、所述表单控件的索引排列标识、以及，所述表单控件的类别，其中，所述索引排列用于表征所述表单控件在所述M个表单控件中的布局位置，所述M为大于或等于1的整数。

第三方面，本申请提供一种电子设备，包括：处理器、显示组件，以及存储器。所述处理器分别与所述显示组件和所述存储器通信连接。所述存储器存储计算机执行指令。所述显示组件用于显示页面。所述处理器执行所述存储器存储的计算机执行指令，以实现如第一方面中任一项所述的方法。

第四方面，本申请提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，所述计算机执行指令被处理器执行时用于实现如第一方面中任一项所述的页面生成方法。

本申请提供的页面生成方法、装置、系统及存储介质，通过对表单页面的设计页面、表单页面的布局配置界面进行设置，配置M个表单控件的布局模式、描述信息，以表单控件的索引排列标识确定每个表单控件在表单页面中的位置，完成对表单控件的排版布局，生成表单页面，简化了表单页面的生成操作，提高了表单页面的生成效率。

附图说明

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

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

图2为本申请实施例提供的一种另一种页面生成系统的应用场景示意图；

图3为本申请实施例提供的一种部署有页面生成系统的电子设备的硬件结构示意图；

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

图5为本申请实施例提供的一种表单页面的设计页面的示意图；

图6为本申请实施例提供的一种表单页面的布局配置页面的示意图；

图7为本申请实施例提供的一种表单页面的布局配置页面与生成的表单页面的示意图；

图8为本申请实施例提供的另一种表单页面的布局配置页面与生成的表单页面的示意图；

图9为本申请实施例提供的再一种表单页面的布局配置页面与生成的表单页面的示意图；

图10为本申请实施例提供的一种基于第一布局模式的表单页面修改对比示意图；

图11为本申请实施例提供的一种基于第二布局模式的表单页面修改对比示意图；

图12为本申请实施例提供的一种页面生成装置的结构示意图。

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

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

人机交互领域中的表单页面例如可以是终端设备上的安装的应用程序中包括表单的页面，或，包括表单的web页面，或者，小程序中包括表单的页面等。

目前，在人机交互领域中的表单页面生成方法主要有以下两种：

第一种：IDE编程创建表单，即现有技术中创建表单最基础的方式。

通过IDE进行编程，首先搭建表单页面的骨架页面，即表单页面展示的大概样式，在骨架页面中，图片、文字、图标等内容都将通过灰色矩形块或圆形块等区域进行展示。其次通过代码对表单控件的位置进行控制。接着通过代码编写表单控件对应的后台JavaScript逻辑，表单的数据接口、表单所需要连接的数据库及如何对该数据库进行存储和读取操作。最后，按实际需求所需要的顺序叠加表单中的表单控件，通过人工放置与表单控件对应的标签控制表单控件在骨架页面中的位置和/或顺序。

上述所说的表单控件例如可以是HTML中内置的常用控件，例如布局控件<div>，文本控件<p>、<span>，输入控件<input>、下拉控件<select><option>等，可以通过在HTML页面对各类表单控件的相关代码进行更改，从而控制表单控件的位置。后台JavaScript逻辑用于确认表单控件的描述信息，例如可以是表单控件的类别。表单数据接口例如可以是表单字段查询接口等。表单所需要连接的数据库例如可以是，在表单内容起数据搜索或数据筛选的作用时，数据结果的来源数据库。上述所说的人工放置的方法可以是通过放置与表单控件对应的标签，从而确定表单控件在表单页面中的位置和/或顺序。

然而，IDE编程创建表单的方式需要使用编程的手段，对表单页面、表单控件、表单控件位置等内容进行设置。该方法的需要编写较多的代码，生成表单页面的效率较低，操作较为繁琐。

第二种：拖拽式排版创建表单。

通过将表单控件设计成可拖拽的组件，用户可以根据实际需要，把表单控件拖拽进控制台或表单骨架页面中组成符合使用需求的表单并生成表单页面。

然而，拖拽式排版创建表单的方式虽然通过可视化设计，以及，以拖拽预设表单控件的操作方法，降低了生成表单页面的技术门槛，降低了生成表单页面的操作难度，但是，该方法面对结构比较复杂的表单页面的设计与排版时，例如面对表单页面包括多行列字段、行列大小不一致的情况，需要多次修改表单控件的大小与位置，操作较为繁琐。

有鉴于此，本申请提出了一种页面生成方法，用户仅需规划各个表单控件的名称、类型和排布顺序，即可在生成表单页面时，自动完成对表单控件的排版。该页面生成方法简化了生成表单页面的操作，通过预先设置不同类别的表单控件，无需多次编写表单控件对应的代码，提高了代码的重用性，提供了一种新的表单控件生成过程的模板化开发方法。

本申请的执行主体可以是页面生成系统。下面先对页面生成系统可能的实现方式进行示例说明。

该页面生成系统可以是以硬件或软件的方式实现的，提供与用户人机交互的用户界面，用于响应用户对于该页面生成系统的人机交互的用户界面的操作，通过上述的页面生成方法，生成符合用户需求的表单页面。

图1为本申请实施例提供的一种页面生成系统100的应用场景示意图，如图1所示，在一种实施例中，页面生成系统100可全部部署在云环境中。云环境是云计算模式下利用基础资源向用户提供云服务的实体。云环境包括云数据中心和云服务平台，所述云数据中心包括云服务提供商拥有的大量基础资源(包括计算资源、存储资源和网络资源)，云数据中心包括的计算资源可以是大量的电子设备(例如服务器)。例如，以云数据中心包括的计算资源是运行有虚拟机的服务器为例，页面生成系统100可以独立地部署在云数据中心中的服务器或虚拟机上，页面生成系统100也可以分布式地部署在云数据中心中的多台服务器上、或者分布式地部署在云数据中心中的多台虚拟机上、再或者分布式地部署在云数据中心中的服务器和虚拟机上。

如图1所示，页面生成系统100例如可以由云服务提供商在云服务平台抽象成一种页面生成服务提供给用户，用户在云服务平台购买该云服务后(例如，可预充值再根据最终资源的使用情况进行结算)，云环境利用部署在云数据中心的页面生成系统100向用户提供页面生成服务。

本申请实施例提供的页面生成系统100的部署较为灵活，图2为本申请实施例提供的另一种页面生成系统100的应用场景示意图，如图2所示，在另一种实施例中，本申请实施例提供的页面生成系统100还可以分布式地部署在不同的环境中。例如，本申请提供的页面生成系统100可以在逻辑上分成多个部分，每个部分具有不同的功能。页面生成系统100中的各部分可以分别部署在终端设备电子设备(位于用户侧)、边缘环境和云环境中的任意两个或三个中。位于用户侧的终端设备电子设备例如可以包括下述至少一种：终端设备服务器、智能手机、笔记本电脑、平板电脑、个人台式电脑等。边缘环境为包括距离终端设备电子设备较近的边缘电子设备集合的环境，边缘电子设备包括：边缘服务器、拥有计算力的边缘小站等。部署在不同环境或设备的页面生成系统100的各个部分协同实现为用户提供页面生成的功能。应理解，本申请实施例不对页面生成系统100的哪些部分部署具体部署在什么环境进行限制性的划分，实际应用时可根据终端设备电子设备的计算能力、边缘环境和云环境的资源占有情况或具体应用需求进行适应性的部署。图2是以页面生成系统100分别部署在边缘环境和云环境为例的应用场景示意图。

页面生成系统100也可以单独部署在任意环境中的一个电子设备上(例如：单独部署在边缘环境的一个边缘服务器上)。图3为部署有页面生成系统100的电子设备200的硬件结构示意图，图3所示的电子设备200包括存储器201、处理器202、显示组件203。存储器201、处理器202、显示组件203之间彼此通信连接。例如，存储器201、处理器202、显示组件203之间可以采用网络连接的方式，实现通信连接。或者，上述电子设备200还可以包括总线204。存储器201、处理器202、显示组件203通过总线204实现彼此之间的通信连接。图3是以存储器201、处理器202、显示组件203通过总线204实现彼此之间的通信连接的电子设备200。

存储器201可以是只读存储器(Read Only Memory，ROM)，静态存储设备，动态存储设备或者随机存取存储器(Random Access Memory，RAM)。存储器201可以存储程序，以使处理器202读取并运行存储器201中的程序。

处理器202可以采用通用的中央处理器(Central Processing Unit，CPU)，微处理器，应用专用集成电路(Application Specific Integrated Circuit，ASIC)，图形处理器(graphics processing unit，GPU)或者一个或多个集成电路。

处理器202还可以是一种集成电路芯片，具有信号的处理能力。在实现过程中，本申请的页面生成系统100的功能可以通过处理器202中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器202还可以是通用处理器、数字信号处理器(digital signalprocessing，DSP)、专用集成电路(ASIC)、现成可编程门阵列(field programmable gatearray，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件，可以实现或者执行本申请下文实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本申请下文实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器201，处理器202读取存储器201中的信息，结合其硬件完成本申请实施例的页面生成系统100的功能。

显示组件203使用例如但不限于显示器一类的显示模块，来实现电子设备200显示页面的功能。例如，可以通过显示组件203显示表单页面。

当上述电子设备200包括总线204时，总线204可包括在电子设备200各个部件(例如，存储器201、处理器202、显示组件203)之间传送信息的通路。

下面以页面生成系统100为例，结合具体地实施例对本申请实施例的技术方案进行详细说明。本申请后续实施例以一种页面生成场景为例进行说明，下面这几个具体的实施例可以相互结合，对于相同或者相似的概念或者过程可能在某些实施例不再赘述。下面将结合附图，对本申请的实施例进行描述。

图4为本申请实施例提供的一种页面生成方法的流程示意图，该方法的执行主体是上述的页面生成系统。如图4所示，本实施例的方法包括如下步骤：

S401、显示表单页面的设计页面。

图5为本申请实施例提供的一种表单页面的设计页面的示意图，如图5所示，该页面例如可以包括表单标识、表单名称、数据库连接、鉴权模式、UI框架、归属系统、表单内置模板等设计控件。该页面上包括的设计控件用于表单页面的设计。其中，表单名称、数据库连接、鉴权模式、归属系统等设计控件仅是示例，本申请的设计页面具体包括的设计控件并不以此为限，具体与设计的需求有关。

其中，表单标识可以用于区分该表单与其他表单。表单名称可以表征用户对该表单的命名。数据库连接可以标明该表单提交后，表单数据所需要存储入的数据库，或需要读取的数据对应的来源数据库。鉴权模式可以用于在用户访问表单前进行的身份信息校验逻辑，验证不通过时用户无法成功获取表单对应的后台数据，该鉴权模式例如可以包括仅验证身份、登录状态验证、实时检测验证和不验证等验证类别。UI框架则可以供用户选择该表单页面可选择的预设的UI页面的框架，以提供不同的页面展示样式，例如可以是easyUI、iView、以及、jQuery Mobile等常用的UI控件框架。归属系统则可以表示该表单页面生成后所归属的系统或平台。表单内置模板例如可以包含基础配置页、普通编辑页等，用于控制表单控件的状态。示例性的，基础配置页只支持用于数据筛选查询的表单控件，普通编辑页则可以支持用于数据编辑和数据存储的表单控件。

可选的，该页面还可以包括布局模式设计控件，布局模式设计控件的布局模式菜单中包括至少一种布局模式，不同布局模式下，表单控件的布局排列的方式不同。上述多种布局模式可以是预先设置的。例如，布局模式可以包括第一布局模式、第二布局模式等。第一布局模式例如可以是顺序索引，可以用于将表单控件按照行方向或者列方向进行单方向的顺序排列；第二布局模式例如可以是简易索引，可以用于将表单控件按照多行和/或多列进行双方向的排列。

S402、响应于用户针对设计页面的操作，显示表单页面的布局配置页面。

显示表单页面的布局配置页面的方式可以是直接在表单页面叠加布局配置页面，此时，该布局配置页面可以采用浮窗的形式显示，也可以是从当前设计页面跳转到布局配置页面。

一种可能的实施方式，设计页面可以设置有“下一步”的操作控件，当用户在设计页面针对各种设计控件完成设置之后，可以通过点击“下一步”的操作控件，显示表单页面的布局配置页面。

一种可能的实施方式，当设计页面包括布局模式设计控件时，也可以响应用户针对该布局模式设计控件的操作，显示布局模式菜单，该布局模式菜单中包括至少一种布局模式，例如可以是步骤S401中所说的第一布局模式，或，第二布局模式。响应于用户针对该布局模式菜单中目标布局模式的选中或填写等操作，显示表单布局配置页面。

S403、响应于用户在布局配置页面输入的M个表单控件的描述信息，根据M个表单控件的描述信息生成表单页面。该表单控件的描述信息包括：该表单控件的标识、该表单控件的索引排列标识、以及，该表单控件的类别，其中，该索引排列用于表征该表单控件在M个表单控件中的布局位置，M为大于或等于1的整数。

其中，根据M个表单控件的描述信息生成表单页面，可以是通过在基础页面中对于M个表单控件进行排列，从而生成表单页面的。此处所说的基础页面可以是空白页面，也可以是已经包括了其他控件、但预留有配置表单控件的区域的中间页面。

本申请实施例提供的页面生成方法，通过对表单页面的设计页面、表单页面的布局配置界面进行设置，配置M个表单控件的布局模式、描述信息，以表单控件的索引排列标识确定每个表单控件在表单页面中的位置，完成对表单控件的排版布局，生成表单页面。该页面生成方法简化了生成表单页面的操作，通过预先设置不同类别的表单控件，无需多次编写表单控件对应的代码，提高了代码的重用性，提供了一种新的表单控件生成过程的模板化开发方法。

图6为本申请实施例提供的一种表单页面的布局配置页面的示意图。如图6所示，该布局配置页面可以包括控件描述布局控件、索引排列布局控件和控件类别布局控件，这些布局控件可以用于表单页面的布局，不同布局模式下，索引排列所表征的布局排列的方式不同。

其中，控件描述布局控件用于表征该表单控件的标识，该标识信息可以是用户手动输入的，系统中预设的，或，系统中预设的但用户可以进行手动修改的，例如可以用于表示该表单控件的名称。索引排列布局控件用于表征该表单控件的布局，即该表单控件在表单页面中未来生成的位置。控件类别布局控件用于表征该表单控件的类别，该控件类别可以是预设在系统中的，例如可以是文本框、日期框、下拉框、勾选框、多选框等现有技术中常见的表单控件类别，本申请对此不作限定。

下面对如何根据所述M个表单控件的描述信息，以及，所述目标布局模式，生成表单页面进行说明，例如可以包括如下几种实现方式：

第一种实现方式：设计页面具有布局模式设计控件，布局模式设计控件对应两种布局模式，分别为第一布局模式和第二布局模式。

情况A：布局模式为第一布局模式

当布局模式被选择为第一布局模式时，例如可以是顺序索引，其对应的索引排列标识为索引排列的编号，例如该编号可以是数字，即按照M个表单控件的索引排列标识从小到大的顺序，在基础页面中依次排列M个表单控件，得到所述表单页面，其中，该表单页面中每行包括一个表单控件，或者，该表单页面中每列包括一个表单控件。

下面以表单页面中每行包括一个表单控件为例，对于每个表单控件，根据该表单控件的描述信息生成该表单控件，即根据设置该表单控件的标识、该表单控件的索引排列标识、以及，该表单控件的类别，生成该表单页面。根据生成的每个表单控件的索引排列标识，按照每个表单控件的索引排列标识从小到大的顺序，每行排列一个表单控件，直至M个表单控件全部排列在该表单页面中。

图7是本申请实施例提供的一种表单页面的布局配置页面与生成的表单页面的示意图。为方便理解，以图7为例，对当布局模式被选择为第一布局模式时表单页面的布局配置页面与生成的表单页面的进行说明：在布局配置页面中，以表单控件的索引排列的标识为数字1至9为例，在布局配置页面设置每个表单控件的索引排列的标识。如图7所示，文本框对应的索引排列标识为1，则将文本框排列至基础页面中的第一行；下拉框对应的索引排列标识为2，则将文本框排列至基础页面中的第二行，其余表单控件同理，此处不再赘述。根据该种排列方式，生成如图7中的表单页面。

可选地，在上述实施方式中，布局配置页面中，并不具体限定表单控件的索引排列的标识可填入的数字位数，即无论表单控件的索引排列的标识为几位数，仅需要按照数字从小到大的顺序，在表单页面中，以每行排列一个表单控件的方式，顺序排列即可。也就是说，即便索引排列的标识有多位数字，但是该多位数字仅用于表征该表单控件的顺序。

在该情况下，表单页面包括控件单元格。对于控件在每一行所占的位置大小，与上述控件单元格有关。控件单元格可以是用于布局表单控件的空白区域，每一行或每一列中可以包括多个控件单元格，一个控件单元格用于布局一个表单控件。每个控件单元格的大小可以是根据实际需要，按照预设的与表单页面的比例确定的。例如，每个控件单元格的大小可以是按照上述所说的与表单页面的比例，以预设间隔、预设页面边缘距离情况下，平均分配表单页面的区域的。每行包括的控件单元格的数量，可以是页面生成系统中预设的，例如可以是预设了每行包括的控件单元格的数量为3。不同类别的表单控件在每行占据的控件单元格的数量也可以是不同的，例如，单选框占据的控件单元格数量为1，内容框占据的控件单元格数量为3。可选地，不同类别的表单控件占据的行数也可以是不同的，例如，单选框占据的列数为1，内容框占据的列数为3。不同类别的表单控件占据的行数，以及，每行占据的控件单元格的数量也可以是根据实际需要在页面生成系统中预设的。

情况B：布局模式为第二布局模式

当布局模式被选择为第二布局模式时，例如是简易索引，其对应的索引排列标识包括第一字段和第二字段，上述字段均可以是数字，第一字段用于表征表单控件所在的行，所述第二字段用于表征表单控件所在的列。按照M个表单控件的索引排列标识的第一字段的顺序和第二字段的顺序，在基础页面中排列M个表单控件，得到所述表单页面，其中，所述表单页面中每行包括至少一个表单控件。

在该情况下，表单页面也包括控件单元格。每个控件单元格的大小可以是根据实际需要，按照预设的与表单页面的比例确定的。例如，每个控件单元格的大小可以是按照上述所说的与表单页面的比例，以预设间隔、预设页面边缘距离情况下，平均分配表单页面的区域的。

其中，每行或每列包括的控件单元格的数量可以是根据用户预设的规则，页面生成系统自适应调整的。

一种可能的实施方式，页面生成系统对M个第一字段进行比较，取第一字段的最大值，以第一字段作为表单页面中每列包括的控件单元格的行数，将表单页面中每一列划分为多个控件单元格。或者，页面生成系统对M个第二字段进行比较，取第二字段的最大值，以第二字段作为表单页面中每行包括的控件单元格的列数，将表单页面中每一行划分为多个控件单元格。以对表单页面中每一行划分为多个控件单元为例，当布局配置页面中所有表单控件的第二字段的最大值为9，则将每一行平均分为9个控件单元格，根据每个表单控件的第二字段，将表单控件放置在对应顺序的控件单元格上。

另一种可能的实施方式，页面生成系统中预设了每行，或每列包括的控件单元格的数量，例如可以是预设了每行，或每列包括的控件单元格的数量为3。若布局配置页面中配置的M个表单控件的索引排列标识对应的M个第一字段对应的最大数字小于或等于3时，则将每列包括的控件单元格的数量设置为3。若布局配置页面中配置的M个表单控件的索引排列标识对应的M个第二字段对应的最大数字小于或等于3时，则将每行包括的控件单元格的数量设置为3。若布局配置页面中配置的M个表单控件的索引排列标识的M个第一字段对应的最大数字大于3时，则将每列包括的控件单元格的数量设置为上述的最大数字。若布局配置页面中配置的M个表单控件的索引排列标识的M个第二字段对应的最大数字大于3时，则将每行包括的控件单元格的数量设置为上述的最大数字。

应理解，上述实施例仅是对上述用户预设的规则进行举例说明，用户可以跟据实际需要对预设规则进行修改，本申请对此不作限定。

对于每个表单控件，根据该表单控件的描述信息生成该表单控件，即根据设置该表单控件的标识、该表单控件的索引排列标识、以及，该表单控件的类别，生成该表单页面。根据生成的每个表单控件的索引排列标识的第一字段，确定该表单控件在表单页面中所在的行；根据生成的每个表单控件的索引排列标识的第二字段，确定该表单控件在表单页面中所在的列。根据M个表单控件的在表单页面中分别所在的行，以及，列，确定M个表单控件在表单页面中的位置，并在表单页面中将每个表单控件排列在其对应的位置上。

图8是本申请实施例提供的另一种表单页面的布局配置页面与生成的表单页面的示意图。为方便理解，以图8为例，对当布局模式被选择为第二布局模式时表单页面的布局配置页面与生成的表单页面进行说明：以表单控件的索引排列的标识的第一字段，以及第二字段均为数字1至9为例，在布局配置页面设置每个表单控件的索引排列的标识的第一字段、以及第二字段。如图8所示，员工编号对应的索引排列标识的第一字段，以及，姓名对应的索引排列标识的第一字段均为1，则将以上两个表单控件均排列在表单页面的第一行；员工编号对应的索引排列标识的第二字段为1，姓名对应的索引排列标识的第二字段为2，则将表单控件描述为员工编号的表单控件排列在表单页面的第一行第一列的位置上，将表单控件描述为姓名的表单控件排列在表单页面的第一行第二列的位置上，其余表单控件同理，此处不再赘述。根据该种排列方式，生成如图8中的表单页面。

本申请实施例通过在设计页面中添加布局模式设计控件，通过多种布局模式对应的多种基于索引排列的布局逻辑，按照相应的布局逻辑，确定M个表单控件在表单页面中的位置，完成对表单控件的排版布局，提供了一种新的表单控件生成过程的模板化开发方法。

基于现有技术中拖拽式排版创建表单，在面对结构比较复杂的表单页面的设计与排版时，例如面对表单页面包括多行列字段、行列大小不一致的情况，需要多次手动修改表单控件的大小与位置，存在操作繁琐、且效率较低的问题，本申请在布局模式被选择为第二布局模式时的实施方式下，还可以通过如下实施例简化表单页面的生成操作，提升表单页面的生成效率：

一种可能的实施方式，获取布局配置页面中M个表单控件的索引排列标识的第二字段，对M个第二字段进行比较，取第二字段的最大值，以第二字段的最大值作为表单页面中每行包括的控件单元格的列数。若第i个表单控件的索引排列标识的第二字段的取值为预设值，例如该预设值可以为0，用于表征该第i个表单控件是占据其所在的行中的全部可布局的空间，则在基础页面合并该第i个表单控件的索引排列标识的第一字段所表征的行的所有控件单元格。其中，i为大于或等于1且小于或等于M的整数。在完成该行的所有控件单元格的合并后，将该第i个表单控件布局在合并后的该控件单元格上。

示例性的，图9为本申请实施例提供的再一种表单页面的布局配置页面与生成的表单页面的示意图。以图9为例，对当布局模式被选择为第二布局模式时的表单页面的布局配置页面与生成的表单页面进行说明：当图9中五个表单控件的第二字段的最大值为2时，则将表单页面中每一行划分为两个控件单元格，将文本框、下拉框、多选框对应的表单控件按照其索引排列的标识对应的位置进行排列。而文本显示对应的表单控件，其索引排列标识的第二字段为预设值0，则将文本显示对应的表单控件所在的第三行对应所有控件单元格，即两个控件单元格进行合并。完成合并后，将文本框对应的表单控件布局在第三行合并后的控件单元格上，即文本框对应的表单控件占据表单页面的第三行内的全部空间。

另一种可能的实施方式，若是需要设计占用多列的表单控件，则对于每列的控件单元格的合并与上述方式相似。例如，可以根据预设的规则，例如可以是对M个第一字段进行比较，取第一字段的最大值，以第一字段的最大值作为表单页面中每列包括的控件单元格的行数，将表单页面中每一列划分为多个控件单元格，若第i个表单控件的索引排列标识的第一字段的取值为预设值，例如该预设值可以为0，用于表征该第i个表单控件是占据其所在的列中的全部可布局的空间，则在基础页面合并该第i个表单控件的索引排列标识的第二字段所表征的列的所有控件单元格。

可选的，也可以通过增加其他字段的方式，控制选择合并的控件单元格数量。例如，增加第三字段，该第三字段用于控制每行中合并的控件单元格数量。示例性的，员工编号对应的索引排列标识的第一字段为1，第二字段为1，第三字段为2；姓名对应的索引排列标识的第一字段为1，第二字段为2，第三字段为2；籍贯对应的索引排列标识的第一字段为1，第二字段为3，第三字段为2。则，将表单页面第一行分为六个控件单元格，将第一、第二个控件单元格合并放置员工编号控件；将第三、第四个控件单元格合并放置姓名控件；将第五、第六个控件单元格合并放置籍贯控件。

通过上述方式，无需用户人工多次手动修改表单控件的大小与位置，页面生成系统能够自适应地确定表单控件的大小与位置，简化了表单页面的生成操作，提高了表单页面的生成效率。

第二种实现方式：设计页面不包括布局模式设计控件。在该实现方式下，可以通过索引排列标识来个性化的设置表单控件的布局。

响应于用户针对所述设计页面的操作，显示表单页面的布局配置页面。在该布局配置页面中，表单控件的索引排列的标识例如可以包括第一字段，第二字段。其中，第一字段，或第二字段可以为预设值，也可以为索引排列的编号。以索引编号为数字为例，当第二字段为预设值时，第一字段为索引排列的编号时，表单控件按照索引排列的编号从小到大的顺序，在基础页面中依次排列M个表单控件，得到所述表单页面，其中，该表单页面中每行包括一个表单控件。当第一字段为预设值时，第二字段为索引排列的编号时，表单控件按照索引排列的编号从小到大的顺序，在基础页面中依次排列M个表单控件，得到所述表单页面，其中，该表单页面中每列包括一个表单控件。当第一字段，和，第二字段均为预设值时，可以认为该表单控件的索引排列标识是无效的，也可以认为该该表单控件的索引排列标识表征该表单控件是占据一行的，或，占据一列的，或，占据该表单页面整页的。当第一字段，和，第二字段均为预设值时，具体以上述何种方式表征该表单控件的布局，与用户针对第一字段和第二字段的设置需求相关，本申请不做限定。

本申请实施例通过基于索引排列的布局逻辑，按照相应的索引排列的标识，确定M个表单控件表单页面中的位置，完成对表单控件的排版布局，提供了一种新的表单控件生成过程的模板化开发方法。

一种可能的实施方式，对于上述实施例提供的页面生成方法，在生成表单页面之后，还可以对生成的表单页面的布局进行修改。

在生成表单页面之后，可以显示该表单页面，显示表单页面的方式可以是采用浮窗的形式显示，也可以是从当前布局配置页面跳转到该表单页面。响应于用户针对该表单页面的修改操作，显示该表单页面对应的布局配置页面，响应于用户在该布局配置页面针对至少一个表单控件的描述信息的修改操作，重新生成表单页面。

其中，用户针对该表单页面的修改操作，可以是点击表单页面设置的“修改”操作控件，从而使得页面生成系统显示该表单页面对应的布局配置页面，显示方式可以是浮窗或跳转的方式等。若用户在该布局配置页面上，对至少一个表单控件的描述信息进行了修改，则重新生成表单页面。用户可通过上述方法对表单页面进行多次修改，并通过点击表单页面设置的“生成”操作控件，使得页面生成系统生成最终的表单页面。

用户针对该表单页面的修改操作，例如可以是针对布局配置页面中的控件描述布局控件、索引排列布局控件，以及，控件类别布局控件中的至少一项进行了修改，以将表单控件在表单页面中的表单控件的标识、布局、以及类别中的至少一项进行修改。

以修改表单控件的标识、以及类别为例，图10为一种基于第一布局模式的表单页面修改对比示意图。如图10所示，布局更改前的布局配置页面中9个表单控件的排列顺序为文本框、下拉框、勾选框、单选框、多选框、日期框、内容框、密码框、演示说明，其生成的表单页面与布局配置页面中9个表单控件的描述信息相符。如布局更改后的布局配置页面所示，通过对表单控件的控件描述布局控件，以及，控件类别布局控件的修改，9个表单控件的排列顺序变更为多选框、单选框、勾选框、下拉框、文本框、日期框、内容框、密码框、演示说明，并生成相应的表单页面。可选地，也可以通过对表单控件的索引排列布局控件进行变更达到上述布局更改效果。

以仅修改表单控件的布局为例，图11为一种基于第二布局模式的表单页面修改对比示意图。如图11所示，布局更改前的布局配置页面及其对应的表单页面为三行两列的表单页面布局，如布局更改后的布局配置页面所示，通过对表单控件的控件描述布局控件，索引排列布局控件，以及，控件类别布局控件的修改，生成如布局更改后的表单页面对应的两行三列布局的表单页面。其中，行数和列数的布局更改，是通过对索引排列布局控件中的第一字段，以及第二字段的更改完成的。以电话对应的表单控件为例，布局更改前其索引排列布局控件对应的第一字段为3，第二字段为1，则表示该表单控件位于表单中的第三行，第一列的位置。布局更改后，电话对应的表单控件的索引排列布局控件对应的第一字段为3，第二字段为3，表示该表单控件位于表单中的第一行，第三列的位置。

一种可能的实施方式，在生成表单页面之后，页面生成系统可以输出该表单页面。其中，系统输出该表单页面的方式可以是将该表单页面转化为代码进行输出，上述代码例如可以是应用程序中，或，网页中用于表征该表单页面的代码。系统输出该表单页面的方式也可以是直接将该表单页面以应用程序或网页的形式进行输出。

本申请实施例提供的页面生成方法，通过生成的表单页面对应的布局配置页面，可以针对至少一个表单控件的控件描述布局控件、索引排列布局控件，以及，控件类别布局控件中的至少一项进行修改，从而重新生成表单页面，并可以输出该表单页面。该页面生成方法提供了一种基于索引排列的表单页面修改方法，能够对待生成的表单页面进行修改，简化了表单页面的生成操作，提高了生成表单页面的效率。

图12为本申请实施例提供的一种页面生成装置的结构示意图。如图12所示，该页面生成装置包括：第一显示模块11，第二显示模块12，生成模块13。可选地，该页面生成装置例如可以包括下述至少一个模块：第三显示模块14，输出模块15。

第一显示模块11，用于显示表单页面的设计界面。

第二显示模块12，用于响应于用户针对设计界面的操作，显示表单页面的布局配置页面。

生成模块13，用于响应于用户在上述布局配置页面输入的M个表单控件的描述信息，根据所说的M个表单控件的描述信息生成表单页面；表单控件的描述信息包括：该表单控件的标识、该表单控件的索引排列标识、以及，该表单控件的类别，其中，上述索引排列用于表征该表单控件在M个表单控件中的布局位置，M为大于或等于1的整数。

可选地，设计界面包括布局模式控件，第二显示模块11，具体用于响应用户针对设计界面的布局模式控件的操作，显示布局模式菜单，布局模式菜单中包括至少一种布局模式，不同布局模式下，索引排列所表征的布局排列的方式不同；响应于用户针对布局模式菜单中目标布局模式的选中操作，显示表单布局配置页面。生成模块13，具体用于根据M个表单控件的描述信息，以及，目标布局模式，生成表单页面。

可选地，至少一种布局模式包括：第一布局模式、第二布局模式；第一布局模式对应的索引排列标识为索引排列的编号，第二布局模式对应的索引排列标识包括：第一字段和第二字段，其中，第一字段用于表征表单控件所在的行，第二字段用于表征表单控件所在的列。

生成模块13，具体用于若目标布局模式为第一布局模式，则按照M个表单控件的索引排列标识从小到大的顺序，在基础页面中依次排列M个表单控件，得到表单页面，其中，表单页面中每行包括一个表单控件；

生成模块13，具体用于若目标布局模式为第二布局模式，则按照M个表单控件的索引排列标识的第一字段的顺序和第二字段的顺序，在基础页面中排列M个表单控件，得到表单页面，其中，表单页面中每行包括至少一个表单控件。

可选地，生成模块13，具体用于将M个表单控件的索引排列标识的第二字段的取值中的最大值，作为表单页面包括的控件单元格列数；根据表单页面包括的控件单元格列数，以及，M个表单控件的索引排列标识的第一字段的顺序和第二字段的顺序，在基础页面中排列M个表单控件，得到表单页面。

可选地，生成模块13，具体用于若第i个表单控件的索引排列标识的第二字段的取值为预设值，则在基础页面合并第i个表单控件的索引排列标识的第一字段所表征的行的所有控件单元格，得到合并控件单元格；在合并控件单元格上布局第i个表单控件；i为大于或等于1且小于或等于M的整数。

可选地，第三显示模块14，还用于在生成模块13生成表单页面之后，显示表单页面；响应于用户针对表单页面的修改操作，显示布局配置页面。生成模块13，还用于响应于用户在布局配置页面针对至少一个控件的描述信息的修改操作，重新生成表单页面。

可选地，输出模块15，用于在生成模块13生成表单页面之后，输出表单页面。

本申请实施例提供的一种页面生成装置，可以执行上述方法实施例中页面生成系统的动作，其实现原理和技术效果类似，在此不再赘述。

本申请还提供一种如图3所示的页面生成系统，页面生成系统中的处理器202读取存储器201存储的程序和数据集合以执行前述的页面生成方法，显示组件203显示前述页面生成方法中的页面。

本申请还提供了一种计算机可读存储介质，该计算机可读存储介质可以包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random AccessMemory)、磁盘或者光盘等各种可以存储程序代码的介质，具体的，该计算机可读存储介质中存储有程序指令，程序指令用于上述实施例中的方法。

最后应说明的是：以上各实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述各实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。

Claims (8)

1.一种页面生成方法，其特征在于，所述方法包括：

显示表单页面的设计页面；所述设计页面包括布局模式设计控件；

响应用户针对所述设计页面的布局模式设计控件的操作，显示布局模式菜单，所述布局模式菜单中包括至少一种布局模式，不同布局模式下，索引排列所表征的布局排列的方式不同；

响应于用户针对所述布局模式菜单中目标布局模式的选中操作，显示表单布局配置页面；

响应于用户在所述布局配置页面输入的M个表单控件的描述信息，根据所述M个表单控件的描述信息，以及，所述目标布局模式，生成表单页面；所述表单控件的描述信息包括：所述表单控件的标识、所述表单控件的索引排列标识、以及，所述表单控件的类别，其中，所述索引排列用于表征所述表单控件在M个表单控件中的布局位置，所述M为大于或等于1的整数；

所述至少一种布局模式包括：第一布局模式、第二布局模式；第一布局模式对应的索引排列标识为索引排列的编号，第二布局模式对应的索引排列标识包括：第一字段和第二字段，其中，第一字段用于表征表单控件所在的行，所述第二字段用于表征表单控件所在的列；

所述根据所述M个表单控件的描述信息，以及，所述目标布局模式，生成表单页面，包括：

若所述目标布局模式为所述第一布局模式，则按照M个表单控件的索引排列标识从小到大的顺序，在基础页面中依次排列M个表单控件，得到所述表单页面，其中，所述表单页面中每行包括一个表单控件；

若所述目标布局模式为所述第二布局模式，则按照M个表单控件的索引排列标识的第一字段的顺序和第二字段的顺序，在基础页面中排列M个表单控件，得到所述表单页面，其中，所述表单页面中每行包括至少一个表单控件。

2.根据权利要求1所述的方法，其特征在于，所述按照M个表单控件的索引排列标识的第一字段和第二字段的顺序，在基础页面中排列M个表单控件，得到所述表单页面，包括：

将M个表单控件的索引排列标识的第二字段的取值中的最大值，作为所述表单页面包括的控件单元格列数；一个控件单元格用于布局一个表单控件；

根据所述表单页面包括的控件单元格列数，以及，M个表单控件的索引排列标识的第一字段的顺序和第二字段的顺序，在基础页面中排列M个表单控件，得到所述表单页面。

3.根据权利要求2所述的方法，其特征在于，所述根据所述表单页面包括的控件单元格列数，以及，M个表单控件的索引排列标识的第一字段的顺序和第二字段的顺序，在基础页面中排列M个表单控件，包括：

若第i个表单控件的索引排列标识的第二字段的取值为预设值，则在基础页面合并所述第i个表单控件的索引排列标识的第一字段所表征的行的所有控件单元格，得到合并控件单元格；所述i为大于或等于1且小于或等于M的整数；

在所述合并控件单元格上布局所述第i个表单控件。

4.根据权利要求1-3任一项所述的方法，其特征在于，所述生成表单页面之后，所述方法还包括：

显示所述表单页面；

响应于用户针对所述表单页面的修改操作，显示所述布局配置页面；

响应于用户在所述布局配置页面针对至少一个表单控件的描述信息的修改操作，重新生成表单页面。

5.根据权利要求1-3任一项所述的方法，其特征在于，所述生成表单页面之后，所述方法还包括：

输出所述表单页面。

6.一种页面生成装置，其特征在于，所述装置包括：

第一显示模块，用于显示表单页面的设计页面；所述设计页面包括布局模式设计控件；

第二显示模块，用于响应用户针对所述设计页面的布局模式设计控件的操作，显示布局模式菜单，所述布局模式菜单中包括至少一种布局模式，不同布局模式下，索引排列所表征的布局排列的方式不同；响应于用户针对所述布局模式菜单中目标布局模式的选中操作，显示表单布局配置页面；所述至少一种布局模式包括：第一布局模式、第二布局模式；第一布局模式对应的索引排列标识为索引排列的编号，第二布局模式对应的索引排列标识包括：第一字段和第二字段，其中，第一字段用于表征表单控件所在的行，所述第二字段用于表征表单控件所在的列；

控制模块，用于响应于用户在所述布局配置页面输入的所述M个表单控件的描述信息，根据所述M个表单控件的描述信息，以及，所述目标布局模式，生成表单页面；所述表单控件的描述信息包括：所述表单控件的标识、所述表单控件的索引排列标识、以及，所述表单控件的类别，其中，所述索引排列用于表征所述表单控件在所述M个表单控件中的布局位置，所述M为大于或等于1的整数；

所述控制模块，具体用于若所述目标布局模式为所述第一布局模式，则按照M个表单控件的索引排列标识从小到大的顺序，在基础页面中依次排列M个表单控件，得到所述表单页面，其中，所述表单页面中每行包括一个表单控件；若所述目标布局模式为所述第二布局模式，则按照M个表单控件的索引排列标识的第一字段的顺序和第二字段的顺序，在基础页面中排列M个表单控件，得到所述表单页面，其中，所述表单页面中每行包括至少一个表单控件。

7.一种电子设备，其特征在于，包括：处理器、显示组件，以及存储器；所述处理器分别与所述显示组件和所述存储器通信连接；

所述存储器存储计算机执行指令；

所述显示组件用于显示页面；

所述处理器执行所述存储器存储的计算机执行指令，以实现如权利要求1至5中任一项所述的方法。

8.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机执行指令，所述计算机执行指令被处理器执行时用于实现如权利要求1至5中任一项所述的页面生成方法。