前端的痛作为一个前端，什么时候最痛？每次迭代发布需求文档和设计稿，两天完成静态页面。但是做前端并不是简单的把后端吐出来的数据放到页面上。还有各种前端处理逻辑。在后台接口出来之前，我不得不边写代码边测试前端效果，没有真实的数据。有人建议使用Mock工具，但是每个接口都要自己写Mock规则，很浪费时间。后端终于把接口写出来了，一对一联调，很多字段的数据和我Mock的数据不匹配，又得改代码。每一次迭代都是一种折磨。就是那种明明知道整个团队在这个地方可以更有效率，却就是做不到的无力感。黎明的希望直到有一天，我遇到了这个神器。我的工作效率提高了100%。无需任何配置，我就可以以最轻松优雅的方式获取我需要的模拟数据。而且联调时遇到的各种崩溃的前后端数据对接问题统统没有了！看！向上！就这样??研究了整整一周，越研究越害怕。这个工具太强大了，完全超出了我的预期。就像《倚天屠龙记》里张无忌的乾坤大挪移，修炼一层之后，再往上一层，每一层都是一个全新的世界。以前一直以为设置接口什么的，就可以设置后端了，和我前端没关系。搞定了，直接把数据吐给我。以前觉得写接口文档很浪费时间，一边写代码一边修改接口也不好。直到遇到这个神器，我才意识到更好的工作习惯能提高我的效率。我现在不一样了。我觉得这款神器可以让所有中国前端程序员的工作效率翻倍。也希望正在阅读本文的你能用好这个工具。下面还有3000字，阅读时间5-10分钟。如果觉得看文字太麻烦，这里也有视频，内容是一样的。[这里插入小程序名称：哔哩哔哩小程序路径：pages/video/video.html?__preload_=16488646759191&__key_=16488646759192&avid=382574576展示方式：小程序卡片卡片标题：ApifoxMock功能全解析卡片头图：同作为文章的标题图片]好的，接下来我要进行练习。第一层：SmartMockApifox是一个API协作工具，用它来制作mock数据的基础也是API文档。Apifox维护的API可以生成漂亮的在线接口文档，像Postman一样一键调试，像JMeter一样测试，直接mock数据。不过今天我们只讲Mock。首先需要在Apifox中创建接口，定义请求参数和返回数据结构。好的，保存它。结束！……………………等一下？嘲笑呢？它是如何完成的？模拟规则写在哪里？真的完成了。Apifox将自动启动本地模拟服务。我把Apifox自动生成的mock地址复制过来，用浏览器打开看看效果。就这么简单！就是这么方便！什么！不需要！配置！事实上，我们遇到的API返回数据大部分都是通用的，比如用户名、手机号、地址、邮箱、时间戳等等。但是你写Mock规则很麻烦。如何起一个看起来合理的中文名字？在Apifox中，这成为最简单的事情，甚至完全没有意义。只要在写API文档的时候定义好返回的数据结构，这件事就完成了。Apifox会根据字段名智能生成Mock数据，无需任何配置。比如接口返回的数据结构中某个字段的名字是username，你会得到“程敏”、“王宁”、“安木希”、“李玛碧”。如果字段名是电话，你会得到15237829132和18907284633。如果字段名是城市，你会得到杭州市、高雄市和博尔塔拉蒙古自治州。即使你的字段名是icon，它也会返回一个图片url，打开后真的是png图片！如果你的团队使用Swagger等其他工具管理API文档，也可以导入到Apifox中（Apifox支持20多种格式的数据导入，还可以设置定时自动导入），也可以使用这个smartmock，这也是零配置自动生成的所有模拟数据。我完全不用操心任何Mock数据的配置，只要设置接口，Mock数据就在，我可以写任何前端代码。第二层：CustomSmartMockRules有同学问，你们都预设死了吧？我怎么知道要写什么参数名以及你会为我模拟什么数据？嗯，这就是ApifoxMock功能的第二层：自定义智能mock规则。Apifox内置了一整套Mock规则。当我们的返回字段名匹配其中一条规则时，就会根据对应的规则（Mock.js语法规则）生成随机值。字段名的匹配方式支持通配符和正则表达式。例如，只要一个字段以“url”结尾，就会得到一个正确的URL；如果它以“mail”开头，将获得一个电子邮件地址。如果以"time"结尾，会自动根据字段的数据类型mock该值：如果是string类型，会返回一个时间，格式为'yyyy-mm-ddhh:mm:ss';如果它是一个整数类型，它将返回一个时间戳。它聪明吗？！有内置规则，当然您可以自定义新规则。比如我们公司的订单id是以“DD”开头的十位数字，我可以新建一个string类型的规则，匹配规则写“*orderid”，mock规则写正则表达式：@regexp(/DD\d{10}/)。这样，只要我的接口返回字段中有一个以“orderid”结尾的，我就会得到一个类似“DD1284918414”的返回值。第三层：返回字段的高级设置。有同学说你的数据类型比较常见，但是我还有很多不常见的类型。比如宠物店上架的宠物有三种状态：available、sold、准备上架时如何mockout？在Apifox中，定义接口返回的数据结构时，每个字段都有一个“高级设置”的概念。比如我的宠物的listing状态也可以定义为一个枚举，枚举的可选值有（“available”，“sold”，“pending”）。如果这样定义接口，Mock会自动从这三个字符串中取值。该字段的高级设置中不仅有枚举，还可以设置长度范围、正则等。如果字段类型是数字，还可以设置最大值和最小值等。如果熟悉JSONSchema，也可以直接写Schema，定义空间会更大。而且要注意：我们此时设置的其实不是Mock规则，而是接口返回值的数据结构定义。这将对接口调试的自动验证功能生效。如果后端接口返回的数据不符合这个设置，Apifox会返回一个“数据结构验证失败”，告诉后端你的接口返回的数据结构是不正确的。而我们的Mock数据也是根据这里的设置自动生成的，不需要额外的配置。很酷，您可以直接截图并转到后台。第四层：接口级自定义Mock有同学说我还有一个场景，比如我的用户名字段，数据定义其实是让他输入任意字符串，但是我的Mock需要实名，不能依赖字段定义啊。而且你刚才演示的都是中文名字，客户都是欧美人怎么办。啊，终于对特定接口设置了一点规则。在Apifox中，在为接口定义数据结构时，可以为每个字段设置Mock规则，可以直接选择一系列常用的Mock规则，所有常用的数据类型其实都很齐全。例如，如果我需要一个外国名字，我可以在这里写@name，运行它之后，我会得到像“LarrySmith”和“SusanLee”这样的英文名字。如果上面提到的smartmock不能满足你，这里设置规则可以覆盖内置规则。这里支持mock.js和正则表达式，只要是你能想到的规则，所有的规则都可以通过Mock获取。而且，Apifox支持数据模型（Schema）的定义。不同的接口可以重用相同的数据模型。模型中定义的规则将在引用它的所有接口中生效，无需任何额外配置。模拟一次，永远享受。第五层：AdvancedMock还有一些同学说希望我自己定义：根据不同的参数值返回不同的数据。比如我请求的参数petID为1，则返回一个正在销售的宠物数据，如果petID为2，则返回一个已售出的宠物数据。我的前端可以制作多种状态的页面。好吧，Apifoxmock的第五层是给你的。Apifox的“接口管理”中有一个“高级模拟”选项卡。这里我们可以加上“期望”。期望是指当你的请求中包含某个参数值时，返回特定的数据。比如我设置我的1号宠物待售，2号宠物待售，3号宠物记录不存在，DDD1号宠物“ID格式错误”。我设置了这些返回值。之后，当我发送的请求参数为1时，会返回一条宠物信息，是特价的；2会退回已售出的；3将返回“404未找到”，而4将返回“无效参数”。啊，可以模拟一个后端服务器！第六层：高级Mock模板语法是不是觉得这个Mock功能已经很强大了吧？我一开始就提到了张无忌。你知道张无忌的乾坤大挪移有多少层吗？当我们进入高级Mock编写期望，当鼠标放在这个支持“Mock.js语法”上时，会出现一个示例。这个例子是关于什么的？我们实际上可以在Apifox中运行它并尝试一下。它生成一个JSON格式的数组！共有20组id和名称。比如你想在前端生成一个填满数据的二维表格，你可以一次性mock一整套！只需几行代码！让我们回顾一下这个语法示例。将用大括号和百分号包裹的两段“for”代码插入到普通JSON中。就是JS模板语法（Nunjucks语法），可以用来生成复杂的数据结构！它不仅支持循环！还支持if分支！也支持正则表达式！还支持调用函数！你说！有我（加上Apifox）就够了吗！后端还需要做什么！第7层：高级Mock自定义脚本？？？这是最新的Apifox2.1.7中才有的强大功能。新版本的AdvancedMock增加了一个“脚本”选项卡。这个AdvancedMock自定义脚本的目的是什么？让我们考虑一个实际案例。我有一个“查询宠物列表”的GET接口，它的请求参数是page和pageSize，取值为6和10，意思是我要查询宠物列表的第6页，每页限制为10个记录。这是一个非常常见的翻页场景。返回的数据首先是一个数组，每一项都是我在这个页面上找到的宠物。下面还有一个page和total，就是当前页码和总记录数。发起请求，返回的Mock数据是一系列的宠物信息。转到下面的页面字段，有一个问题：我请求的是第6页的数据，但是返回到第10页是什么意思？再次翻页，新的问题又出现了：刚才一共还是25页，一翻页就变成了40页？？？从第10页开始的下一页是第22页？我希望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，可以获取请求参数，headers，cookies，修改responsebody，HTTP状态码等，甚至可以自定义responsedelay。就说废话不废话吧！赶快下载带有ApifoxMock功能的七层梯子，收工吧。如果你是前端，读到这里，我想你应该鼓掌。Apifox的模拟功能完全值得您下载。www.Apifox.cn你可以扔掉所有其他的API和Mock工具。记得下载Apifox桌面版使用。WEB版暂不支持Mock功能。最后提醒一下，Mock只是Apifox功能的一小部分。Apifox=Postman+Swagger+Mock+Jmeter，它的功能远不止本文介绍的那么多。
