前端mock数据的尴尬

作为前端开发，拿到产品的需求，和后端讨论接口和数据结构的定义后，就可以开始前端的开发工作了，但后端一般无法在很短的时间内把接口开发完成，提供给前端使用，前端为了在开发过程中模拟真实的接口请求，往往需要自己去实现接口mock数据。mock数据是一件很麻烦的事，虽然有现成的mock库可以使用，生成mock数据，但是需要学习mock语法，学习成本高，花费时间多，大大降低开发效率，尽管之前在网络上尝试过很多接口mock平台，但大部分都是界面简陋，缺少可视化的界面，同样需要学习mock语法，花费的时间和精力依然没有减少，每次使用这些平台和工具都会有一种抗拒心理.....

后来偶然间在网上发现了Apifox这个工具，一开始觉得和之前用过的接口mock平台差不多，抱着试试看的心态安装了这个软件，在使用过程中发现它的mock功能非常简单好用，慢慢喜欢上了这款软件。

原来mock数据可以如此简单，真的不得不佩服Apifox产品的思维，把日常开发遇到的痛点通过一个软件解决了，让程序员可以专注开发工作，大大地提升了开发效率，接下来分享一下我是如何使用Apifox这个软件的mock功能。

首先要去Apifox官网Apifox - API 文档、调试、Mock、测试一体化协作平台 - 接口文档工具，接口自动化测试工具，接口Mock工具，API文档工具，API Mock工具，API自动化测试工具下载软件，你会发现这是一个国产中文软件，而且是跨平台的，支持widnow、macos和linux三个平台。

找到自己电脑平台对应的软件，然后下载安装，第一次使用需要注册，注册完成登陆进去就可以愉快的使用了。

新建团队和项目

新建一个团队，例如新建一个【小猪快跑】的团队，团队可以邀请人员，但目前只是自己使用，不需要邀请其他人，然后点击新建项目按钮，新建一个【个人项目】，进入【个人项目】里面，可以看见软件的主界面

新建接口

如果前端开发需要开发一个界面展示用户信息，界面是酱紫的：

界面展示的信息包括：姓名、年龄、性别、电话、邮箱和头像，假如这里的数据是通过请求接口/getUserInfo得到的，那接口返回的数据结构应类似下面的代码：

{code: 200,success: true,data: {id: 5364name:'张三',age: 25,gender: 'man',phone: '19856281845',avatar: 'http://example.com/xxx.png',}
}

接口的路径和参数：/getUserInfo?id=xxxx 有了上面这些信息，前端开发就可以在Apifox上新建一个接口来模拟请求获取mock数据。

新建接口鼠标移到➕按钮上面就会有一个下拉菜单，选择新建接口
填写基本信息在空白接口页填写接口的基本信息

路径：/getUserInfo
请求方法：GET（通过下拉选择选中需要的请求方法）
名称：获取用户信息
分组：根目录（不想放在根目录，可以自己新建分组）
状态：开发中（有多种接口状态供选择，根据自己的需求选择）
标签：用于筛选器筛选接口，可以自由填写，这里就填用户
说明：描述接口的功能
服务：请求的地址，可以使用默认设置

填写请求参数信息请求参数有四种不同的类型：Params、Body、Header和Cookie，开发者根据请求的类型来填写，目前getUserInfo接口只需要Params参数，参数名是id、必填、示例值是1234，如果接口有其他请求头信息，可以在Header Tab里面填写请求header的参数
填写返回response 填写完请求的参数以后，如果想要返回mock数据，就要填写返回的response，那如何去实现数据mock功能呢？在返回response这一模块，在成功200 Tab的面板下面填写mock配置，填写信息如下：

在mock输入框输入@ 符号就会自动列出mock选项，在输入时会根据输入的内容筛选合适的mock语句，非常的人性化，简直是mock小白的福音，如果想要查看更详细的mock操作，可以看官方文档www.apifox.cn/help/app/mock/mock-rules/，里面列出很多mock例子，把需要的mock语句复制过来就可以使用了，完成后点击右上角的保存按钮。
运行接口接下来就是运行接口，看一看能不能得到我们想要的mock数据，先选择环境，选中Mock服务

点击运行按钮跳转到运行tab

然后点击发送就可以得到mock数据，观察返回的数据，和我们的预期一样，现在前端就可以调用这个接口，拿到mock数据

在接口文档界面，点击mock表格里的mock链接就会自动复制链接

把复制后的链接粘贴到在浏览器的地址栏，按下回车键，就可以看到网页显示的json数据了

mock服务器是在本地电脑上运行，其他连接到同一局域网的设备可以通过访问电脑的ip请求/getUserInfo接口获取mock数据

分享接口

当你成功新建了一个接口，想分享给别人，就可以使用Apifox的接口分享功能，接口分享有两种类型：公开和私有，公开的不需要密码，私有的需要密码，别人就可以通过你分享的链接查看你的接口信息

写在最后

Apifox除了mock数据这个功能外，还有很多可以提升开发效率的功能，在这里就不一一列出来，Apifox是免费的软件，感兴趣的同学可以去官网下载下来亲自去体验一下，感受它的强大之处。

再见postman，被这个一站式接口管理工具折服了相关推荐

ApiPost与PostMan，你可以任选一款不错的接口管理工具
我们都知道在一个团队中是由很多角色组成的,例如:业务.产品.设计.前端.后端.测试.每个角色各司其职,一起合作完成项目的交付. 而前端与后端的沟通则是需要通过一个统一的文件进行沟通交流,即通过接口文档 ...
写在国产接口管理工具ApiPost 5.2.5发布后的一些话
好多年没写文章了,突然想写些什么东西的时候,却卡顿如狗,瞬时自身的内存和CPU均红色报警,不知道从何处下笔. 遥想以前学生时代,本人还是语文老师口中的才子,曾多次向校报投稿,如今竟沦落到这个境地. 与 ...
Java后端接口自动生成神器 -- EasyYapi插件（Yapi接口管理工具在IDEA里的插件）
Java后端接口自动生成神器 – EasyYapi插件(Yapi接口管理工具在IDEA里的插件) 一.先看效果 1.生成yapi文档的效果 2.生成postman格式数据并导入接口测试类后的效果(如p ...
jenkins构建后脚本不执行_接口管理工具ApiPost-预（后）执行脚本常用方法集合
本文主要讲解接口管理工具ApiPost的预执行脚本和后执行脚本里,常见的响应参数变量和常用方法集合. ApiPost简介: ApiPost是一个支持团队协作,并可直接生成文档的API调试.管理工具.它 ...
利用ApiPost接口管理工具校验/测试API返回结果是否符合预期
本文主要讲解接口管理工具ApiPost的预执行脚本和后执行脚本里,怎么校验/测试接口返回结果是否符合预期? ApiPost简介: ApiPost是一个支持团队协作,并可直接生成文档的API调试.管理工 ...
组件分享之后端组件——阿里妈妈前端团队出品的开源接口管理工具RAP第二代rap2-delos...
组件分享之后端组件--阿里妈妈前端团队出品的开源接口管理工具RAP第二代rap2-delos 背景近期正在探索前端.后端.系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件 ...
接口管理工具Yapi禁用注册功能的配置解决方案
之前公司运维安装了一个接口管理工具yapi,是通过docker安装的,时间有点久,安装的人也没了,容器是通过镜像/anoy/yapi安装的容器.默认yapi是可以开放注册的,因为公司外网开放的,所有发 ...
【云原生之Docker实战】使用Docker部署Rap2开源接口管理工具
[云原生之Docker实战]使用Docker部署Rap2开源接口管理工具一.Rap2介绍二.检查宿主机系统版本三.检查本地docker环境 1.检查docker服务状态 2.检查docker配置 ...
接口规范文档总结、接口管理工具推荐、如何写出完美的接口
写在前面:这是我最近整理的接口规范文档,无规矩不成方圆,为了app开发人员与后台接口开发人员更好的配合,我特意整理了这么一篇文档供大家参考学习,如有意见请在评论区留言谢谢.因部分内容涉及公司代码,我对 ...

再见postman，被这个一站式接口管理工具折服了