关于使用后端实现动态表单功能的心得

1、设计方案

1、直接存整体表单结构的json串

优点:相对Mysql细化结构存储,不用在后端处理大量增、删、改的逻辑。如果用mysql对结构体做逻辑删除,可利于回滚。也可用redis、mongodb等实现

缺点:控制粒度不够,不利于需要关联复杂查询的情况,事务控制只能真对整个结构体。需要前端可靠支撑,如前端生成ID或者直接将名称作为表单、字段、选项的唯一识别。

2、使用Myql存表单细化的结构,基本如下

表单表:存储不同表单,如不同页面可能有不同表单。

字段表:存储表单字段信息,比如字段类型、选项类型、输入框类型、筛选类型(展开类型)、字段排序、是否必填、所属表单ID等。

选项表:存储字段为选项类型的选项,如选项名、所属字段ID、所属表单ID等。

表单数据表:使用了哪个表单,并存储表单数据,需存表单ID。

字段数据表:使用表单的哪些字段,并存储字段数据。如输入框类型的输入值、选项标签、表单ID、选项ID。

选项数据表:勾选了哪些选项,需存表单ID、字段ID、选项ID。

优点:可支持复杂查询,以及数据统计等。

缺点:需要在后端处理大量增、删、改,以及校验逻辑。

需要十分注意数据表是存实时数据还是历史数据,实现方案将有很多差别

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
antdv 是一套基于 React 的UI组件库,它提供了丰富的组件,其中包括了表单组件。在根据后端数据动态生成表单时,我们可以利用 antdv 的表单组件来实现。 首先,我们需要从后端获取到表单数据,一般会以 JSON 的格式返回。然后,我们可以通过遍历后端返回的数据,根据每个字段的类型,来动态生成对应的表单组件。 例如,如果后端返回的数据中有一个类型为文本输入的字段,我们可以使用 antdv 的 Input 组件来生成一个文本输入框,然后将其放置在表单中。而如果某个字段是选择框的类型,则可以使用 antdv 的 Select 组件来生成一个下拉选择框,并将选项值和选中值都设置好。 在生成表单过程中,我们还可以通过给表单项设置验证规则,实现表单数据的验证。antdv 提供了丰富的验证规则,可以方便地实现各种验证需求,如必填、长度、格式等。 最后,在表单填写完成后,我们可以通过调用 antdv 的表单提交方法,将表单数据发送给后端进行处理。同时,antdv 还提供了其他一些功能,如表单重置、数据回填等。 总结来说,antdv 提供了丰富的表单组件和相应的功能,通过与后端数据的交互,我们可以将后端数据动态地转化为具有验证功能表单,并将表单数据发送到后端进行处理。这样,我们可以通过少量的代码实现强大的表单功能

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值