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中的内容。
