CN117472380A - 一种前端表单生成方法及系统 - Google Patents

Abstract

本发明公开了一种前端表单生成方法及系统，包括：判断当前点选的至少一个待拖拽组件的数量是否大于预设数量阈值；若大于，则响应于对可拖拽元素区域中至少一个待拖拽组件向设计区域的拖拽操作，在设计区域上基于预设的第一显示规则对至少一个待拖拽组件进行延时显示，以及在组件属性配置区域显示与至少一个待拖拽组件相对应的属性配置字段；响应于对属性配置字段的配置操作，获取至少一个待拖拽组件的属性配置信息；响应于表单配置界面的表单生成操作，根据至少一个待拖拽组件在设计区域的设计信息和属性配置信息进行表单渲染处理，以生成目标表单。能够降低需要反复点选的操作可能，有效地降低了用户交互的复杂程度。

Description

一种前端表单生成方法及系统

技术领域

本发明属于表单生成技术领域，尤其涉及一种前端表单生成方法及系统。

背景技术

目前，前端表单包括在网页中负责数据采集功能的数据结构，它可以用来采集、存储、整理和分析数据。前端表单最为一种常见的信息载体，在各个领域中广泛使用。在前端表单生成的过程中，一般采用表单设计器和表单渲染器的两个功能。表单设计器采用拖拽的形式设计表单页面，生成类JSON Schema元数据配置，表单渲染器根据元数据配置进行表单页面的渲染。能够实现在线表单开发和展示的需求。但是在在线生成前端表单的操作过程中，需要用户反复操作选择表单组件，导致表单的配置和维护麻烦。

发明内容

本发明提供一种前端表单生成方法及系统，用于解决需要用户反复交互才能完成表单生成操作的技术问题。

第一方面，本发明提供一种前端表单生成方法，包括：响应于获取用户的表单配置触发指令，根据所述表单配置触发指令显示表单配置界面，所述表单配置界面包括可拖拽元素区域、设计区域以及组件属性配置区域；响应于对所述可拖拽元素区域中至少一个待拖拽组件的点选操作，获取当前点选的所述至少一个待拖拽组件的数量，其中，待拖拽组件为所述可拖拽元素区域中的系统组件、基础组件、布局组件和/或高级组件；判断当前点选的所述至少一个待拖拽组件的数量是否大于预设数量阈值；若大于，则响应于对所述可拖拽元素区域中至少一个待拖拽组件向所述设计区域的拖拽操作，在所述设计区域上基于预设的第一显示规则对所述至少一个待拖拽组件进行延时显示，以及在所述组件属性配置区域显示与所述至少一个待拖拽组件相对应的属性配置字段，其中，所述第一显示规则为：将所述至少一个待拖拽组件的待显示区域的实时尺寸进行随机组合，得到至少一个目标实时尺寸，在所述至少一个目标实时尺寸中筛选出与所述设计区域的目标尺寸的差值最小，且不大于所述目标尺寸的某一目标实时尺寸；获取构建所述某一目标实时尺寸的各个实时尺寸对应的各个待拖拽组件，并将所述各个待拖拽组件在当前时刻显示在所述设计区域中，其余待拖拽组件在预设第一时间间隔后显示在所述设计区域中；响应于对所述属性配置字段的配置操作，获取所述至少一个待拖拽组件的属性配置信息；响应于所述表单配置界面的表单生成操作，根据所述至少一个待拖拽组件在所述设计区域的设计信息和所述属性配置信息进行表单渲染处理，以生成目标表单。

第二方面，本发明提供一种前端表单生成系统，包括：第一显示模块，配置为响应于获取用户的表单配置触发指令，根据所述表单配置触发指令显示表单配置界面，所述表单配置界面包括可拖拽元素区域、设计区域以及组件属性配置区域；第一获取模块，配置为响应于对所述可拖拽元素区域中至少一个待拖拽组件的点选操作，获取当前点选的所述至少一个待拖拽组件的数量，其中，待拖拽组件为所述可拖拽元素区域中的系统组件、基础组件、布局组件和/或高级组件；判断模块，配置为判断当前点选的所述至少一个待拖拽组件的数量是否大于预设数量阈值；第二显示模块，配置为若大于，则响应于对所述可拖拽元素区域中至少一个待拖拽组件向所述设计区域的拖拽操作，在所述设计区域上基于预设的第一显示规则对所述至少一个待拖拽组件进行延时显示，以及在所述组件属性配置区域显示与所述至少一个待拖拽组件相对应的属性配置字段，其中，所述第一显示规则为：将所述至少一个待拖拽组件的待显示区域的实时尺寸进行随机组合，得到至少一个目标实时尺寸，在所述至少一个目标实时尺寸中筛选出与所述设计区域的目标尺寸的差值最小，且不大于所述目标尺寸的某一目标实时尺寸；获取构建所述某一目标实时尺寸的各个实时尺寸对应的各个待拖拽组件，并将所述各个待拖拽组件在当前时刻显示在所述设计区域中，其余待拖拽组件在预设时间间隔后显示在所述设计区域中；第二获取模块，配置为响应于对所述属性配置字段的配置操作，获取所述至少一个待拖拽组件的属性配置信息；处理模块，配置为响应于所述表单配置界面的表单生成操作，根据所述至少一个待拖拽组件在所述设计区域的设计信息和所述属性配置信息进行表单渲染处理，以生成目标表单。

第三方面，提供一种电子设备，其包括：至少一个处理器，以及与所述至少一个处理器通信连接的存储器，其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行本发明的前端表单生成方法的步骤。

第四方面，本发明还提供一种计算机可读存储介质，其上存储有计算机程序，所述程序指令被处理器执行时，使所述处理器执行本发明的前端表单生成方法的步骤。

本申请的前端表单生成方法及系统，在用户一次点选所有需要的拖拽组件后，根据，判断当前点选的至少一个待拖拽组件的数量是否大于预设数量阈值，并在设计区域上基于预设的第一显示规则对至少一个待拖拽组件进行延时显示，能够降低需要反复点选，导致与用户交互的复杂程度，而且在待拖拽组件的数量较少，但又无法一次性完成显示在设计区域时，对待拖拽组件实施第二显示规则进行显示，这样，能够实现对待拖拽组件进行动态替换显示，使得用户能够有针对性的依序完成属性配置信息填写。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明一实施例提供的一种前端表单生成方法的流程图；

图2为本发明一实施例提供的一具体实施例的前端表单生成的流程框图；

图3为本发明一实施例提供的一种前端表单生成系统的结构框图；

图4是本发明一实施例提供的电子设备的结构示意图。

具体实施方式

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

请参阅图1，其示出了本申请的一种前端表单生成方法的流程图。

如图1所示，前端表单生成方法具体包括以下步骤：

步骤S101，响应于获取用户的表单配置触发指令，根据所述表单配置触发指令显示表单配置界面，所述表单配置界面包括可拖拽元素区域、设计区域以及组件属性配置区域。

在实际应用中，显示表单配置界面包括左侧区域：为可拖拽元素区域包含表单基础组件、布局组件、高级组件等；中间区域：为设计区域，可以将左侧区域的元素拖拽设计区域进行版本布局；右侧区域：组件属性配置区域，在设计区域选中元素会展示出对应的可配置属性。

步骤S102，响应于对所述可拖拽元素区域中至少一个待拖拽组件的点选操作，获取当前点选的所述至少一个待拖拽组件的数量，其中，待拖拽组件为所述可拖拽元素区域中的系统组件、基础组件、布局组件和/或高级组件。

在本步骤中，系统组件包括修改时间选择框、修改人选择框、创建时间选择框以及创建人选择框。基础组件包括单行输入选择框、多行输入选择框、复选框选择框、单选框选择框、数字输入选择框、开关选择框、下拉选择框以及日期选择框。布局组件包括卡片布局选择框、表格布局选择框、格栅布局选择框、标题选择框以及分割线选择框。高级组件包括富文本选择框、明细表选择框、图片上传选择框、视频上传选择框、文件上传选择框、网页iframe选择框、链接选择框、公式运算选择框、人员选择选择框、职位选择框以及组织选择框。

例如，用户对分别对修改时间选择框、修改人选择框、复选框选择框、格栅布局选择框、明细表选择框以及图片上传选择框的点选操作，能够获取到当前点选的待拖拽组件的数量为六个。

需要说明的是，在用户实施点选操作之前，可以设置可拖拽元素区域中的各个待拖拽组件的状态，状态包括可点选状态以及不可点选状态。

步骤S103，判断当前点选的所述至少一个待拖拽组件的数量是否大于预设数量阈值。

在本步骤中，若不大于，则将与至少一个待拖拽组件对应的实时尺寸进行组合，并判断组合得到的最大目标实时尺寸是否大于设计区域的目标尺寸；若组合得到的最大目标实时尺寸不大于设计区域的目标尺寸，则响应于对可拖拽元素区域中至少一个待拖拽组件向设计区域的拖拽操作，在设计区域上对至少一个待拖拽组件进行全部显示；若组合得到的最大目标实时尺寸大于设计区域的目标尺寸，则响应于对可拖拽元素区域中至少一个待拖拽组件向设计区域的拖拽操作，在设计区域上基于预设的第二显示规则对至少一个待拖拽组件进行显示，以及在组件属性配置区域显示与至少一个待拖拽组件相对应的属性配置字段。

需要说明的是，在设计区域上基于预设的第二显示规则对至少一个待拖拽组件进行显示具体包括：

将至少一个待拖拽组件的待显示区域的实时尺寸进行随机组合，得到至少一个目标实时尺寸，在至少一个目标实时尺寸中筛选出与设计区域的目标尺寸的差值最小，且不大于目标尺寸的某一目标实时尺寸；获取构建某一目标实时尺寸的各个实时尺寸对应的各个待拖拽组件，并将各个待拖拽组件在当前时刻显示在设计区域中；当在预设第二时间间隔内某一待拖拽组件不存在相应的属性配置信息，则用另一待拖拽组件替换某一待拖拽组件显示在设计区域中，其中，另一待拖拽组件为实时尺寸不大于某一拖拽组件的未在当前时刻显示的待拖拽组件。

在本实施例中，实施判断一次点选的待拖拽组件的数量的方式，在待拖拽组件的数量较少，但又无法一次性完成显示在设计区域时，对待拖拽组件实施第二显示规则进行显示，这样，能够实现对待拖拽组件进行动态替换显示，使得用户能够有针对性的依序完成属性配置信息填写。

步骤S104，若大于，则响应于对所述可拖拽元素区域中至少一个待拖拽组件向所述设计区域的拖拽操作，在所述设计区域上基于预设的第一显示规则对所述至少一个待拖拽组件进行延时显示，以及在所述组件属性配置区域显示与所述至少一个待拖拽组件相对应的属性配置字段。

在本步骤中，第一显示规则为：将至少一个待拖拽组件的待显示区域的实时尺寸进行随机组合，得到至少一个目标实时尺寸，在至少一个目标实时尺寸中筛选出与设计区域的目标尺寸的差值最小，且不大于目标尺寸的某一目标实时尺寸；获取构建某一目标实时尺寸的各个实时尺寸对应的各个待拖拽组件，并将各个待拖拽组件在当前时刻显示在设计区域中，其余待拖拽组件在预设第一时间间隔后显示在设计区域中。

例如，在一次点选过程中，选择了六个待拖拽组件，其中六个待拖拽组件在设计区域中的待显示区域的实时尺寸分别为尺寸A、尺寸B、尺寸C、尺寸D、尺寸E和尺寸F。将尺寸A、尺寸B、尺寸C、尺寸D、尺寸E和/或尺寸F进行随机组合，发现尺寸A、尺寸B和尺寸C组合得到的目标实时尺寸与设计区域的目标尺寸的差值最小，且不大于目标尺寸。从而将尺寸A、尺寸B和尺寸C对应的三个待拖拽组件在当前时刻显示在设计区域中。

需要说的是，将各个待拖拽组件在当前时刻显示在设计区域中，其余待拖拽组件在预设第一时间间隔后显示在设计区域中具体包括：判断当前时刻显示在设计区域中的各个待拖拽组件是否均存在相应的属性配置信息；若均存在，则在各个待拖拽组件完成相应的属性配置信息后的一段时间间隔后将其余待拖拽组件基于第一显示规则显示在设计区域中；若某一待拖拽组件不存在相应的属性配置信息，则继续等待，直至获取到与某一待拖拽组件相对应的属性配置信息。

具体地，在继续等待的过程中，等待的时间大于预设第二时间间隔，则用另一待拖拽组件替换某一待拖拽组件显示在设计区域中，其中，另一待拖拽组件为实时尺寸不大于某一拖拽组件的未在当前时刻显示的待拖拽组件。

步骤S105，响应于对所述属性配置字段的配置操作，获取所述至少一个待拖拽组件的属性配置信息。

步骤S106，响应于所述表单配置界面的表单生成操作，根据所述至少一个待拖拽组件在所述设计区域的设计信息和所述属性配置信息进行表单渲染处理，以生成目标表单。

在本步骤中，在表单布局区域中的布局信息可以根据设置的坐标系进行确定，例如，把表单布局区域设置成一个直角坐标系，其中，x轴的取值范围是0～50000，y轴的取值范围是0～30000。此时，设计区域中的某一待拖拽组件的布局信息可以是(x，y，width，height)，x可以表示为矩形的某一待拖拽组件的左上角的横坐标，y可以表示为矩形的某一待拖拽组件的左上角的纵坐标，width可以为矩形的某一待拖拽组件的左上角的宽，height可以表示为矩形的某一待拖拽组件的左上角的高。

综上，本申请的方法，在用户一次点选所有需要的拖拽组件后，根据，判断当前点选的至少一个待拖拽组件的数量是否大于预设数量阈值，并在设计区域上基于预设的第一显示规则对至少一个待拖拽组件进行延时显示，能够降低需要反复点选的操作可能，有效地降低了用户交互的复杂程度，而且在待拖拽组件的数量较少，但又无法一次性完成显示在设计区域时，对待拖拽组件实施第二显示规则进行显示，这样，能够实现对待拖拽组件进行动态替换显示，使得用户能够有针对性的依序完成属性配置信息填写。

在一个具有实施例中，如图2所示，用户通过鼠标将可拖拽元素区域的组件拖拽至设计区域，设计区域会根据拖拽的组件生成JSON Schema元数据，在设计区域中选中组件，组件属性配置区域会展示对应的组件可配置信息，最终产生的JSON Schema元数据配置为可视化设计的产物，同时将JSON Schema传递给表单渲染器，表单渲染器会解析生成表单界面。

请参阅图3，其示出了本申请的一种前端表单生成系统的结构框图。

如图3所示，前端表单生成系统200，包括第一显示模块210、第一获取模块220、判断模块230、第二显示模块240、第二获取模块250以及处理模块260。

其中，第一显示模块210，配置为响应于获取用户的表单配置触发指令，根据所述表单配置触发指令显示表单配置界面，所述表单配置界面包括可拖拽元素区域、设计区域以及组件属性配置区域；第一获取模块220，配置为响应于对所述可拖拽元素区域中至少一个待拖拽组件的点选操作，获取当前点选的所述至少一个待拖拽组件的数量，其中，待拖拽组件为所述可拖拽元素区域中的系统组件、基础组件、布局组件和/或高级组件；判断模块230，配置为判断当前点选的所述至少一个待拖拽组件的数量是否大于预设数量阈值；第二显示模块240，配置为若大于，则响应于对所述可拖拽元素区域中至少一个待拖拽组件向所述设计区域的拖拽操作，在所述设计区域上基于预设的第一显示规则对所述至少一个待拖拽组件进行延时显示，以及在所述组件属性配置区域显示与所述至少一个待拖拽组件相对应的属性配置字段，其中，所述第一显示规则为：将所述至少一个待拖拽组件的待显示区域的实时尺寸进行随机组合，得到至少一个目标实时尺寸，在所述至少一个目标实时尺寸中筛选出与所述设计区域的目标尺寸的差值最小，且不大于所述目标尺寸的某一目标实时尺寸；获取构建所述某一目标实时尺寸的各个实时尺寸对应的各个待拖拽组件，并将所述各个待拖拽组件在当前时刻显示在所述设计区域中，其余待拖拽组件在预设时间间隔后显示在所述设计区域中；第二获取模块250，配置为响应于对所述属性配置字段的配置操作，获取所述至少一个待拖拽组件的属性配置信息；处理模块260，配置为响应于所述表单配置界面的表单生成操作，根据所述至少一个待拖拽组件在所述设计区域的设计信息和所述属性配置信息进行表单渲染处理，以生成目标表单。

应当理解，图3中记载的诸模块与参考图1中描述的方法中的各个步骤相对应。由此，上文针对方法描述的操作和特征以及相应的技术效果同样适用于图3中的诸模块，在此不再赘述。

在另一些实施例中，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，所述程序指令被处理器执行时，使所述处理器执行上述任意方法实施例中的前端表单生成方法；

作为一种实施方式，本发明的计算机可读存储介质存储有计算机可执行指令，计算机可执行指令设置为：

响应于获取用户的表单配置触发指令，根据所述表单配置触发指令显示表单配置界面，所述表单配置界面包括可拖拽元素区域、设计区域以及组件属性配置区域；

响应于对所述可拖拽元素区域中至少一个待拖拽组件的点选操作，获取当前点选的所述至少一个待拖拽组件的数量，其中，待拖拽组件为所述可拖拽元素区域中的系统组件、基础组件、布局组件和/或高级组件；

判断当前点选的所述至少一个待拖拽组件的数量是否大于预设数量阈值；

若大于，则响应于对所述可拖拽元素区域中至少一个待拖拽组件向所述设计区域的拖拽操作，在所述设计区域上基于预设的第一显示规则对所述至少一个待拖拽组件进行延时显示，以及在所述组件属性配置区域显示与所述至少一个待拖拽组件相对应的属性配置字段，其中，所述第一显示规则为：

将所述至少一个待拖拽组件的待显示区域的实时尺寸进行随机组合，得到至少一个目标实时尺寸，在所述至少一个目标实时尺寸中筛选出与所述设计区域的目标尺寸的差值最小，且不大于所述目标尺寸的某一目标实时尺寸；

获取构建所述某一目标实时尺寸的各个实时尺寸对应的各个待拖拽组件，并将所述各个待拖拽组件在当前时刻显示在所述设计区域中，其余待拖拽组件在预设第一时间间隔后显示在所述设计区域中；

响应于对所述属性配置字段的配置操作，获取所述至少一个待拖拽组件的属性配置信息；

响应于所述表单配置界面的表单生成操作，根据所述至少一个待拖拽组件在所述设计区域的设计信息和所述属性配置信息进行表单渲染处理，以生成目标表单。

计算机可读存储介质可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据前端表单生成系统的使用所创建的数据等。此外，计算机可读存储介质可以包括高速随机存取存储器，还可以包括存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实施例中，计算机可读存储介质可选包括相对于处理器远程设置的存储器，这些远程存储器可以通过网络连接至前端表单生成系统。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

图4是本发明实施例提供的电子设备的结构示意图，如图4所示，该设备包括：一个处理器310以及存储器320。电子设备还可以包括：输入装置330和输出装置340。处理器310、存储器320、输入装置330和输出装置340可以通过总线或者其他方式连接，图4中以通过总线连接为例。存储器320为上述的计算机可读存储介质。处理器310通过运行存储在存储器320中的非易失性软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例前端表单生成方法。输入装置330可接收输入的数字或字符信息，以及产生与前端表单生成系统的用户设置以及功能控制有关的键信号输入。输出装置340可包括显示屏等显示设备。

上述电子设备可执行本发明实施例所提供的方法，具备执行方法相应的功能模块和有益效果。未在本实施例中详尽描述的技术细节，可参见本发明实施例所提供的方法。

作为一种实施方式，上述电子设备应用于前端表单生成系统中，用于客户端，包括：至少一个处理器；以及，与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够：

响应于获取用户的表单配置触发指令，根据所述表单配置触发指令显示表单配置界面，所述表单配置界面包括可拖拽元素区域、设计区域以及组件属性配置区域；

响应于对所述可拖拽元素区域中至少一个待拖拽组件的点选操作，获取当前点选的所述至少一个待拖拽组件的数量，其中，待拖拽组件为所述可拖拽元素区域中的系统组件、基础组件、布局组件和/或高级组件；

判断当前点选的所述至少一个待拖拽组件的数量是否大于预设数量阈值；

若大于，则响应于对所述可拖拽元素区域中至少一个待拖拽组件向所述设计区域的拖拽操作，在所述设计区域上基于预设的第一显示规则对所述至少一个待拖拽组件进行延时显示，以及在所述组件属性配置区域显示与所述至少一个待拖拽组件相对应的属性配置字段，其中，所述第一显示规则为：

将所述至少一个待拖拽组件的待显示区域的实时尺寸进行随机组合，得到至少一个目标实时尺寸，在所述至少一个目标实时尺寸中筛选出与所述设计区域的目标尺寸的差值最小，且不大于所述目标尺寸的某一目标实时尺寸；

获取构建所述某一目标实时尺寸的各个实时尺寸对应的各个待拖拽组件，并将所述各个待拖拽组件在当前时刻显示在所述设计区域中，其余待拖拽组件在预设第一时间间隔后显示在所述设计区域中；

响应于对所述属性配置字段的配置操作，获取所述至少一个待拖拽组件的属性配置信息；

响应于所述表单配置界面的表单生成操作，根据所述至少一个待拖拽组件在所述设计区域的设计信息和所述属性配置信息进行表单渲染处理，以生成目标表单。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备（可以是个人计算机，服务器，或者网络设备等）执行各个实施例或者实施例的某些部分的方法。

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

Claims (9)

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

响应于获取用户的表单配置触发指令，根据所述表单配置触发指令显示表单配置界面，所述表单配置界面包括可拖拽元素区域、设计区域以及组件属性配置区域；

响应于对所述可拖拽元素区域中至少一个待拖拽组件的点选操作，获取当前点选的所述至少一个待拖拽组件的数量，其中，待拖拽组件为所述可拖拽元素区域中的系统组件、基础组件、布局组件和/或高级组件；

判断当前点选的所述至少一个待拖拽组件的数量是否大于预设数量阈值；

若大于，则响应于对所述可拖拽元素区域中至少一个待拖拽组件向所述设计区域的拖拽操作，在所述设计区域上基于预设的第一显示规则对所述至少一个待拖拽组件进行延时显示，以及在所述组件属性配置区域显示与所述至少一个待拖拽组件相对应的属性配置字段，其中，所述第一显示规则为：

将所述至少一个待拖拽组件的待显示区域的实时尺寸进行随机组合，得到至少一个目标实时尺寸，在所述至少一个目标实时尺寸中筛选出与所述设计区域的目标尺寸的差值最小，且不大于所述目标尺寸的某一目标实时尺寸；

获取构建所述某一目标实时尺寸的各个实时尺寸对应的各个待拖拽组件，并将所述各个待拖拽组件在当前时刻显示在所述设计区域中，其余待拖拽组件在预设第一时间间隔后显示在所述设计区域中；

响应于对所述属性配置字段的配置操作，获取所述至少一个待拖拽组件的属性配置信息；

响应于所述表单配置界面的表单生成操作，根据所述至少一个待拖拽组件在所述设计区域的设计信息和所述属性配置信息进行表单渲染处理，以生成目标表单。

2.根据权利要求1所述的一种前端表单生成方法，其特征在于，在响应于对所述可拖拽元素区域中至少一个待拖拽组件的点选操作，获取当前点选的所述至少一个待拖拽组件的数量之后，所述方法还包括：

设置所述可拖拽元素区域中的各个待拖拽组件的状态，所述状态包括可点选状态以及不可点选状态。

3.根据权利要求1所述的一种前端表单生成方法，其特征在于，在判断当前点选的所述至少一个待拖拽组件的数量是否大于预设数量阈值之后，所述方法还包括：

若不大于，则将与所述至少一个待拖拽组件对应的实时尺寸进行组合，并判断组合得到的最大目标实时尺寸是否大于所述设计区域的目标尺寸；

若组合得到的最大目标实时尺寸不大于所述设计区域的目标尺寸，则响应于对所述可拖拽元素区域中至少一个待拖拽组件向所述设计区域的拖拽操作，在所述设计区域上对所述至少一个待拖拽组件进行全部显示；

若组合得到的最大目标实时尺寸大于所述设计区域的目标尺寸，则响应于对所述可拖拽元素区域中至少一个待拖拽组件向所述设计区域的拖拽操作，在所述设计区域上基于预设的第二显示规则对所述至少一个待拖拽组件进行显示，以及在所述组件属性配置区域显示与所述至少一个待拖拽组件相对应的属性配置字段。

4.根据权利要求3所述的一种前端表单生成方法，其特征在于，所述在所述设计区域上基于预设的第二显示规则对所述至少一个待拖拽组件进行显示包括：

将所述至少一个待拖拽组件的待显示区域的实时尺寸进行随机组合，得到至少一个目标实时尺寸，在所述至少一个目标实时尺寸中筛选出与所述设计区域的目标尺寸的差值最小，且不大于所述目标尺寸的某一目标实时尺寸；

获取构建所述某一目标实时尺寸的各个实时尺寸对应的各个待拖拽组件，并将所述各个待拖拽组件在当前时刻显示在所述设计区域中；

当在预设第二时间间隔内某一待拖拽组件不存在相应的属性配置信息，则用另一待拖拽组件替换所述某一待拖拽组件显示在所述设计区域中，其中，所述另一待拖拽组件为实时尺寸不大于某一拖拽组件的未在当前时刻显示的待拖拽组件。

5.根据权利要求1所述的一种前端表单生成方法，其特征在于，所述在所述组件属性配置区域显示与所述至少一个待拖拽组件相对应的属性配置字段包括：

响应于获取某一待拖拽组件在所述设计区域的已显示状态，根据所述已显示状态在所述组件属性配置区域显示与所述某一待拖拽组件相对应的属性配置字段。

6.根据权利要求1所述的一种前端表单生成方法，其特征在于，所述将所述各个待拖拽组件在当前时刻显示在所述设计区域中，其余待拖拽组件在预设第一时间间隔后显示在所述设计区域中包括：

判断当前时刻显示在所述设计区域中的所述各个待拖拽组件是否均存在相应的属性配置信息；

若均存在，则在各个待拖拽组件完成相应的属性配置信息后的一段时间间隔后将其余待拖拽组件基于所述第一显示规则显示在所述设计区域中；

若某一待拖拽组件不存在相应的属性配置信息，则继续等待，直至获取到与所述某一待拖拽组件相对应的属性配置信息。

7.一种前端表单生成系统，其特征在于，包括：

第一显示模块，配置为响应于获取用户的表单配置触发指令，根据所述表单配置触发指令显示表单配置界面，所述表单配置界面包括可拖拽元素区域、设计区域以及组件属性配置区域；

第一获取模块，配置为响应于对所述可拖拽元素区域中至少一个待拖拽组件的点选操作，获取当前点选的所述至少一个待拖拽组件的数量，其中，待拖拽组件为所述可拖拽元素区域中的系统组件、基础组件、布局组件和/或高级组件；

判断模块，配置为判断当前点选的所述至少一个待拖拽组件的数量是否大于预设数量阈值；

第二显示模块，配置为若大于，则响应于对所述可拖拽元素区域中至少一个待拖拽组件向所述设计区域的拖拽操作，在所述设计区域上基于预设的第一显示规则对所述至少一个待拖拽组件进行延时显示，以及在所述组件属性配置区域显示与所述至少一个待拖拽组件相对应的属性配置字段，其中，所述第一显示规则为：

将所述至少一个待拖拽组件的待显示区域的实时尺寸进行随机组合，得到至少一个目标实时尺寸，在所述至少一个目标实时尺寸中筛选出与所述设计区域的目标尺寸的差值最小，且不大于所述目标尺寸的某一目标实时尺寸；

获取构建所述某一目标实时尺寸的各个实时尺寸对应的各个待拖拽组件，并将所述各个待拖拽组件在当前时刻显示在所述设计区域中，其余待拖拽组件在预设时间间隔后显示在所述设计区域中；

第二获取模块，配置为响应于对所述属性配置字段的配置操作，获取所述至少一个待拖拽组件的属性配置信息；

处理模块，配置为响应于所述表单配置界面的表单生成操作，根据所述至少一个待拖拽组件在所述设计区域的设计信息和所述属性配置信息进行表单渲染处理，以生成目标表单。

8.一种电子设备，其特征在于，包括：至少一个处理器，以及与所述至少一个处理器通信连接的存储器，其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器执行如权利要求1至6任一项所述的方法。

9.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1至6任一项所述的方法。