相信前端童鞋,对JSON应该都很熟悉。JSON (JavaScript Object Notation) 缩写,JSON 是一种数据格式,具有简洁、可读性高、支持广泛的特点JSON。通过JSON 我们可以灵活地来表示任意复杂的数据结构。
比如我们要描述一个人的信息,我们可以用JSON来描述
那JSON Schema又是什么鬼? ????
JSON Schema 主要用于描述 JSON 数据,我们可以看到上面的JSON中不同的key-value数值,有string类型也有date类型。针对不同的应用场景,我们想约定JSON的数据所包含的字段、字段值得类型甚至依赖关系,那我们就需要有个规范来描述这些约束的关系。 而这也是JSON Schema 所存在的理由
下图表示就是一个JSON Schema,用于描述JSON数据。我们可以很明显看出JSON Schema本身是用JSON编写的, 换句话说他本身就是JSON文件!
JSON Schema 核心定义主要以下这些数据类型,通过 type 来指定 JSON 数据类型
啊乐同学:那我可以通过JSON Schema来做什么?
你看到上方的JSON Schema例子,很明显数据类型的定义可以方便我们用来做数据校验
结合上方的demo,我们通过这个在线校验工具来演示一波
上图,JSON报出了不合法的提示,为什么呢?是因为我在左侧定义的birthday字段需要为date格式,而我们右侧定义的JSON数据中字段数值并不是date格式,所以校验出异常
再补充一个:前后端先把数据接口约定好,等后端把接口输出完毕,直接用JSON Schema
来对接口做验收。
除了上文的介绍:支持定义类型、对字段类型的校验之外,JSON Schema还支持以下几种特征
总结:JSON Shema 本质上就是结构化json定义
关于不同数据类型的更详细定义,这里不大篇幅介绍。感兴趣的童鞋推荐看下方的推荐
拓展阅读:
JSON Schema 规范(中文版)
JSON Schema的优点在于可以对数据类型进行描述,方便理解。同时也让机器“读懂”,比如数据校验或、输入检测提示、自动化测试等等,我们就下面这几个前端应用场景来聊聊JSON Schema的落地实践
在中后台应用中有大量的表单需求,而表单离不开数据校验,那有什么validator工具库可以使用? 你可以使用ajv
这个经典的开源工具,它是一个非常流行的JSON Schema验证工具,而且性能号称最佳
上图为Ajv的具体使用,需要先声明一个数据模式schema
,然后定义好规则(本质上是JSON Shema)然后我们再通过这个模式去校验用户输入的数据 data
是否符合我们的约束
Validator工具还有很多,包括开源组件库中常使用的async-validator
,感兴趣的同学可以阅读树酱君之前写的下面这两篇文章:
这些node开源工具你值得拥有 - 数据校验工具
前端表单数据那些事
当后端接口设计好后,前端需要根据接口的设计进行联调,一般接口文档都会约束并定义好接口中返回字段的类型。
结合最近使用的Apifox
来作接口调试,通过这个工具我们来聊聊背后的原理
首先我们可以在数据模型模块中里创建一个Pet实体,然后再定义宠物相关的字段,我们可以字段类型(本质上是基于JSON Schema 用来做数据校验),甚至可以根据定义的字段类型来定义期望Mock返回数据形式
然后回到接口调试页面,我们在查询宠物详情这个接口中的data绑定我们预设好的实体Pet
最后我们运行这个接口,发现Apifox会对接口返回的数据response做校验
上图介绍的工具本质上是基于JSON Schema对接口返回数据进行校验
而且基于Apifox工具还可以根据字段定义的类型,来选择Mock类型,Mock出来的数据人性化很多!而且除了有现成预设的mock规则,也支持手动设置mock规则(Mock.js)
基于JSON Schema 社区衍生了诸多比如动态表单、可视化搭建页面或数据大屏等开源项目。
这里给大家推荐一个可视化H5搭建平台Dooring
本质上可视化搭建,主要包括以下几个方面
那JSON-Schema在可视化搭建中起到什么作用?
你可以理解主要为两点:
配置页生成 JSON Schema
视图页消费解析JSON Schema 并渲染视图
而 H5-Dooring
的组件都是通过动态加载的方式引入,按需加载,不需要的组件不会被加载。底层技术是在umi
的dynamic
方案的基于上封装了一个组件动态加载器,具体如如下图。本质上也是结合了 JSON Schema
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
长按识别二维码并关注微信
更方便到期提醒、手机管理