动态表单实现原理

目录

动态表单是什么

动态表单的关键

前后端职责

数据库与表结构

功能实现与改进建议

---

动态表单是什么

静态表单是很常见，也是常规做法，其表单的结构是固定的，通常情况下一个表单对应数据库的一张表，表单中一个数据项对应数据表的一个字段。虽然结构固定，但查询和统计方便。

而动态表单，特点是表单的内容项是动态可变的，可轻易的添加和减少表单的内容项，而不需要改动表结构和功能实现。结构灵活，但是不便于查询统计。

例如人员统计表单包含姓名、性别、籍贯、身份证号，对于静态表单，数据表有对应的四个字段，若想为表单增加或减少内容项，就需要修改数据表结构了，而且前后端功能实现也需要变化；对应动态表单，只需对表单的内容项进行配置，即可完成结构变更，不需要改动数据表和功能实现。

动态表单的关键

动态表单的关键，在于前后端达成共识的报文结构规范。

前端根据用户的配置生成报文，达到表单动态配置目的；

前端解析报文并组织页面元素，达到表单动态显示的目的。

后台对回收采集的json数据进行解析和聚合，提供数据报表和数据统计功能。

tduck、卷王、erupt的动态表单，皆是如此。

前后端职责

由于已经制定了报文规范，所以服务端不做数据转换，而是直接写入数据库。前后端的职责很明确。

前端实现

1. 前端通过scheme结构描述一个 表单组件，描述结构大概如下图。

1. 通过拖拽表单组件到当前编辑区，表单组件样式渲染 也是通过 组件的scheme结构进行渲染的。
2. 编辑表单组件属性，实际就是修改scheme属性字段。
3. 保存到服务器接口 也是把当前表单的 scheme描述结构发送到接口进行保存。

数据库与表结构

数据库为MySQL

表单相关表结构

tduck和卷王在表结构方面的对比

tduck表单基础信息、表单组件信息、表单配置信息等分别放在不同的表中。

卷王是用一张表存储表单的所有信息，用不同字段存储组件信息、配置信息等。

功能实现与改进建议

回收数据列表

现有流程

举个例子

回收的用户填写数据 json形式	{"input1688020520318":"xxxxx"}
报表接口查询返回
前端根据表单配置信息，进行表格渲染

改进建议-数据筛选

现状：目前报表功能不支持数据筛选。基于现有数据模型，很难做数据筛选。

解决思路：需要借助其他存储方式，并进行二次开发。

其他存储方式可选用：

MongoDB，支持json筛选的数据库

es，支持json存储和搜索

存储流程：

查询筛选流程：

数据统计仪表盘功能

现有流程

回收数据表有独立的几个字段记录了相关数据，如用户使用的设备、用户使用的浏览器、IP地址、填写表单用时。

对回收数据表进行group by查询，即可得到仪表盘的数据。

select 设备,count(1) from 回收表 group by 设备
接口返回分组统计数据，由H5进行渲染。

改进建议-改进

考虑数据量很大的情况，不影响数据库性能，功能支持高qps，可以考虑使用redis进行计数。