mock是当前端工程师搭建好了页面只差数据,但是后端还没完成接口开发时候使用的前端虚拟数据
mock的特性
前后端分离
增加单元测试的真实性(通过随机数据,模拟各种场景)
简单实用(符合真实的接口)
数据类型丰富(支持生成的文字,字符串,日期,邮箱,boolean,颜色,图片等)
方便扩展(支持自定义类型函数)
搭建Vue项目
vue create mock-demo
项目搭建完毕之后开始安装依赖文件
使用axios发送ajax请求
npm install axios --save
使用mock产生随机数据
npn install mockjs --save-dev
使用json5解决不能加注释的问题
npm install json5 --save-dev
简单测试
在项目中创建mock文件夹并新建文件test.js
const Mock = require("mockjs")
let id =Mock.mock("@id")
console.log(id)
let obj = Mock.mock({
id:"@id()", //随机id
username:"@cname()", //随机用户名
date:"@date()", //随机日期
avatar:"@image('200x200','red','#fff','avatar')", //随机头像
description:"@paragraph()", 随机描述
ip:"@ip()" //随机ip地址
email:"@email()" //随机邮箱
})
console.log(obj)
终端输出 node test
进行测试(非热更新方式)
node热更新插件为nodemon
yarn add nodemon / npm install -g nodemon
使用方式
nodemon index
配置JSON5
在vscode中安装json5扩展插件
然后创建.json5为后缀的文件,将上面用作测试的mock代码复制进来,就不会报语法错误了
mock配置
首先在mock文件夹中新建userinfo.JSON5文件来定义mock的数据
{
id:"@id()",
username:"@cname()",
date:"@date()",
avatar:"@image('200x200','red','#fff','avatar')",
description:"@paragraph()",
ip:"@ip()",
email:"@email()"
}
在全局创建.env.development
文件
注意事项:当要调用后台接口时,可以设置为false,从而关闭mock
MOCK = true
在mock文件中新建index.js文件
const fs = require('fs');
const path = require('path');
const Mock = require('mockjs');
const JSON5 = require('json5');
// 读取json文件
function getJsonFile(filePath) {
var json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8');
return JSON5.parse(json);
}
module.exports = function (app) {
// 监听http请求
if (process.env.MOCK == "true") {
app.get('/user/userinfo', function (rep, res) {
// getJsonFile方法定义了读取json文件
var json = getJsonFile('./userinfo.json5');
// 将json传入Mock.mock方法中,生成的数据返回浏览器
res.json(Mock.mock(json));
})
}
}
在全局创建vue.config.js,使用mock数据
module.exports={
devServer: {
before: require('./mock/index.js'),
}
}
在组件中使用mock数据
mounted() {
axios
.get("/user/userinfo")
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
},
输出结果