用上这个 Mock 神器,让你的开发爽上天!

liam 等级 377 0 0
标签:

前端的痛苦

作为前端,最痛苦的是什么时候?

每个迭代,需求文档跟设计稿都出来了,静态页面唰唰两天就做完了。可是做前端又不是简单地把后端吐出来的数据放到页面上就完了,还有各种前端处理逻辑啊。

后端接口还没出来,我就得边写代码边测前端效果,又没有真实数据。有人建议用 Mock 工具,可是每个接口都要自己写 Mock 规则,这得浪费多少时间呀。

等到后端好不容易把接口写出来了,一对接联调,好多字段的数据又跟我 Mock 的数据对不上,又得重新改代码。

用上这个 Mock 神器,让你的开发爽上天!

每个迭代都是一场折磨。

就是那种,明明知道这个地方整个团队都可以更有效率,但偏偏就是做不到的无力感

黎明的希望

直到有一天,我遇到这个神器。我的效率提升了 100%。

我可以用最省力最优雅的方式得到我需要的 Mock 数据,甚至不需要任何配置。而且,联调时候曾经遇到的各种令人崩溃的前后端数据对接问题,统统不!见!了!

就是这个⬇️

用上这个 Mock 神器,让你的开发爽上天!

我研究了整整一周,越研究越是心惊。这个工具太强大,完全超出我的预期,就如《倚天屠龙记》里张无忌修炼的乾坤大挪移,练完一层,上面还有一层,每一层都是一片全新的天地。

我曾经以为,定接口什么的你们后端定就行了,跟我前端有什么关系。定好了吐数据给我就行了。

我曾经以为,写接口文档什么的完全是浪费时间,边写代码边改接口不好嘛。

直到我遇到这个神器,我才明白好的工作习惯能给我提升多少效率。

现在的我已经不一样了。我认为这款神器能够把全中国前端程序员的工作效率都提升一倍。我也希望在读这篇文章的你,能够好好把这款工具用起来。

以下还有 3000 字,阅读时长 5~10 分钟。如果你嫌读文字太麻烦,这里也有个视频,内容是一样的。

好,接下来我要发功了。

用上这个 Mock 神器,让你的开发爽上天!

第一层:智能 Mock

Apifox 是个 API 协作工具,用它来做 Mock 数据的基础也是 API 文档。在 Apifox 里维护的 API 可以生成好看的在线接口文档,也可以像 Postman 那样一键调试,像 JMeter 那样做测试,还可以直接 Mock 数据。不过今天我们只聊 Mock

首先,你需要在 Apifox 里面创建一个接口,定义好请求参数返回数据结构

好了,保存。完成!

……………………

等会儿?Mock 呢?怎么就完成了?Mock 规则在哪儿写?

用上这个 Mock 神器,让你的开发爽上天!

真的就完成了。

Apifox 会自动启动一个本地的 Mock 服务,我复制一下 Apifox 自动生成的 Mock 地址,用浏览器打开看下效果。

用上这个 Mock 神器,让你的开发爽上天!

就是这么简单!就是这么方便!

什么!都不需要!配置!

用上这个 Mock 神器,让你的开发爽上天!

其实我们遇到的大部分 API 返回数据都是通用的,用户名、手机号、地址、邮箱、时间戳,等等等等。但是你要去写 Mock 规则就很麻烦。你要怎么生成一个看起来合理的中国人名?

在 Apifox 里面,这变成了最简单的事情,甚至是完全无感的。只要写 API 文档的时候把返回的数据结构定义好,这个事情就完成了。Apifox 会根据字段名称智能生成 Mock 数据,不需要任何配置

如接口返回的数据结构里某个字段名称叫username就会得到“程敏”“王宁”“安慕希”“李玛璧”。

字段名称叫phone,就会得到1523782913218907284633

字段名称叫city,就会得到杭州市高雄市博尔塔拉蒙古自治州

甚至如果你的字段名称叫icon,就会返回一个图片 URL,打开就真的是一张 png 图片!

如果你们团队使用的是 Swagger 等其他工具管理 API 文档,也可以导入到 Apifox(Apifox 支持 20 多种格式数据导入,还可以设置定时自动导入),一样可以使用这个智能 Mock,一样是零配置自动生成所有 Mock 数据。

完全不用操心任何 Mock 数据配置的问题,只要接口定好了,Mock 数据就有了,我什么前端代码都能写。

用上这个 Mock 神器,让你的开发爽上天!

第二层:自定义智能 Mock 规则

有的同学问,你这个都是预设死的吧?我怎么知道写什么参数名称你会给我 Mock 出什么数据来?好,这就是 Apifox Mock 功能的第二层:自定义智能 Mock 规则。

在 Apifox 里面内置了一整套 Mock 规则,当我们的返回字段名匹配上了其中的某条规则,就会根据对应规则生成随机值(Mock.js 语法规则)。

用上这个 Mock 神器,让你的开发爽上天!

字段名称的匹配方式支持通配符和正则表达式,比如字段只要以 “url” 结尾,就会得到一个正确的网址;以 “mail” 打头,就会得到一个邮箱地址。

要是以 “time” 结尾,那还会自动根据字段的数据类型来 Mock 值:string 类型的话就返回一个 'yyyy-mm-dd hh:mm:ss' 格式时间;integer 类型的话就返回一个时间戳。是不是很智能?!

有内置规则,当然就可以自定义新规则。

比如我们公司的订单 id 是以 “DD” 打头的十位数字,我就可以新建一个 string 类型的规则,匹配规则写 “*orderid” , mock 规则写一个正则表达式:@regexp(/DD\d{10}/)。这样,只要我任何一个接口返回字段是以 “orderid” 结尾,都会得到一个 “DD1284918414” 这样的返回值。

用上这个 Mock 神器,让你的开发爽上天!

第三层:返回字段高级设置

有的同学说,你这个是比较通用的数据类型,可我还有很多没那么通用的类型,比如宠物店上架的宠物,有三种状态:可售、已售、待上架,要怎么 Mock 出来?

在 Apifox 里面,定义接口返回数据结构的时候每个字段都有一个“高级设置”的概念。比如我宠物的上架状态还可以定义为枚举,枚举可选值为(“available”,“sold”,“pending”)。如果接口这样定义了,那么 Mock 就会自动从这三个字符串里取值。

用上这个 Mock 神器,让你的开发爽上天!

这个字段高级设置里不止有枚举,还可以设置长度范围、正则规则等。如果字段类型是数字,还可以设置最大值最小值等。

如果你对 JSON Schema 比较熟的话,也可以直接写 Schema,那可定义空间就更大了。

而且我们要注意:这个时候我们设的其实不是 Mock 规则,而是接口返回值的数据结构定义,这个是会对接口调试的自动校验功能生效的,如果后端接口返回的数据不符合这里的设置,Apifox 会返回一个“数据结构校验失败”,就告诉后端你接口返回数据结构不对。

而我们的 Mock 数据也是根据这里的设置自动生成,不需要任何额外配置。

用上这个 Mock 神器,让你的开发爽上天!

爽不爽,可以直接甩一张截图去怼后端了。

用上这个 Mock 神器,让你的开发爽上天!

第四层:接口级自定义 Mock

有的同学说,那我还有一种场景,比如我这个用户名字段,数据定义里其实是允许他输入任意字符串的,可是我 Mock 是需要一个真实姓名的,不能靠字段定义啊。

而且,你刚才演示的都是中国人名,我的客户都是欧美人怎么办。

啊,终于要针对特定接口设置一点点规则了。

用上这个 Mock 神器,让你的开发爽上天!

在 Apifox 里,给接口定义数据结构的时候是可以给每个字段设置 Mock 规则的,而且直接就可以选一系列的常用 Mock 规则,常见的各种数据类型其实都齐全了。比如我需要一个外文人名,我就可以在这里写 @name,运行一下就会得到 “Larry Smith” “Susan Lee” 这样的英文名。

如果前面说的智能 Mock 满足不了你,在这里设置规则就可以覆盖掉内置规则。这里支持 Mock.js 和正则表达式,只要你能想到的规则,全都 Mock 得出来。

用上这个 Mock 神器,让你的开发爽上天!

而且 Apifox 支持 数据模型(Schema) 定义,不同的接口可以复用相同的数据模型,模型里定义的规则在所有引用它的接口里都会生效,不需要任何额外的配置。

一次 Mock,终身享受。

用上这个 Mock 神器,让你的开发爽上天!

第五层:高级 Mock

还有那么一些同学,他们说,希望能让我自己定义:根据不同的参数值,返回不同的数据。

比如我请求的参数宠物ID1 就返回一个在售的宠物数据,如果宠物ID2 就返回一个已售的宠物数据。我前端可以把几种状态的页面都做出来。

好吧,Apifox mock 的第五层就是为你准备的。

在 Apifox 的“接口管理” 有一个 “高级 Mock” 标签页。在这里我们可以添加“期望”。

用上这个 Mock 神器,让你的开发爽上天!

一个期望就是指当你的请求包含某个参数值的时候,就返回特定的数据。

比如我设定我的1号宠物是在售的,2号宠物是已售出的,3号宠物是记录不存在的,DDD 号宠物是“ ID 格式不正确”的。我把这些返回值都设好。

之后,我发送的请求参数是1的时候,就返回一个在售的宠物信息;2返回一个已售的;3返回一个“404 not found”,4返回一个“Invalid Param”。

啊,简直能模拟出来一个后端服务器了!

用上这个 Mock 神器,让你的开发爽上天!

第六层:高级 Mock 模板语法

你觉得这个 Mock 功能已经非常强大了是吧。我最开头提了张无忌,你知道张无忌的乾坤大挪移总共有几层吗?

用上这个 Mock 神器,让你的开发爽上天!

我们进入高级 Mock 写期望的时候,鼠标放在这个支持 “Mock.js 语法”上会浮出来一段示例。

用上这个 Mock 神器,让你的开发爽上天!

这个示例是讲什么的呢?我们可以在 Apifox 里面实际运行一下试试。

用上这个 Mock 神器,让你的开发爽上天!

它生成了一个 JSON 格式的数组!

总共有 20 组 id 和名字,比如你在前端要生成一个填满数据的二维表格,一次就能 Mock 一整套!只需要短短几行代码!

我们回来看这个语法示例,正常的 JSON 里面插入了大括号百分号包裹的两段 “for” 代码,它就是 JS 模板语法(Nunjucks语法),可以使用它来生成复杂的数据结构!

不但支持 for 循环!还支持 if 分支!还支持正则表达式!还支持调用函数!

你说!是不是有我(加上 Apifox)就够了!还要后端做什么!

用上这个 Mock 神器,让你的开发爽上天!

第七层:高级 Mock 自定义脚本

还有???

这是最新的 Apifox 2.1.7 才有的强大功能。

新版本的高级 Mock 增加了一个“脚本”的 Tab,这个高级 Mock 自定义脚本是做什么用的呢?

用上这个 Mock 神器,让你的开发爽上天!

我们来考虑一个实际的案例。我有一个“查询宠物列表”的 GET 接口,它的请求参数是 page 和 pageSize,取值是 6 和 10,含义就是我要查宠物列表的第 6 页,每页限定 10 条记录。这是个很常见的翻页场景。

用上这个 Mock 神器,让你的开发爽上天!

返回数据首先是一个数组,每一条是我查出来的这一页的一个宠物。下面还有一个 page 和 total,也就是当前页码和总计多少条记录。请求一下,返回的 Mock 数据就是一系列的宠物信息。

到下面的 page 字段,出现问题了:我请求的明明请求的是第 6 页的数据,你给我返回 page 是第 10 页算什么意思。

用上这个 Mock 神器,让你的开发爽上天!

再翻翻页,新的问题又出现了:刚才还是总共 25 页呢,我一翻页就变成总共 40 页了???而且第 10 页的下一页是 22 页?

用上这个 Mock 神器,让你的开发爽上天!

我希望 Mock 出来的数据是什么样的呢?应该是我请求的是第几页,返回来的数据就是第几页;然后总页数应该是固定的,不会因为我翻前翻后就变。

这时候我们就需要高级 Mock 的自定义脚本了。

在自定义脚本界面的右侧有一段示例代码,我们仔细读一下。

用上这个 Mock 神器,让你的开发爽上天!

  1. 通过 fox.mockResponse.json() 获取系统自动生成的 JSON 数据,赋值给变量 responseJson。
  2. 通过 fox.mockRequest.getParam('page') 获取实际请求参数 page,赋值给变量 responseJson 里的 page 字段。
  3. 把 responseJson 的 total 字段重写为 120。
  4. 通过 fox.mockResponse.setBody(responseJson) 把修改后的变量 responseJson 设置到的 mockResponse 里面,这样就修改了系统返回的 JSON 数据。

这样,我请求的是第几页,返回的就也是对应的第几页,然后总页数是保持 12 不变(120 除以每页 10 个)。

用上这个 Mock 神器,让你的开发爽上天!

这个自定义脚本就可以做很多事情了,比如我需要根据用户的性别是男是女 Mock 出返回的不同头像;或者先 Mock 出出生日期,然后用出生日期拼装成对应的身份证号等等,可以让我们 Mock 出来的数据彼此吻合。

自定义脚本可以操作的对象就是这个 fox.mockRequestfox.mockResponse,可以获取请求参数、Header、Cookie,修改响应 Body、HTTP 状态码等,甚至响应的延时都可以自定义。

你就说牛不牛吧!

用上这个 Mock 神器,让你的开发爽上天!

赶紧去下载吧

Apifox Mock 功能的七层天梯,打完收功。

如果你是个前端,并且读到了这里,我觉得你应该鼓一下掌。

Apifox 的 Mock 功能完全值得你去下载。官网地址:www.apifox.cn

其他的 API 和 Mock 工具你全都可以扔掉了。

记得要下载Apifox桌面版使用,WEB 版目前还不支持 Mock 功能。

最后提醒一下,Mock 只是 Apifox 的功能中的一小部分。Apifox = Postman + Swagger + Mock + Jmeter,它的功能远不止这篇文章里的这些。

官网地址: www.apifox.cn

用上这个 Mock 神器,让你的开发爽上天!

收藏
评论区

相关推荐

mock 请求分发
首发于 <a name"vqeCn"</a 背景是这样的我们公司的后管项目走的不是 resful 风格的 api,而是走后管网关,后管网关会将请求进行分发,具体怎么分发,有这么以下几点: 请求全部走 POST 请求 URL 统一为 /agrs 数据提交方式为 application/json 数据格式大致分为: 系统报文头
defer 让你的代码更清晰
日常开发中,我们经常会编写一些类似下面示例中的代码:gofunc writeToFile(fname string, data []byte, mu sync.Mutex) error mu.Lock() f, err : os.OpenFile(fname, os.ORDWR, 0666) if err ! nil mu.Unlock() retu
如何让你的代码更优雅
前言你有没有骂过“前任”的代码?你的代码有没有被吐槽过?没有注释,命名随意,没有封装,结构混乱,一个页面几千行。。。。如何写出优雅的代码,让自己不被吐槽,让人羡慕,接下来咱就一起聊聊如何写出优雅的代码,如果大家有更好的写法和经验,欢迎在评论区留言,一起学习什么样的代码是优雅的代码咱先聊聊,什么样的代码是优雅的代码,在我看来,优雅的代码包括以下方面,首先就是代
Java单元测试神器之Mockito
**什么是 Mock 测试 ?** ----------------- Mock测试就是在测试过程中,对于某些不容易构造或者不容易获取的对象,用一个虚拟的对象来创建以便测试的测试方法。什么是不容易构造的对象呢?例如HttpServletRequest,需要在有servlet容器环境中创建获取。那不容易获取的对象呢?如一个JedisCluster,需要准备r
SOD让你的旧代码焕发青春
        最近接手了一个旧的系统,各种陈旧的问题比较多,其中最棘手的就是操作数据库的部分,具体如下:   **1、核心库是一个最后修改时间为2008年的库,先不说有多陈旧,现在这个库只是一个DLL文件,没有源码,也已经没人知道里面都实现了些啥功能,就算你怀疑数据库读写有问题,也无法验证和调试,反编译出来的源码也没法用。** **2、这个库用的是S
Hystrix——让你的服务更稳一点
**摘要**: 1、为什么要用Hystrix在分布式服务环境下,服务之间的调用关系变得错综复杂,你是否担心依赖的服务延迟导致自己的服务也被拖跨呢?是否在苦苦思考如何优雅的对依赖服务进行异步调用呢?是否希望当流量高峰时自动进行 ... ===============================================================
Mockito 简明教程
原文同步至 [http://waylau.com/mockito-quick-start/](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwaylau.com%2Fmockito-quick-start%2F) Mock 测试是单元测试的重要方法之一。本文介绍了基于 Java 语言的 M
Mockito模拟进行单元测试
### 1.1 Mockito是什么?     MOCK意思是模拟的意思,主要被用来进行数据的人工组织,不会真正地调用第三方服务器,类似redis,mysql等都不会调用,也不用关心数据底层是如何进行处理的,我们要做的只是将本单元的逻辑进行单元测试,验证数据的逻辑处理性,而其中mock较好的框架就是Mockito。     Mockito是mocking
Mock工具之Mockito实战
在实际项目中写单元测试的过程中我们会发现需要测试的类有很多依赖,这些依赖项又会有依赖,导致在单元测试代码里几乎无法完成构建,尤其是当依赖项尚未构建完成时会导致单元测试无法进行。为了解决这类问题我们引入了Mock的概念,简单的说就是模拟这些需要构建的类或者资源,提供给需要测试的对象使用。业内的Mock工具有很多,也已经很成熟了,这里我们将直接使用最流行的Moc
Mock方法介绍
**1 现有的单元测试框架** 单元测试是保证程序正确性的一种有效的测试手段,对于不同的开发语言,通常都能找到相应的单元框架。 [![](http://img1.51cto.com/attachment/201112/191839171.jpg)](https://www.oschina.net/action/GoToLink?url=http%3A%
Mock测试学习
Mock 测试就是在测试过程中,对于某些不容易构造(如 HttpServletRequest 必须在Servlet 容器中才能构造出来)或者不容易获取的比较复杂的对象(如 JDBC 中的ResultSet 对象),用一个虚拟的对象(Mock 对象)来创建以便测试的测试方法。 比如说你需要调用C服务,可是C服务还没有开发完成,那么你就可以将调用C服务的那部
PowerMock单元测试
      在[Java](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Flib.csdn.net%2Fbase%2Fjavaee)程序的单元测试中常用的mock工具有Mockito和EasyMock。但是这两种mock工具都无法实现对静态、final、私有方法或类的mock。因此有了功能强
聊聊开发日常的效率提升工具(全)
前言:日常开发中,好的工具往往能让我们事半功倍,有句老话说得好:工欲善其事,必先利其器。使用高效率的工具可以极大提升我们的开发效率。接下来分享下树酱平时开发中经常使用的一些效率工具 1 📁本地化工具篇 1.1 Apifox 官方介绍: API 文档、调试、Mock、测试一体化协作平台。Apifox Postman + Swagger + Mock + JM
聊聊前后端接口对接的那些事
前言在现在的前后端分离的项目开发中,为了不影响项目的进度,都是前后端同时进行开发。为了不影响咱们前端开发的进度,通常都是由后端同学,先提供接口文档,然后前端同学对照这接口文档来进行数据的模拟来完成前后端对接的工作。这里的数据模拟其实也就是大家平时所说的mock数据,那么前端当中有哪些方式来实现mock数据呢???…(⊙_⊙;)…咱们接着往下聊!(●^o^●)
用上这个 Mock 神器,让你的开发爽上天!
前端的痛苦作为前端,最痛苦的是什么时候?每个迭代,需求文档跟设计稿都出来了,静态页面唰唰两天就做完了。可是做前端又不是简单地把后端吐出来的数据放到页面上就完了,还有各种前端处理逻辑啊。后端接口还没出来,我就得边写代码边测前端效果,又没有真实数据。有人建议用 Mock 工具,可是每个接口都要自己写 Mock 规则,这得浪费多少时间呀。等到后端好不容易把接口写出