java - springboot+vue, mysql怎么设置字段存储form动态表单?

Question

需求: 每个页面进去是一个不一样的form表单，form中的item属性都是自定义不确定的
问题: springboot+vue, mysql怎么设置字段存储form动态表单?

1. 使用json记录整个form
2. 使用varchar记录整个form
3. 使用text 记录整个form
4. 把form中的item分开记录,如type：varchar;title:varchar;value:varchar;......

var form = [  {    type: "input",    field: "default",    title: "update1",    value: "default",    onChnage: (val) => {      console.log("val", val);    },  },  {    type: "input",    title: "商品名称",    field: "goods_name",    value: "iphone 7",    col: {      span: 12,      labelWidth: 150,    },    props: {      type: "text",    },    validate: [      { required: true, message: "请输入goods_name", trigger: "blur" },    ],  },];

Answer 1

当然用JSON。
有个示例供参考：https://github.com/yji234/dynamic-form-pc

其实就是把每个组件描述出来，然后前端按这种逻辑展示，后端按这种逻辑校验。当然还有表单的设计

[    {        id: '2',        ruleName: '提示文字',        ruleValue: 'placeHolder',        ruleType: 'text',        defaultValue: '',        placeHolder: '请输入',        topTip: '最多50字',        bottomTip: '内容最多可填写1000字',        checkboxLabel: ''    },    {        id: '3',        ruleName: '必填',        ruleValue: 'isRequired',        ruleType: 'checkbox',        defaultValue: '',        placeHolder: '',        topTip: '',        bottomTip: '',        checkboxLabel: '是否必填'    },]

Answer 2

这个问题涉及到前端（Vue.js）和后端（Spring Boot）以及数据库（MySQL）之间的交互。你提到了四种可能的解决方案，我会一一分析它们的优缺点，以帮助你选择最适合你的方案。

1. 使用json记录整个form

* 优点：可以很方便地存储和解析动态表单。前端只需要将表单数据转化为JSON格式，然后发送到后端。后端也可以很方便地将JSON数据存储到数据库中。* 缺点：如果表单数据非常大，可能会超过JSON的解析限制。此外，如果数据库字段类型是固定的，可能无法很好地支持动态表单。

2. 使用varchar记录整个form

* 优点：简单易行，只需要将整个表单数据转化为字符串格式，然后存储到数据库中。* 缺点：无法很好地支持动态表单。如果表单数据非常大，可能会超过VARCHAR的长度限制。此外，如果需要查询表单数据中的特定字段，可能会比较困难。

3. 使用text记录整个form

* 优点：可以存储更大的表单数据，对于动态表单的支持也比较好。* 缺点：如果需要查询表单数据中的特定字段，可能会比较困难。此外，如果表单数据非常大，可能会影响数据库的性能。

4. 把form中的item分开记录

* 优点：可以很方便地查询和更新表单数据中的特定字段。对于动态表单的支持也比较好。* 缺点：需要手动处理表单数据的序列化和反序列化，可能会比较复杂。此外，如果表单数据中的字段非常多，可能会需要大量的数据库表字段。

根据你提供的需求和代码示例，我建议使用第四种方案，即把form中的item分开记录。这样既可以方便地查询和更新表单数据中的特定字段，又可以很好地支持动态表单。在前端，你可以将每个表单项序列化为一个对象，然后发送到后端。在后端，你可以将这些对象存储到数据库中，每个对象对应一个数据库记录。