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

okbeng03發表於2019-02-18
JSONORMVue.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>
複製程式碼

渲染結果

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個，未來還會根據情況繼續增加，同時也支援自己擴充套件元件和規則。

相關文章