继上一篇<<让前端小姐姐愉快地开发表单>>，我们解决了“愉快”，今天接着讲“效率”哈
<(￣︶￣)>。
表单，其实就是对一个数据的可视化描述，以友好的形式展现给用户，达到收集用户填写的信息的目的
今天我们抛开传统的表单开发方式，来了解下崭新的高效的开发表单的方式（看完也许能让你从此脱离枯燥无味的表单开发生涯）
╰(￣▽￣)╭
以下就是今天要开发的表单的数据结构，不复杂，但也不简单
{ 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 是什么鬼啊？别急哈，接着往下看就是了。接下来基本都是动图，会看得比较轻松。最后会给出相关链接的，方便你去体验一下
我们通过 ncform schema 生成器 ，可以快速生成 ncform schema 的基本结构
OK，不到几秒，唰的一下，一个表单就生成了。
当然凑合着用还是可以的，但我们不将就，开始优化之旅吧 <(￣︶￣)↗[GO!]
ncform 提供了 playground，你可以把生成的 ncform schema 复制到 playground 进行优化。以下演示都是在 playground 进行的
// 以下是修改后的相关字段的配置信息 "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": { "type": "string", "default": "man", "ui": { "label": "Gender", "widget": "radio", "widgetConfig": { "enumSource": [ { "value": "man", "label": "Man" }, { "value": "woman", "label": "Woman" } ] } } },
复制代码
// 以下是修改后的相关字段的配置信息 "language": { "type": "array", "ui": { "label": "Language", "widget": "checkbox", "widgetConfig": { "enumSource": [ { "label": "English", "value": "eng" }, { "label": "Chinese", "value": "cn" } ] } } },
复制代码
// 以下是修改后的相关字段的配置信息 "birthday": { "type": "string", "ui": { "label": "Birthday", "widget": "date-picker" } },
复制代码
// 以下是修改后的相关字段的配置信息 "luckyNum": { "type": "number", "ui": { "label": "Lucky Num", "widget": "input-number" } }, "luckyColor": { "type": "string", "ui": { "label": "lucky Color", "widget": "color-picker" } },
复制代码
// 以下是修改后的相关字段的配置信息 "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": { "type": "string", "ui": { "label": "remarks", "widget": "textarea" } }
复制代码
看到这里，这个表单的 ncform schema 已经搞定了，来个大合照吧 ♪(^∇^*)
最后附上相关链接：
写在最后，也许有“爱钻牛角尖”的你会有疑问，一分钟真的能搞定？
哎呀，我承认有广（夸）告（大）成分啦。一分钟不行，5 分钟总是可以的啦 ~(@^_^@)~
tags: ncform, vue, json, form, json-schema, form-generation
评论