創(chuàng)建
1、在vue項目的根目錄下創(chuàng)建mock文件。
2、下載依賴
npm install mockjs --save? ? ?//下載mock.js
npm install json5 --save? ? //安裝json5依賴
使用
1.在mock文件夾下創(chuàng)建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/中配置
攔截請求，將請求轉發(fā)到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)
? ? ? ? ? ?})
??}
