在vue项目中使用mock模拟请求

在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 

(4)最后在入口文件main.js里引入,将axios挂载到vue的原型上Vue.prototype.axios = axios。