前后端分離的開(kāi)發(fā)模式湃望，在自己?jiǎn)卧獪y(cè)試的時(shí)候mock十分有作用拍屑，現(xiàn)就在vue中使用mock做一個(gè)總結(jié)丙唧，如有不到之處請(qǐng)指正凡蜻。
mock文檔：http://mockjs.com/0.1/#mock
1办桨、搭建vue項(xiàng)目（不多說(shuō)筹淫，直接用cli就可以）；
2呢撞、使用npm install mockjs --save-dev來(lái)安裝mockjs;
G2JVZEC%AUEZ)5HFZR@MGOI.png
以上圖片后面主要用到的文件损姜。
3、創(chuàng)建mock文件夾殊霞，在該文件夾下創(chuàng)建mock.js摧阅。（這里有一些我自己模擬的代碼，可以不關(guān)注）
import Mock from 'mockjs';
// 配置攔截 ajax 的請(qǐng)求時(shí)的行為绷蹲，支持的配置項(xiàng)目有 timeout棒卷。
Mock.setup({
timeout: '200 - 400'
})
const vCode = '123456';
function getVerificatCode (prarms) {
const prarmsObj = JSON.parse(prarms.body);
return Object.assign(prarmsObj, {vCode: vCode});
}
function loginFun (prarms) {
const prarmsObj = JSON.parse(prarms.body);
if (prarmsObj.code === vCode) {
return {code:1, text:'登錄成功'}
} else {
return {code:2, text:'驗(yàn)證碼有誤顾孽，登錄失敗'}
}
}
// Mock.mock( url, post/get , 返回的數(shù)據(jù))；
Mock.mock('/getVerificatCode', 'post', getVerificatCode); // 獲取驗(yàn)證碼
Mock.mock('/login', 'post', loginFun); //登錄
4比规、入口js（main.js）里引入mockjs
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview'
import axios from './http/api'
import 'iview/dist/styles/iview.css'
// 引入mockjs
require('./mock/mock.js')
Vue.config.productionTip = false
Vue.prototype.axios = axios
Vue.use(iView)
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
5若厚、創(chuàng)建http文件夾，在該文件夾下創(chuàng)建api.js用來(lái)對(duì)axios做了攔截設(shè)置處理蜒什。
import axios from 'axios'
axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded'
// 請(qǐng)求攔截器
axios.interceptors.request.use(config => {
const token = localStorage.getItem('userToken');
if (token) { // 判斷是否存在token测秸，如果存在的話，則每個(gè)http header都加上token
config.headers.accessToken = token;
}
return config;
},
error => {
return Promise.reject(error);
})
// 響應(yīng)攔截器
axios.interceptors.response.use(response => {
return response;
},
error => {
return Promise.reject(error);
})
export default axios
6灾常、最后就是將axios放置在vue的原型上Vue.prototype.axios = axios霎冯，這樣用axios請(qǐng)求mock數(shù)據(jù)的同時(shí)也可執(zhí)行攔截操作。
