1. 下载安装Apifox
https://www.apifox.cn/#
2. 登录Apifox
可以直接微信扫码登录(新用户扫码后,选择生成新账户)
3. 新建团队
4. 新建项目
新建好后,点击项目名称进入项目。
5. 新建分组
鼠标移动到左侧项目概览上时,会出现新建分组按钮,点击它!
6. 新建接口
鼠标移动到左侧新建的分组上时,会出现新建接口按钮,点击它!
右上角下拉选择“mock服务”后,输入接口地址,接口名称,保存
切换到【高级mock】选项卡,点击“新建期望”按钮
输入期望名称,用mock.js的语法描述返回的数据后,点击保存按钮
{
"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数据
8. 使用接口
切换到【文档】选项卡,点击复制完整的mock接口地址
http://127.0.0.1:4523/mock/430173/user/list
在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一直在运行中。