共计 2712 个字符，预计需要花费 7 分钟才能阅读完成。
有一天，产品甩过去一个新的需要: 山月呀，你对数据库中的用户欠缺用户姓名、用户邮箱、用户手机号，其中手机号必填。
那前后端分工合作，如何实现这样的一个表单的需要呢？
能够看看经典的前后端单干的工作流模式:
前端表单设计 -> 客户端校验数据(更人性化的提醒) -> API 申请 -> 服务端校验数据(更强健的逻辑) -> 数据库
咱们在整个工作流中以数据校验的角度来对待这个问题，以防止最终在数据库中呈现脏数据。咱们依据产品要求，总结出几点校验的要求。
姓名必须是字符串
邮箱必须是邮箱格局
手机号必须是手机号格局
手机号必填，其它选填
以下是一份用以交互的示例数据
{
id: 10086,
name: ‘shanyue’,
mobilePhone: ‘18367891234’,
email: ‘me@shanyue.tech’
}
复制代码
客户端数据校验
在客户端进行数据校验，有两方面因素的思考
更人性化的用户体验设计，当用户校验失误后，领有更好的提醒文案
提前预警，节俭服务器资源
应用一段 JSX 的伪代码进行数据校验
const mobilePhoneRegexp = /^(?:(?:+|00)86)?1[3-9]\d{9}$/
const form = <Form>
<Form.Item
name="mobilePhone"
rules={[{
required: true,
message: '您输出的手机号格局不正确'
}]}
pattern={mobilePhoneRegexp}<Input /></Form.Item>
</Form>
复制代码
大家都晓得，前端的数据校验属于防小人不防君子。属于想绕过就能绕过的类型。
而真正的数据校验在服务器端！
服务端数据校验
后端因为重业务逻辑以及待处理各种数据，以致于分成各种各样的层级，其中有一层称为 Controller，站在后端最上层间接接管客户端经 HTTP 传输的数据。
因为 Controller 层是服务器端中与客户端数据交互的最顶层，秉承着 Fail Fast 的准则，肩负着数据过滤器的性能，对于不非法数据间接打回去，如同秦琼与尉迟恭门神般森严。
咱们看一段后端进行数据校验的一段伪代码
const mobilePhoneRegexp = /^(?:(?:+|00)86)?1[3-9]\d{9}$/
const schema = Schema.object({
id: Schema.number().required(),
name: Schema.number().required(),
email: Schema.string().email({
minDomainSegments: 2,
tlds: {allow: ['com', 'net'] }}),
mobilePhone: Joi.string().pattern(mobilePhoneRegexp),
})
复制代码
对立的校验逻辑: JSON Schema
从上述前端和后端校验的伪代码中，能够看出二者的校验规定尽管统一，然而写法大不相同，那有没有一种对立的 Schema 即可作用于前端，又可作用于后端。
有，这就是 JSON Schema。
JSON Schema 基于 JSON 进行数据校验格局，并附有一份标准 json-schema.org，各种服务器编程语言都对标准进行了实现，如 go、java、php 等。
以下是校验用户信息的一个 Schema 示例:
{
“$schema”: “http://json-schema.org/draft-04/schema#”,
“title”: “User”,
“description”: “ 用户信息 ”,
“type”: “object”,
“properties”: {
"id": {
"description": "用户 ID",
"type": "integer"
},
"name": {
"description": "用户姓名",
"type": "string"
},
"email": {
"description": "用户邮箱",
"type": "string",
"format": "email",
"maxLength": 20
},
"mobilePhone": {
"description": "用户手机号",
"type": "string",
"pattern": "^(?:(?:\+|00)86)?1[3-9]\d{9}$",
"maxLength": 15
}},
“required”: [“id”, “mobilePhone”]
}
复制代码
对于简单的数据类型校验，JSON Schema 内置了以下 Format，方便快捷校验
Dates and times
Email addresses
Hostnames
IP Addresses
Resource identifiers
URI template
JSON Pointer
Regular Expressions
值得一提的是 Node 中号称最快的框架 fastify 内置 JSON Schema 实现输出 (Request) 输入 (Response) 数据的类型校验。
在前端中能够应用 react-jsonschema-form 通过 JSON Schema 进行数据校验，而在后端对于 JSON Schema 的工具更是不可胜数，比方 nodejs 的 ajv。
JSON Schema 在 API 自动化测试中的利用: Postman
在进行写操作时，为了避免数据库进入脏数据须要进行数据校验。
而在进行读操作时，为了测验 API 接口的正确性，个别也会以 JSON Schema 进行校验。
在 postman 的 Tests 面板以写脚本的形式通过 JSON Schema 进行校验。而它应用 tv4 校验 JSON Schema。
pm.response.json() 用以获取 Response Body
tv4.validate(jsonData, schema) 用以校验 JSON Schema
更敌对的 JSON Schema 可视化校验: ApiFox
在 postman 中，能够通过 JSON Schema 进行数据校验，然而一个毛病是依然写脚本。
如果把 JSON Schema 进行可视化编辑，那对于用户体验，特地是对于不喜爱写脚本的同学，岂不是进步了一大截。
比方在 ApiFox，一款国人开发的接口调试利器，通过可视化编辑校验规定来进行数据校验，当然它也能够通过写脚本来进行测试。
最初
如果你感觉此文对你有一丁点帮忙，点个赞。或者能够退出我的开发交换群：1025263163 互相学习，咱们会有业余的技术答疑解惑
如果你感觉这篇文章对你有点用的话，麻烦请给咱们的开源我的项目点点 star: https://gitee.com/ZhongBangKeJi 不胜感激！
PHP 学习手册：https://doc.crmeb.com
技术交换论坛：https://q.crmeb.com
