前端MOCK数据之json-server 在vue-cli项目中的使用

前提

已经安装Node.js，并且安装好vue-cli。想要自己MOCK数据，模拟请求后端数据。

json-server 安装

为了后续其他项目也可以使用，选择全局安装

npm install json-server -g

项目中使用

1. 在项目根目录创建一个db.json文件，用于放置需要模拟的数据如图：

注意：json格式要严格遵守，如果有多个请求接口，可以模拟为如下，代码中访问的时候，分别访问http://localhost:3003/Wolist 和 http://localhost:3003/createWo 即可。

{
  "WoList":{
    "header": {
      "version": "1.0",
      "serviceCode": "13246",
    },
    "retCode": "0",
    "retMessage": "",
    "totalPages": "10",
    "pageIndex": "2",
    "workOrders": [
      {
        "agentId": "a123",
        "domainUserId": "S666666",
        "domainUserName": "张三"
      },
      {
        "agentId": "a123",
        "domainUserId": "S666666",
        "domainUserName": "麻子"
      },
      {
        "agentId": "a123",
        "domainUserId": "S666666",
        "domainUserName": "李四"
      }
    ]
  },
  "createWo":{}
}

2. 在package.json中的scripts里面加一行命令：

json-server db.json --port 3003

如图：

3. 在项目根目录执行命令，启动json-server

npm run json

4. 验证是否启动成功

浏览器输入提示地址即可，例如：

http://localhost:3003/Wolist

在浏览器可以访问成功，在代码中将其看作要请求的地址，正常写请求即可。