Phoenix下使用Vue.js实现基于数据库Schema初始值渲染的动态表单

核心思路 #

直接遍历后端返回的schema配置，按权重排序后动态渲染对应类型的表单控件，同时绑定对应校验规则，无需手动编写每个表单项的代码。 #

实现步骤 #

1. 预处理Schema数据 #

首先把你给出的Elixir结构体序列化为JSON格式，得到可在JS中直接使用的字段配置数组，结构如下：

const userSchema = [
  {
    "title": "name",
    "identifier": "name",
    "type": "text",
    "settings": {
      "options": {
        "default": "test_name",
        "placeholder": "name"
      },
      "validate": {
        "min": 5,
        "required": []
      }
    },
    "weight": 0
  },
  {
    "title": "email",
    "identifier": "email",
    "type": "email",
    "settings": {"options": {}, "validate": {}},
    "weight": 1
  },
  {
    "title": "description",
    "identifier": "description",
    "type": "text",
    "settings": {"options": {}, "validate": {}},
    "weight": 2
  }
]

2. 编写Vue组件（Vue3