繼上一篇<<讓前端小姐姐愉快地開發表單>>，我們解決了“愉快”，今天接著講“效率”哈
<(￣︶￣)>。
表單，其實就是對一個資料的視覺化描述，以友好的形式展現給使用者，達到收集使用者填寫的資訊的目的
今天我們拋開傳統的表單開發方式，來了解下嶄新的高效的開發表單的方式（看完也許能讓你從此脫離枯燥無味的表單開發生涯）
╰(￣▽￣)╭
- 表單開發第一步：清晰你的資料結構
以下就是今天要開發的表單的資料結構，不復雜，但也不簡單
{
firstname: 'daniel',
lastname: 'xiao',
fullname: 'daniel.xiao',
gender: 'man',
language: [ 'english', 'chinese' ],
birthday: '',
luckyNum: 9,
luckyColor: '',
email: 'danieldx666@126.com',
favoriteMusics: [
{
type: '',
score: 5
}
],
remarks: ''
}
複製程式碼- 表單開發第二步：生成 ncform schema
也許你會有疑問，ncform 是什麼鬼啊？別急哈，接著往下看就是了。接下來基本都是動圖，會看得比較輕鬆。最後會給出相關連結的，方便你去體驗一下
我們通過 ncform schema 生成器 ，可以快速生成 ncform schema 的基本結構
OK，不到幾秒，唰的一下，一個表單就生成了。
當然湊合著用還是可以的，但我們不將就，開始優化之旅吧 <(￣︶￣)↗[GO!]
ncform 提供了 playground，你可以把生成的 ncform schema 複製到 playground 進行優化。以下演示都是在 playground 進行的
- 優化 name 欄位：能讓使用者填少點就填少點
// 以下是修改後的相關欄位的配置資訊
"firstname": {
"type": "string",
"ui": {
"label": "First Name",
"columns": 6
}
},
"lastname": {
"type": "string",
"ui": {
"label": "Last Name",
"columns": 6
}
},
"fullname": {
"type": "string",
"valueTemplate": "dx: {{$root.firstname}} + '.' + {{$root.lastname}}",
"ui": {
"label": "Full Name"
}
},
複製程式碼- 優化 gender 欄位：二選一當然用單選框最適合
// 以下是修改後的相關欄位的配置資訊
"gender": {
"type": "string",
"default": "man",
"ui": {
"label": "Gender",
"widget": "radio",
"widgetConfig": {
"enumSource": [
{
"value": "man",
"label": "Man"
},
{
"value": "woman",
"label": "Woman"
}
]
}
}
},
複製程式碼- 優化 language 欄位：項不多且多選，核取方塊是個不錯的選擇
// 以下是修改後的相關欄位的配置資訊
"language": {
"type": "array",
"ui": {
"label": "Language",
"widget": "checkbox",
"widgetConfig": {
"enumSource": [
{
"label": "English",
"value": "eng"
},
{
"label": "Chinese",
"value": "cn"
}
]
}
}
},
複製程式碼- 優化 birthday 欄位：日期我們就來個日期選擇器吧
// 以下是修改後的相關欄位的配置資訊
"birthday": {
"type": "string",
"ui": {
"label": "Birthday",
"widget": "date-picker"
}
},
複製程式碼- 優化 luckyNum 和 luckyColor：對於數字和顏色，也是有對應的控制元件滴
// 以下是修改後的相關欄位的配置資訊
"luckyNum": {
"type": "number",
"ui": {
"label": "Lucky Num",
"widget": "input-number"
}
},
"luckyColor": {
"type": "string",
"ui": {
"label": "lucky Color",
"widget": "color-picker"
}
},
複製程式碼- 優化 email 欄位：對於郵件，加個郵件格式驗證規則是有必要滴。再畫蛇添足一下吧，來個必填，呵呵。
// 以下是修改後的相關欄位的配置資訊
"email": {
"type": "string",
"ui": {
"label": "Email"
},
"rules": {
"required": true,
"email": true
}
},
複製程式碼- 優化 favoriteMusics 欄位：可新增項的陣列類，用表格展示形式還是挺nice的
- 優化 type 欄位：音樂型別會有很多項，所以用下拉框好點
- 優化 score 欄位：打分類的，給幾顆星感覺還不錯
// 以下是修改後的相關欄位的配置資訊
"favoriteMusics": {
"type": "array",
"items": {
"type": "object",
"properties": {
"type": {
"type": "string",
"ui": {
"label": "Type",
"widget": "select",
"widgetConfig": {
"enumSource": [
{
"value": "1",
"label": "Pop Music"
},
{
"value": "2",
"label": "Rock Music"
}
]
}
}
},
"score": {
"type": "number",
"ui": {
"label": "score",
"widget": "rate"
}
}
},
"ui": {
"label": "favoriteMusics"
}
},
"ui": {
"label": "favoriteMusics",
"showLegend": false,
"widget": "array-table"
}
},
複製程式碼- 優化 remarks 欄位：備註囉哩囉嗦的人可能會寫得比較多，所以文字框最好了
// 以下是修改後的相關欄位的配置資訊
"remarks": {
"type": "string",
"ui": {
"label": "remarks",
"widget": "textarea"
}
}
複製程式碼看到這裡，這個表單的 ncform schema 已經搞定了，來個大合照吧 ♪(^∇^*)
廣告時間：ncform v1.0.0 正式釋出了（喜歡的同學給加個星唄 O(∩_∩)O）
主要更新特性：
- 充分測試：該大版本加入了大量的自動化測試來保障專案的質量。
- 自動支援dx表示式：使用者自定義的widget的widgetConfig自動支援dx表示式，對開發者更加友好了。
附上相關連結：
寫在最後，也許有“愛鑽牛角尖”的你會有疑問，一分鐘真的能搞定？
哎呀，我承認有廣（誇）告（大）成分啦。一分鐘不行，5分鐘總是可以的啦 ~(@^_^@)~
tags: ncform, vue, json, form, json-schema, form-generation