在vue项目中使用mock模拟请求
一、为什么要使用mockjs
总结起来就是在后端接口没有开发完成之前,前端可以用已有的接口文档,在真实的请求上拦截ajax,并根据mockjs的mock数据的规则,模拟真实接口返回的数据,并将随机的模拟数据返回参与相应的数据交互处理,这样真正实现了前后台的分离开发。详细内容大家可以查阅mock文档:http://mockjs.com/0.1/#mock
二、在vue的项目中怎么去使用mockjs
1、搭建vue项目(不多说,直接用cli就可以);
这里不太清楚了的可以去看我总结的这篇文章,
vue2.0开发环境框架搭建
2、使用npm install mockjs --save-dev来安装mockjs;
(1)在src文件夹下创建mock文件夹,在该文件夹下创建mock.js。
import Mock from 'mockjs';
// 配置拦截 ajax 的请求时的行为,支持的配置项目有 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:'验证码有误,登录失败'}
}
}
const patients =[
{
id:'1',
title:'张大爷',
label:'男',
path:'/patient',
imgUrl:'../../static/images/20170622131955_h4eZS.thumb.700_0.jpeg'
},
{
id:'2',
title:'李大爷',
label:'男',
path:'/patient',
imgUrl:'../../static/images/20170622131955_h4eZS.thumb.700_0.jpeg'
}]
// Mock.mock( url, post/get , 返回的数据);
Mock.mock('/getVerificatCode', 'post', getVerificatCode); // 获取验证码
Mock.mock('/login', 'post', loginFun); //登录
Mock.mock('/swipes',patients );
(2)在入口文件main.js里引入mockjs
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from './http/api'
// 引入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/>'
})
(3)创建http文件夹,在该文件夹下创建api.js用来对axios做了拦截设置处理
let service = null;
service = axios.create({
timeout: 30*1000, //请求超时时间
baseURL: process.env.BASE_API,
withCredentials: true, //是否允许跨域
cancelToken: source.token,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})
// 请求拦截器
service .interceptors.request.use(config => {
const token = localStorage.getItem('userToken');
if (token) { // 判断是否存在token,如果存在的话,则每个http header都加上token
config.headers.accessToken = token;
}
return config;
},
error => {
return Promise.reject(error);
})
// 响应拦截器
service .interceptors.response.use(response => {
return response;
},
error => {
return Promise.reject(error);
})
export default service