前后端分离之后，在没有中间层情况下前后进度不一致导致接口调试耗时不可预期。前端可以根据接口文档定义的结构mock数据以减少进度延迟风险。
Mock.js
拦截Ajax请求, 并按规则返回模拟数据。
具体用法参考 Mock官方文档
集成 axios
可把axios添加到vue的原型链上
// main.js
import axios from 'axios'
Vue.prototype.$http = axios;
使用axios进行数据请求
// *.vue
this.$http.get('/api/test').then(ret => {});
集成Mock
新增mock文件夹, 文件夹里新建mock.js
安装mockjs
npm install mockjs --save-dev
配置mock规则
// mock.js
// 具体配置方法查看Mock.js 官方文档。
import Mock from 'mockjs'
Mock.mock('/api/test', {
"ret": 0,
"data": '@cname'
})
引入mock
在主入口引入mock
// main.js 中新增
import './mock/mock.js' // 注意路径
再次发送上面的请求, 返回如下图
image.png
证明mock集成成功。
多人协作优化
项目多人开发时, 如果所有人都维护同一个mock.js, 或者每个人都写自己的xxx-mock.js, 然后再把所有的xxx-mock.js手动引入, 很不优雅。
修改mock.js
修改mock.js, 使其自动加载js文件。并把mock返回数据配置移到其他的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);
}
})
现在的层级目录是这样的：
image.png
test.js 和 test2.js 会自动加载。
到此就解决了多人协作时出现的上述问题。
接口调试优化
当有部分接口完成，已完成的走接口，未完成的走mock。
修改mock配置
所有mock配置加统一前缀 /mock, 这样只会拦截/mock下的请求。
Mock.mock('/api/test', {
"ret": 0,
"data": '@cname'
})
改为
Mock.mock('/mock/api/test', {
"ret": 0,
"data": '@cname'
})
调用接口的请求不带/mock, 如 /api/test 接口， 然后配置代理即可转到对应的接口服务器。
// 通过如下配置会把所有的/api开头的请求转到百度去， 如: /api/test ==> https://www.baidu.com/test
proxy: {
'/api': {
target: 'https://www.baidu.com',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
}
到此可实现部分请求mock, 部分请求代理到服务器。
暂时到此结束, 如有问题后续更新。
