CN115268916A - 一种基于低代码开发平台的动态表单实现方法及系统 - Google Patents

Abstract

本发明提供了一种基于低代码开发平台的动态表单实现方法及系统，该方法通过将表单设计器提供的表单布局数据和控件配置数据存储于数据库中，其中，数据库还包括表单实例数据，当需要对表单控件进行渲染时，再通过表单渲染引擎从数据库中调用表单布局数据和控件配置数据，生成表单控件对象，并根据表单控件对象动态分步渲染表单控件，避免一次性渲染的表单控件过多，导致渲染时间过长，最后判断表单是否处于运行状态，若是，则通过表单渲染引擎从数据库中调用表单实例数据，并对表单实例数据进行渲染，以完成表单页面的渲染，若否，则控制表单渲染引擎停止从数据库中调用表单实例数据。

Description

一种基于低代码开发平台的动态表单实现方法及系统

技术领域

本发明属于软件开发技术领域，具体涉及一种基于低代码开发平台的动态表单实现方法及系统。

背景技术

随着越来越多的企业数字化转型，从采用传统的纯编码开发方式转向采用更高效的开发平台来实现应用软件开发的需求也越来越多。传统的纯编码开发存在周期长、效率低、难以复用和适应变化等问题，所以采用高效的“快速开发平台”能够提升软件开发便捷度，同时降低软件开发门槛。

目前，市面上“快速开发平台”类产品一般以表单、流程和视图的快速配置为核心功能，其中，对于表单的快速配置包括表单设计器，表单渲染引擎和数据库存储。

可是当通过表单设计器配置的表单控件数量过多时，由于渲染引擎的性能问题和大量Dom操作带来的浏览器重绘重排性能问题，一次性渲染大量的表单控件，往往会导致表单页面长时间处于空白状态和页面卡顿，极大的影响了用户体验。

发明内容

基于此，本发明实施例当中提供了一种基于低代码开发平台的动态表单实现方法及系统，旨在解决现有技术中，表单渲染引擎渲染大量表单控件时，页面长时间空白和页面卡顿问题。

本发明实施例的第一方面提供了一种基于低代码开发平台的动态表单实现方法，所述方法包括：

将表单设计器提供的表单布局数据和控件配置数据存储于数据库中，其中，所述数据库还包括表单实例数据；

通过表单渲染引擎从所述数据库中调用所述表单布局数据和所述控件配置数据，生成表单控件对象，并根据所述表单控件对象动态分步渲染表单控件；

判断表单是否处于运行状态；

若是，则通过所述表单渲染引擎从所述数据库中调用所述表单实例数据，并对所述表单实例数据进行渲染，以完成表单页面的渲染；

若否，则控制所述表单渲染引擎停止从所述数据库中调用所述表单实例数据。

进一步的，所述根据所述表单控件对象动态分步渲染表单控件的步骤中，将所述表单控件对象分批，并按批次渲染所述表单控件，其中，使用JavaScript的事件轮询机制，每次渲染一批表单控件之后，向事件轮询中添加一个宏任务，所述宏任务用以渲染后一批的表单控件，直到全部渲染完成。

进一步的，所述将所述表单控件对象分批的步骤中，所述表单控件对象为数组，其中，每次分批的过程为将更新的表单控件对象添加至表单控件对象数组中，所述更新的表单控件对象由所述数据库中返回的所述表单布局数据和所述控件配置数据生成。

进一步的，所述表单渲染引擎采用Vue作为前端框架。

进一步的，所述通过表单渲染引擎从所述数据库中调用所述表单布局数据和所述控件配置数据，生成表单控件对象，并根据所述表单控件对象动态分步渲染表单控件的步骤中，根据当前表单控件对象，控制所述表单渲染引擎生成虚拟Dom树；获取根据历史表单控件对象生成的历史虚拟Dom树，并将所述虚拟Dom树和所述历史虚拟Dom树进行diff算法比较，生成目标Dom节点；根据所述目标Dom节点，对真实Dom树进行更新。

进一步的，所述则通过所述表单渲染引擎从所述数据库中调用所述表单实例数据，并对所述表单实例数据进行渲染的步骤中，控制所述表单渲染引擎将所述表单实例数据渲染至所述真实Dom树中。

进一步的，所述运行状态为表单编辑状态或表单查看状态的一种。

进一步的，所述表单设计器提供可视化可拖拽的表单布局功能，根据用户需要拖拽预设类型的表单控件，并对所述表单控件的属性进行编辑，编辑后的数据用于转换为所述表单布局数据和所述控件配置数据存储于数据库中。

本发明实施例的第二方面提供了一种基于低代码开发平台的动态表单实现系统，所述系统包括：

存储模块，用于将表单设计器提供的表单布局数据和控件配置数据存储于数据库中，其中，所述数据库还包括表单实例数据；

表单控件渲染模块，用于通过表单渲染引擎从所述数据库中调用所述表单布局数据和所述控件配置数据，生成表单控件对象，并根据所述表单控件对象动态分步渲染表单控件；

运行状态判断模块，用于判断表单是否处于运行状态；

表单页面渲染模块，用于当判断表单处于运行状态时，则通过所述表单渲染引擎从所述数据库中调用所述表单实例数据，并对所述表单实例数据进行渲染，以完成表单页面的渲染；

停止调用模块，用于当判断表单未处于运行状态时，则控制所述表单渲染引擎停止从所述数据库中调用所述表单实例数据。

本发明的有益效果为：该方法通过将表单设计器提供的表单布局数据和控件配置数据存储于数据库中，其中，数据库还包括表单实例数据，当需要对表单控件进行渲染时，再通过表单渲染引擎从数据库中调用表单布局数据和控件配置数据，生成表单控件对象，并根据表单控件对象动态分步渲染表单控件，避免一次性渲染的表单控件过多，导致渲染时间过长，最后判断表单是否处于运行状态，若是，则通过表单渲染引擎从数据库中调用表单实例数据，并对表单实例数据进行渲染，以完成表单页面的渲染，若否，则控制表单渲染引擎停止从数据库中调用表单实例数据。

附图说明

图1为本发明第一实施例提供的一种基于低代码开发平台的动态表单实现方法的实现流程图；

图2为本发明第一实施例提供的渲染表单控件的代码示意图；

图3为本发明实施例二提供了一种基于低代码开发平台的动态表单实现系统的结构示意图。

以下具体实施方式将结合上述附图进一步说明。

具体实施方式

为了便于理解本发明，下面将参照相关附图对本发明进行更全面的描述。附图中给出了本发明的若干实施例。但是，本发明可以以许多不同的形式来实现，并不限于本文所描述的实施例。相反地，提供这些实施例的目的是使对本发明的公开内容更加透彻全面。

需要说明的是，当元件被称为“固设于”另一个元件，它可以直接在另一个元件上或者也可以存在居中的元件。当一个元件被认为是“连接”另一个元件，它可以是直接连接到另一个元件或者可能同时存在居中元件。本文所使用的术语“垂直的”、“水平的”、“左”、“右”以及类似的表述只是为了说明的目的。

除非另有定义，本文所使用的所有的技术和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同。本文中在本发明的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本发明。本文所使用的术语“及／或”包括一个或多个相关的所列项目的任意的和所有的组合。

实施例一

请参阅图1和图2，图1示出了本发明第一实施例提供的一种基于低代码开发平台的动态表单实现方法的实现流程图，图2示出了本发明第一实施例提供的渲染表单控件的代码示意图，其中，所述方法具体包括步骤S01至步骤S05。

步骤S01，将表单设计器提供的表单布局数据和控件配置数据存储于数据库中，其中，所述数据库还包括表单实例数据。

在本实施例当中，表单设计器提供可视化可拖拽的表单布局功能，可根据用户需要拖拽各种类型的表单控件，并可对表单控件的属性进行编辑，完成表单页面的整体设计后，可转换为表单布局数据和控件配置数据存储于数据库中，其中，表单控件是提供一组允许用户操作的控件，从而接收用户输入的数据，可以理解为一种用于数据交互的对象，用户可操作该对象来执行对表单设计、修改等操作，具体的，在HTML中，表单控件存在于Form表单中，另外，表单实例数据是指存储在数据库中的应用系统数据，可以理解为表单定制的系统数据，是通过定制的表单提交入库的数据，例如，当表单实例数据为个人简历表单实例数据，那么，应围绕姓名、性别、出身年月、求职意向等进行对应的HTML代码编写。

步骤S02，通过表单渲染引擎从所述数据库中调用所述表单布局数据和所述控件配置数据，生成表单控件对象，并根据所述表单控件对象动态分步渲染表单控件。

具体的，根据数据库中的表单布局数据和控件配置数据生成的表单控件对象，可以定义为一个数组，即表单控件对象数组。表单系统初始化时，表单控件对象数组可以理解为空数组。

需要说明的是，根据表单控件对象动态分步渲染表单控件的过程为，将表单控件对象分批，并按批次渲染表单控件，其中，使用JavaScript的事件轮询机制，每次渲染一批表单控件之后，向事件轮询中添加一个宏任务，宏任务用以渲染后一批的表单控件，直到全部渲染完成，具体的，每次分批的过程为将更新的表单控件对象添加至表单控件对象数组中，可以理解的，第一次更新的表单控件对象将添加至空数组中，第二次更新的表单控件对象将添加至包含有第一次更新的表单控件对象的表单控件对象数组中，另外，更新的表单控件对象由数据库中返回的表单布局数据和控件配置数据生成，而数据库中返回的表单布局数据和控件配置数据由用户操作表单设计器得到。

在本实施例当中，利用JavaScript事件轮询机制，使用宏任务往表单控件对象数组中每次添加一批表单控件对象，一批可以为20个表单控件对象，表单渲染引擎每次根据表单控件对象数组重新渲染表单页面，由于表单渲染引擎采用Vue作为前端框架，可以利用Vue的虚拟Dom和diff算法比较机制，高效的渲染表单控件到真实的Dom节点中，具体的，根据当前表单控件对象，控制表单渲染引擎生成虚拟Dom树，由于也存在历史表单控件对象生成的历史虚拟Dom树，所以同时获取虚拟Dom树和历史虚拟Dom树，并将虚拟Dom树和历史虚拟Dom树进行diff算法比较，生成目标Dom节点，根据目标Dom节点，对真实Dom树进行更新，其中，diff算法为一种计算机计算方法，用于虚拟DOM中，把树形结构按照层级分解，只比较同级元素，不同层级的节点只有创建和删除操作。

另外，向事件轮询中添加宏任务不会造成页面的卡顿，因为每次分批只会向真实Dom树添加更新的表单控件对应的Dom节点，所以不会造成一次更新的目标Dom节点，即真实Dom的节点数据过多，同时，由于采用JavaScript的事件轮询机制，会依次执行事件队列中的宏任务，若宏任务中存在多个微任务，会按照微任务队列顺序依次执行其中的微任务。所以每次向事件队列中添加一个宏任务，会给其他代码的执行和浏览器行为提供时间。又由于浏览器的GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时，GUI线程会被挂起，即被冻结，那么，GUI更新将被保存在一个队列中，直至等到JS引擎空闲时，才会被执行。可以理解的，每次分步渲染时，往事件队列中添加一个宏任务，相当于给GUI渲染线程提供了一定的时间，来重新渲染UI，所以不会造成页面卡顿。

步骤S03，判断表单是否处于运行状态，若是，则执行步骤S04；若否，则执行步骤S05。

需要说明的是，当数据库中不存在表单的表单布局数据和控件配置数据，即表单的表单布局数据和控件配置数据被处理完，为空时，不再执行表单渲染，而在判断表单是否处于运行状态前，可以执行afterFunc方法，可以理解为渲染完成之后的方法，即除表单渲染以外的其它操作，例如，可以为在指定的持续时间结束之后，通道返回其输出，程序退出。

其中，运行状态为表单编辑状态或表单查看状态的一种，即当表单是否处于表单编辑状态或表单查看状态时，则说明表单处于运行状态。

步骤S04，则通过所述表单渲染引擎从所述数据库中调用所述表单实例数据，并对所述表单实例数据进行渲染，以完成表单页面的渲染。

具体的，控制表单渲染引擎将表单实例数据渲染至真实Dom树中，从而完成表单页面的整体渲染。

步骤S05，则控制所述表单渲染引擎停止从所述数据库中调用所述表单实例数据。

综上，本发明上述实施例当中的基于低代码开发平台的动态表单实现方法，该方法通过将表单设计器提供的表单布局数据和控件配置数据存储于数据库中，其中，数据库还包括表单实例数据，当需要对表单控件进行渲染时，再通过表单渲染引擎从数据库中调用表单布局数据和控件配置数据，生成表单控件对象，并根据表单控件对象动态分步渲染表单控件，避免一次性渲染的表单控件过多，导致渲染时间过长，最后判断表单是否处于运行状态，若是，则通过表单渲染引擎从数据库中调用表单实例数据，并对表单实例数据进行渲染，以完成表单页面的渲染，若否，则控制表单渲染引擎停止从数据库中调用表单实例数据。

实施例二

请参阅图3，为本发明实施例二提供了一种基于低代码开发平台的动态表单实现系统，所述基于低代码开发平台的动态表单实现系统200包括：

存储模块21，用于将表单设计器提供的表单布局数据和控件配置数据存储于数据库中，其中，所述数据库还包括表单实例数据。

表单控件渲染模块22，用于通过表单渲染引擎从所述数据库中调用所述表单布局数据和所述控件配置数据，生成表单控件对象，并根据所述表单控件对象动态分步渲染表单控件，其中，所述表单渲染引擎采用Vue作为前端框架。

进一步的，所述表单控件渲染模块22中，使用JavaScript的事件轮询机制，每次渲染一批表单控件之后，向事件轮询中添加一个宏任务，所述宏任务用以渲染后一批的表单控件，直到全部渲染完成。

进一步的，所述表单控件渲染模块22中，所述表单控件对象为数组，每次分批的过程为将更新的表单控件对象添加至表单控件对象数组中，所述更新的表单控件对象由所述数据库中返回的所述表单布局数据和所述控件配置数据生成。

进一步的，所述表单控件渲染模块22中，根据当前表单控件对象，控制所述表单渲染引擎生成虚拟Dom树；获取根据历史表单控件对象生成的历史虚拟Dom树，并将所述虚拟Dom树和所述历史虚拟Dom树进行diff算法比较，生成目标Dom节点；根据所述目标Dom节点，对真实Dom树进行更新。

运行状态判断模块23，用于判断表单是否处于运行状态，其中，所述运行状态为表单编辑状态或表单查看状态的一种。

表单页面渲染模块24，用于当判断表单处于运行状态时，则通过所述表单渲染引擎从所述数据库中调用所述表单实例数据，并对所述表单实例数据进行渲染，以完成表单页面的渲染，其中，控制所述表单渲染引擎将所述表单实例数据渲染至所述真实Dom树中。

停止调用模块25，用于当判断表单未处于运行状态时，则控制所述表单渲染引擎停止从所述数据库中调用所述表单实例数据。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。

Claims (9)

1.一种基于低代码开发平台的动态表单实现方法，其特征在于，所述方法包括：

将表单设计器提供的表单布局数据和控件配置数据存储于数据库中，其中，所述数据库还包括表单实例数据；

通过表单渲染引擎从所述数据库中调用所述表单布局数据和所述控件配置数据，生成表单控件对象，并根据所述表单控件对象动态分步渲染表单控件；

判断表单是否处于运行状态；

若是，则通过所述表单渲染引擎从所述数据库中调用所述表单实例数据，并对所述表单实例数据进行渲染，以完成表单页面的渲染；

若否，则控制所述表单渲染引擎停止从所述数据库中调用所述表单实例数据。

2.根据权利要求1所述的基于低代码开发平台的动态表单实现方法，其特征在于，所述根据所述表单控件对象动态分步渲染表单控件的步骤中，将所述表单控件对象分批，并按批次渲染所述表单控件，其中，使用JavaScript的事件轮询机制，每次渲染一批表单控件之后，向事件轮询中添加一个宏任务，所述宏任务用以渲染后一批的表单控件，直到全部渲染完成。

3.根据权利要求2所述的基于低代码开发平台的动态表单实现方法，其特征在于，所述将所述表单控件对象分批的步骤中，所述表单控件对象为数组，其中，每次分批的过程为将更新的表单控件对象添加至表单控件对象数组中，所述更新的表单控件对象由所述数据库中返回的所述表单布局数据和所述控件配置数据生成。

4.根据权利要求3所述的基于低代码开发平台的动态表单实现方法，其特征在于，所述表单渲染引擎采用Vue作为前端框架。

5.根据权利要求4所述的基于低代码开发平台的动态表单实现方法，其特征在于，所述通过表单渲染引擎从所述数据库中调用所述表单布局数据和所述控件配置数据，生成表单控件对象，并根据所述表单控件对象动态分步渲染表单控件的步骤中，根据当前表单控件对象，控制所述表单渲染引擎生成虚拟Dom树；获取根据历史表单控件对象生成的历史虚拟Dom树，并将所述虚拟Dom树和所述历史虚拟Dom树进行diff算法比较，生成目标Dom节点；根据所述目标Dom节点，对真实Dom树进行更新。

6.根据权利要求5所述的基于低代码开发平台的动态表单实现方法，其特征在于，所述则通过所述表单渲染引擎从所述数据库中调用所述表单实例数据，并对所述表单实例数据进行渲染的步骤中，控制所述表单渲染引擎将所述表单实例数据渲染至所述真实Dom树中。

7.根据权利要求1所述的基于低代码开发平台的动态表单实现方法，其特征在于，所述运行状态为表单编辑状态或表单查看状态的一种。

8.根据权利要求2所述的基于低代码开发平台的动态表单实现方法，其特征在于，所述表单设计器提供可视化可拖拽的表单布局功能，根据用户需要拖拽预设类型的表单控件，并对所述表单控件的属性进行编辑，编辑后的数据用于转换为所述表单布局数据和所述控件配置数据存储于数据库中。

9.一种基于低代码开发平台的动态表单实现系统，其特征在于，所述系统包括：

存储模块，用于将表单设计器提供的表单布局数据和控件配置数据存储于数据库中，其中，所述数据库还包括表单实例数据；

表单控件渲染模块，用于通过表单渲染引擎从所述数据库中调用所述表单布局数据和所述控件配置数据，生成表单控件对象，并根据所述表单控件对象动态分步渲染表单控件；

运行状态判断模块，用于判断表单是否处于运行状态；

表单页面渲染模块，用于当判断表单处于运行状态时，则通过所述表单渲染引擎从所述数据库中调用所述表单实例数据，并对所述表单实例数据进行渲染，以完成表单页面的渲染；

停止调用模块，用于当判断表单未处于运行状态时，则控制所述表单渲染引擎停止从所述数据库中调用所述表单实例数据。

Images