前端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: 5364name:'张三',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的接口分享性能，接口分享有两种类型：公开和公有，公开的不须要明码，公有的须要明码，他人就能够通过你分享的链接查看你的接口信息

写在最初

Apifox除了mock数据这个性能外，还有很多能够晋升开发效率的性能，在这里就不一一列进去，Apifox是收费的软件，感兴趣的同学能够去官网下载下来亲自去体验一下，感触它的弱小之处。