前端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的接口分享功能,接口分享有两种类型:公开和私有,公开的不需要密码,私有的需要密码,别人就可以通过你分享的链接查看你的接口信息
写在最后
Apifox除了mock数据这个功能外,还有很多可以提升开发效率的功能,在这里就不一一列出来,Apifox是免费的软件,感兴趣的同学可以去官网下载下来亲自去体验一下,感受它的强大之处。