使用mockjs模擬後臺接口返回的數據（二）

先後端聯調通常的邏輯是，前端經過ajax訪問後端，後端經過json數據返回給前端。

使用mockjs就是經過mock模擬服務器響應，要在項目當中攔截請求而且用mockjs返回數據。

通常是經過webpack下devServer的before屬性作攔截。

①vuecli腳手架根目錄新建vue.config.js，鍵入以下代碼：

module.exports = {
  devServer: {
    before: require('./mock/index.js') //引入mock的index.js 
  }
}

②根目錄mock文件夾下新建index.js，鍵入以下代碼：

/*
 * @Descriptions: 
 * @Version: 
 * @Author: 
 * @Date: 2020-06-18 23:20:14
 * @LastEditors: dongwenjie
 * @LastEditTime: 2020-06-18 23:27:11
 */
const fs = require('fs');
const path = require('path');
const Mock = require('mockjs');
const JSON5 = require('json5');
// 讀取json文件
function getJsonFile(filePath) {
  // 讀取指定json文件
  var json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8');
  // 解析並返回
  return JSON5.parse(json);
}
// 返回一個函數
module.exports = function (app) {
  // 監聽http請求
  app.get('user/userinfo', (rep, res) => {
    // 每次響應請求時讀取mock data的json文件
    // getJsonFile方法定義瞭如何讀取json文件並解析成數據對象
    var json = getJsonFile('./userInfo.json5');
    // 將json傳入 Mock.mock方法，生成的數據返回給瀏覽器
    res.json(Mock.mock(json));
  })
}

③在app.vue裏面利用axios在mounted生命週期函數中請求接口（注：通常axios都要在項目中進行二次封裝，添加一些攔截器或者請求頭，狀態碼判斷等操做，這裏簡單的使用下）

<!--
 * @Descriptions: 
 * @Version: 
 * @Author: 
 * @Date: 2020-06-15 22:46:44
 * @LastEditors: dongwenjie
 * @LastEditTime: 2020-06-18 23:35:34
--> 
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import axios from "axios";
export default {
  name: "App",
  components: {
    HelloWorld
  },
  created() {
    axios
      .get("/user/userinfo")
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

④重啓本地服務能夠看到 接口請求成功，數據也有返回

⑤當後臺接口寫好以後，怎麼樣取消mock接口呢？這裏給你們介紹一下vuecli當中環境變量的配置

vuecli官網描述：附地址：https://cli.vuejs.org/zh/guide/mode-and-env.html#%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F%E5%92%8C%E6%A8%A1%E5%BC%8F

 

⑤咱們來實踐一下，在根目錄下創建 .env.development文件，寫入：

isMock=true

⑥改造mock>index.js爲: 主要區別是用process.env來判斷當前環境下的變量值。爲true則能夠訪問。

/*
 * @Descriptions: 
 * @Version: 
 * @Author: 
 * @Date: 2020-06-18 23:20:14
 * @LastEditors: dongwenjie
 * @LastEditTime: 2020-06-18 23:52:55
 */
const fs = require('fs');
const path = require('path');
const Mock = require('mockjs');
const JSON5 = require('json5');
// 讀取json文件
function getJsonFile(filePath) {
  // 讀取指定json文件
  var json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8');
  // 解析並返回
  return JSON5.parse(json);
}
// 返回一個函數
module.exports = function (app) {
  if (process.env.isMock == "true") {
    // 監聽http請求
    app.get('/user/userinfo', (rep, res) => {
      // 每次響應請求時讀取mock data的json文件
      // getJsonFile方法定義瞭如何讀取json文件並解析成數據對象
      var json = getJsonFile('./userInfo.json5');
      // 將json傳入 Mock.mock方法，生成的數據返回給瀏覽器
      res.json(Mock.mock(json));
    })
  }

}

⑦嘗試把isMock的值變爲false，npm run serve重啓服務，則：接口就變成了404。

注意環境變量的用法，在項目當中能夠根據不一樣環境配置不一樣的文件，設置不一樣的變量值，在項目當中用的十分普遍。

附第一篇連接地址：

https://my.oschina.net/u/4446873/blog/4313804