我將我使用mock的心得記錄一下，在前后端分離的趨勢下，我們原有的開發流程已經變更，所以前端在進行開發時往往 因為接口的時間而浪費，所以出現了mock方便我們前端自行模擬接口進行開發提升效率
首先我們需要的工具有兩種第一個json5還有一個就是mock需要npm裝包 接下來就是vscode一個插件JSON5 syntax
安裝
（1）npm install axios --save
（2）npm install mockjs --save-dev
（3）npm install json5 --save-dev
（1）npm install axios --save
（2）npm install mockjs --save-dev
（3）npm install json5 --save-dev
首先創建這兩個文件
index.js
const fs = require('fs')
const path = require('path')
const Mock = require('mockjs')
const JSON5 = ('json5')
// 讀取json文件
function getJsonFile (filePath) {
let 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/userSteam', function (rep, res) {
// getJsonFile方法定義了讀取json文件
let json = getJsonFile('./userInfo.json5')
// 將json傳入Mock.mock方法中，生成的數據返回瀏覽器
res.json(Mock.mock(json))
})
// }
}
//userInfo.json5
{ id: '@id()', // 得到隨機id，對象 username: '@cname()', // 隨機生成中文名字 date: '@date()', // 隨機生成日期 avatar: "@image('200x100', 'red', '#FFF', 'avatar')", // 生成圖片，參數size,bg,textcolor,text description: '@paragraph()', // 描述 ip: '@ip()', // ip地址 email: '@email()' }
vue.config.js
devServer: { before: require('./src/mock/index.js'), open: true, host: '1.2.2.13', ip地址 port: 8080, hotOnly: true, watchContentBase: true, proxy: { "/api": { target: "http://1.1.2.13:8080", pathRewrite: { "^/api": "" } } } }
最外層創建一個.env.development文件
MOCK = true
使用
getList() { this.axios.get('/user/userSteam').then((res) => {
console.log(res);
}).catch((err) => { console.log(err); }); }
第二種就簡單的多了那就是實用fastmock官網不需要去學習mock使用直接去網站生成你的接口就可以了不需要下在mock或者json的東西直接生成
浙公網安備 33010602011771號