Mock（虚拟数据）设置

Mock（虚拟数据）设置

一.为什么要设置：

1. 开发阶段，为了高效率，需要提前Mock
2. 减少代码冗余，灵活插拔
3. 减少沟通、减少接口联调时间
   （前端工作主要两个方面：网页开发和交互）

二. 三种方案
1》本地创建json
2》easy-mock平台
3》集成Mock API

三.详讲三种方案：
（一）本地创建json文件
1》创建一个静态的json文件，在public—mock—login.json

2》在app.vue中

    本地加载请求静态json文件的形式
     export default {
  data(){
    return{
      res:{

      }
    }
  },
  mounted()
 {
 this.axios.get('/mock/user/login.json').then((res)=>{
       this.res= res;
     })
 }
}
 //可以直接this.axios，因为我们安装了vue-axios插件，已经把axios对象挂载到了vue实例上，直接this就可以
 //public是根目录，调用路径一定不要‘/public’直接‘/’即可

3》main.js中：
有关axios.defaults.baseURL baseURL的语句都要注释掉，否则影响接口的引用，因为我们引用的是静态的文件

4》这种方案的缺陷：
与后端对接时，需要更改代码：
①.重新设置axios.defaults.baseURL
②.正常实际的接口形式应该为this.axios.get('/user/login')没有/mock和json

-----------------------------------------------------------------------------------------------------

（二）集成Mock API：下载 npm i mockjs --save-dev
1》main.js中设置mock开关：

// mock开关
const mock = true;
if (mock) {
    require('./mock/api');
}

require和import区别：
①.import ：为预编译加载，编译过程中，import文件就被加载进来，写入到内存中
②.require：代码从上到下执行到它才会加载，若mock=false，代码不会被加载
③.import语法是不能写在代码快中跟if else结合使用的，只能在文件顶部用来导入模块
2》src----mock—api.js（当第一步mock开关打开的时候，调用api.js）

import Mock from 'mockjs'
Mock.mock('/api/user/login', {
//'/api/user/login'实际的接口地址 /api为axios.defaults.baseURL
    "status": 0,
    "data": {
        "id|10000-15000":0 ,//随机生成10000-15000的数字
        "username": "@cname",//随激生成中国名字
        "email": "[e-mail]",
        "phone": null,
        "role": 0,
        "createTime": 1479048325000,
        "updateTime": 1479048325000
    }

})

3》调用接口（app.vue中）

 //mockjs集成的方式实现数据mock
    this.axios.get('/user/login').then((res)=>{
       this.res= res;
     })
  //与正常实际的接口格式相同，后期对接不需要更改

需要注意的是，mockjs不是一个请求，在发送请求的一瞬间被拦截了下来，这点与json和easy-mock不同，因此我们查看数据时，控制台Network-XHR找不到，但是可以通过控制台的vue-devtool或者设置断点查看到

-----------------------------------------------------------------------------------------------------

（三）easy-mock平台
1》进入easy-mock官网

点击右下角加号

项目名，和url随便填，然后点创建，首页生成一个

把链接粘贴到axios.defaults.baseURL中

axios.defaults.baseURL = ' https://www.easy-mock.com/mock/5ecc7f6172d5a41c9b506c49/boyu';

创建接口：

app.vue中调用接口

    this.axios.get('/user/login').then((res)=>{
       this.res= res;
     })
  //与正常实际的接口格式相同，后期对接不需要更改

注意：如果是cors或者jsonp跨域，我们需要更改env.js中的baseurl地址，换成mock地址