前端schema表單配置生成方案

2021-10-13 21:37:15 字數 1311 閱讀 6119

表單form開發,尤其在中颱專案中,是fe?的家常便飯,一般需要大量的重複性工作?:

• 編寫模板

• 編寫校驗規則

• 表單提交(偶爾聯動)

同時,server也需要編寫校驗規則。然而,伴隨業務變更和前後端開發同步不及時的情況,前後端校驗規則可能會存在不一致的問題。所以「前後端共用校驗規則」也可在範疇之內。

1. form-render

2023年10月阿里開源,基於react框架的跨元件表單生成引擎。通過 json schema 生成標準 form,常用於自定義搭建配置介面生成。

? 官方文件

? playground演示

優點:

缺點:

2. react-jsonschema-form

基於react的元件,支援常用ui庫,使用json schema 生成form表單。

? 官方文件

? playground

優點:

缺點:

3. vue-json-schema-form

react-jsonschema-form的vue版本,基於 vue、elementui、json schema 動態生成乙個帶完整校驗的form表單。

? 官方文件

? playground

優點:

缺點:

4. form-generator

element ui表單設計及**生成器,可將生成的**直接執行在基於element的vue專案中;也可匯出json表單,使用配套的解析器將json解析成真實的表單。

? playground

優點:

缺點:

5. amis

amis 的渲染過程是將 json 轉成對應的 react 元件。先通過 json 的 type 找到對應的 component 然後,然後把其他屬性作為 props 傳遞過去完成渲染。

? 官方文件

? amis編輯器demo

優點:

缺點:

總體言之,表單生成方案比較豐富,基本都能滿足常見業務場景?。本次調研草率的體驗了幾個常用的表單生成框架,如有錯誤之處,還請告之及時更正。

最後,從功能支援、技術生態、開發體驗、協議標準、可擴充套件性等多方面來考量,個人認為,form-render比較適合本人本次的專案選型。

Spring AOP 基於Schema配置切面

廢話不多說,直接通過乙個demo來看一下吧,這裡我們需要將spring的aop命名空間加入到配置檔案中。spring配置如下 增強類advicemethod public class advicemethod 場景呼叫如下 public class client 輸出了我們想要的效果 how are...

前端form表單

表單 表單就是提交資料的 form表單的屬性 form表單的元素 姓名 1 input 輸入框 1.1 type 型別 預設為text 1.1.1 text 文字型別 1.1.2 password 密碼型別 1.1.3 checkbox 核取方塊 多選 1.1.4 radio 單選 有預設值 1.1...

前端表單雜項

需求 需求 滾動條控制 id scrolltop 100 設定y軸滾動條位置為滾動100畫素的位置 id scrolltop 返回當前滾動條y軸的滾動的位置需求 正規表示式 function verification tdata t d.ghg g var ebreg new regexp eb s...