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

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一直在运行中。