我和JSON Schema的那些事

简介: 哈喽,我是🌲 树酱。今天聊一聊关于我跟Json schema的一些交集,顺便给大家重新梳理下今日这个主角的概念及当下主要的一些应用场景

微信截图_20220514233757.png


哈喽,我是🌲 树酱。今天聊一聊关于我跟Json schema的一些交集,顺便给大家重新梳理下今日这个主角的概念及当下主要的一些应用场景


1.什么是JSON Schema


相信前端童鞋,对JSON应该都很熟悉。JSON (JavaScript Object Notation) 缩写,JSON 是一种数据格式,具有简洁、可读性高、支持广泛的特点JSON。通过JSON 我们可以灵活地来表示任意复杂的数据结构。


比如我们要描述一个人的信息,我们可以用JSON来描述


微信截图_20220514233808.png


那JSON Schema又是什么鬼? 🤔


JSON Schema 主要用于描述 JSON 数据,我们可以看到上面的JSON中不同的key-value数值,有string类型也有date类型。针对不同的应用场景,我们想约定JSON的数据所包含的字段、字段值得类型甚至依赖关系,那我们就需要有个规范来描述这些约束的关系。 而这也是JSON Schema 所存在的理由


下图表示就是一个JSON Schema,用于描述JSON数据。我们可以很明显看出JSON Schema本身是用JSON编写的, 换句话说他本身就是JSON文件!


微信截图_20220514233820.png


JSON Schema 核心定义主要以下这些数据类型,通过 type 来指定 JSON 数据类型


微信截图_20220514233832.png


啊乐同学:那我可以通过JSON Schema来做什么?


你看到上方的JSON Schema例子,很明显数据类型的定义可以方便我们用来做数据校验


结合上方的demo,我们通过这个在线校验工具来演示一波 👇


微信截图_20220514233843.png


上图,JSON报出了不合法的提示,为什么呢?是因为我在左侧定义的birthday字段需要为date格式,而我们右侧定义的JSON数据中字段数值并不是date格式,所以校验出异常

再补充一个🌰:前后端先把数据接口约定好,等后端把接口输出完毕,直接用JSON Schema来对接口做验收。


除了上文的介绍:支持定义类型、对字段类型的校验之外,JSON Schema还支持以下几种特征


  • 判断字段是否必填
  • 支持正则表达式校验
  • 支持枚举
  • 字段个数、值最大最小值约束等等


总结:JSON Shema 本质上就是结构化json定义


关于不同数据类型的更详细定义,这里不大篇幅介绍。感兴趣的童鞋推荐看下方的推荐

拓展阅读:



2. JSON Schema的应用场景


JSON Schema的优点在于可以对数据类型进行描述,方便理解。同时也让机器“读懂”,比如数据校验或、输入检测提示、自动化测试等等,我们就下面这几个前端应用场景来聊聊JSON Schema的落地实践


2.1 表单数据校验


在中后台应用中有大量的表单需求,而表单离不开数据校验,那有什么validator工具库可以使用? 你可以使用ajv这个经典的开源工具,它是一个非常流行的JSON Schema验证工具,而且性能号称最佳


微信截图_20220514233929.png


上图为Ajv的具体使用,需要先声明一个数据模式schema,然后定义好规则(本质上是JSON Shema)然后我们再通过这个模式去校验用户输入的数据 data 是否符合我们的约束


Validator工具还有很多,包括开源组件库中常使用的async-validator,感兴趣的同学可以阅读树酱君之前写的下面这两篇文章:



2.2 接口数据校验


当后端接口设计好后,前端需要根据接口的设计进行联调,一般接口文档都会约束并定义好接口中返回字段的类型。


结合最近使用的Apifox来作接口调试,通过这个工具我们来聊聊背后的原理


首先我们可以在数据模型模块中里创建一个Pet实体,然后再定义宠物相关的字段,我们可以字段类型(本质上是基于JSON Schema 用来做数据校验),甚至可以根据定义的字段类型来定义期望Mock返回数据形式 👇


微信截图_20220514233948.png


然后回到接口调试页面,我们在查询宠物详情这个接口中的data绑定我们预设好的实体Pet👇


微信截图_20220514234011.png


最后我们运行这个接口,发现Apifox会对接口返回的数据response做校验


微信截图_20220514234027.png


上图介绍的工具本质上是基于JSON Schema对接口返回数据进行校验


而且基于Apifox工具还可以根据字段定义的类型,来选择Mock类型,Mock出来的数据人性化很多!而且除了有现成预设的mock规则,也支持手动设置mock规则(Mock.js)


2.3 低代码 low-code


基于JSON Schema 社区衍生了诸多比如动态表单、可视化搭建页面或数据大屏等开源项目。


这里给大家推荐一个可视化H5搭建平台Dooring 👇


微信截图_20220514234038.png


本质上可视化搭建,主要包括以下几个方面👇


  • 右侧区域:物料(控件)的自定义配置 setting
  • 中间区域:页面中图层引擎的渲染
  • 左侧区域:物料(控件)选择拖拽区域


那JSON-Schema在可视化搭建中起到什么作用?


你可以理解主要为两点:


  • 配置页生成 JSON Schema
  • 视图页消费解析JSON Schema 并渲染视图


H5-Dooring 的组件都是通过动态加载的方式引入,按需加载,不需要的组件不会被加载。底层技术是在umidynamic方案的基于上封装了一个组件动态加载器,具体如如下图。本质上也是结合了 JSON Schema


微信截图_20220514234049.png


对可视化搭建感兴趣的同学,可以阅读树酱君之前写的 从0到1开发可视化数据大屏 📺


相关文章
|
6月前
|
JSON 数据格式 微服务
.NET下 支持大小写不敏感的JSON Schema验证方法
有很多应用程序在验证JSON数据的时候用到了JSON Schema。 在微服务架构下,有时候各个微服务由于各种历史原因,它们所生成的数据对JSON Object属性名的大小写规则可能并不统一,它们需要消费的JSON数据的属性名可能需要大小写无关。 遗憾的是,目前的JSON Schema没有这方面的标准,标准中都是大小写敏感的。在类似上述情况下,这给使用JSON Schema进行数据验证造成了困难。
|
JSON 前端开发 JavaScript
这些前端新技术你很难再忽视了 —— JSON Schema
这些前端新技术你很难再忽视了 —— JSON Schema
|
JSON Java Linux
知识分享之Golang——JSON Schema书籍分享
知识分享之Golang篇是我在日常使用Golang时学习到的各种各样的知识的记录,将其整理出来以文章的形式分享给大家,来进行共同学习。欢迎大家进行持续关注。 知识分享系列目前包含Java、Golang、Linux、Docker等等。
183 0
知识分享之Golang——JSON Schema书籍分享
|
JSON 数据格式
Json schema总结
Json schema总结
|
存储 JSON IDE
规范你的 JSON 配置,试试 JSON schema
不知道大家在写一些 JSON 配置时会不会经常觉得麻烦,每次都要打开文档去核对字段名称对不对、结尾有没有 s、结构是否正确、是不是数组等问题。然而我最近发现一些开源项目生成的配置文件中都开始使用 JSON schema 来规范配置文件,IDE 也会对 JSON 配置进行提示和检查,真香。本文介绍下 JSON schema 的使用方法和使用场景。
|
XML JSON JavaScript
手把手教你通过JSON Schema判断BpmnJS元素属性结构~
手把手教你通过JSON Schema判断BpmnJS元素属性结构~
415 0
|
JSON Java 测试技术
技术分享 | 接口自动化测试之JSON Schema模式该如何使用?
JSON Schema 模式是一个词汇表,可用于注释和验证 JSON 文档。在实际工作中,对接口返回值进行断言校验,除了常用字段的断言检测以外
技术分享 | 接口自动化测试之JSON Schema模式该如何使用?
|
JSON 数据格式 Shell
json schema校验
工作中使用到了json schema格式校验的问题,在网上查了些资料,结合自己的理解记录一下。 json schema可以对json结果字符串做出一些约束,例如: 1. 值类型是:array, object, number, string等等 2.
2171 0
|
XML JSON JavaScript
JSON 模式(Schema)与数据解析
JSON 模式是一种基于 JSON 格式定义 JSON 数据结构的规范 JSON 模式用于描述现有数据格式,干净的人类和机器可读的文档,完整的结构验证,有利于自动化测试,可用于验证客户端提交的数据
5928 0
|
2月前
|
数据采集 JSON 数据处理
抓取和分析JSON数据:使用Python构建数据处理管道
在大数据时代,电商网站如亚马逊、京东等成为数据采集的重要来源。本文介绍如何使用Python结合代理IP、多线程等技术,高效、隐秘地抓取并处理电商网站的JSON数据。通过爬虫代理服务,模拟真实用户行为,提升抓取效率和稳定性。示例代码展示了如何抓取亚马逊商品信息并进行解析。
抓取和分析JSON数据:使用Python构建数据处理管道