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