CN117742697A - 表单的设计方法、存储介质 - Google Patents

Abstract

本发明公开了表单的设计方法、存储介质。其中表单的设计方法，包括：步骤1，预先准备表单的操作应当出现的事件的信息；步骤2，用户设计表单时，记录用户的每一步操作，并监控基于操作所出现的事件；步骤3，判断所监控的事件的信息是否与用户的操作应当出现的事件的信息一致，若不一致，则提示用户。本发明可以在表单设计的过程中及时发现表单的问题，避免后续堆积在一起而导致的修正麻烦。

Description

表单的设计方法、存储介质

技术领域

本发明涉及表单的技术领域，尤其涉及一种表单的设计方法。

背景技术

随着互联网技术的发展，各种数据信息都是基于线上采集，以提高数据采集的效率，实现数据的在线采集，主要是通过表单来实现，但是实际应用过程中的数据量通常都比较大，因而建立对应的表单，以及表单的数据库，如果按照以往传统的采集方式，一张表单对应一个采集界面，一个采集界面对应一个采集功能，一个采集功能对应一张或多张数据库表，则对于系统开发来说，工作量繁重，容易出错，因而出现了很多表单设计的方法。

公开号为CN115828855B的现有技术公开了一种自定义表单系统和方法，该现有技术为了解决传统的采集方式出现的问题，提供了以下步骤S1-S5的解决方案。

S1：构建自定义表单HTML(Hyper Text Markup Language，超文本标记语言)组件库，也称为HTML界面组件库，方便用户自定义表单时直接从界面上拖曳生成目标表单，HTML组件库包括自定义表单系统所需要的界面元素，本实施例设计的HTML组件库包括input输入框、radio单选框、checkbox多选框、select下拉选择框、富文本编辑框、上传组件等，均为可视化编程的通用组件；

S2：构建针对管理员用户的自定义表单设计操作界面，界面至少包括组件区、操作区和预览区，组件区将已定义的组件库中的组件分类罗列，方便用户拖曳操作；所述操作区提供对界面组件的设计与组合，如组件的字段类型选择，采用Validator(一种校验器)对组件的输入数据进行校验；自定义表单的操作区和预览区也称为创建区，用户可在此区域内创建自定义的采集表单，包含表单的名称，各字段名称、字段类型、选择项数值、是否必填项等选项；表单创建过程中在预览区可实时看到表单的采集表。用户创建完成后，采用Java面向对象的思路，将表单内容抽象成一个实体定义对象存储，该对象抽象出了数据库表结构的定义，包括表名称、描述、表字段集合，以及自定义的属性。同时还需要一套与实体定义对象相对应的XML可扩展标记语言来描述该对象的成员变量及属性，遇到系统重启的时候，该标记语言可以反向生成实体定义对象。生成数据库表的时候，采用热部署的方式自动触发数据库建表，自动生成数据持久化对象。

S3：生成与数据库表对应的描述XML文件，并生成实例化对象及数据库表，根据用户自定义表单需求，将用户自定义表单名称和表单字段按既定规则转换为标记字符串；根据XML文件规范生成包括表单名称和表单字段信息的XML文件，同时完成对象实例化，并生成实例化对象，并将实例化对象存于缓存中；调用数据库实体引擎，自动生成数据库表；

S4：生成表单信息采集用户访问接口，也称为用户访问界面或用户界面(UI)，将数据库表定义XML文件的所述实例化对象与表单HTML组件库绑定，生成用户访问接口，供表单信息采集用户进行操作，本实施例用户访问接口包括web界面接口；

S5：接收表单信息采集用户的输入信息，将信息通过键值对(key-value)方式组装成信息记录对象，存储数据信息，完成用户信息采集。

通过上述步骤可以看出，该现有技术虽然实现了表单的自动化数据库建表过程，但是用户在创建表单时，还会进行其他的增加、删除、修改等编辑操作，而用户的行为往往都是不可预测的，因而现有技术中虽然给出了方便用户设计表单的系统或方法，但是对于用户在设计过程中的问题却不能及时反馈，等到生成相应的代码，再通过浏览器加载时才能发现问题，这导致用户在后续过程中面对一堆问题还需要一个个去溯源查找问题所产生的原因，从而导致现有技术中的表单设计效率相对低下。

因而如何提供一种新的表单设计方法是待解决的技术问题。

发明内容

为了解决现有技术中表单设计无法对用户操作进行纠错的技术问题，本发明提出了表单的设计方法、存储介质。

本发明提出的表单的设计方法，包括：

步骤1，预先准备表单的操作应当出现的事件的信息；

步骤2，用户设计表单时，记录用户的每一步操作，并监控基于操作所出现的事件；

步骤3，判断所监控的事件的信息是否与用户的操作应当出现的事件的信息一致，若不一致，则提示用户。

进一步，所述步骤2中监控事件时，按照事件的发生时间依次将事件加入到事件队列，当事件队列内的事件数量大于0时，基于用户设计表单所生成的各界面读取事件队列内的事件的信息，并根据该事件的信息刷新界面内对应的表单，基于各刷新操作生成各新的事件，并将各新的事件加入到事件队列。

进一步，所述步骤3中若所监控的事件的信息与用户的操作应当出现的事件的信息一致，则从事件队列中删除对应的事件。

进一步，所述步骤3中若提示用户后用户对相应的操作进行了修复，使得所监控的事件的信息与用户的操作应当出现的事件的信息一致，则从事件队列中删除对应的事件。

进一步，所述步骤2中将用户设计表单时的操作所生成的单线程执行的宏任务和微任务采用异步渲染的方法分别用不同的线程执行。

进一步，所述步骤2中，用户创建表单时，自动生成相应的数据库表，并根据用户所选择的组件，自动生成相应的数据库表中的列。

进一步，所述步骤2中，自动生成数据库表时，将数据库表以及对应的组件进行自动关联形成相应的后台数据框架。

进一步，所述步骤2中，自动生成数据库表时，将各数据库表共用的属性进行匹配操作，并列出至少一组可关联的数据库表的组合共用户选择，用户所选择的数据库表的组合将建立相应的关联关系，当用户对具有关联关系的数据库表的组合中的任意一个数据库表进行增加、删除、修改、查询的操作时，基于所述关联关系将该数据库表的组合中的其他数据表库列出供用户进行操作。

进一步，还包括：

步骤4：用户表单设计完毕之后，自动生成不同浏览器的代码版本，当用户通过浏览器访问对应的表单时，获取浏览器的版本信息，基于浏览器的版本信息加载对应的代码版本并显示。

本发明提出的计算机可读存储介质，用于存储计算机程序，该计算机程序运行时执行上述技术方案所述的表单的设计方法。

本发明将用户所需的web技术简化成自动生成组件、便于用户使用，还可以将用户设计好的表单进行智能化处理，实现各种用户的不同需求。本发明进一步将用户设计的表格进行表单一体化处理、自动生成对应的数据库表(包括多种数据库的实现)、可供用户在表单设计器进行同步修改，提高效率、减少用户工作量。本发明还可以按需引入生成源码并转化成用户可读的HTML页面，以web可视化形式方便用户操作、查看。

附图说明

下面结合实施例和附图对本发明进行详细说明，其中：

图1是本发明的主要流程图。

图2是本发明一实施例的事件管理流程图。

图3是本发明一实施例的整体流程图。

图4是本发明的整体构架图。

图5是本发明一实施例的应用流程图。

图6是本发明一实施例的表单设计器的界面示意图。

图7是本发明一实施例的表单关联的流程图。

图8是本发明一实施例用户处理事件队列中的事件对应问题的流程图。

具体实施方式

为了使本发明所要解决的技术问题、技术方案及有益效果更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。

由此，本说明书中所指出的一个特征将用于说明本发明的一个实施方式的其中一个特征，而不是暗示本发明的每个实施方式必须具有所说明的特征。此外，应当注意的是本说明书描述了许多特征。尽管某些特征可以组合在一起以示出可能的系统设计，但是这些特征也可用于其他的未明确说明的组合。由此，除非另有说明，所说明的组合并非旨在限制。

如图1所示，本发明的表单的设计方法，包括以下步骤。

步骤1，预先准备表单的操作应当出现的事件的信息；

步骤2，用户设计表单时，记录用户的每一步操作，并监控基于操作所出现的事件；

步骤3，判断所监控的事件的信息是否与用户的操作应当出现的事件的信息一致，若不一致，则提示用户。

本发明通过监控用户的操作对应的事件，然后将该事件的信息与用户的操作本该产生的事件的信息进行对比，从而去验证用户的操作是否正确。用户的每一个操作，都可以通过相应的接口监听到对应的事件的信息，包括但不限于事件的事件码、事件的发生时间、事件的类型值等。例如，当用户创建了一个表单并对其中内容进行编辑时，本该出现的事件的信息的事件码为F0001，但是此时出现的事件码为F0002，那么可以判定用户的操作存在错误，因而可以及时提醒用户进行修正，避免后续编译阶段再集中报错。

如图2所示，在一个具体实施例中，步骤2中监控事件时，按照事件的发生时间依次将事件加入到事件队列，当事件队列内的事件数量大于0时，基于用户设计表单所生成的各界面读取事件队列内的事件的信息，并根据该事件的信息刷新界面内对应的表单，基于各刷新操作生成各新的事件，并将各新的事件加入到事件队列。

在该实施例中，本发明进一步采用了事件队列来对用户操作的事件进行管理，由于设计完成的表单可能并非一个界面独有一个表单设计，用户设计的表单往往在其他页面也有相应的利用。因而采用事件队列来进行管理时，一旦事件队列当中的事件的数量大于0，则可以得知用户此时在操作，并获得用户操作的表单的信息，找到与该表单相关联的其他界面，然后其他界面根据该事件的信息，可以对其他界面内的表单，这相当于用户进行了其他界面的操作，只不过省去了用户动手的麻烦，因而也会产生对应的事件，从而可以基于用户的一个操作，产生一系列自动的操作，并基于事件队列对每一个操作进行验证是否正确，解决了用户在修改表单时需要一个个界面逐一修改的麻烦，以及一个个验证是否操作准确的麻烦。

在一个进一步的实施例中，步骤3中若所监控的事件的信息与用户的操作应当出现的事件的信息一致，则从事件队列中删除对应的事件。

由于用户的操作是非常多的，如果不对事件队列进行管理，将会导致繁杂的事件数据堆积，因而本发明在验证了监控到的事件的信息与用户的操作应当出现的事件的信息一致时，就从事件队列中将对应的事件进行删除，从而保证事件队列的数据的精简。

在一个进一步的实施例中，步骤3中若提示用户后用户对相应的操作进行了修复，使得所监控的事件的信息与用户的操作应当出现的事件的信息一致，则从事件队列中删除对应的事件。

从该实施例可以看出，不管是用户修复前还是修复后，只要验证用户的操作没有问题，那么就从事件队列中将对应的事件进行删除，避免事件数据的进一步堆积，从而简化事件队列。

在一个进一步的实施例中，步骤2中将用户设计表单时的操作所生成的单线程执行的宏任务和微任务采用异步渲染的方法分别用不同的线程执行。

在通常情况下，用户设计表单时的操作所生成的线程都是单一线程，即线程执行完这个操作对应的任务以后，再执行下一个任务，这样效率比较低下，为了提高效率，本发明将单线程的宏任务和微任务分为不同的线程来执行，从而提高用户操作的底层线程的执行效率。

在一个进一步的实施例中，步骤2中用户创建表单时，自动生成相应的数据库表，并根据用户所选择的组件，自动生成相应的数据库表中的列。

组件包括但不限于输入框、单选框、多选框、下拉选择框、文本编辑框等。用户新建表单时，会自动生成相应的数据库表，用户在表单中添加了相应的组件，那么根据组件的类型，可以自动生成对应数据库表中的对应列。从而省去了用户创建数据库表的麻烦。

在一个进一步的实施例中，上述步骤2中自动生成数据库表时，将数据库表以及对应的组件进行自动关联形成相应的后台数据框架。

在该实施例中，为了便于后期的修改等操作，本发明将组件以及相应的数据库表进行了一体化处理。

在一个进一步的实施例中，上述步骤2中自动生成数据库表时，将各数据库表共用的属性进行匹配操作，并列出至少一组可关联的数据库表的组合共用户选择，用户所选择的数据库表的组合将建立相应的关联关系，当用户对具有关联关系的数据库表的组合中的任意一个数据库表进行增加、删除、修改、查询的操作时，基于所述关联关系将该数据库表的组合中的其他数据表库列出供用户进行操作。

通过将数据库表的共有属性挑选出来，可以找到与用户正在设计的表单对应的数据库表相关联的其他数据库表，当用户对当前的表单进行修改时，可能其他数据库表也需要进行类似的修改，本发明可以提高用户对表单以及对应数据库表修改的效率。

如图3所示，在一个实施例中，本发明的表单的设计方法还包括适配浏览器的步骤。

步骤4，用户表单设计完毕之后，自动生成不同浏览器的代码版本，当用户通过浏览器访问对应的表单时，获取浏览器的版本信息，基于浏览器的版本信息加载对应的代码版本并显示。

本发明预先准备了多个代码版本，在用户通过浏览器访问表单时，通过相应的方法获取浏览器的版本信息，从而加载与浏览器版本一致的代码版本并显示，解决了代码和浏览器版本不适配的问题。

图4给出了本发明的一个具体的表单设计的系统构架，该系统构架包括：表单设计器，表单引擎，数据引擎，与数据引擎连接的大数据云服务器，通过统一入口与表单引擎连接的便携电脑、主机等。

表单设计器可以提供基于web方式的所见即所得的可视化表单设计器。如图6所示，例如表单设计器的组成结构可以为一个可随意拖拽的编辑器，并且该编辑器提供内置的各种类型的组件，如文本框、选择框、下拉框、富文本编辑器等，这些组件都可以放置在组件库中，为了便于用户搭建表单，还可以设置表单模板等。编辑时，左侧界面为组件库和表单模板，中间为具体的编辑区，右侧为相应的设置，例如选中的组件设置，全局表单设置等。

然后该表单设计器还可以提供字段属性设置、表单属性设置、样式设计等，样式设计包括如栅格、间距、标签页、弹窗等设计。

当用户选择文本框或者其他类型的组件时，以用户选择文本框组件为例，本发明将自动生成一个数据库表供用户储存文本框里面的数据信息。

再例如，设计一个包含姓名、年龄、班级的表单，需要三个文本框。在表单设计器中点击新增字段。增加三个字段：姓名，年龄，班级。字段的数据类型分别为字符串类型(name:String)，数字类型(age:Number)，字符串类型(class:String)。在表单设计器中点击确认提交后，进行HTML渲染成实体化的对象把数据库中的数据类型返回给文本框组件，通过该方法将文本框内的数据与数据库表中的某个列的字段强关联起来。

当用户使用下拉框组件时，也是可以自动生成对应的数据库表或者是数据库表中对应的列，将用户填写的下拉框选项内容进行存储。下拉框组件的下拉选项是通过各下拉选项的key作为索引，传给数据库用作唯一的标识，下拉选项的value属性传值给数据库表，例如，设计一个国家的下拉选项，选项内有3个国家分别为中国，日本，法国。新建字段中国，value:china,key:1；日本，value:japan,key：2；法国，value：french,key:3。点击确认提交可以生成对应的数据库表。最后通过表单设计器HTML渲染成实体化的对象并将数据类型返回给下拉框组件，其他组件同理。这样做的好处是大大减少了代码量，操作简便，并且用户不需要学习较多的编程知识。

用户设计的页面(也称为界面)通过表单一体化处理成将对应的数据库表与组件整合在一起，形成后台数据框架。

如图5所示，用户的主机或笔记本电脑通过统一入口进入到表单设计的界面时，那么先判断是否已有表单，如果是，可以根据表单的ID在大数据云服务器中查找表单。如果没有表单，则进入到表单设计器，新建表单，建好表单以后，表单引擎将用户的表单转化为Asp.net源代码文件保存，输出适用于不同浏览器的项目源代码。之后用户访问，表单引擎可以生成相应的HTML5代码供用户浏览。

如图7所示，用户每次新创建的表单所对应的数据库表，本发明都会自动关联对应的数据库表，实现的方式具体为将监控到的每张数据库表所共有的一类属性进行属性打包，例如数据库表的id、建表时间、建表事件的类型值、耦合度等，将各数据库表的共用属性进行匹配操作，将共有属性之间相关性较高的几种数据库表的组合方案列出提供给用户，用户的选择不同就会产生不同的数据库表关联结果，这样可以减少用户操作，提高实用性，提高用户进行增、删、改、查的效率。图中用户新建了三个表单：表单一至表单三，然后提取表单的共用的属性，判断是否存在关联，如果不存在，就结束关联流程，如果存在，就建立关联方案，然后用户根据需求点击对应的按钮进行选择，用户确认完成好后，本发明自动将数据库表上传到大数据云服务器中保存，同时将用户表单数据存储起来，并通过数据引擎进行处理生成可视化的Web代码(项目源代码)。

如图8所示，本发明在进行打包部署之前，表单引擎会自动检测用户建表时是否出现严重的错误或者异常，根据错误或者异常来反馈给用户，用户只需要点击处理，具体做法为获取该用户目前操作时的监控数据(如事件码，发生时间，事件的类型值)推送到当前全局表单组件实例的事件队列中去，当事件队列中的事件个数大于0时，即代表有用户操作，基于用户设计表单所产生的其他界面依次读取事件队列中的事件的信息，通过事件的信息判断对应界面的数据是否需要重新刷新，是否出现内存泄漏的等问题。若是存在问题，则推送给用户提醒用户修复，如果用户修复成功，将事件从事件队列中移除，代表事件处理完毕，并弹窗提醒用户修复成功！通过调用引擎内部的API来管理全局表单组件实例中的对象引用和内存从而提高生成组件的效率并大大减少使用其他如XML文件等开发时产生的引用问题和内存泄漏的问题，降低开发难度和开发周期。

本发明的针对线程阻塞也进行了处理，线程阻塞就是javascript中在调用后端接口获取数据时的宏任务执行完后微任务没执行完就开始接收执行下一个宏任务了。本发明采用异步渲染方法，在事件队列中调整线路宏任务和微任务的执行优先级来控制线路的数据传输，在控制线路数据传输的过程中促使宏任务等待微任务完成后再进行数据接收，本发明解决了生成组件后调用后端接口时所产生的线程阻塞问题，用户在平台内可以同时新建多个数据模型及表单，在操作数据模型，编辑表单时，会根据用户的事件队列操作顺序在短时间内进行后端接口数据的响应，并且本发明提供多线路数据传输管理功能，控制数据模型较多的表单给予更多的线路进行数据传输，较少的数据模型给予更少的线路进行传输。通过异步渲染的方法来使线程进行非异步阻塞的多路数据传输，相比于XML文件的单线路同步数据传输效率更高，不容易发生异步阻塞，不易造成页面卡顿的现象。

本发明还保护计算机可读存储介质，该计算机可读存储介质，用于存储计算机程序，该计算机程序运行时执行本发明上述技术方案的表单的设计方法。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种表单的设计方法，其特征在于，包括：

步骤1，预先准备表单的操作应当出现的事件的信息；

步骤2，用户设计表单时，记录用户的每一步操作，并监控基于操作所出现的事件；

步骤3，判断所监控的事件的信息是否与用户的操作应当出现的事件的信息一致，若不一致，则提示用户。

2.如权利要求1所述的表单的设计方法，其特征在于，所述步骤2中监控事件时，按照事件的发生时间依次将事件加入到事件队列，当事件队列内的事件数量大于0时，基于用户设计表单所生成的各界面读取事件队列内的事件的信息，并根据该事件的信息刷新界面内对应的表单，基于各刷新操作生成各新的事件，并将各新的事件加入到事件队列。

3.如权利要求2所述的表单的设计方法，其特征在于，所述步骤3中若所监控的事件的信息与用户的操作应当出现的事件的信息一致，则从事件队列中删除对应的事件。

4.如权利要求2所述的表单的设计方法，其特征在于，所述步骤3中若提示用户后用户对相应的操作进行了修复，使得所监控的事件的信息与用户的操作应当出现的事件的信息一致，则从事件队列中删除对应的事件。

5.如权利要求1所述的表单的设计方法，其特征在于，所述步骤2中将用户设计表单时的操作所生成的单线程执行的宏任务和微任务采用异步渲染的方法分别用不同的线程执行。

6.如权利要求1所述的表单的设计方法，其特征在于，所述步骤2中，用户创建表单时，自动生成相应的数据库表，并根据用户所选择的组件，自动生成相应的数据库表中的列。

7.如权利要求6所述的表单的设计方法，其特征在于，所述步骤2中，自动生成数据库表时，将数据库表以及对应的组件进行自动关联形成相应的后台数据框架。

8.如权利要求6所述的表单的设计方法，其特征在于，所述步骤2中，自动生成数据库表时，将各数据库表共用的属性进行匹配操作，并列出至少一组可关联的数据库表的组合共用户选择，用户所选择的数据库表的组合将建立相应的关联关系，当用户对具有关联关系的数据库表的组合中的任意一个数据库表进行增加、删除、修改、查询的操作时，基于所述关联关系将该数据库表的组合中的其他数据表库列出供用户进行操作。

9.如权利要求1至8任意一项所述的表单的设计方法，其特征在于，还包括：

步骤4：用户表单设计完毕之后，自动生成不同浏览器的代码版本，当用户通过浏览器访问对应的表单时，获取浏览器的版本信息，基于浏览器的版本信息加载对应的代码版本并显示。

10.一种计算机可读存储介质，用于存储计算机程序，其特征在于，该计算机程序运行时执行如权利要求1至9任意一项所述的表单的设计方法。