使用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。