JSON Schema的应用(具体的使用场景)

什么是JSON Schema

JSON Schema 是用于验证 JSON 数据结构的强大工具，Schema可以理解为模式或者规则。

要定义 JSON Schema 是什么，我们可能应该首先定义 JSON 是什么。JSON 代表“JavaScript Object Notation”，一种简单的数据交换格式。它最初是作为万维网的符号。由于 JavaScript 存在于大多数 Web 浏览器中，并且 JSON 基于 JavaScript，因此很容易支持。然而，它已被证明足够有用且足够简单，以至于它现在被用于许多其他不涉及网上冲浪的环境中。

JSON Schema 本身是用 JSON 编写的。它是数据本身，而不是计算机程序。它只是一种用于“描述其他数据结构”的声明性格式。

JSON Schema demo

以Object类型为例，列举在JSON Schma所经常用到的关键字,如下

{
  "$schema": "http://json-schema.org/draft-04/schema#",
  "$id": "https://example.com/schemas/person",
  "title": "base info",
  "description": "base information about person",
  "type": "object",
  "required": ["name", "age", "phone"],
  "definitions": {
    "name": {
      "type": "string",
      "minLength": 1,
      "maxLength": 10
    }
  },
  "properties": {
    "name": {
      "type": "string",
      "minLength": 1,
      "maxLength": 10
    },
    "age": {
      "type": "number",
      "minimum": 18,
      "exclusiveMinimum": true,
      "maximum": 65,
      "exclusiveMaximum": true
    },
    "phone": {
      "type": "string",
      "pattern": "^1\\d{10}$"
    },
    "parents": {
      "type": "array",
      "items": [{ "$ref": "#/definitions/name" }],
      "minItems": 1,
      "maxItems": 2,
      "uniqueItems": true
    },
    "address": {
      "type": "object",
      "properties": {
        "city": {
          "type": "string",
          "enum": ["guangzhou", "beijing"]
        }
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

关键字描述

以上是比较常用到的关键字，还有一些其他的关键字可以阅读官方文档进行深入地了解和使用

Understanding JSON Schema

基于JSON Schema配置文件渲染UI组件

借助vue、react框架组件化理念以及动态渲染组件能力，涌现了许多基于JSON Schema配置文件渲染表单或者组件的库，有效解决通用性组件大量重复使用的场景。通过JSON配置组件乃至页面，能够使代码转化为文件，使数据得以导入导出，便于迁移储存。另外也可以开发可视化编辑器，通过拖拽交互，生成JSON文件，降低开发使用难度。基于这一系列的方案，使开发效率大大提升和降低后续的代码维护。

vue-json-schema-form

demo地址:https://form.lljj.me/#/demo?type=Simple

react-jsonschema-form

demo地址:https://rjsf-team.github.io/react-jsonschema-form/

@designable/formily-antd

demo地址:https://tiandisheng.top/~demos/basicdesignable-main

数据校验

todo

参考资料

JSON Schema 规范（中文版）
JSON Schema入门和应用
数据校验之JSON Schema