前后端完整的动态表单案例

效果图

• 创建表单模版

  

• 选择表单模版提交表单数据

  

源码部署过程

启动前端服务

启动后端服务

后端支持的数据库有mysql和postgresql，这里就用postgresql做演示了

• 启动一个postgresql docker服务

  

  

  

• 通过navacat连接

创建一个ng_server数据库，无需创建表,项目启动的时候会通过flyway自动创建表和初始化数据

动态表单相关的2张表，ng_form_template是表单模版表,ng_form_data是表单数据表

• springboot项目配置postgresql

  

• 启动服务

  

访问url

http://localhost:8080/home
复制代码

默认超管账号为: superAdmin,密码: admin

• 新增表单模版

动态表单编号是F00003

• 修改表单模版编号

  

• 填写表单数据并提交表单

  

  

大体流程简介

前端表单验证

选择某一个表单属性，有这几种校验方式

• 非空验证
• 正则表达式验证
• 代码条件表达式

提交表单的时候，前端就会做验证，这个验证的方式就是根据表单模版中某个控件的校验方式，比如姓名这个控件的校验方式是非空或者具体的一个正则表达式。

表单模版导出json格式

json中包含每个表单控件的属性以及校验方式。

表单模版提交了之后，就会保存在ng_form_template表中，其中template_data是表单模版的json内容

提交了表单数据之后，就会保存在ng_form_data表中，其中form_id是表单模版id，form_code是表单模版编号，form_data是提交表单用户填写的表单数据。

后端数据校验的过程

后端数据校验是拿着用户提交的表单数据和当前表单模版配置的数据比对，看提交的数据是否满足表单模版要求的数据

data是填写的内容，formId是表单模版ID

获取表单模版json并解析

FormValidator fv = ngFormValidator.validator(templateJson, data);
复制代码

验证提交数据是否符合模版的要求

解析模版中的每一个控件，并且一个控件一个控件的做校验。

前端源码

https://gitee.com/pingfanrenbiji/ng-ui
复制代码

后端源码

https://gitee.com/pingfanrenbiji/ng-server
复制代码