用上这个Mock神器，让你的开发爽上天！

~ 前端的痛苦

作为前端，最痛苦的是什么时候？

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

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

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

每个迭代都是一场折磨。

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

黎明的希望

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

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

就是这个??

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

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

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

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

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

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

好，接下来我要发功了。

第一层：智能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出什么数据来？好，这就是ApifoxMock功能的第二层：自定义智能Mock规则。

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

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

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

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

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

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

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

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

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

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

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

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

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

第四层：接口级自定义Mock

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

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

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

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

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

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

一次Mock，终身享受。

第五层：高级Mock

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

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

好吧，Apifoxmock的第五层就是为你准备的。

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

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

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

之后，我发送的请求参数是1的时候，就返回一个在售的宠物信息；2返回一个已售的；3返回一个“404notfound”，4返回一个“InvalidParam”。

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

第六层：高级Mock模板语法

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

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

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

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

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

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

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

你说！是不是有我（加上Apifox）就够了！还要后端做什么！

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

还有？？？

这是最新的Apifox2.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状态码等，甚至响应的延时都可以自定义。

你就说牛不牛吧！

赶紧去下载吧

ApifoxMock功能的七层天梯，打完收功。

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

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

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

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

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

官网地址：www.apifox.cn

原文：https://juejin.cn/post/7094892335841935374

---

回民区18059279635： 微信小程序 如何使用mock 点击获取短信验证码 - ？
种所伯基： 初学者: 如果你是一个刚刚开始写小程序的学习者,又苦于没有api拿来用,那么mock可以帮助你快速建立模拟数据,用于学习 开发者: 如果你的公司或者组织正在开发小程序,可是后台还没有能够提供给你调用接口,但是数据格式已经确定好,那么求人不如求己,自己先通过mock来模拟相关接口数据,先行一步.

回民区18059279635： 如何用mockplus设计网页 - ？
种所伯基： 1 首先我们需要安装mockplus的客户端,其实在Web也可以制作,不过客户端方便一下.然后点击进入,可以选择新建一个项目,也可以看他的一些例子学习一下别人的设计2 新建之后,会进入一个选择界面,上面是各种型号的选择,手机还是...

回民区18059279635： 如何使用Spring + EasyMock做Java单元测试 - ？
种所伯基： 单元测试和集成测试在我们的软件开发整个流程中占有举足轻重的地位,一方面,程序员通过编写单元测试来验证自己程序的有效性,另外一方面,管理者通过持续自动的执行单元测试和分析单元测试的覆盖率等来确保软件本身的质量.这里,...

回民区18059279635： 软件原型设计工具有哪些 - ？
种所伯基： 原型设计工具目前有比较多,但是相对来说实用并且便宜的就很少了.AXure确实很强大,但是价格也相对很贵,$589一年,不是谁都可以承受的.推荐国产的原型设计工具Mockplus,简洁高效,快速上手.协同审阅功能没有了制作PPT,特例开会等环节,节省了大量时间.直接邀请审阅就能标注图钉参与原型修改.

回民区18059279635： 如何用Mockplus来画简易网页版原型图 - ？
种所伯基： 打开Mockplus这个软件,点击新建项目,选择你需要用的页面模式,如:手机、平板、网页等,选择好就可以进行原型图的绘制了.2 首先,在画之前引入眼帘的是Mockplus的工具栏,有组件、交互、扩展、布局、移动、静态、批注等功能;...

回民区18059279635： 5g天天刷是无毒无害吗? - ？
种所伯基： 天天5g天天刷绿色免费是无毒无害吗g手机套餐包含了更多流量,上网速度更快体验爽,绿色,达到4G的十倍,5g手机很好用.g覆盖蓝色绿色区别大.根据查询相关资料信息显示,绿色的点位是已开通的...

回民区18059279635： 如何在vue中使用mock的数据渲染table表格 - ？
种所伯基： 对vue.js单文件进行测试,可以写一个 test component 然后把你要测的 component 挂到这个 test component 上 然后写一堆 mock

回民区18059279635： 如何用mockito+spring进行单元测试 - ？
种所伯基： 它分成以下几个步骤:建立mock; 将mock和待测试的对象连接起来; 在mock上设置预期的返回值; 开启replay模式,准备记录实际发生的调用; 进行测试; 验证测试结果,调用顺序是否正确,返回值是否符合期望;

回民区18059279635： mock gps需要root吗 - ？
种所伯基： 明确的告诉你,这个软件不需要root就可使用,我专门下载了试了下,没有要获取root权限的提示,楼主喜欢就大胆的下载使用吧,不过这个软件好像是英文的有点纠结,希望对你有所帮助!

回民区18059279635： Mockplus这个原型图设计工具是不是免费的?有单机版吗?谢了先. - ？
种所伯基： 是免费的,没有单机版.