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

前端mock数据的尴尬

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

生无可恋.png

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

卧槽.png

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

开始装逼.png

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

非常好.png

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

新建团队和项目

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

新建团队

新建项目预览.png

新建接口

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

卡片.png

界面展示的信息包括:姓名、年龄、性别、电话、邮箱和头像,假如这里的数据是通过请求接口/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的接口分享功能,接口分享有两种类型:公开和私有,公开的不需要密码,私有的需要密码,别人就可以通过你分享的链接查看你的接口信息

分享接口.png

写在最后

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值