VUE——本地mock数据并请求

在src统计目录下新建data.json文件

{
  "clock":{
    "normal":{
      "rule":[
        {
          "id":1,
          "onWorkTime":"09:00",
          "afterWorkTime":"12:00"
        },
        {
          "id":2,
          "onWorkTime":"13:00",
          "afterWorkTime":"18:00"
        }
      ],
      "data":{
        "onWorkTime":1533540512000,
        "afterWorkTime":1533550140000
      }
    },
    "outer":{
      "records":[
        {
          "id":1,
          "clockTime":1533540512000,
          "address":"上海市新华路128号",
          "note":"外出拜访客户"
        }
      ]
    }
  }
}

在build文件夹的webpack.dev.conf.js文件中 const portfinder = require("portfinder");下面声明并定义API

const express = require("express");
const app = express();
const appData = require("../data.json"); // 加载本地json文件
const clock = appData.clock; // 获取对应本地数据
const apiRoutes = express.Router();
app.use("/api", apiRoutes);

在devServer里面添加：
   

 before(app) {
      app.get("/api/clock", (reg, res) => {
        res.json({
          code: 0,
          data: clock
        }); // 接口返回json数据，上面配置的数据seller就复制给data请求后调用
      });
    }

即可通过以下访问：

 this.$axios.get("/api/clock").then(res => {
        console.log(res);
      });