Q：为什么进行模拟数据？
A：在做开发时，后端程序没有配齐，前端人员在做vue开发时，需要自己先模拟接口，模拟数据，等到后端数据配齐，提供好接口后，将项目中的接口换一下即可

一、本地加载请求静态json文件的形式

1. 在 Public 文件夹下新建一个 mock 文件夹，新建一个json文件，如login.json

• login.json

{
    "status": 0,
    "data": {
      "id": 22,
      "username": "yian",
      "email": "48522243521@162.com",
      "phone": null,
      "role": 0,
      "createTime": 7456454542454,
      "updateTime": 7456454542454
    }
  }

2. 若安装 vue-axios，使用时可直接this.axios.get()；若不安装，需在在哪里使用，在哪里引入axios，即import axios from 'axios'

3. 使用this.axios.get()

• App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name:"App",
  data(){
    return {
      res:{}
    }
  },
  mounted(){
    this.axios.get('/mock/user/login.json').then((res)=>{
      this.res=res;
    });
  }
}
</script>

• main.js（因之前写过接口环境变量配置，见https://editor.csdn.net/md/?articleId=107534608，因此需要修改main.js，即去掉 axios.defaults.baseURL）

import Vue from 'vue'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'
import App from './App.vue'

axios.defaults.timeout=8000;
axios.interceptors.response.use(function(response){
  let res=response.data;
  if(res.status==0){
    return res.data;
  }else if(res.status==10){  
    window.location.href='/#/login'
  }else{
    alert(res.msg);
  }
});

Vue.use(VueAxios,axios);
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

• 缺点

  需要更改代码；
  请求的地址并不是接口真实的地址
  

二、通过easy-mock平台实现数据，mock

三、集成Mock API

原理：拦截ajax请求

1. 安装mockjs

cnpm install mockjs –save

2. 配置请求的模拟数据

• 在src中新建mock文件夹，在该文件夹中新建一个mock.js文件，在该文件中配置请求的模拟数据

方式一：

import Mock from 'mockjs'
Mock.mock('/api/user/login', {
    "status": 0,
    "data": {
        "id|1001-1100": 0,
        "username": "@cname",
        "email": "@email",
        "phone|1-9": 0,
        "role": 0,
        "createTime": 1524545121218,
        "updateTime": 1524545121218
    }
});

方式二：

import Mock from 'mockjs';
Mock.mock("/user","post",{
    data:[
        {
            name:"张三",
            sex:"男"
        },
        {
            name:"李四",
            sex:"女"
        }
    ]
});
Mock.mock("/list","post",()=>{
    return[
        {
            name:"张三",
            sex:"男"
        },
        {
            name:"李四",
            sex:"女"
        } 
    ]
});

• main.js（引入mockjs ）：require('./mock/mock'); 还可加入一个mock开关

import Vue from 'vue'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'
import App from './App.vue'

// 定义一个开关
const mock=true;
if(mock){
  require('./mock/mock');
}
  
axios.defaults.baseURL='/api';
axios.defaults.timeout=8000;
axios.interceptors.response.use(function(response){
  let res=response.data;
  if(res.status==0){
    return res.data;
  }else if(res.status==10){
    window.location.href='/#/login'
  }else{
    // 报错
    alert(res.msg);
  }
});

Vue.use(VueAxios,axios);
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

• App.vue（获取数据）

// 这里使用方式一的模拟数据
this.axios.get('/user/login.json').then((res)=>{
  this.res=res;
});

• 目录

若在react中使用，则应在index.js中引入mock模块