JSON生成Form表單（一）

qpal 發布于2019-08-23 13:39 / 1424人閱讀

摘要：介紹表單是一個基于的抽象組件，它能將格式的配置渲染為一個表單，在實際項目中，通過它可以快速的搭建出一個表單頁，這在端項目中，有著很廣泛的用途。如何使用表單的地址為。

介紹

JSON表單是一個基于React的抽象組件，它能將JSON格式的配置渲染為一個Form表單，在實際項目中，通過它可以快速的搭建出一個表單頁，這在B端項目中，有著很廣泛的用途。

JSON表單的優點有以下幾點：

可以快速的構建出一個表單

將表單的數據、邏輯、視圖分離，結構簡單，進一步抽象和維護也就比較容易

提供校驗、自動緩存等額外功能，提升錄入體驗

可以跨項目共用復雜的表單組件

在一個前端團隊中，組件共用顯然是一件很有必要的事，但是對于表單組件來說，由于靈活度很高，如果沒有約定俗成的一套規則，抽象出來的表單組件其實用價值不是很高，那么，JSON表單提供的也就是一套規則，能夠使用JSON的數據格式去渲染抽象出來的表單組件。

原始表單

在這里，我暫且將不是通過JSON表單渲染出來的表單稱為原始表單，以此來作為JSON表單的對比，在我開發過的大量的表單頁里，我經常為以下的缺點所苦惱：

代碼量龐大，開發效率低

數據、邏輯、視圖雜糅，不便功能拆分和抽象

維護成本高

需要額外處理校驗和緩存等功能

不同項目中很難共用表單組件

表單頁的代碼量是很龐大的，這是由于表單組件的重復編寫和處理表單校驗等非主線功能，導致開發表單頁的效率很低下，并且由于表單頁的數據、邏輯、視圖雜糅在一起，后期需要拆分、抽象子功能模塊或者維護表單頁時，這將是一件很頭疼的事，

在B端項目中，表單是一個很常用的功能，對于復雜且多個項目中都用到的表單組件，往往都想將該表單組件抽象出來，但是原始表單組件的抽象成本很高，需要考慮在不同項目中的靈活度的問題，且沒有一套約定的規則，導致該組件的適用范圍很小。

如何使用

JSON表單的github地址為：json_transform_form。

依賴環境

React，基于React的抽象組件

async-validator，基于它做表單校驗

安裝

npm i json_transform_form --save

一個栗子

import Form from "json_transform_form"

const config = {
    formKey: "example-form",
    data: {
        name: "",
        descr: "",
        typeName: ""
    },
    config: [
        {
            type: "input",
            dataKey: "name",
            label: "param",
            style: {
                wrap: {
                    display: "inline-block",
                    width: 270,
                }
            },
        },
        {
            type: "select",
            dataKey: "typeName",
            options: ["string", "integer", "float"],
            style: {
                wrap: {
                    display: "inline-block",
                    width: 100,
                    margin: "0 15px"
                }
                
            },
        },
        {
            type: "textarea",
            dataKey: "descr",
            placeholder: "請輸入param含義",
            label: "param含義",
            style: {
                wrap: {
                    width: 385,
                }
            }
        },
    ]
}

 this.FormWrap = ref} config={config}>

上面的代碼描述了三個常用表單組件組成的簡單表單，其效果如下圖所示：

JSON表單的詳細配置請看下節的JSON生成Form表單（二）。

GPU云服務器云服務器 form表單提交json form表單校驗 form表單插件 form表單判斷

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99314.html

JSON生成Form表單（三）

摘要：嵌套組件配置如果表單組件里還含有其他表單組件，這時直接通過組件配置去渲染無疑能節約不少的工作量。請輸入方法傳入組件配置的列表就能渲染出表單組件來，需要注意的是，子表單組件的一定是基于父表單組件的。表單的實例方法請看下節的生成表單四 container表單組件在實際的項目中，JSON表單提供的表單組件是遠遠不夠的，而且提供表單組件是一件低效的事，目前Ant Design組件庫提供的表單...

Half 2019-08-23 13:39 評論0 收藏0
JSON生成Form表單

摘要：是校驗表單組件數據正確性的字段，其值為數組，里面的數組元素可以為。所以數組元素如果為的話，其內容就是的。到目前為止，表單適合大部分的表單應用場景。 JSON表單描述 JSON表單是一個基于React的抽象組件，它可以把JSON數據格式描述的表單轉換成項目中的表單，它可以用簡短的幾行代碼，快速的生成Form表單。JSON表單的優點是：可以快速構建出一個表單表單的數據、邏輯、視圖分...

bingchen 2019-08-26 13:22 評論0 收藏0
JSON生成Form表單（二）

摘要：配置表單的配置分為兩種，暫且稱描述表單信息的為表單配置，描述表單組件信息的為組件配置。組件組件主要是用來描述組件數據為數組格式的表單組件，其示例如下組件配置是基于父表單組件其效果圖如下表單的表單組件請看下節生成表單三 JSON配置 JSON表單的配置分為兩種，暫且稱描述表單信息的為表單配置，描述表單組件信息的為組件配置。JSON表單的配置一定是兩種配置的組合。在開始講解配置之前先介紹...

bang590 2019-08-23 13:38 評論0 收藏0
JSON生成Form表單（四）

摘要：表單實例方法靜態方法表單有一個靜態方法方法時表單的靜態方法，用來引入抽象出來的表單組件。首先需要開啟實時表單提交，在表單配置中設置為。到目前為止，表單適合大部分的表單應用場景。 JSON表單實例方法靜態方法 json表單有一個靜態方法：createCustomComp import Form from json_transform_form import components fro...

Richard_Gao 2019-08-23 13:39 評論0 收藏0
自定義表單生成器form-create v2介紹

摘要：介紹是一個可以通過生成具有動態渲染數據收集驗證和提交功能的表單生成器。并且支持生成任何組件。結合內置種常用表單組件和自定義組件，再復雜的表單都可以輕松搞定。介紹 form-create 是一個可以通過 JSON 生成具有動態渲染、數據收集、驗證和提交功能的表單生成器。并且支持生成任何 Vue 組件。結合內置17種常用表單組件和自定義組件，再復雜的表單都可以輕松搞定。文檔 | git...

lufficc 2019-08-23 18:16 評論0 收藏0