目錄：

• 一、簡(jiǎn)介
• 二、本組件和 Element UI 的表單組件進(jìn)行對(duì)比
• 三、架構(gòu)設(shè)計(jì)
• 四、詳細(xì)功能描述
• 4.1 wti-form 全局功能
• 4.2 wti-form 表單元素功能
• 4.3 如何一個(gè) JSON 配置生成 3 個(gè)表單
• 五、高度支持自動(dòng)化測(cè)試
• 5.1 天生支持自動(dòng)化測(cè)試
• 5.2 通過(guò)簡(jiǎn)單的配置文件，自動(dòng)完成自動(dòng)化測(cè)試
• 5.3 更牛逼的自動(dòng)化測(cè)試支持
• 六、未來(lái)將添加的功能
• 6.1 可視化生成表單
• 6.2 打通產(chǎn)品經(jīng)理與前端這條線(xiàn)
• 6.3 縱向拓展：自動(dòng)生成后端代碼
• 6.4 橫向拓展：表格、圖表的自動(dòng)生成
• 七、總結(jié)

源碼：https://github.com/qq20004604/wti-form

一、簡(jiǎn)介

作者：

零零水。曾寫(xiě)過(guò)多個(gè) 10w+，1w+博客。前阿里巴巴前端開(kāi)發(fā)，現(xiàn)為了 work life balance 于西安某信托國(guó)企做技術(shù)研發(fā)工作。擅長(zhǎng)基于公司真實(shí)情況，做一些提高效率的優(yōu)化。

另，從來(lái)不當(dāng)標(biāo)題黨。

描述

Vue.js 低代碼表單組件，基于 Element UI 二次開(kāi)發(fā)而成。命名為 wti-form

組件高度封裝 js 邏輯的方式，是多表單頁(yè)面場(chǎng)景的大殺器。

目前支持的表單元素包括但不限于以下元素，如下圖：

更多支持的功能，見(jiàn)第一章節(jié)的結(jié)尾給的文檔鏈接

wti-form 特點(diǎn)：

現(xiàn)在就開(kāi)始試用！網(wǎng)頁(yè)上簡(jiǎn)單配置，立刻預(yù)覽表單生成結(jié)果！^[1]

優(yōu)點(diǎn)

1. wti-form 可以極大的提高開(kāi)發(fā)效率，預(yù)計(jì)最低提升效率 200%，最高提升效率 1000% 以上（都相對(duì)于使用 Element UI 來(lái)比）；
2. 文檔豐富詳細(xì)，有大量示例代碼。并且文檔本身已開(kāi)源；
3. 支持通過(guò)網(wǎng)頁(yè)配置，快速生成前端代碼（一整個(gè) Vue 文件）的功能（見(jiàn)文檔）；
4. 正在開(kāi)發(fā)支持自動(dòng)化測(cè)試的組件，集成后，可以根據(jù)表單配置自動(dòng)推斷并填寫(xiě)表單元素（未來(lái)會(huì)開(kāi)發(fā) python 支持庫(kù)，方便集成進(jìn)自動(dòng)化測(cè)試代碼里）；

適用人群

• 表單頁(yè)特別多，但人手/預(yù)算緊張的技術(shù)團(tuán)隊(duì)；
• 不擅長(zhǎng)前端的后端開(kāi)發(fā)者，但需要寫(xiě)前端表單頁(yè)面（例如做私活）；
• 原本使用 Element UI ，但想減少重復(fù)工作量的開(kāi)發(fā)者；
• 一線(xiàn)開(kāi)發(fā)人員水平層次不齊，想要提高初中級(jí)開(kāi)發(fā)的代碼產(chǎn)出率、降低 bug 量的技術(shù)負(fù)責(zé)人；
• 一般開(kāi)發(fā)團(tuán)隊(duì)（基于組件可以自定義值 UI 樣式）；

github 和文檔地址：

• 組件源代碼：^[2]github.com/qq20004604/…^[3]
• 文檔源代碼：^[4]github.com/qq20004604/…^[5]
• 文檔地址：^[6]lovelovewall.com/wti\_form\_de…^[7]

二、本組件和 Element UI 的表單組件進(jìn)行對(duì)比

因?yàn)槭腔?Element UI 二次開(kāi)發(fā)的，因此，必然要比使用 Element UI 進(jìn)行開(kāi)發(fā)更方便，功能更強(qiáng)大，否則沒(méi)有開(kāi)發(fā)的價(jià)值。

因此，將本組件和 Element UI 進(jìn)行對(duì)比，幫助你了解本組件的優(yōu)勢(shì)。

附圖 1，圖中對(duì)于核心點(diǎn)已經(jīng)高亮

目前表單組件支持的功能，附圖 2

三、架構(gòu)設(shè)計(jì)

先附源代碼地址：^[8]github.com/qq20004604/…^[9]

上一個(gè)架構(gòu)分層圖，附圖 3：

再上一個(gè)圖 4，組件事件流。

結(jié)合圖 3 和圖 4，總的來(lái)說(shuō)，wti-form 的架構(gòu)可以這么來(lái)理解：

• 數(shù)據(jù)層：核心是【表單數(shù)據(jù)】和【配置數(shù)據(jù)】，而其他數(shù)據(jù)都是基于這 2 個(gè)動(dòng)態(tài)計(jì)算出來(lái)的，并不會(huì)單獨(dú)存儲(chǔ)；
• UI 層：根據(jù)配置數(shù)據(jù)動(dòng)態(tài)生成 ui，因此假如傳入的配置變更，那么 ui 也會(huì)隨著動(dòng)態(tài)變化；
• 事件層：基于生成的 ui，用戶(hù)進(jìn)行操作，則將觸發(fā)事件層。而事件層最終影響的是【表單數(shù)據(jù)】。

因此，整個(gè)組件，開(kāi)發(fā)者只需要關(guān)心 2 個(gè)數(shù)據(jù)，以及基于數(shù)據(jù)衍生出來(lái)的 ui 和事件。因此并不存在同一個(gè)源數(shù)據(jù)但存儲(chǔ)于多處導(dǎo)致可能的沖突和一致性，因此可以輕松寫(xiě)出高可靠度的代碼。

而基于這樣的設(shè)計(jì)，二次開(kāi)發(fā)也是很簡(jiǎn)單的一件事情了。

但因?yàn)槠蓿ú殴?，是因?yàn)槲覒校?，因此上圖還缺少了這些：

• 子表單的事件流，以及父表單與子表單的交互方法；
• 表單與表單元素之間的關(guān)聯(lián)設(shè)計(jì)；
• 基于個(gè)人需求，二次開(kāi)發(fā)屬于自己的內(nèi)部組件的方法；

四、詳細(xì)功能描述

4.1 wti-form 表單全局功能：

• 通過(guò) json 數(shù)據(jù)來(lái)生成表單；
• 通過(guò) data 數(shù)據(jù)給表單每個(gè)元素賦值；
• 支持表單校驗(yàn)；
• 表單支持分塊顯示；
• 支持單區(qū)塊收起、展開(kāi)、全部收起、全部展開(kāi)；
• 支持將表單顯示模式切換：長(zhǎng)表單/帶 tab 切換的短表單；
• 支持表單元素全局禁用（例如提交時(shí)）；
• 支持給表單加一個(gè)外框，增加區(qū)分度；
• 支持將表單模式切換為純文本顯示模式；
• 支持設(shè)置表單為一行四列/兩列/一列；
• 二次開(kāi)發(fā)自定義表單元素難度極低；
• 其他懶得寫(xiě)了；

4.2 wti-form 表單元素功能：

• 支持設(shè)置默認(rèn)禁用、默認(rèn)隱藏、默認(rèn)值；
• 支持設(shè)置必填；
• 不同表單支持不同的校驗(yàn)規(guī)則，也可以自定義校驗(yàn)規(guī)則（同 Element UI）；
• 支持當(dāng)某一個(gè)表單元素的值為指定值時(shí)，聯(lián)動(dòng)設(shè)置另一個(gè)表單元素的值/設(shè)置隱藏/設(shè)置禁用/設(shè)置必填；
• 支持自定義樣式；
• 支持自定義 placeholder；
• 支持文本輸入框、數(shù)字輸入框、金額輸入框、日期輸入框、日期范圍輸入框、動(dòng)態(tài)下拉框（自動(dòng)請(qǐng)求數(shù)據(jù)字典）、普通下拉框、時(shí)間輸入框、單選框、百分比輸入框、文本域輸入框等；
• 其他懶得寫(xiě)了；

4.3 一個(gè) JSON 配置生成 3 個(gè)表單

再貼一遍圖 4：

也就是說(shuō)，開(kāi)發(fā)者一般來(lái)說(shuō)只需要提供描述表單結(jié)構(gòu)的 json，以及調(diào)用校驗(yàn)方法，就可以完成一個(gè)完整的表單。

如果需要初始化數(shù)據(jù)（比如說(shuō)表單編輯頁(yè)面），這個(gè)初始化數(shù)據(jù)和提交的數(shù)據(jù)結(jié)構(gòu)是一模一樣的。

如果是需要查看內(nèi)容（比如說(shuō)是詳情查看頁(yè)），那么和編輯模式使用方法一樣，再將傳入組件的 text-model 這個(gè)值變?yōu)?nbsp;true 即可（表示開(kāi)啟純文本模式）。在純文本模式下，即使是字典下拉框的接口，返回的值是字典嗎，也會(huì)被自動(dòng)翻譯成 label 的。

有人可能會(huì)有疑問(wèn)，這樣的話(huà)，表單結(jié)構(gòu)JSON 會(huì)不會(huì)很復(fù)雜？

當(dāng)然不可能，具體可以參考文檔這個(gè)頁(yè)面：^[10]lovelovewall.com/wti\_form\_de…^[11] ，你可以在打開(kāi)這個(gè)頁(yè)面時(shí)，先試想一下自己實(shí)現(xiàn)這樣的功能（各種聯(lián)動(dòng)、三個(gè)不同的表單再加交互功能），需要寫(xiě)多少行代碼。

然后再看這個(gè)頁(yè)面的源代碼 ^[12]github.com/qq20004604/…^[13]

毫無(wú)疑問(wèn)，本表單，至少減少了至少 80~90% 的開(kāi)發(fā)工作量，所以標(biāo)題中的提高 1000% 效率，并未夸張，只是單純陳述事實(shí)。

五、高度支持自動(dòng)化測(cè)試

5.1 天生支持自動(dòng)化測(cè)試

在測(cè)試一個(gè)表單頁(yè)時(shí)，往往存在幾個(gè)常見(jiàn)難題：

1. 表單太大，元素太多時(shí)：如果是手工測(cè)試，每次要填寫(xiě)很多表單項(xiàng)，非常浪費(fèi)時(shí)間。如果是自動(dòng)化測(cè)試，那么要一個(gè)一個(gè)抓表單元素，然后給里面填值，也非常浪費(fèi)時(shí)間；
2. 表單太多：每個(gè)頁(yè)面都要寫(xiě)一遍自動(dòng)化測(cè)試邏輯，很浪費(fèi)時(shí)間；
3. 表單元素變化：當(dāng)表單要素變化時(shí)，要改自動(dòng)化邏輯代碼，也很浪費(fèi)時(shí)間；

所以，在面對(duì)大量表單頁(yè)場(chǎng)景時(shí)，往往測(cè)試復(fù)雜度最少也是 O(n2)，還很容易漏測(cè)。

針對(duì)這種情況，wti-form 對(duì)于支持自動(dòng)化測(cè)試，則非常友好。

5.1.1 表單元素定位

對(duì)于第一個(gè)問(wèn)題，如果表單元素太多，我們需要一個(gè)快速定位每個(gè)元素的辦法。

對(duì)于這種情況，提供了一個(gè)解決方案：用一個(gè)唯一 class 來(lái)定位。

具體來(lái)說(shuō)，假如下面是一個(gè)輸入框的 html

<div data-v-14c4e670="" data-v-74ae480c="" class="form-input-box form-item-box form-unqiue-name">
 <div data-v-14c4e670="" class="el-input el-input--suffix">
  <input type="text" autocomplete="off" placeholder="請(qǐng)輸入用戶(hù)名稱(chēng)" class="el-input__inner">
 </div>
</div>
復(fù)制代碼

在我的設(shè)計(jì)里，每個(gè)元素，只要有 key，那么他必然有一個(gè) class 是form-unqiue-${key}。因此，可以通過(guò)這個(gè)唯一 class，找到頁(yè)面里的該元素。

因此，可以封裝一個(gè)類(lèi)，通過(guò)入?yún)?class 通過(guò)這個(gè)唯一 class 找到對(duì)應(yīng)的表單元素，便可以獲取值\修改值。示例代碼如下：

class ElementManager:
    # 找到表單元素
    def findEle(self, key, type):
        ele = None
        if type == "input":
            ele = self.findInputEle(key)
        ## some other element type
        else:
            ele = self.findXXEle(key)
        return ele

    # 1、找到輸入框表單元素
    def findInputEle(self, key):
        ## find element and return
        pass

    # 找他各種表單元素（略）
    def findXXEle(self, key):
        pass

    # 設(shè)置元素的值
    def setVal(self, ele, type, val):
        pass

    # 獲取元素的值
    def getVal(self, ele, type):
        pass
復(fù)制代碼

使用的時(shí)候，只需要傳入元素的 key、類(lèi)型（甚至可以不需要類(lèi)型），就可以獲取到表單元素、獲取表單元素的值、設(shè)置表單元素的值。

無(wú)論需求怎么改，只需要改入?yún)⒕涂梢粤?。于是，表單元素太多，需要一個(gè)一個(gè)獲取表達(dá)元素，增加測(cè)試工作量的問(wèn)題解決了。

5.2 通過(guò)簡(jiǎn)單的配置文件，自動(dòng)完成自動(dòng)化測(cè)試

基于 5.1 的方法，我們可以解決表單獲取元素的問(wèn)題。

下來(lái)我們要面臨的就是如何進(jìn)行各種測(cè)試，例如必填的沒(méi)有填能否提交，有長(zhǎng)度限制的過(guò)長(zhǎng)或者過(guò)短能否通過(guò)校驗(yàn)等。

于是，基于前端的 JSON 配置，通過(guò)寫(xiě)一個(gè)工具類(lèi)，我們可以通過(guò)每個(gè)表單元素的規(guī)則，自動(dòng)推斷出其各種測(cè)試場(chǎng)景的數(shù)據(jù)是什么。

如果能做到這一點(diǎn)，那么表單太多，寫(xiě)測(cè)試腳本麻煩的問(wèn)題，也自然便解決了。

完成整個(gè)流程，基本沒(méi)有什么技術(shù)難度，如果不知道具體怎么實(shí)現(xiàn)的話(huà)，可以加我微信溝通。

5.3 更牛逼的自動(dòng)化測(cè)試支持

目前正在寫(xiě)一個(gè)自動(dòng)化測(cè)試組件，效果是：

• 將表單組件傳入到該組件中；
• 該組件會(huì)自動(dòng)根據(jù) json 配置，和組件本身配置，推斷每個(gè) key 應(yīng)該生成什么樣的數(shù)據(jù)；
• 目前支持三種數(shù)據(jù)：【標(biāo)準(zhǔn)合法數(shù)據(jù)】【合法邊界數(shù)據(jù)】【非法超限數(shù)據(jù)】；
• 對(duì)于特殊的還支持用戶(hù)自定義數(shù)據(jù)生成；

但因?yàn)槲覒校壳伴_(kāi)發(fā)進(jìn)度只有大約 10%（主要是領(lǐng)導(dǎo)也沒(méi)重視這玩意），只支持【文本輸入框】的數(shù)據(jù)生成。

具體可以參考文檔的這部分：^[14]lovelovewall.com/wti\_form\_de…^[15]

六、未來(lái)將添加的功能

表單本身功能架構(gòu)設(shè)計(jì)，已經(jīng)比較完善了，二次開(kāi)發(fā)新增更多表單元素類(lèi)型，也不難。

因此，從表單開(kāi)始，打通整個(gè)開(kāi)發(fā)環(huán)節(jié)，可以更有效的提高開(kāi)發(fā)效率。

6.1 可視化生成表單

與 C 端場(chǎng)景不同，B 端場(chǎng)景更常見(jiàn)是處理流程。一個(gè)流程里會(huì)有很多表單，而在這些表單里會(huì)有很多相同的表單元素。這就意味著，這些表單元素可以大量復(fù)用。

因此我們可以開(kāi)發(fā)一個(gè)后端服務(wù)，專(zhuān)門(mén)用來(lái)存儲(chǔ)這些開(kāi)發(fā)好的表單元素。

在開(kāi)發(fā)一個(gè)新頁(yè)面時(shí)，可以通過(guò)關(guān)鍵詞搜索到之前寫(xiě)好的表單元素，然后通過(guò)勾選/拖拽的模式，直接拖入表單，最后直接生成一個(gè)Vue 組件甚至頁(yè)面。這就是現(xiàn)在低代碼平臺(tái)最常見(jiàn)的使用方式了。

我們目前已經(jīng)有這種方案的常規(guī)版本（比文檔里提供的版本更強(qiáng)），但是仍不夠完美，并不能泛用到所有表單里。

而本表單組件為什么可以稱(chēng)為低代碼表單組件，也是通過(guò)這個(gè)來(lái)體現(xiàn)的。

不過(guò)，因?yàn)檫@個(gè)屬于公司業(yè)務(wù)代碼，因此無(wú)法直接給出來(lái)相關(guān)代碼和示例。

不過(guò)文檔里，給了一個(gè)【通過(guò)網(wǎng)頁(yè)直接生成表單】的功能，屬于基礎(chǔ)版，足夠一般開(kāi)發(fā)使用。

^[16]lovelovewall.com/wti\_form\_de…^[17]

6.2 打通產(chǎn)品經(jīng)理與前端這條線(xiàn)

在 5.1 中，我們還是單純只是前端代碼層面的東西。但對(duì)于現(xiàn)代開(kāi)發(fā)，我們完全可以有更多想象。

表單做成什么樣子，是由產(chǎn)品經(jīng)理定的。他們?cè)诎褍?nèi)容傳達(dá)給我們時(shí)，是要先搞一個(gè) excel，描述表單這里每個(gè)元素的具體規(guī)則。

所以，我們能不能做一個(gè)工具，直接打通產(chǎn)品經(jīng)理與前端開(kāi)發(fā)呢，我覺(jué)得是完全可以的。

簡(jiǎn)單設(shè)想一下，基于文檔里提供的【快速創(chuàng)建表單】提供的工具，我們?cè)偻卣挂幌?，允許配置表單元素的規(guī)則。然后再基于這個(gè)生成一個(gè) excel，那么這就是產(chǎn)品經(jīng)理的要素表。

同時(shí)，我們將這個(gè)數(shù)據(jù)存儲(chǔ)到后端，然后前端可以基于這個(gè)，通過(guò)代碼生成工具（文檔里的 FastCreate 的功能），直接生成 Vue 文件。

于是，并沒(méi)有增加產(chǎn)品經(jīng)理的工作，甚至因?yàn)槲覀兲峁┑墓ぞ?，產(chǎn)品經(jīng)理減少了他的工作量，也方便維護(hù)。

但同時(shí)，前端的工作量被大幅度減少了，前端只需要基于這個(gè)已經(jīng)寫(xiě)好的 Vue 文件，二次開(kāi)發(fā)一些特殊功能即可。

這就意味著，團(tuán)隊(duì)對(duì)于前端開(kāi)發(fā)的需求量，也許可以減少 50%以上。這帶來(lái)的都是研發(fā)成本的降低。

6.3 縱向拓展：自動(dòng)生成后端代碼

當(dāng)我們打通產(chǎn)品經(jīng)理和前端時(shí)，毫無(wú)疑問(wèn)，也可以打通產(chǎn)品經(jīng)理和后端開(kāi)發(fā)這條線(xiàn)。

基于當(dāng)前設(shè)計(jì)，我們將表單和元素解耦后，完全可以預(yù)知這個(gè)頁(yè)面里，最后要提交給后臺(tái)的數(shù)據(jù)是什么樣子的。

換句話(huà)說(shuō)，哪些元素必填、非必填、長(zhǎng)度、類(lèi)型，都是可以預(yù)知的。

而恰好，后端在表單校驗(yàn)時(shí)，也是需要這些東西來(lái)校驗(yàn)表單提交內(nèi)容。因此，我們可以基于這個(gè)，直接生成后端的代碼，可以減少許多后端開(kāi)發(fā)工作量。

因?yàn)槭亲詣?dòng)生成的，所以當(dāng)產(chǎn)品經(jīng)理更新他的需求后（表單元素），后端可以通過(guò)工具再次生成，而無(wú)需手動(dòng)維護(hù)。

更重要的是，通過(guò)這種方法生成的前后端代碼，不會(huì)存在因?yàn)闇贤▎?wèn)題，而導(dǎo)致字段校驗(yàn)規(guī)則不一致的情況。

毫無(wú)疑問(wèn)，這也可以提高工程可靠性。

除此之外，還可以基于已有的 Excel、前端/后端代碼，做類(lèi)型/數(shù)據(jù)推斷，在產(chǎn)品經(jīng)理新增要素時(shí)，根據(jù)已有數(shù)據(jù)，智能猜測(cè)這個(gè)字段的類(lèi)型、規(guī)則等條件。

6.4 橫向拓展：表格、圖表的自動(dòng)生成

一般來(lái)說(shuō)，表單提交后，有時(shí)候需要通過(guò)表格、圖表來(lái)預(yù)覽。

所以在這種場(chǎng)景比較多的情況下，我們也可以基于穩(wěn)定可靠的數(shù)據(jù)源，寫(xiě)一個(gè)自動(dòng)生成圖表、表格代碼的工具。

甚至，可以復(fù)用這個(gè) json 配置，然后寫(xiě)一個(gè)轉(zhuǎn)換函數(shù)，自動(dòng)生成表格/圖表。

這個(gè)難度并不高。

七、總結(jié)

總而言之，wti-form，就使用難度、專(zhuān)業(yè)度、開(kāi)發(fā)效率來(lái)說(shuō)，完爆市面上大部分表單組件，并且不需要額外學(xué)習(xí)成本。

并且如果你目前已經(jīng)在使用 ElementUI，那么使用本組件開(kāi)發(fā)新表單，是毫無(wú)成本和風(fēng)險(xiǎn)的。

無(wú)論是接私活的后端開(kāi)發(fā)者，成本有限人力不足天天加班的技術(shù)負(fù)責(zé)人，toB 場(chǎng)景需要寫(xiě)大量表單頁(yè)面的中小軟件開(kāi)發(fā)企業(yè)，都是最佳選擇。

源碼：https://github.com/qq20004604/wti-form

作者：零零水

原文：https://juejin.cn/post/7012421311301419022