整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
單的本質(zhì)是業(yè)務(wù)，沒(méi)有表單是無(wú)法完成業(yè)務(wù)系統(tǒng)的，而動(dòng)態(tài)表單使業(yè)務(wù)系統(tǒng)更高級(jí)。動(dòng)態(tài)表單是什么呢？它是如何工作的？應(yīng)用場(chǎng)景有哪些？一起來(lái)看一下吧。
表單在網(wǎng)頁(yè)中主要負(fù)責(zé)數(shù)據(jù)采集功能，是提交數(shù)據(jù)的一切形式。表單的本質(zhì)是提交數(shù)據(jù)，不僅僅包含輸入框、下拉選擇框等這些控件，常見(jiàn)的按鈕空間也屬于一個(gè)表單。
動(dòng)態(tài)表單（Dynamic Form），指在前端運(yùn)行過(guò)程中可依賴(lài)某些業(yè)務(wù)邏輯發(fā)生表單項(xiàng)變化的表單，還包括表單布局、表單數(shù)據(jù)管理、表單校驗(yàn)、表單交互、表單項(xiàng)聯(lián)動(dòng)邏輯等原本由前端編程完成的表單開(kāi)發(fā)，轉(zhuǎn)由后端通過(guò) API 接口輸出表單描述自動(dòng)完成上述所有內(nèi)容的表單開(kāi)發(fā)形式。
（動(dòng)態(tài)表單原理示意圖）
表單的本質(zhì)是業(yè)務(wù)，而動(dòng)態(tài)表單使業(yè)務(wù)系統(tǒng)更高級(jí)。
普通表單是一個(gè)表單寫(xiě)一份前端的代碼，代碼全部由前端開(kāi)發(fā)者完成（后端配合接口輸出）。而動(dòng)態(tài)表單則是一個(gè)表單對(duì)應(yīng)一個(gè) JSON（由后端輸出），所有表單由一份代碼（動(dòng)態(tài)表單引擎）進(jìn)行加載和渲染。
所以，動(dòng)態(tài)表單具有以下優(yōu)勢(shì)：
表單控件是提供一組允許用戶(hù)操作的對(duì)象，從而接收用戶(hù)輸入的數(shù)據(jù)，用戶(hù)可操作該對(duì)象來(lái)執(zhí)行對(duì)表單設(shè)計(jì)，修改等操作。
input元素?zé)o疑是一個(gè)龐大和復(fù)雜的元素，但它并不是唯一的表單控件。還有button、select、option、label、optgroup、textarea、fieldset、legend這八個(gè)傳統(tǒng)表單控件，datalist、progress、meter、output、keygen這五個(gè)新增表單控件。
動(dòng)態(tài)表單是老廠商天翎核心技術(shù)之一，也是天翎公司核心產(chǎn)品MyApps的重要組成部分。通過(guò)對(duì)于動(dòng)態(tài)表單的應(yīng)用，可以避免在電子流程系統(tǒng)中硬編碼的數(shù)據(jù)采集及處理表單，提高系統(tǒng)的可維護(hù)性。
說(shuō)明：
Form，動(dòng)態(tài)表單實(shí)現(xiàn)的基本入口，描述了DynaForm的最基本屬性，比如名稱(chēng)、ID、以及最核心的TemplateContext。TemplateContext中保存的是Form的描述XML，通過(guò)此XML描述兩類(lèi)信息：
FormElement，接口，表示Form中的基本元素；
FormField，動(dòng)態(tài)表單的最基本元素，在myApps/OBPM中被聲明為Abstract，具體Object行為依賴(lài)于具體的SubClass實(shí)現(xiàn)；
TextField，單行文本框，繼承FormField；
SelectField，下拉選擇框，繼承FormField；
TextareaField，多行文本框，繼承FormField；
CheckBoxField，復(fù)選框，繼承FormField；
RadioBoxField，單選框，繼承FormField；
Textpart，靜態(tài)文本段，除各種Field以外的靜態(tài)文本部分，繼承FormElement；
ComponentField，自定義組件，繼承FormField；
AttachmentUploadField，附件上傳組件，繼承FormField；
ImageUploadField，圖片上傳組件，繼承FormField；
ViewDialogField，視圖組件，用于實(shí)現(xiàn)主從結(jié)構(gòu)的表單，繼承FormField；
CalctextField，計(jì)算文本組件，用于實(shí)現(xiàn)需要計(jì)算的文本，繼承FormField；
IncludeField，實(shí)現(xiàn)SubForm的包含，繼承FormField；
WordField，Word組件，繼承FormField；
OcrField，為將來(lái)預(yù)留的接口，系統(tǒng)暫未實(shí)現(xiàn)；
表單引擎是為快速實(shí)施項(xiàng)目研發(fā)的輕量級(jí)表單設(shè)計(jì)工具。采用表單引擎工具可在不開(kāi)發(fā)和新增加代碼的情況下設(shè)計(jì)出新表單樣式，同比程序開(kāi)發(fā)可省掉程序員差不多70%的開(kāi)發(fā)工作量，并且后期維護(hù)相對(duì)簡(jiǎn)單，管理方便。
在了解了表單的基本機(jī)構(gòu)后，進(jìn)一步看看表單引擎是如何工作的。
從客戶(hù)端（Client）輸入數(shù)據(jù)（Document），比如一個(gè)excel文件，表單（Form）結(jié)合excel文件自動(dòng)生成HTML，如下圖：
（表單結(jié)合文檔生成HTML過(guò)程）
（XML解析為表單對(duì)象的過(guò)程）
（表單轉(zhuǎn)為HTML過(guò)程）
（表單生成數(shù)據(jù)庫(kù)）
天翎Myapps低代碼開(kāi)發(fā)平臺(tái)的表單引擎是基于Web界面上可視化編輯的表單設(shè)計(jì)系統(tǒng)，同時(shí)支持印刷模式和拖拽模式兩種設(shè)計(jì)方式，形象可見(jiàn)，操作方便。印刷模式可以做一些復(fù)雜的表單配置，同時(shí)還支持word表格的導(dǎo)入；拖拽模式：基于Vue的表單設(shè)計(jì)器，采用可視化拖拉拽的模式進(jìn)行表單的設(shè)計(jì)。
（表單前臺(tái)）
（表單后臺(tái)）
本文由 @周志軍Jarod 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
什么是表單呢？當(dāng)前端想要提交數(shù)據(jù)給后端，怎么搞？那么在前端開(kāi)發(fā)中，表單是常用的手段，比如常見(jiàn)的場(chǎng)景有：登錄框、賬號(hào)注冊(cè)頁(yè)、主機(jī)信息錄入CMDB等等場(chǎng)景都是需要表單。那么在本篇中，筆者除了講一些基本的知識(shí)點(diǎn)，還會(huì)再結(jié)合后端的方式來(lái)演示如何接收表單提交的數(shù)據(jù)。希望這些小小的演示可以起到拋磚引玉的效果。
構(gòu)建表單，主要是通過(guò)from元素，我們先來(lái)一個(gè)最簡(jiǎn)單的小栗子，看下面代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁(yè)</title>
</head>
<body>
<h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
<h3>主機(jī)信息錄入CMDB</h3>
<form>
<label for="hostname">主機(jī)名：</label><br>
<input type="text" id="hostname" name="hostname"><br>
<label for="ipaddr">IP地址：</label><br>
<input type="text" id="ipaddr" name="ipaddr"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
效果如下圖：
通上面的小栗子可以知道，form表單的主要通途是用于收集用戶(hù)的輸入。在from表單里面，還包含著各種不同類(lèi)型的input元素，比如我們上面小栗子中用到的文本（text）、提交按鈕（submit）。
input元素是表單里最重要的元素，它有很多type屬性，下面我們來(lái)總結(jié)下：
類(lèi)型描述text文本輸入radio單選按鈕checkbox提交按鈕submit提交按鈕button可單擊按鈕
在上面小栗子中，除了input元素之外，不知道大家注意label元素沒(méi)有。label元素的主要用途是為input元素定義標(biāo)簽，且用for屬性和input元素的id屬性進(jìn)行綁定呢。
什么是單選按鈕？就是在多個(gè)選項(xiàng)中，你只能選其中1個(gè)，不能多選。下面我們看個(gè)小栗子，看下面代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁(yè)</title>
</head>
<body>
<h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
<h3>問(wèn)答題1（單選）：某站長(zhǎng)，工作經(jīng)驗(yàn)不足1年，僅從互聯(lián)網(wǎng)收集學(xué)習(xí)資料制定學(xué)習(xí)路線售賣(mài)盈利，從道德層面角度分析是否有問(wèn)題？</h3>
<form>
<input type="radio" id="i1" name="problem" value="yes">
<label for="i1">有</label>
<input type="radio" id="i2" name="problem" value="no">
<label for="i2">沒(méi)有</label>
<input type="radio" id="i3" name="problem" value="not_clear">
<label for="i3">不清楚</label>
</form>
<h3>問(wèn)答題2（單選）：實(shí)際工作經(jīng)驗(yàn)不足1年的人員折騰的學(xué)習(xí)資料您覺(jué)得是否對(duì)你有幫助？</h3>
<form>
<input type="radio" id="w1" name="problem" value="yes">
<label for="w1">有</label>
<input type="radio" id="w2" name="problem" value="no">
<label for="w2">沒(méi)有</label>
<input type="radio" id="w3" name="problem" value="not_clear">
<label for="w3">不清楚</label>
</form>
</body>
</html>
效果如下圖：
上面的小栗子中，出了兩道問(wèn)答題，均為單選題。那么，類(lèi)似的需求都是可以使用輸入類(lèi)型為radio來(lái)實(shí)現(xiàn)需要使用單選按鈕的場(chǎng)景。
什么是復(fù)選框？復(fù)選框就是可以選擇多個(gè)選項(xiàng)，當(dāng)需要多選的時(shí)候，使用復(fù)選框輸入類(lèi)型就對(duì)了。看下面代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁(yè)</title>
</head>
<body>
<h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
<h3>問(wèn)答題1（單選）：某站長(zhǎng)，工作經(jīng)驗(yàn)不足1年，僅從互聯(lián)網(wǎng)收集學(xué)習(xí)資料制定學(xué)習(xí)路線售賣(mài)盈利，從道德層面角度分析是否有問(wèn)題？</h3>
<form>
<input type="checkbox" id="i1" name="problem" value="yes">
<label for="i1">有</label>
<input type="checkbox" id="i2" name="problem" value="no">
<label for="i2">沒(méi)有</label>
<input type="checkbox" id="i3" name="problem" value="not_clear">
<label for="i3">不清楚</label><br>
<input type="submit" value="提交">
</form>
<h3>問(wèn)答題2（單選）：實(shí)際工作經(jīng)驗(yàn)不足1年的人員折騰的學(xué)習(xí)資料您覺(jué)得是否對(duì)你有幫助？</h3>
<form>
<input type="checkbox" id="w1" name="problem" value="yes">
<label for="w1">有</label>
<input type="checkbox" id="w2" name="problem" value="no">
<label for="w2">沒(méi)有</label>
<input type="checkbox" id="w3" name="problem" value="not_clear">
<label for="w3">不清楚</label><br>
<input type="submit" value="提交">
</form>
</body>
</html>
效果如下圖：
上面的小栗子中，實(shí)現(xiàn)復(fù)選框的輸入類(lèi)型是checkbox，這個(gè)是重點(diǎn)哦！
當(dāng)有數(shù)據(jù)要提交給后端的時(shí)候怎么搞？如果后端是API服務(wù)，可以給它提交json。如果是前端頁(yè)面，就需要通過(guò)構(gòu)建表單來(lái)獲取用戶(hù)的輸入。基于表單提交數(shù)據(jù)給后端，怎么提交？需要一個(gè)可以點(diǎn)擊的提交按鈕，那這個(gè)按鈕怎么來(lái)？先看下面代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁(yè)</title>
</head>
<body>
<h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
<h3>主機(jī)信息</h3>
<form>
<label for="ipaddr">IP地址</label>
<input type="text" id="ipaddr" name="ip"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
效果如下圖：
輸入類(lèi)型為submit，說(shuō)明它就是提交按鈕，注意上面代碼type="submit"了嗎？
在之前的例子中，前端表單需要將數(shù)據(jù)提交給后端，除了需要一個(gè)提交按鈕外，還需要action屬性。當(dāng)點(diǎn)擊提交按鈕后，表單的數(shù)據(jù)該發(fā)到后端的哪個(gè)url進(jìn)行處理，就是定義在action屬性中。接下來(lái)，我們結(jié)合前端和后端直接來(lái)個(gè)小實(shí)戰(zhàn)，后端代碼用Python的Flask框架。
前端代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁(yè)</title>
</head>
<body>
<h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
<h3>主機(jī)信息</h3>
<form action="http://192.168.11.10:8088/ttropsstack" target="_blank">
<label for="ipaddr">IP地址</label>
<input type="text" id="ipaddr" name="ip"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
后端代碼：
from flask import Flask, request
webapp = Flask(__name__)
@webapp.route('/ttropsstack', methods=["GET", "POST"])
def ttropsstack():
args = request.args
print 'ip addr is: %s' % args.get('ip')
return 'ok'
if __name__ == '__main__':
webapp.run(host="0.0.0.0", port=8088, debug=True)
前端和后端的代碼寫(xiě)完后，我們接下來(lái)看看效果
輸入IP地址后，點(diǎn)擊提交
這個(gè)ok是后端返回的
后端接收到數(shù)據(jù)后，啥也沒(méi)做，只是做了簡(jiǎn)單打印
這個(gè)小栗子很簡(jiǎn)單，通過(guò)這個(gè)小栗子，是不是對(duì)action屬性的用法有了進(jìn)一步的理解呢？
method屬性的用途是指定提交數(shù)據(jù)的http方法，通常有2個(gè)，get和post。接下來(lái)我們?cè)谏蟼€(gè)小栗子的基礎(chǔ)上做個(gè)小改造，看下面代碼
前端代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁(yè)</title>
</head>
<body>
<h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
<h3>主機(jī)信息</h3>
<form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="get">
<label for="ipaddr">IP地址</label>
<input type="text" id="ipaddr" name="ip"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
后端代碼：
from flask import Flask, request
webapp = Flask(__name__)
@webapp.route('/ttropsstack', methods=["POST"])
def ttropsstack():
args = request.args
print 'ip addr is: %s' % args.get('ip')
return 'ok'
if __name__ == '__main__':
webapp.run(host="0.0.0.0", port=8088, debug=True)
當(dāng)前端輸入數(shù)據(jù)后，提交表單時(shí)，直接告訴你這是不允許的方法
在這個(gè)例子中，是因?yàn)榍岸说谋韱瘟酥付薽ethod為get請(qǐng)求，而后端接收數(shù)據(jù)的method規(guī)定了需要post請(qǐng)求，故所以出現(xiàn)這個(gè)問(wèn)題。
下面我們改造一下后端代碼：
# coding: utf8
from flask import Flask, request
webapp = Flask(__name__)
@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
if request.method == 'POST':
print request.get_data(as_text=True)
return 'ok'
else:
return '提交數(shù)據(jù)需要post請(qǐng)求'
if __name__ == '__main__':
webapp.run(host="0.0.0.0", port=8088, debug=True)
前端表單中的method還是保持get請(qǐng)求，再次提交，后端的返回如下：
看到了嗎？后端判斷前端過(guò)來(lái)的請(qǐng)求是get還是post，很顯然，前端過(guò)來(lái)的請(qǐng)求是get，并且返回了非常友好的提示。
接下來(lái)我們繼續(xù)改造一下前端的代碼，將請(qǐng)求修改為post，代碼如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁(yè)</title>
</head>
<body>
<h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
<h3>主機(jī)信息</h3>
<form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
<label for="ipaddr">IP地址</label>
<input type="text" id="ipaddr" name="ip"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
后端代碼也稍微改造一下，改變接收前端數(shù)據(jù)的方法
# coding: utf8
from flask import Flask, request
webapp = Flask(__name__)
@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
if request.method == 'POST':
a = request.form
print a.get('ip')
print type(a)
return 'ok'
else:
return '提交數(shù)據(jù)需要post請(qǐng)求'
if __name__ == '__main__':
webapp.run(host="0.0.0.0", port=8088, debug=True)
輸入IP地址，并點(diǎn)擊提交
提交后，后端給前端返回了ok
接下來(lái)看下后端，后端啥也沒(méi)做，就獲取到表單的數(shù)據(jù)，然后打印了數(shù)據(jù)，并且打印了下數(shù)據(jù)類(lèi)型
好了，關(guān)于前端的action屬性和Method屬性就講到這里了。為了講解action和method，還結(jié)合了后端的一丟丟知識(shí)，前端和后端的知識(shí)點(diǎn)以后都會(huì)慢慢講到哈！
先來(lái)個(gè)前端代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁(yè)</title>
</head>
<body>
<h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
<form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
<label for="opslist">運(yùn)維開(kāi)發(fā)應(yīng)掌握的技能：</label>
<select id="opslist" name="opslist">
<option value="python">Python語(yǔ)言</option>
<option value="go">Go語(yǔ)言</option>
<option value="shell">Shell語(yǔ)言</option>
<option value="database">數(shù)據(jù)庫(kù)</option>
<option value="frontend">前端</option>
<option value="linux">Linux</option>
<option value="network">網(wǎng)絡(luò)</option>
<option value="storage">存儲(chǔ)</option>
</select>
<input type="submit">
</form>
</body>
</html>
后端代碼：
# coding: utf8
from flask import Flask, request
webapp = Flask(__name__)
@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
if request.method == 'POST':
a = request.form
print a.get('opslist')
return 'ok'
else:
return '提交數(shù)據(jù)需要post請(qǐng)求'
if __name__ == '__main__':
webapp.run(host="0.0.0.0", port=8088, debug=True)
在下拉框中選擇“Go語(yǔ)言”，并提交
后端啥也沒(méi)干，就只做了打印
前端代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁(yè)</title>
</head>
<body>
<h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
<form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
<label for="opslist">運(yùn)維開(kāi)發(fā)應(yīng)掌握的技能：</label>
<select id="opslist" name="opslist" size="6" multiple>
<option value="python">Python語(yǔ)言</option>
<option value="go">Go語(yǔ)言</option>
<option value="shell">Shell語(yǔ)言</option>
<option value="database">數(shù)據(jù)庫(kù)</option>
<option value="frontend">前端</option>
<option value="linux">Linux</option>
<option value="network">網(wǎng)絡(luò)</option>
<option value="storage">存儲(chǔ)</option>
</select>
<input type="submit">
</form>
</body>
</html>
上述前端代碼中，是使用multiple屬性來(lái)實(shí)現(xiàn)選擇多個(gè)值。
后端代碼的打印方式稍微做了些許調(diào)整：
# coding: utf8
from flask import Flask, request
webapp = Flask(__name__)
@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
if request.method == 'POST':
data = request.get_data()
print data
return 'ok'
else:
return '提交數(shù)據(jù)需要post請(qǐng)求'
if __name__ == '__main__':
webapp.run(host="0.0.0.0", port=8088, debug=True)
按住ctrl或者shift鍵可進(jìn)行多選
后端打印的效果圖下圖：
關(guān)于表單基礎(chǔ)知識(shí)點(diǎn)的講解就這么愉快的結(jié)束了，關(guān)于更多表單的元素、輸入屬性、輸入類(lèi)型可自行查閱和實(shí)戰(zhàn)，筆者因時(shí)間有限就不一一演示。感謝您的閱讀，望多多關(guān)注我們、點(diǎn)贊、轉(zhuǎn)發(fā)！
本文轉(zhuǎn)載于（喜歡的盆友關(guān)注我們）：https://mp.weixin.qq.com/s/L-Msv39JrF7AzRx4K1OLjA
lement UI 目前在中后臺(tái)項(xiàng)目中應(yīng)用廣泛，是十分流行的 Vue 組件框架。而表單元素，作為最常用的用戶(hù)輸入組件，在設(shè)計(jì)開(kāi)發(fā)過(guò)程中幾乎都要涉及，且往往大同小異。能不能減少重復(fù)的代碼編寫(xiě)工作呢？能不能甚至不寫(xiě)代碼，點(diǎn)幾下鼠標(biāo)就能生成想要的表單呢？Form-Generator，這個(gè)基于 Element UI 框架 Form 元素的表單設(shè)計(jì)與代碼生成器，就能解放你的雙手。
ElementUI框架
Form-Generator，是 JakHuang 在 Github 和碼云上開(kāi)源的表單設(shè)計(jì)與代碼生成器，項(xiàng)目代碼位于 https://github.com/JakHuang/form-generator，國(guó)內(nèi)鏡像位于 https://gitee.com/mrhj/form-generator。
Form-Generator 基于 Element UI 組件庫(kù)的 Form 表單組件，開(kāi)發(fā)了一個(gè)表單設(shè)計(jì)器，可以在設(shè)計(jì)器中，點(diǎn)選不同的輸入組件構(gòu)建表單，設(shè)計(jì)器則會(huì)自動(dòng)生成對(duì)應(yīng)的 Vue 代碼，可以項(xiàng)目中使用。也可以把設(shè)計(jì)好的表單以 JSON 的格式導(dǎo)出，方便存儲(chǔ)傳輸，使用時(shí)利用配套的解析器把 JSON 解析為設(shè)計(jì)好的表單即可使用。
form-generator使用
Form-Generator 需要 Node.js 10+，可以使用 NPM 進(jìn)行安裝：
npm i fms-form-generator也可以自行下載項(xiàng)目代碼進(jìn)行構(gòu)建：
git clone https://github.com/JakHuang/form-generator.git然后安裝依賴(lài)，使用 YARN
yarn或 NPM 安裝依賴(lài)
npm install在本地運(yùn)行表單設(shè)計(jì)器，運(yùn)行
npm run dev也可以構(gòu)建之后進(jìn)行部署
npm run buildForm-Generator 項(xiàng)目配套有 JSON 解析器，可以把 JSON 轉(zhuǎn)化為真實(shí)的表單代碼，可以使用 NPM 安裝：
npm i form-gen-parser另外，form-generator 還有配套的 VSCode 插件 Form Generator Plugin，使用 VSCode 的開(kāi)發(fā)者們可以進(jìn)行安裝，幫助完成基本的表單代碼搭建任務(wù)。
fms-form-generator庫(kù)
Form-Generator 的主要界面是一個(gè)表單設(shè)計(jì)器：
表單設(shè)計(jì)器
可以看到，界面的左側(cè)擺放了不同的輸入組件，包括單行文本、計(jì)數(shù)器、下拉選擇、日期范圍和按鈕等，基本滿足了一般項(xiàng)目對(duì)于表單的所有需求。
表單設(shè)計(jì)器的組件選擇
界面中間是設(shè)計(jì)得到的表單，點(diǎn)擊左側(cè)的組件，便可在表單中添加。同時(shí)，表單中還提供了組件的復(fù)制和刪除功能，可以自由進(jìn)行編輯。
界面的右側(cè)是組件屬性和表單屬性，可以對(duì)當(dāng)前選中的組件的各項(xiàng)屬性進(jìn)行修改，如字段名、標(biāo)題、標(biāo)簽寬度、默認(rèn)值、尺寸等，進(jìn)行所需組件的定制；也可以對(duì)表單屬性進(jìn)行修改，包括表單模型、校驗(yàn)?zāi)Ｐ汀?biāo)簽對(duì)齊等，實(shí)現(xiàn)表單層級(jí)的配置。
組件屬性編輯
在完成了表單的設(shè)計(jì)之后，就可以點(diǎn)擊界面上部的運(yùn)行按鈕，在這里我們可以選擇生成類(lèi)型，包括頁(yè)面和彈窗兩種，其中彈窗類(lèi)型會(huì)把表單嵌入到對(duì)話框組件中。
生成類(lèi)型
完成類(lèi)型選擇后，我們就能得到生成的 Vue 代碼，包括 Vue 模板、JS 和 CSS 代碼：
Vue模板代碼
JS代碼
可以看到，生成的代碼可讀性高，質(zhì)量較好，可以直接引入到項(xiàng)目中進(jìn)行使用。代碼生成器也提供了一個(gè)美觀的編輯器界面，可以直接對(duì)生成的代碼進(jìn)行編輯，并在右側(cè)重新渲染修改的表單。
除了直接生成代碼外，form-generator 還提供了把表單導(dǎo)出為 JSON 格式的功能，便于進(jìn)行存儲(chǔ)和傳輸。Form-generator 設(shè)計(jì)了一種具有特定格式的 JSON 格式用于 Element UI 表單的表示，可以在代碼生成器中直接導(dǎo)出 JSON 文件，使用時(shí)再利用配套的 form-gen-parser 進(jìn)行解析，重新生成表單代碼。
form-generator的JSON表示
表單的JSON表示以fields列表存儲(chǔ)各表單項(xiàng)，各表單項(xiàng)一般包括：
以此 JSON 文件，便可還原表單，得到生成的 Vue 代碼。我們還可以以此為模板，添加變量，只需修改 JSON 數(shù)據(jù)就進(jìn)行相似表單的自動(dòng)化批量生成。
表單的JSON表示
Form-Generator 作為 Element UI 的表單設(shè)計(jì)和代碼生成器，簡(jiǎn)化了表單的設(shè)計(jì)和代碼編寫(xiě)工作，使得表單的設(shè)計(jì)工作也能夠“所見(jiàn)即所得”，在一些前端設(shè)計(jì)定制化要求不高的場(chǎng)景下，使用起來(lái)十分方便，既使得設(shè)計(jì)人員能夠獲得期望的表單設(shè)計(jì)，也減輕了代碼開(kāi)發(fā)人員的在前端設(shè)計(jì)方面的額外工作，一舉兩得。
Form-Generator 的實(shí)現(xiàn)需要對(duì)于 Vue 和 ElementUI 十分熟悉，尤其在表單的 JSON 表示的生成和解析方面的工作，頗具技巧；同時(shí)，該項(xiàng)目本身也是一個(gè)優(yōu)秀的前端應(yīng)用，感興趣的開(kāi)發(fā)者可以進(jìn)行代碼的閱讀學(xué)習(xí)，參與開(kāi)源貢獻(xiàn)。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
