阅读 1927

jsonschema-form-vue一套基于 JSON Schema 使用 Vue.js 自动生成表单的库

现象

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

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

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

目标

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

栗子

先通过一个简单的例子看下效果:DemoCode

<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个,未来还会根据情况继续增加,同时也支持自己扩展组件和规则。

关注下面的标签,发现更多相似文章
评论