当前位置: 首页 > Web前端 > vue.js

前后端数据验证、接口测试,用JSONSchema,没有什么是我做不到的!

时间:2023-03-31 14:47:22 vue.js

某天,产品来了一个新需求:山月,你在数据库中为用户填写用户名,用户邮箱,用户手机号,手机号为必填项。这样一个前后端分工的表单需求如何完成呢?可以看看前后端协同的经典工作流模式:前端表单设计->客户端验证数据(更人性化的提示)->API请求->服务端验证数据(更强大的逻辑)->数据库我们从整个工作流程的数据验证的角度来看待这个问题,以避免在数据库中出现脏数据。根据产品需求,我们总结了几个验证需求。姓名必须为字符串邮箱必须为邮箱格式手机号码必须为手机号码格式手机号为必填项,其他为可选项以下为交互数据示例{id:10086,name:'shanyue',mobilePhone:'18367891234',email:'me@shanyue.tech'}复制代码客户端数据校验是在客户端进行的,为了更人性化的用户体验设计,有两个因素需要考虑,当用户校验出错时,还有一个比较好的提醒副本会提前预警,节省服务器资源。使用一段JSX伪代码进行数据验证constmobilePhoneRegexp=/^(?:(?:+|00)86)?1[3-9]\d{9}$/constform=

copycode大家都知道,前端数据校验是为了防君子防小人。属于想绕过就可以绕过的类型。而真正的数据校验是在服务端!服务端数据校验由于业务逻辑繁重,需要处理的数据繁多,后端被分成了多个层级,其中一层称为Controller,它站在后端的最顶端,直接接收后端传来的数据客户端通过HTTP。由于Controller层是服务端与客户端数据交互的最顶层,秉承FailFast原则,肩负着数据过滤器的作用,直接将非法数据送回,就像秦琼和尉迟恭的门一样神。看一段后端校验数据的伪代码constmobilePhoneRegexp=/^(?:(?:+|00)86)?1[3-9]\d{9}$/constschema=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),})复制代码统一验证逻辑:JSONSchema从上面前后端验证的伪代码可以看出可以看出,虽然两者的校验规则相同,但是写法却大相径庭。有没有一个统一的Schema,可以同时用于前端和后端。是的,这就是JSONSchema。JSONSchema是基于JSON的数据验证格式,附有一个规范json-schema.org。各种服务器编程语言都实现了规范,如go、java、php等。以下是验证用户信息的Schema示例:{"$schema":"http://json-schema.org/draft-04/schema#","title":"User","description":"UserInformation","type":"object","properties":{"id":{"description":"UserID","type":"integer"},"name":{"description":"User名称","type":"string"},"email":{"description":"UserEmail","type":"string","format":"email","maxLength":20},"mobilePhone":{"description":"用户电话号码","type":"string","pattern":"^(?:(?:\+|00)86)?1[3-9]\d{9}$","maxLength":15}},"required":["id","mobilePhone"]}复制代码对于复杂的数据类型校验,JSONSchema内置了如下格式,方便快捷快速验证DatesandtimesEmailaddressesHostnamesIPAddressesResourceidentifiersURItemplateJSONPointerRegularExpressions值得一提的是,Node中最快的框架fastify内置了JSONSchema来实现输入(Request)和输出(Response)数据的类型验证。前端可以使用react-jsonschema-form通过JSONSchema进行数据校验,后端关于JSONSchema的工具数不胜数,比如nodejs的ajv。JSONSchema在API自动化测试中的应用:Postman需要进行数据校验,以防止数据库在执行写操作时输入脏数据。在进行读取操作时,为了验证API接口的正确性,一般会使用JSONSchema进行验证。通过编写脚本在Postman的测试面板中通过JSONSchema进行验证。相反,它使用tv4来验证JSON模式。pm.response.json()用于获取ResponseBodytv4.validate(jsonData,schema)用于验证JSONSchema。更友好的JSONSchema可视化验证:ApiFox可以在postman中通过JSONSchema进行数据验证,但是缺点还是要写脚本。如果JSONSchema是可视化编辑的,那岂不是提高了用户体验,尤其是对于不喜欢写脚本的同学?比如在国人开发的接口调试工具ApiFox中,通过可视化编辑校验规则来进行数据校验。当然也可以通过写脚本的方式来测试。最后,如果您觉得这篇文章对您有点帮助,请点个赞。或者可以加入我的开发交流群:1025263163互相学习,我们会有专业的技术解答。如果您觉得这篇文章对您有用,请给我们的开源项目一个小星星:https://gitee。com/中邦科技非常感谢!PHP学习手册:https://doc.crmeb.com技术交流论坛:https://q.crmeb.com