在vue中如何使用mock

1.安装mockjs

npm install mockjs

2.在src目录下创建mock文件夹用来存放生成的数据,在mock文件夹中创建index.js用来作为文件入口

在index.js中操作

// 首先引入Mock
// const Mock = require('mockjs')
import Mock from "mockjs"
//格式： Mock.mock( url, post/get , 返回的数据)；
Mock.mock("/XXX/XXX/XX", "get", require("./apiMockJson/TargetTable.json"))

3.在mock中创建json来作为模拟数据（具体配置可以参考文档）

{
    "attributes": null,
    "success": true,
    "errMsg": "查询成功<br/>",
    "jsonStr": "{\"msg\":\"查询成功<br/>\",\"obj\":[{\"STAIRFIGURE\":\"图号1\"},{\"STAIRFIGURE\":\"图号2\"}],\"success\":true}",
    "msg": "查询成功<br/>",
    "obj": {
        "total": 99,
        "currentPage": 1,
        "pageSize": 10,
        "rows|10": [
            {
                "id": "@guid",
                "isEdit": false,
                "TARGETNAME": "指标@string(upper,5)",
                "TARGETDESC": "@cword(20)",
                "TARGETFORMULA": "@cword(5)",
                "TARGETTYPE|1": ["字符串", "数字", "布尔型", "数组", "对象", "map"],
                "LENGTH|1": [8, 16, 32, 64],
                "PRECISION|1": [0, 1, 2, 3, 4]
            }
        ]
    }
}

4.在vue的main.js中引入

if (process.env.NODE_ENV === "development") {
    require("./mock") //开发模式下使用mock
}

5.调取接口是直接调用创建的接口名即可