共计 5042 个字符,预计需要花费 13 分钟才能阅读完成。
前端的苦楚
作为前端,最苦楚的是什么时候?
每个迭代,需要文档跟设计稿都进去了,动态页面唰唰两天就做完了。可是做前端又不是简略地把后端吐出来的数据放到页面上就完了,还有各种前端解决逻辑啊。
后端接口还没进去,我就得边写代码边测前端成果,又没有实在数据。有人倡议用 Mock 工具,可是每个接口都要本人写 Mock 规定,这得节约多少工夫呀。
等到后端好不容易把接口写进去了,一对接联调,好多字段的数据又跟我 Mock 的数据对不上,又得从新改代码。
每个迭代都是一场折磨。
就是那种,明明晓得这个中央整个团队都能够更有效率,但偏偏就是做不到的 无力感。
拂晓的心愿
直到有一天,我遇到这个神器。我的效率晋升了 100%。
我能够用最省力最优雅的形式失去我须要的 Mock 数据,甚至不须要任何配置。而且,联调时候已经遇到的各种令人解体的前后端数据对接问题,通通不!见!了!
就是这个⬇️
我钻研了整整一周,越钻研越是心惊。这个工具太强大,齐全超出我的预期,就如《倚天屠龙记》里张无忌修炼的乾坤大挪移,练完一层,下面还有一层,每一层都是一片全新的天地。
我已经认为,定接口什么的你们后端定就行了,跟我前端有什么关系。定好了吐数据给我就行了。
我已经认为,写接口文档什么的齐全是浪费时间,边写代码边改接口不好嘛。
直到我遇到这个神器,我才明确好的工作习惯能给我晋升多少效率。
当初的我曾经不一样了。我认为这款神器可能把全中国前端程序员的工作效率都晋升一倍。我也心愿在读这篇文章的你,可能好好把这款工具用起来。
以下还有 3000 字,浏览时长 5~10 分钟。如果你嫌读文字太麻烦,这里也有个视频,内容是一样的。
【这里插入小程序
小程序名称:哔哩哔哩
小程序门路:pages/video/video.html?__preload_=16488646759191&__key_=16488646759192&avid=382574576
展现形式:小程序卡片
卡片题目:Apifox Mock 性能全解析
卡片头图:同文章头图】
好,接下来我要发功了。
第一层:智能 Mock
Apifox 是个 API 合作工具,用它来做 Mock 数据的根底也是 API 文档。在 Apifox 里保护的 API 能够生成难看的在线接口文档,也能够像 Postman 那样一键调试,像 JMeter 那样做测试,还能够间接 Mock 数据。不过明天咱们只聊 Mock。
首先,你须要在 Apifox 外面创立一个接口,定义好 申请参数
和返回数据结构
。
好了,保留。实现!
……………………
等会儿?Mock 呢?怎么就实现了?Mock 规定在哪儿写?
真的就实现了。
Apifox 会主动启动一个本地的 Mock 服务,我复制一下 Apifox 主动生成的 Mock 地址,用浏览器关上看下成果。
就是这么简略!就是这么不便!
什么!都不须要!配置!
其实咱们遇到的大部分 API 返回数据都是通用的,用户名、手机号、地址、邮箱、工夫戳,等等等等。然而你要去写 Mock 规定就很麻烦。你要怎么生成一个看起来正当的中国人名?
在 Apifox 外面,这变成了最简略的事件,甚至是齐全无感的。只有写 API 文档的时候把返回的 数据结构 定义好,这个事件就实现了。Apifox 会依据 字段名称 智能生成 Mock 数据,不须要任何配置。
如接口返回的数据结构里某个字段名称叫 username
就会失去“程敏”“王宁”“安慕希 ”“ 李玛璧”。
字段名称叫phone
,就会失去15237829132
、18907284633
。
字段名称叫 city
,就会失去 杭州市
、 高雄市
、 博尔塔拉蒙古自治州
。
甚至如果你的字段名称叫 icon
,就会返回一个 图片 URL
,关上就真的是一张 png 图片!
如果你们团队应用的是 Swagger 等其余工具治理 API 文档,也能够导入到 Apifox(Apifox 反对 20 多种格局数据导入,还能够设置 定时主动导入 ),一样能够应用这个智能 Mock,一样是 零配置 主动生成所有 Mock 数据。
齐全不必操心任何 Mock 数据配置的问题,只有接口定好了,Mock 数据就有了,我什么前端代码都能写。
第二层:自定义智能 Mock 规定
有的同学问,你这个都是预设死的吧?我怎么晓得写什么参数名称你会给我 Mock 出什么数据来?好,这就是 Apifox Mock 性能的第二层:自定义智能 Mock 规定。
在 Apifox 外面内置了一整套 Mock 规定,当咱们的返回字段名匹配上了其中的某条规定,就会依据对应规定生成随机值(Mock.js 语法规定)。
字段名称的匹配形式反对通配符和正则表达式,比方字段只有以“url”结尾,就会失去一个正确的网址;以“mail”打头,就会失去一个邮箱地址。
要是以“time”结尾,那还会主动依据字段的数据类型来 Mock 值:string 类型的话就返回一个 ‘yyyy-mm-dd hh:mm:ss’ 格局工夫;integer 类型的话就返回一个工夫戳。是不是很智能?!
有内置规定,当然就能够自定义新规定。
比方咱们公司的订单 id 是以“DD”打头的十位数字,我就能够新建一个 string 类型的规定,匹配规定写“*orderid”,mock 规定写一个正则表达式:@regexp(/DD\d{10}/)。这样,只有我任何一个接口返回字段是以“orderid”结尾,都会失去一个“DD1284918414”这样的返回值。
第三层:返回字段高级设置
有的同学说,你这个是比拟通用的数据类型,可我还有很多没那么通用的类型,比方宠物店上架的宠物,有三种状态:可售、已售、待上架,要怎么 Mock 进去?
在 Apifox 外面,定义接口返回数据结构的时候每个字段都有一个“高级设置”的概念。比方我宠物的上架状态还能够定义为枚举,枚举可选值为(“available”,“sold”,“pending”)。如果接口这样定义了,那么 Mock 就会主动从这三个字符串里取值。
这个字段高级设置里不止有枚举,还能够设置长度范畴、正则规定等。如果字段类型是数字,还能够设置最大值最小值等。
如果你对 JSON Schema 比拟熟的话,也能够间接写 Schema,那可定义空间就更大了。
而且咱们要留神:这个时候咱们设的其实不是 Mock 规定,而是接口返回值的数据结构定义,这个是会对接口调试的 主动校验 性能失效的,如果后端接口返回的数据不合乎这里的设置,Apifox 会返回一个“数据结构校验失败”,就通知后端你接口返回数据结构不对。
而咱们的 Mock 数据也是依据这里的设置主动生成,不须要任何额定配置。
爽不爽,能够间接甩一张截图去怼后端了。
第四层:接口级自定义 Mock
有的同学说,那我还有一种场景,比方我这个用户名字段,数据定义里其实是容许他输出任意字符串的,可是我 Mock 是须要一个实在姓名的,不能靠字段定义啊。
而且,你方才演示的都是中国人名,我的客户都是欧美人怎么办。
啊,终于要针对特定接口设置一点点规定了。
在 Apifox 里,给接口定义数据结构的时候是能够给每个字段设置 Mock 规定的,而且间接就能够选一系列的罕用 Mock 规定,常见的各种数据类型其实都齐全了。比方我须要一个外文人名,我就能够在这里写 @name,运行一下就会失去“Larry Smith”“Susan Lee”这样的英文名。
如果后面说的智能 Mock 满足不了你,在这里设置规定就能够笼罩掉内置规定。这里反对 Mock.js 和正则表达式,只有你能想到的规定,全都 Mock 得进去。
而且 Apifox 反对 数据模型(Schema) 定义,不同的接口能够复用雷同的数据模型,模型里定义的规定在所有援用它的接口里都会失效,不须要任何额定的配置。
一次 Mock,一生享受。
第五层:高级 Mock
还有那么一些同学,他们说,心愿能让我本人定义:依据不同的参数值,返回不同的数据。
比方我申请的参数 宠物 ID
为 1
就返回一个在售的宠物数据,如果 宠物 ID
为 2
就返回一个已售的宠物数据。我前端能够把几种状态的页面都做进去。
好吧,Apifox mock 的第五层就是为你筹备的。
在 Apifox 的“接口治理”有一个“高级 Mock”标签页。在这里咱们能够增加“冀望”。
一个冀望就是指当你的申请蕴含某个参数值的时候,就返回特定的数据。
比方我设定我的 1
号宠物是在售的,2
号宠物是已售出的,3
号宠物是记录不存在的,DDD 号宠物是“ID 格局不正确”的。我把这些返回值都设好。
之后,我发送的申请参数是 1
的时候,就返回一个在售的宠物信息;2
返回一个已售的;3
返回一个“404 not found”,4
返回一个“Invalid Param”。
啊,几乎能模仿进去一个后端服务器了!
第六层:高级 Mock 模板语法
你感觉这个 Mock 性能曾经十分弱小了是吧。我最结尾提了张无忌,你晓得张无忌的乾坤大挪移总共有几层吗?
咱们进入高级 Mock 写冀望的时候,鼠标放在这个反对“Mock.js 语法”上会浮进去一段示例。
这个示例是讲什么的呢?咱们能够在 Apifox 外面理论运行一下试试。
它生成了一个 JSON 格局的数组!
总共有 20 组 id 和名字,比方你在前端要生成一个填满数据的二维表格,一次就能 Mock 一整套!只须要短短几行代码!
咱们回来看这个语法示例,失常的 JSON 外面插入了大括号百分号包裹的两段“for”代码,它就是 JS 模板语法(Nunjucks 语法),能够应用它来生成简单的数据结构!
岂但反对 for 循环!还反对 if 分支!还反对正则表达式!还反对调用函数!
你说!是不是有我(加上 Apifox)就够了!还要后端做什么!
第七层:高级 Mock 自定义脚本
还有???
这是最新的 Apifox 2.1.7 才有的弱小性能。
新版本的高级 Mock 减少了一个“脚本”的 Tab,这个高级 Mock 自定义脚本是做什么用的呢?
咱们来思考一个理论的案例。我有一个“查问宠物列表”的 GET 接口,它的申请参数是 page 和 pageSize,取值是 6 和 10,含意就是我要查宠物列表的第 6 页,每页限定 10 条记录。这是个很常见的翻页场景。
返回数据首先是一个数组,每一条是我查出来的这一页的一个宠物。上面还有一个 page 和 total,也就是以后页码和总计多少条记录。申请一下,返回的 Mock 数据就是一系列的宠物信息。
到上面的 page 字段,呈现问题了:我申请的明明申请的是第 6 页的数据,你给我返回 page 是第 10 页算什么意思。
再翻翻页,新的问题又呈现了:方才还是总共 25 页呢,我一翻页就变成总共 40 页了???而且第 10 页的下一页是 22 页?
我心愿 Mock 进去的数据是什么样的呢?应该是我申请的是第几页,返回来的数据就是第几页;而后总页数应该是固定的,不会因为我翻前翻后就变。
这时候咱们就须要高级 Mock 的自定义脚本了。
在自定义脚本界面的右侧有一段示例代码,咱们认真读一下。
- 通过
fox.mockResponse.json()
获取零碎主动生成的 JSON 数据,赋值给变量 responseJson。 - 通过
fox.mockRequest.getParam('page')
获取理论申请参数 page,赋值给变量 responseJson 里的 page 字段。 - 把 responseJson 的 total 字段重写为 120。
- 通过
fox.mockResponse.setBody(responseJson)
把批改后的变量 responseJson 设置到的 mockResponse 外面,这样就批改了零碎返回的 JSON 数据。
这样,我申请的是第几页,返回的就也是对应的第几页,而后总页数是放弃 12 不变(120 除以每页 10 个)。
这个自定义脚本就能够做很多事件了,比方我须要依据用户的性别是男是女 Mock 出返回的不同头像;或者先 Mock 出出生日期,而后用出生日期拼装成对应的身份证号等等,能够让咱们 Mock 进去的数据彼此吻合。
自定义脚本能够操作的对象就是这个 fox.mockRequest
和 fox.mockResponse
,能够获取申请参数、Header、Cookie,批改响应 Body、HTTP 状态码等,甚至响应的延时都能够自定义。
你就说牛不牛吧!
连忙去下载吧
Apifox Mock 性能的七层天梯,打完收功。
如果你是个前端,并且读到了这里,我感觉你应该鼓一下掌。
Apifox 的 Mock 性能齐全值得你去下载。www.Apifox.cn
其余的 API 和 Mock 工具你全都能够扔掉了。
记得要下载 Apifox
桌面版应用,WEB 版目前还不反对 Mock 性能。
最初揭示一下,Mock 只是 Apifox 的性能中的一小部分。Apifox = Postman + Swagger + Mock + Jmeter,它的性能远不止这篇文章里的这些。