1. 程式人生 > >VUE——本地mock資料並請求

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);
      });