CN115729546A - 表单生成方法、表单生成装置和电子设备 - Google Patents

Abstract

本申请公开了一种表单生成方法、表单生成装置和电子设备，涉及计算机领域。所述表单生成方法包括：获取自定义JSON配置文件，自定义JSON配置文件包括多个可配置对象，可配置对象包括多个可配置的表单项；利用构造器遍历所述自定义JSON配置文件，根据可配置对象生成虚拟表单组件；基于所述虚拟表单组件生成表单，并在前端框架中渲染所述表单。通过上述方法，实现了多种精简和复杂表单项，按照配置文件进行配置就可以快速生成各种不同的表单；还通过特定语法的构造器将JSON配置文件转换成虚拟的表单组件，方便组合、调整和更新各种目标表单，从而提高了表单的生成效率，解决了现有技术中生成表单的方式效率较低的技术问题。

Description

表单生成方法、表单生成装置和电子设备

技术领域

本申请属于计算机领域，具体涉及一种表单生成方法、表单生成装置和电子设备。

背景技术

随着互联网技术的发展，需要表单的场合越来越多。因而，出现了各种生成表单的方式。

现有技术在生成表单的过程中，存在多种缺陷，例如需要针对每一个表单都进行程序设计，在表单使用场景发生变化的情况下，又需要重新编写程序代码；又例如，在进行表单编码时，校验和校验状态没有相结合、校验和校验规则在代码上分离，不方便查看和开发、对于复杂的事件联动难以维护，容易造成逻辑混乱，总之，生成表单的方式效率较低。

发明内容

本申请实施例提供一种表单生成方法、表单生成装置和电子设备，能够解决现有技术中生成表单的方式效率较低的技术问题。

第一方面，提供一种表单生成方法，包括：

获取自定义JSON配置文件，所述自定义JSON配置文件包括多个可配置对象，所述可配置对象包括多个可配置的表单项；

利用构造器遍历所述自定义JSON配置文件，根据所述可配置对象生成虚拟表单组件；

基于所述虚拟表单组件生成表单，并在前端框架中渲染所述表单。

第二方面，提供一种表单生成装置，包括：

获取模块，用于获取自定义JSON配置文件，所述自定义JSON配置文件包括多个可配置对象，所述可配置对象包括多个可配置的表单项；

生成模块，用于利用构造器遍历所述自定义JSON配置文件，根据所述可配置对象生成虚拟表单组件，基于所述虚拟表单组件生成表单；

渲染模块，用于在前端框架中渲染所述表单。

第三方面，本申请实施例提供了一种电子设备，该电子设备包括处理器和存储器，所述存储器存储程序或指令，所述程序或指令被所述处理器执行时实现如第一方面所述的方法的步骤。

第四方面，本申请实施例提供了一种可读存储介质，所述可读存储介质上存储程序或指令，所述程序或指令被处理器执行时实现如第一方面所述的方法的步骤。

在本申请实施例中，通过自定义的JSON配置文件对表单的个性化需求进行自由的配置和修改。在表单的生成过程中，符合特定语法的构造器通过遍历JSON文件获取每一个可配置对象，根据配置项中的内容生成对应的虚拟表单组件，然后将根据虚拟表单组件组合生成目标表单后进行渲染。从而实现了以下有益效果：提炼总结JSON配置文件中的每个字段说明和配置方式，实现了多种精简和复杂表单项，按照配置文件进行配置就可以快速生成各种不同的表单；还通过特定语法的构造器将JSON配置文件转换成虚拟的表单组件，方便组合、调整和更新各种目标表单，从而提高了表单的生成效率，解决了现有技术中生成表单的方式效率较低的技术问题。

附图说明

图1是本申请实施例提供的一种表单生成方法的流程图；

图2是本申请实施例提供的一种表单生成方法的示意图；

图3是本申请实施例提供的一种表单生成装置的结构框图；

图4是本申请实施例提供的一种电子设备的结构框图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员获得的所有其他实施例，都属于本申请保护的范围。

本申请的说明书和权利要求书中的术语“第一”、“第二”等是用于区别类似的对象，而不用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施，且“第一”、“第二”等所区分的对象通常为一类，并不限定对象的个数，例如第一对象可以是一个，也可以是多个。此外，说明书以及权利要求中“和/或”表示所连接对象的至少其中之一，字符“/”，一般表示前后关联对象是一种“或”的关系。

下面结合附图，通过具体的实施例及其应用场景对本申请实施例提供的表单生成方法进行详细地说明。

图1是本申请实施例提供的一种表单生成方法的流程图。本申请实施例提供的表单生成方法可以由表单生成装置或者电子设备执行。其中，电子设备可以例如为手机、个人计算机、服务器等。如图1所示，本申请实施例提供的表单生成方法可以包括如下步骤：

步骤110，获取自定义JSON配置文件，所述自定义JSON配置文件包括多个可配置对象，所述可配置对象包括多个可配置的表单项；

在本申请实施例中，JSON配置文件中的可配置对象的数目可以按照需求进行设置，一个可配置对象可对应于一种表单组件类型。通过多个可配置对象的配置可以在待生成的目标表单中包含多种表单组件类型。

多个可配置的表单项可以例如包括关键字、布局方式、组件类型、标题、组件状态、校验规则、默认值、多选项配置、约束和扩展字段等。每一项可用配置字段来设置。其中，关键字这一项可以为必填项，且可具有唯一性，关键字可以例如为名称。在本申请实施例中，不同的可配置对象可对应于不同的关键字，例如不同的可配置对象可以有不同的名称。布局方式这一项可表示页面排列方式，包括栏珊布局和绝对布局。组件类型这一项用于判断组件属于什么类型，可以为必填项。组件类型这一项可包括文本框、下拉框、多选框、输入框、单选框、级联选择器、数字输入框、日期选择器中的至少一种。在本申请实施例中，不同的可配置对象可对应于不同的标题(title)。组件状态这一项可以默认为编辑状态，还可以添加禁止编辑状态、查看状态。校验规则这一项可用于校验用户输入信息是否满足规则，比如校验手机号和邮箱等。默认值这一项用于供组件展示默认值。在组件为下拉框的情况下，多选项配置这一项配置下拉框的内容；当组件为多选框的情况下，多选项配置这一项可展示选中内容。扩展字段这一项可根据实际需求额外添加字段。如此，通过引入上面所列出的一或多种表单项，可以保证生成的表单可以应用于各种不同的情形下，大大提高了表单的适配性。

其中，在生成目标表单的过程中，可以只使用了多个可配置的表单项中的一部分表单项，也可以使用多个可配置的表单项的所有表单项。即，在生成表单的过程中，可以只配置多个可配置的表单项的一部分，也可以配置多个可配置的表单项的全部表单项。在只配置多个可配置的表单项的一部分的情况下，未配置的表单项可以取默认值。例如，组件状态的默认值可指示可编辑状态。

可选的，在获取自定义JSON配置文件之前还包括，对多个标准表单组件进行序列化，得到标准JSON配置文件，从而把标准的表单组件转换成了JSON配置文件中的JSON对象，进而根据需求对标准JSON配置文件配置和修改得到自定义JSON配置文件。如此，表单中的组件通过JSON配置文件来配置会更加方便和灵活。

可选的，在该步骤中所述获取自定义JSON配置文件包括：确定需要生成表单的目标业务场景；从配置文件库中获取与目标业务场景匹配的JSON配置文件；其中，所述配置文件库中包括多个配置文件，每一个配置文件对应于不同的业务场景。如此，在业务场景切换的情况下，可通过获取目标业务场景匹配的JSON配置文件，保证生成的表单可以随着业务场景的变化而变化。同时，在此过程中，只需切换JSON配置文件，大大降低了开发工作量，提高了表单生成的效率。

可选地，在该步骤中所述获取自定义JSON配置文件还包括：从内容分发网络服务器获取已经配置好的JSON配置文件。如此，通过选择CDN服务器存储而不是本地存储可以实现便捷取用的效果。

步骤120，利用构造器遍历所述自定义JSON配置文件，根据所述可配置对象生成虚拟表单组件；

步骤130，基于所述虚拟表单组件生成表单，并在前端框架中渲染所述表单。

在本申请实施例中，构造器是遍历JSON配置文件和生成组件渲染逻辑的通用组件。

在本申请实施例中，当项目使用typescript时可选择tsx构造器，当项目中使用JavaScript时可选择jsx构造器。由于tsx/jsx构造器比传统vue的template语法开发通用表单更加灵活和高效，通过使用tsx/jsx构造器可以实现良好的表单生成效果。

在本申请实施例中，表单生成的过程可经历以下阶段：表单基础结构初始化和表单数据初始化。当然，在存在数据变更的情况下，还可以经历数据变更再构建这一阶段。

表单基础结构初始化的过程包括：构造器遍历自定义JSON配置文件获取每一个对象，根据可配置的表单项中的组件类型，利用jsx或tsx语法生成对应的虚拟表单组件；其中，虚拟表单组件为使用javascript对象或者typescript对象描述的虚拟表单组件。进而向虚拟表单组件中填充关键字和组件的标题等，从而构建出整个表单。前端框架(例如vue框架)对整个表单组件进行渲染。

表单数据初始化的过程可如下：根据JSON配置文件中的默认值例如通过调用setValue方法向虚拟表单组件填充默认值，再次把整个表单构建出来。前端框架(例如vue框架)再次把整个表单渲染出来。

数据变更再构建这一阶段的过程可如下：当表单数据发生变更的情况下，例如用户输入表单组件信息时，可通过监听函数监听用户事件来处理对应组件和级联组件，通过构造器再次把变化后表单构建出来。进而，前端框架(例如vue框架)再次对整个表单进行渲染。

具体的，在数据变更再构建过程中，通过JSON配置文件中对表单组件绑定的目标事件来更改所述目标表单项的值，得到新的表单。其中，所述目标事件可以包括onChange事件或者onBlur事件。其中，onchange事件会在域的内容改变时发生。onchange事件也可用于单选框与复选框改变后触发的事件。onblur事件发生在对象失去焦点时。onblur事件可以与表单验证代码一起使用(例如,当用户离开表单字段时)。如此，通过构造器更改目标表单项的值，可以便捷地得到新的表单，提高了新表单的生成效率。

可选地，在本申请的另一个实施例中，所述多个可配置的表单项对应的数据处于共享状态。在本申请实施例中，表单项的配置字段对应的数据可以在生成表单的过程中共享。例如，在表单生成的场景下，可根据程序代码中上面某一行写的内容，在后续执行过程中使用这一行的结果进行操作等。如此，可以减少代码编写的工作量。

在本申请实施例中，所述配置文件库可以位于本地，也可以位于网络端。同时，所述配置文件库中的多个配置文件对应于不同tsx版本的构造器或者不同jsx版本的构造器。如此，可以保证配置文件的适配性更高。另一方面，所述配置文件库中的多个配置文件也可采用同一tsx构造器或者采用同一jsx构造器，如此，可以保证具有更高的复用率。

在本申请实施例的表单生成方法中，获取了自定义的JSON配置文件，该JSON配置文件由标准的表单组件序列化而来，包括了多个可配置对象，可配置对象包括多个可配置的表单项，如此，可利用所述JSON配置文件，生成符合各种需求的复杂表单。在需要新的表单的情况下，可通过修改JSON配置文件中的表单项，通过构造器构造出新的表单，进而提高了表单的生成效率，解决了现有技术中生成表单的方式效率较低的技术问题。

图2是本申请实施例提供的一种表单生成方法的示意图。如图2所示，在本申请实施例提供的表单生成方法中，用户根据需求配置JSON文件后，获取对应版本的构造器，设置好的构造器兼容JSON配置文件的各种逻辑，可以实现读取JSON配置文件中的内容。在得到JSON配置文件和构造器之后，可使用构造器读取或遍历JSON配置文件生成虚拟表单组件。进而，前端框架(例如vue)可通过调用createApp创建app实例，app实例调用渲染函数生成页面表单。

在本申请实施例中，自定义的JSON配置文件包括多个可配置对象，这些可配置对象根据表单的需求进行自由的配置和修改。在表单的生成过程中，符合特定语法的构造器通过遍历JSON配置文件获取每一个对象和对象中配置项内容，根据配置项中的内容生成对应的虚拟表单组件，然后将根据虚拟表单组件组合生成目标表单后进行渲染。

由上文可知，本申请实施例提供的表单生成方法可包括以下创新部分：其一，提炼总结JSON配置文件中的每个字段说明和配置方式，实现了多种精简和复杂表单项，按照配置文件进行配置就可以快速生成表单；其二，通过特定语法的构造器将JSON配置文件转换成内存中虚拟的表单组件，方便组合、调整和更新各种目标表单；其三，通过独立的配置文件方式，可以把JSON配置文件提炼出来，放在服务器(例如，CDN服务器)端，方便后续维护和修改；其四，表单项的各字段之间的数据和状态共享；其五，由于配置文件是JSON文件，可以通过扩展字段来实现功能扩展。

如此一来，不仅可以通过修改JSON配置文件中的表单项，得到新的表单，而无需通过针对新表单重新编写程序代码的方式来生成表单，进而提高了表单的生成效率，解决了现有技术中生成表单的方式效率较低的技术问题，而且还实现了在JSON配置文件中可通过自定义的字段把组件的校验规则、校验状态以及触发条件配置到一起，方便查看和维护；还可以通过配置文件字段中的监听、条件以及设置进行联动判断，来实现表单联动和数据监听；通过构造器的方式还使得JSON配置文件实现了表单的组件化，通过不同的JSON配置文件进行适配不同的业务场景。

图3是本申请实施例提供的一种表单生成装置的结构框图。如图3所示，本申请实施例提供的表单生成装置300可以包括：获取模块310、生成模块320和渲染模块330。其中：

获取模块310，用于获取自定义JSON配置文件，所述自定义JSON配置文件包括多个可配置对象，所述可配置对象包括多个可配置的表单项；

生成模块320，用于利用构造器遍历所述自定义JSON配置文件，根据所述可配置对象生成虚拟表单组件，基于所述虚拟表单组件生成表单；

渲染模块330，用于在前端框架中渲染所述表单。

需要说明的是，本申请实施例提供的表单生成装置与上文提到的表单生成方法相对应。相关内容可参照上文对表单生成方法的描述，在此不做赘述。

此外，如图4所示，本申请实施例还提供一种电子设备400，所述电子设备可以为各种类型的计算机等。所述电子设备400包括：处理器410，存储器420，所述存储器420上存储程序或指令，所述程序或指令被所述处理器410执行时实现上文所描述的任一种表单生成方法的步骤，且能达到相同的技术效果，为避免重复，这里不再赘述。

本申请实施例还提供一种可读存储介质，所述可读存储介质上存储程序或指令，所述程序或指令被所述处理器410执行时实施上文所描述的任一种表单生成方法的步骤，且能达到相同的技术效果，为避免重复，这里不再赘述。

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

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

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

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

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

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

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

Claims (10)

1.一种表单生成方法，其特征在于，包括：

获取自定义JSON配置文件，所述自定义JSON配置文件包括多个可配置对象，所述可配置对象包括多个可配置的表单项；

利用构造器遍历所述自定义JSON配置文件，根据所述可配置对象生成虚拟表单组件；

基于所述虚拟表单组件生成表单，并在前端框架中渲染所述表单。

2.根据权利要求1所述的表单生成方法，其特征在于，在所述获取自定义JSON配置文件之前，所述方法还包括：

对多个标准表单组件进行序列化，得到标准JSON配置文件；

进一步对所述标准JSON配置文件进行配置得到自定义JSON配置文件。

3.根据权利要求2所述的表单生成方法，其特征在于，所述方法还包括：

从内容分发网络服务器获取所述自定义JSON配置文件。

4.根据权利要求1-3任一项所述的表单生成方法，其特征在于，一个可配置对象对应于一种组件类型，所述可配置对象的表单项包括关键字、组件类型、布局方式、组件状态、校验规则、默认值、多选项配置、监听配置和扩展字段；其中，关键字具有唯一性。

5.根据权利要求1所述的表单生成方法，其特征在于，所述构造器包括tsx构造器或者jsx构造器。

6.根据权利要求1所述的表单生成方法，其特征在于，所述基于所述虚拟表单组件生成表单，在前端框架中渲染所述表单包括：

通过所述构造器向所述虚拟表单组件填充表单项信息，完成表单构建，进而通过前端框架渲染所述表单。

7.根据权利要求6所述的表单生成方法，其特征在于，所述基于所述虚拟表单组件生成表单，在前端框架中渲染所述表单还包括：

构造器根据所述自定义JSON配置文件中的默认值对所述虚拟表单组件进行默认值填充，再次构建表单，进而通过前端框架渲染所述表单。

8.根据权利要求6所述的表单生成方法，其特征在于，所述基于所述虚拟表单组件生成表单，在前端框架中渲染所述表单还包括：

通过所述自定义JSON配置文件中的监听配置监听用户事件，当事件发生时，通过构造器再次构建表单，进而通过前端框架渲染所述表单。

9.一种表单生成装置，其特征在于，包括：

获取模块，用于获取自定义JSON配置文件，所述自定义JSON配置文件包括多个可配置对象，所述可配置对象包括多个可配置的表单项；

生成模块，用于利用构造器遍历所述自定义JSON配置文件，根据所述可配置对象生成虚拟表单组件，基于所述虚拟表单组件生成表单；

渲染模块，用于在前端框架中渲染所述表单。

10.一种电子设备，其特征在于，包括：存储器和处理器，所述存储器存储指令，所述指令被执行时实现根据权利要求1-8任一项所述的表单生成方法中的步骤。

Images