jsonschema-form-vue一套基於 JSON Schema 使用 Vue.js 自動生成表單的庫

現象

做爲一名前端開發，「表單開發」是咱們的屢見不鮮，通常咱們須要作如下重複性工做：

• 編寫模板
• 編寫校驗規則
• 獲取數據，提交表單

同時，後臺服務也須要編寫校驗規則，隨着業務變更或者溝通不及時，先後端校驗規則可能會存在不一致問題。因此「先後端共用校驗規則邏輯」也應該歸入考慮。

目標

綜上，咱們但願能減小重複性工做：經過配置自動生成表單模板，同時這個配置最好還能描述表單校驗相關(由於表單元素部分屬性如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>
複製代碼

渲染結果

更多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，由於其結構更適合循環表單渲染

因此，總體架構如圖

jsonschema-form-vue

目前已經提供了基礎組件11個(包含圖片上傳、編輯器等擴展組件)和容器組件3個，將來還會根據狀況繼續增長，同時也支持本身擴展組件和規則。