Json-Shema

前端小姐姐：“新业务功能又有大量的表单要开发了，有没让我又高效又愉快地完成这个任务的方案呢？”哦，我想想，配置开发理念，应该比较适合，且社区也有好些这种理念的开源项目前端小姐姐：“什么叫配置开发理念呢？”就是只需要简单地定义一份JSON配置数据来开发表单前端小姐姐：“太棒了，我去search下先哈”过了一会~~前端小姐姐：“是真有不少，但我选哪个好呢？”恩，那我们就来聊聊配置理念表单开发的选型吧1. 帮助文档这是必不可少的啦，没有文档，谁敢用呢2. 直观特性展示我可不想一开始就要花大量时间去读冷冰冰的文字，然后还要发挥自己的想像力最好有超直观超形象超方便的方式展示大部分甚至全部的特性，可能是这样的：3. 开箱即用最好官方自带一整套常用的表单控件和校验规则，满足大部分常见场景，就不用去自行扩展太多了比如以下的组件就经常用到了：比如以下的校验规则就经常用到了：4. 扩展能力官方就是提供再多的组件和校验规则，也是无法满足所有的业务场景的，所以必须 友好（简单方便） 支持开发者自定义自己的表单组件和校验规则5. 支持复杂数据结构一个表单数据结构，除了简单的只有一级属性的对象类型外（如 {name: ‘daniel’, age: 18}），实际很多场景可能是这样的：{ “name”: { “firstName”: “daniel”, “lastname”: “xiao” }}可能是这样的：{ “name”: “daniel”, “hobbies”: [ { “id”: 1, “name”: “Coding” }, { “id”: 2, “name”: “Singing” } ]}一句话总结就是：支持数组类型，对象嵌套对象，对象嵌套数组，数组的项是普通类型 或 对象类型 或 数组类型6. 表单控件间交互我想说，一个表单，不是把表单控件按位置静静放在那就行了，控件之间并不独立，控件之间是有交互的这里列举下具有代表性的一些场景：“同意才能继续” 类型“城市选择器” 类型“大于18岁必填” 类型“日期比较” 类型“全名自动填写” 类型感觉已经挺多了，就不一一列举了。所以，前端小姐姐，如果候选开源项目能够满足以上所提的条件，那就可以用了前端小姐姐：“哦，那你有推荐吗？”当然。。。哈哈，接下来就是广告时间了，如果各位看官们觉得以上的选型条件合情合理，那 ncform 就是一个不错的选择了ncform，一种令人愉悦的表单开发方式，仅需配置即可生成表单UI及其交互行为。自带丰富的 标准组件 和 校验规则，开箱即用。具备强大的 控件交互 和 扩展能力，做你所想。访问官方Github了解更多呗：https://github.com/ncform/ncformtags: vue, form, json-schema, generator

简介json现在已经成为比较通用灵活的数据交换格式，尤其是在web方面，总是少不了它的身影，js原生就支持它。网页中与服务器中和服务器交换信息也基本上式基于json的。在现在的开发中，特别是在前后端分离的开发中，后端提供接口，前端通过接口拿取数据；那么有一个问题来了，那就是该如何描述接口，可能有人说好办，通过接口文档，那么，文档如何维护呢，完全手写么？在这个自动化的时代，这样也太耗神费力了吧！当然不排除很多人是这么干的。另外，如何体现字段规则，如字段长度，字段是否必填等验证规则，以及返回的字段有些什么东西，我想在文档里面不好体现这些吧。即使在文档中体现了，万一有些改动呢，有些事就不好办了。关于如何描述json数据，我想没有什么能比json schema更合适了的吧；已成一个规范专门维护，还有一系列的配套工具，前端的后端的都有，比较好的接口文档工具Swagger就是基于它的。那么啰嗦了那么多，让我们来看看如何粗略的描述下json数据吧。描述JSON Schema本身就是JSON格式，自己描述自己，它们俩之间的关系可以理解为类与对象的关系，也可以理解为集合与元素的关系，或JSON Schema描述JSON数据的模式，怎么样好理解就怎么理解数字{ “type”: “number”}这样就可以把值描述成数字了需要加个标题，我们只要加上title属性就好了{ “type”: “number”, “title”: “字段1”}一般数字有最大值和最小值，我们可以加上maximum和minimum{ “type”: “number”, “maximum”: 10, “minimum”: 1}需要一个默认值，加上default即可值得注意的是title, description, default是通用的null{ “type”: null}字符串{ “type”: “string”}当字符串需要符合某种格式的时候，加上format{ “type”: “string”, “format”: “url”}或者使用pattern，里面是正则表达式{ “type”: “string”, “pattern”: “\d+"}长度通过maxLength和minLength来描述布尔值{ “type”: “boolean”}对象对象描述算是比较复杂的，不过也比较明了，通过properties来描述每个字段，每个字段的描述也是一个JSON Schema，也就是可以不断的嵌套下面描述一个对象，拥有属性aa和bb，分别是数字和字符串{ “type”: “object”, “properties”: { “aa”: { “type”: “number” }, “bb”: { “type”: “string” } }}当某些字段必填的时候，加上required，是一个数组，里面是必填的字段{ “type”: “object”, “properties”: { “aa”: { “type”: “number” }, “bb”: { “type”: “string” } }, “required”: [“aa”]}除上面给出的以外，还能定义属性的个数；以及属性是动态的时候，可以定义属性满足的规则；另外还能定义依赖，也就是当某个字段提供的时候，相应的字段也必须提供数组{ “type”: “array”}maxItems,minItems为数字，定义数组有多长uniqueItems为布尔值，定义是否有重复值定义数组每一项满足的格式，加上items; 可以为对象，为一个JSON Schema或是一个对象数组，每个位置都为一个JSON Schema，描述对应位置的数据格式以上只是JSON Schema的简略描述，冰上一角，更多的东西可以在官网找到，它的强大超乎你的想象，后续我还会介绍相应的工具，包括不仅限于根据代码自动生成文档校验表单生成通过代码生成JSON Schema自动化测试另外欢迎光临个人小站，http://yuanxiaowa.github.io/，一些小工具望大家喜欢。 ...