一站式接口工具，真香！一站式接口工具，真香！

前端mock数据的尴尬作为前端开发，拿到产品的需求，和后端讨论接口和数据结构的定义后，就可以开始前端的开发工作了，但后端一般无法在很短的时间内把接口开发完成，提供给前端使用，前端为了在开发过程中模拟真实的接口请求，往往需要自己去实现接口mock数据。mock数据是一件很麻烦的事，虽然有现成的mock库可以使用，生成mock数据，但是需要学习mock语法，学习成本高，花费时间多，大大降低开发效率，尽管之前在网络上尝试过很多接口mock平台，但大部分都是界面简陋，缺少可视化的界面，同样需要学习mock语法，花费的时间和精力依然没有减少，每次使用这些平台和工具都会有一种抗拒心理.....
后来偶然间在网上发现了Apifox这个工具，一开始觉得和之前用过的接口mock平台差不多，抱着试试看的心态安装了这个软件，在使用过程中发现它的mock功能非常简单好用，慢慢喜欢上了这款软件。卧槽.png 原来mock数据可以如此简单，真的不得不佩服Apifox产品的思维，把日常开发遇到的痛点通过一个软件解决了，让程序员可以专注开发工作，大大地提升了开发效率，接下来分享一下我是如何使用Apifox这个软件的mock功能。
首先要去Apifox官网https://www.apifox.cn下载软件，你会发现这是一个国产中文软件，而且是跨平台的，支持widnow、macos和linux三个平台。
找到自己电脑平台对应的软件，然后下载安装，第一次使用需要注册，注册完成登陆进去就可以愉快的使用了。
新建团队和项目新建一个团队，例如新建一个【小猪快跑】的团队，团队可以邀请人员，但目前只是自己使用，不需要邀请其他人，然后点击新建项目按钮，新建一个【个人项目】，进入【个人项目】里面，可以看见软件的主界面

文章图片

文章图片

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

文章图片

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

id: 5364 name:'张三', age: 25, gender: 'man', phone: '19856281845', avatar: 'http://example.com/xxx.png',

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

1.新建接口鼠标移到?按钮上面就会有一个下拉菜单，选择新建接口新建接口空白接口

文章图片

2.填写基本信息在空白接口页填写接口的基本信息路径：/getUserInfo 请求方法：GET（通过下拉选择选中需要的请求方法）名称：获取用户信息分组：根目录（不想放在根目录，可以自己新建分组）状态：开发中（有多种接口状态供选择，根据自己的需求选择）标签：用于筛选器筛选接口，可以自由填写，这里就填用户说明：描述接口的功能服务：请求的地址，可以使用默认设置1.填写请求参数信息请求参数有四种不同的类型：Params、Body、Header和Cookie，开发者根据请求的类型来填写，目前getUserInfo接口只需要Params参数，参数名是id、必填、示例值是1234，如果接口有其他请求头信息，可以在Header Tab里面填写请求header的参数参数信息

文章图片

2.填写返回response 填写完请求的参数以后，如果想要返回mock数据，就要填写返回的response，那如何去实现数据mock功能呢？在返回response这一模块，在成功200 Tab的面板下面填写mock配置，填写信息如下：

文章图片

响应mock.png 在mock输入框输入@ 符号就会自动列出mock选项，在输入时会根据输入的内容筛选合适的mock语句，非常的人性化，简直是mock小白的福音，如果想要查看更详细的mock操作，可以看官方文档www.apifox.cn/help/app/mock/mock-rules/，里面列出很多mock例子，把需要的mock语句复制过来就可以使用了，完成后点击右上角的保存按钮。

3.运行接口接下来就是运行接口，看一看能不能得到我们想要的mock数据，先选择环境，选中Mock服务

文章图片

选择环境点击运行按钮跳转到运行tab

文章图片

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

文章图片

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

文章图片

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

文章图片

网页结果 mock服务器是在本地电脑上运行，其他连接到同一局域网的设备可以通过访问电脑的ip请求/getUserInfo接口获取mock数据
分享接口当你成功新建了一个接口，想分享给别人，就可以使用Apifox的接口分享功能，接口分享有两种类型：公开和私有，公开的不需要密码，私有的需要密码，别人就可以通过你分享的链接查看你的接口信息