Vue项目中使用mock

前后端分离的开发模式，在自己单元测试的时候mock十分有作用，现就在vue中使用mock做一个总结，如有不到之处请指正。
mock文档：http://mockjs.com/0.1/#mock
1、搭建vue项目（不多说，直接用cli就可以）；
2、使用npm install mockjs --save-dev来安装mockjs;

G2JVZEC%AUEZ)5HFZR@MGOI.png

以上图片后面主要用到的文件。
3、创建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:'验证码有误，登录失败'}  
    }
}
 
// Mock.mock( url, post/get , 返回的数据)；
Mock.mock('/getVerificatCode', 'post', getVerificatCode); // 获取验证码
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、创建http文件夹，在该文件夹下创建api.js用来对axios做了拦截设置处理。

import axios from 'axios'
 
axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded'
 
// 请求拦截器
axios.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);
  })

// 响应拦截器
axios.interceptors.response.use(response => {
    return response;
  },
  error => {
    return Promise.reject(error);
  })
 
export default axios

6、最后就是将axios放置在vue的原型上Vue.prototype.axios = axios，这样用axios请求mock数据的同时也可执行拦截操作。

最后编辑于：2019.03.17 22:20:21