Vue中使用mock

1.安装依赖

# 使用axios发送ajax

cnpm install axios --save

# 使用mockjs产生随机数据

cnpm install mockjs --save-dev

# 使用json5解决json文件,无法添加注释问题

cnpm install json5 --save-dev

2.新建mock文件夹 index.js文件

• 在index.js中配置

const fs = require("fs");
const path = require("path");
const Mock = require("mockjs"); //mockjs 导入依赖模块
const JSON5 = require("json5"); //json5的作用是可以解析json文件中的注释

//读取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.MOCK == "true") { 
  //为了满足当后台有接口的时候，不是使用mock数据，在此处做一个判断，可以在.env文件中对设置
  //监听http请求
  app.get("/user/userinfo", function (rep, res) {
    //每次响应请求时读取mock data的json文件
    //getJsonFile方法定义了如何读取json文件并解析成数据对象
    var json = getJsonFile("./userInfo.json5");
    //将json传入 Mock.mock 方法中，生成的数据返回给浏览器
    console.log(app);
    res.json(Mock.mock(json));
  });
}
};

3. mock文件夹下新建json5文件

{
   "id": "@id()",// 得到随机的id值
   "username":"@cname()",// 生成随机的中文名字
   "date": "@date()", // 生成随机的日期
   "avatar": "@image('900x200','red','#000','你好啊')",// 生成随机的图片，参数：size,background,foreground,text
   "text": "@cword(1,3)",// 随机的描述信息
   "ip": "@ip()",// 随机的id地址
   "email": "@email()"// 随机的email地址
}

4.配置vue.config.js文件

module.exports = ({
  lintOnSave:false,
  devServer: {
    // before 表示在devServer中的配置先经过before的操作
    onBeforeSetupMiddleware: require("./mock") // 引入mock.js
  }
})

5.在vue文件中发送请求

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      
    };
  },
  beforeMount() {
    console.log(111)
    axios
      .get("/user/userinfo")
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

6.、当项目中接口给到我么们时，我们移除mock的方法

• 根文件下新建 .env.development文件

MOCK=true;

在env文件中，进行配置。因为在mock.js文件中，我们已经设置了监听，并进行了判断，所以此处MOCK如果为false,就不会执行mock中的内容。