表单引擎设计的一些思考
作为开发平台的使用者,希望开发平台提供一款拖拽式的表单设计引擎,支持图形化设计,表单动态渲染,列表页面动态展示,业务数据动态处理的功能,以便帮助团队可以零代码开发业务表单。
表单引擎主要包括4个功能模块,表单设计器、表单解析器、协议管理、数据存储,其中表单设计器与解析器为前端模块,负责表单的创建以及动态渲染;
协议管理和数据存储为后端模块,负责协议的解析、适配、版本管理以及CRUD工作,数据存储负责业务数据的动态CRUD操作。
整体交互流程
表单设计流程
- 通过表单设计器界面操作设计表单
- 点击保存,生成Json Schema数据,并保存到数据库
- 解析Json数据,创建新增表单数据库表
基于模板表单设计流程
- 创建模板表单,获取模板Json Schema
- 动态渲染页面
- 编辑表单
- 生成新的Json Schema数据,并更新数据库/缓存
表单渲染流程
- 根据表单ID获取表单Json Schema数据
- 解析Json Schema数据获取表名,根据查询条件,到相应数据库表查询业务数据
- 根据Json Schema和业务数据重新渲染列表页面
数据写入、编辑
- 根据表单ID获取表单Json Schema数据进行表单页面渲染
- 通过接口将表单数据传给后端
- 解析Json Schema数据,将业务数据动态写入数据库表
数据删除
- 根据表单ID获取表单Json Schema数据
- 解析Json Schema数据获取表名,根据条件,到相应数据库表删除业务数据
表单设计器
表单设计器技术选型designable、form-cteate-designer。
两种实现思路,第一种基于Formily进行独立开发,包括3部分左侧控件列表、画布、右侧属性配置,每个控件都需要提供控件名称、配置表单、toConfig 和 toSchema 这四个接口,源码参考designable。
第二种基于form-cteate-designer进行二次开发,form-cteate-designer是VUE2的项目,需要进行VUE3的改造。
表单解析器
- 表单解析器技术选型Formily或者form-cteate,解析器不需要太多开发工作,需熟练使用Formily或者form-cteate。
- 基于JsonSchema动态渲染列表页面。
协议管理
- 协议格式定义,结合前端表单设计器的JsonSchema模型整体考虑
- 数据协议保存到关系型数据库,并考虑版本信息
- 数据协议CRUD过程需要使用缓存提高性能
协议示例
数据存储
方案
|
描述
|
优点
|
缺点
|
使用案例
|
备注
|
---|---|---|---|---|---|
动态创建表 |
|
|
|
Joget低代码 奥哲云枢 |
验证Hibernate的Hbm2ddl
|
预留空白字段 | 1+N表,一张存储字段元数据,即属性字段与预留字段直接的映射关系 |
|
|
||
纵表(Key/Vaule) | 将表单数据全部都用 Key/Value 的格式来存储 | 两张表,不需要动态调整表结构 |
|
||
关系型数据库存储Json格式 | 存储Json格式数据 |
不需要调整动态修改表结构 |
|
TDUCK开源版 | |
NoSQL(MongoDB、Elasticsearch) | 存储Json格式数据,支持动态调整数据结构 |
|
|
TDUCK PRO版 明道云 |
任务列表
任务
|
---|
表单设计器开发(Designable/form-create-designer)
|
表单解析器开发(Formily/form-create) |
列表页面动态渲染 |
协议管理模块开发
|
数据动态处理功能开发
|
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体