前后端分離之后，在沒有中間層情況下前后進度不一致導致接口調(diào)試耗時不可預期闺属。前端可以根據(jù)接口文檔定義的結(jié)構(gòu)mock數(shù)據(jù)以減少進度延遲風險。
Mock.js
攔截Ajax請求, 并按規(guī)則返回模擬數(shù)據(jù)周霉。
具體用法參考 Mock官方文檔
集成 axios
可把axios添加到vue的原型鏈上
// main.js
import axios from 'axios'
Vue.prototype.$http = axios;
使用axios進行數(shù)據(jù)請求
// *.vue
this.$http.get('/api/test').then(ret => {});
集成Mock
新增mock文件夾, 文件夾里新建mock.js
安裝mockjs
npm install mockjs --save-dev
配置mock規(guī)則
// mock.js
// 具體配置方法查看Mock.js 官方文檔掂器。
import Mock from 'mockjs'
Mock.mock('/api/test', {
"ret": 0,
"data": '@cname'
})
引入mock
在主入口引入mock
// main.js 中新增
import './mock/mock.js' // 注意路徑
再次發(fā)送上面的請求, 返回如下圖
image.png
證明mock集成成功。
多人協(xié)作優(yōu)化
項目多人開發(fā)時, 如果所有人都維護同一個mock.js, 或者每個人都寫自己的xxx-mock.js, 然后再把所有的xxx-mock.js手動引入, 很不優(yōu)雅俱箱。
修改mock.js
修改mock.js, 使其自動加載js文件国瓮。并把mock返回數(shù)據(jù)配置移到其他的JS文件, mock.js 只做公共配置、自定義占位符等公共操作狞谱。
// mock.js
import Mock from 'mockjs'
// 自動加載當前文件夾和子文件夾下除mock.js外所有的js文件
const context = require.context('.', true, /^((?!mock\.js).)*\.js$/)
context.keys().forEach(key => context(key));
// Mock 配置, 請求返回的延遲時間
Mock.setup({
timeout: '500-10000'
});
// 自定義占位符
Mock.Random.extend({
test () {
let test = ['a', 'b', 'c', 'd'];
return this.pick(test);
}
})
現(xiàn)在的層級目錄是這樣的：
image.png
test.js 和 test2.js 會自動加載乃摹。
到此就解決了多人協(xié)作時出現(xiàn)的上述問題。
接口調(diào)試優(yōu)化
當有部分接口完成芋簿，已完成的走接口峡懈，未完成的走mock。
修改mock配置
所有mock配置加統(tǒng)一前綴 /mock, 這樣只會攔截/mock下的請求与斤。
Mock.mock('/api/test', {
"ret": 0,
"data": '@cname'
})
改為
Mock.mock('/mock/api/test', {
"ret": 0,
"data": '@cname'
})
調(diào)用接口的請求不帶/mock, 如 /api/test 接口肪康， 然后配置代理即可轉(zhuǎn)到對應的接口服務器。
// 通過如下配置會把所有的/api開頭的請求轉(zhuǎn)到百度去撩穿， 如: /api/test ==> https://www.baidu.com/test
proxy: {
'/api': {
target: 'https://www.baidu.com',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
}
到此可實現(xiàn)部分請求mock, 部分請求代理到服務器磷支。
暫時到此結(jié)束, 如有問題后續(xù)更新。
