現(xiàn)象

作為一名前端開(kāi)發(fā)，「表單開(kāi)發(fā)」是我們的家常便飯，一般我們需要做以下重復(fù)性工作： 編寫(xiě)模板 編寫(xiě)校驗(yàn)規(guī)則 * 獲取數(shù)據(jù)，提交表單

同時(shí)，后臺(tái)服務(wù)也需要編寫(xiě)校驗(yàn)規(guī)則，隨著業(yè)務(wù)變動(dòng)或者溝通不及時(shí)，前后端校驗(yàn)規(guī)則可能會(huì)存在不一致問(wèn)題。所以「前后端共用校驗(yàn)規(guī)則邏輯」也應(yīng)該納入考慮。

目標(biāo)

綜上，我們希望能減少重復(fù)性工作：通過(guò)配置自動(dòng)生成表單模板，同時(shí)這個(gè)配置最好還能描述表單校驗(yàn)相關(guān)(因?yàn)楸韱卧夭糠謱傩匀鏼in、max、required、pattern這些都會(huì)控制表單輸入，保障校驗(yàn))

栗子

先通過(guò)一個(gè)簡(jiǎn)單的例子看下效果：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: '手機(jī)',pattern: '^1[3578]d{9}$',description: '請(qǐng)輸入正確的手機(jī)號(hào)碼'}},required: ['name', 'phone']},model: {name: 'xxx'}}} } </script>

渲染結(jié)果

更多Demo 文檔

技術(shù)選型

然后，現(xiàn)在表單經(jīng)常會(huì)通過(guò)JSON異步提交到服務(wù)端，所以技術(shù)選型如下： JSONSchema：業(yè)界用于描述 JSON 數(shù)據(jù)結(jié)構(gòu)的規(guī)范，包含了「表單數(shù)據(jù)描述」和 「表單校驗(yàn)」功能。 * 可以滿足表單校驗(yàn)和數(shù)據(jù)描述 * 同時(shí)這套規(guī)則在各端都有實(shí)現(xiàn)，所以也能保證前后端共用邏輯 * 最后普通表單模板跟數(shù)據(jù)都匹配，所以也可以用于描述表單元素 vue.js：依托于vue或react的「響應(yīng)式 (Reactive)」 和「組件化 (Composable)」 的強(qiáng)大之處，讓配置自動(dòng)生成UI變得更容易，更好擴(kuò)展；這里選擇了更熟悉的vue.js； vuex：考慮到存在表單元素嵌套，加上表單校驗(yàn)、錯(cuò)誤回顯等數(shù)據(jù)管理，所以選擇vuex進(jìn)行統(tǒng)一狀態(tài)管理； ajv：ajv是JSONSchema校驗(yàn)器 * 支持最新的規(guī)范 * $ref、const keyword、$data reference 規(guī)則可以更好復(fù)用一些基礎(chǔ)規(guī)則，同時(shí)完成類似于「密碼、重復(fù)密碼」等復(fù)雜校驗(yàn) * addFormat()、addKeyword()可以擴(kuò)展規(guī)則，更容易實(shí)現(xiàn)自定義校驗(yàn) * ajv-errors擴(kuò)展了JSON Schema，支持自定義錯(cuò)誤輸出

Form Definition

最后，JSONSchema在表單描述上并非無(wú)所不能： 通過(guò)類型規(guī)則能夠自動(dòng)生成的表單元素還是有限 inline、tab等跟布局相關(guān)的不能支持 placeholder、readonly等表單屬性沒(méi)有表現(xiàn) JSON schema 很多規(guī)則都是用來(lái)約定數(shù)據(jù)的，并不適合于表單生成，否則循環(huán)生成表單元素時(shí)要進(jìn)行很多過(guò)濾

所以，我們參考了angular schema form，增加了Form Definition描述，用來(lái)補(bǔ)充擴(kuò)展JSON Schema，它可以： 改變表單類型 定義表單順序 增刪描述 布局 表單屬性 一些擴(kuò)展表單元素的配置 * ...

即使沒(méi)定義Form Definition，內(nèi)部在表單渲染部分，也會(huì)將JSONSchema轉(zhuǎn)換成Form Definition，因?yàn)槠浣Y(jié)構(gòu)更適合循環(huán)表單渲染

所以，整體架構(gòu)如圖

jsonschema-form-vue

目前已經(jīng)提供了基礎(chǔ)組件11個(gè)(包含圖片上傳、編輯器等擴(kuò)展組件)和容器組件3個(gè)，未來(lái)還會(huì)根據(jù)情況繼續(xù)增加，同時(shí)也支持自己擴(kuò)展組件和規(guī)則。

總結(jié)

以上是生活随笔為你收集整理的antd 的form 表单怎么回显数据_jsonschema-form-vue基于JSONSchema的表单自动生成方案的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。