jsonschema-form-vue基于JSON Schema

现象

作为一名前端开发，「表单开发」是我们的家常便饭，一般我们需要做以下重复性工作：

• 编写模板
• 编写校验规则
• 获取数据，提交表单

同时，后台服务也需要编写校验规则，随着业务变动或者沟通不及时，前后端校验规则可能会存在不一致问题。所以「前后端共用校验规则逻辑」也应该纳入考虑。

目标

综上，我们希望能减少重复性工作：通过配置自动生成表单模板，同时这个配置最好还能描述表单校验相关(因为表单元素部分属性如min、max、required、pattern这些都会控制表单输入，保障校验)

栗子

先通过一个简单的例子看下效果：Demo、Code

<template>
  <vue-form
    :schema="schema"
    :model="model"
  >
  </vue-form>
</template>

<script>
export default {
  data () {
    return {
      schema: {
        title: 'basic',
        type: 'object',
        properties: {
          name: {
            type: 'string',
            title: '姓名'
          },
          phone: {
            type: 'string',
            title: '手机',
            pattern: '^1[3578]\\d{9}$',
            description: '请输入正确的手机号码'
          }
        },
        required: ['name', 'phone']
      },
      model: {
        name: 'xxx'
      }
    }
  }
}
</script>

渲染结果

enter image description here

更多Demo
文档

技术选型

然后，现在表单经常会通过JSON异步提交到服务端，所以技术选型如下：

• JSONSchema：业界用于描述 JSON 数据结构的规范，包含了「表单数据描述」和 「表单校验」功能。
  • 可以满足表单校验和数据描述
  • 同时这套规则在各端都有实现，所以也能保证前后端共用逻辑
  • 最后普通表单模板跟数据都匹配，所以也可以用于描述表单元素
• vue.js：依托于vue或react的「响应式 (Reactive)」 和「组件化 (Composable)」 的强大之处，让配置自动生成UI变得更容易，更好扩展；这里选择了更熟悉的vue.js；
• vuex：考虑到存在表单元素嵌套，加上表单校验、错误回显等数据管理，所以选择vuex进行统一状态管理；
• ajv：ajv是JSONSchema校验器
  • 支持最新的规范
  • $ref、const keyword、$data reference 规则可以更好复用一些基础规则，同时完成类似于「密码、重复密码」等复杂校验
  • addFormat()、addKeyword()可以扩展规则，更容易实现自定义校验
  • ajv-errors扩展了JSON Schema，支持自定义错误输出

Form Definition

最后，JSONSchema在表单描述上并非无所不能：

• 通过类型规则能够自动生成的表单元素还是有限
• inline、tab等跟布局相关的不能支持
• placeholder、readonly等表单属性没有表现
• JSON schema 很多规则都是用来约定数据的，并不适合于表单生成，否则循环生成表单元素时要进行很多过滤

所以，我们参考了angular schema form，增加了Form Definition描述，用来补充扩展JSON Schema，它可以：

• 改变表单类型
• 定义表单顺序
• 增删描述
• 布局
• 表单属性
• 一些扩展表单元素的配置
• ...

即使没定义Form Definition，内部在表单渲染部分，也会将JSONSchema转换成Form Definition，因为其结构更适合循环表单渲染

所以，整体架构如图

enter image description here

jsonschema-form-vue

目前已经提供了基础组件11个(包含图片上传、编辑器等扩展组件)和容器组件3个，未来还会根据情况继续增加，同时也支持自己扩展组件和规则。