0
点赞
收藏
分享

微信扫一扫

前端模拟接口工具推荐——Apifox(mock数据)【图解教程】


1. 下载安装Apifox

​​https://www.apifox.cn/#​​

2. 登录Apifox

可以直接微信扫码登录(新用户扫码后,选择生成新账户)

3. 新建团队

前端模拟接口工具推荐——Apifox(mock数据)【图解教程】_微信

4. 新建项目

前端模拟接口工具推荐——Apifox(mock数据)【图解教程】_css_02


新建好后,点击项目名称进入项目。

前端模拟接口工具推荐——Apifox(mock数据)【图解教程】_微信_03

5. 新建分组

鼠标移动到左侧项目概览上时,会出现新建分组按钮,点击它!

前端模拟接口工具推荐——Apifox(mock数据)【图解教程】_鼠标移动_04


前端模拟接口工具推荐——Apifox(mock数据)【图解教程】_html_05

6. 新建接口

鼠标移动到左侧新建的分组上时,会出现新建接口按钮,点击它!

前端模拟接口工具推荐——Apifox(mock数据)【图解教程】_css_06


右上角下拉选择“mock服务”后,输入接口地址,接口名称,保存

前端模拟接口工具推荐——Apifox(mock数据)【图解教程】_css_07


切换到【高级mock】选项卡,点击“新建期望”按钮

前端模拟接口工具推荐——Apifox(mock数据)【图解教程】_选项卡_08


输入期望名称,用mock.js的语法描述返回的数据后,点击保存按钮

前端模拟接口工具推荐——Apifox(mock数据)【图解教程】_选项卡_09

{
"list|1-10": [
{
"id|+1": 1,
"name": "@cname"
}
]
}

以上代码的含义是:

{
// 属性 list 的值是一个数组,其中含有 1 到 10 个元素
"list|1-10": [
{
// 属性 id 是一个自增数,起始值为 1,每次增 1
"id|+1": 1,
// 属性 name 是一个随机的中文姓名
"name": "@cname"
}
]
}

mock.js的语法详见
​​​https://github.com/nuysoft/Mock/wiki/Syntax-Specification​​

mock.js的范例详见
​​​http://mockjs.com/examples.html​​

mock.js的在线编辑器详见
​​​http://mockjs.com/0.1/editor.html#help​​

7. 测试接口

切换到【运行】选项卡,点击“发送”按钮,即可得到预期的mock数据

前端模拟接口工具推荐——Apifox(mock数据)【图解教程】_css_10

8. 使用接口

切换到【文档】选项卡,点击复制完整的mock接口地址

​​ http://127.0.0.1:4523/mock/430173/user/list​​

前端模拟接口工具推荐——Apifox(mock数据)【图解教程】_微信_11


在vue项目中直接访问即可

getList() {
this.$http({
method: "get",
url: "http://127.0.0.1:4523/mock/430173/user/list",
params: {},
}).then((res) => {
this.dataList = res.data.list;
});
},

注意事项

Apifox的mock原理是在本地启动了一个web服务,若关闭了Apifox,接口也将无法访问,所以在调试接口时,记得保持Apifox一直在运行中。


举报

相关推荐

0 条评论