创建
1、在vue项目的根目录下创建mock文件。
2、下载依赖
npm install mockjs --save //下载mock.js
npm install json5 --save //安装json5依赖
使用
1.在mock文件夹下创建index.js(入口文件)和json文件夹(用于存放模拟的数据)
2.在index.js引入相应模块,做读取模拟数据返回给前端
const fs = require('fs') //引入fs模块
const path = require('path') //引入path模块
const json5 = require('json5') //引入json5模块
const Mock = require('mockjs'); //引入mockjs
//公共函数,用来读取要模拟的数据模板
function getJSON(filepath) {
//读取文件
var json = fs.readFileSync(path.join(__dirname, filepath), 'utf-8')
return json5.parse(json) //json5格式化
}
module.exports = function (app) {
//设置请求路径
app.get('/user/list', (req, res) => {
console.log(req, query) //前端请求传过来的值
var json = getJSON('./JSON/userinfo.json5'); //传入路径
res.json(Mock.mock(json))
})
}
3. json文件夹下的userinfo.json5。 不会mock.js的可自行去mock.js查看官方文档。
{
'list|5':[{
id:'@id',
name:'@cname',
brithday:'@date',
address:'@county(true)',
createtime:'@datetime',
// Random.image( size, background, foreground, text )
aratar:"@image('200x200', '#50B347', '#FFF', 'Mock.js')"
}]
}
拦截请求配置(最关键的一步)
根目录下build/webpack.dev.conf.js/中配置
拦截请求,将请求转发到mock文件夹下的index.js文件
在 devServer下配置 before:require('../mock/index.js'),
请求
baseUrl为vue项目的端口 默认一般都是 http://localhost:8080,
mounted(){
axios.get(baseUrl+'/user/list').then(res=>{
console.log(res)
})
}