vue 中简单使用mock的示例代码详解
时间：2022-11-04 09:53:48 | 栏目：vue | 点击：次
一、首先，在vue项目中，安装依赖
# 使用axios发送ajax cnpm install axios --save # 使用mockjs产生随机数据 cnpm install mockjs --save-dev # 使用json5解决json文件,无法添加注释问题 cnpm install json5 --save-dev
二、在根目录下，新建一个mock文件
三、在vue.config.js文件中使用mock数据
四、配置mock中的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 方法中，生成的数据返回给浏览器
res.json(Mock.mock(json));
});
}
};
五、定义mock的数据
六、在任意一个页面检查自己配置的mock
打印的结果是：
七、当项目中接口给到我么们时，我们移除mock的方法
在env文件中，进行配置。因为在mock.js文件中，我们已经设置了监听，并进行了判断，所以此处MOCK如果为false,就不会执行mock中的内容。