jsonschema-form-vue基于JSON Schema

2019-02-19 本文已影响0人王昌彬

现象

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

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

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

目标

综上，我们希望能减少重复性工作：通过配置自动生成表单模板，同时这个配置最好还能描述表单校验相关(因为表单元素部分属性如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