前言：
MOCK实际就是模拟数据
开发阶段,为了高效率,需要提前MOCK
减少代码冗余,灵活插拔
减少沟通,减少接口联调时间

创建mock的方案：
本地创建json 比较笨
easy-mock平台 比较方便,涉及带宽资源,因为是开源的访问的人多,可以本地部署
集成mock api

先来介绍一下本地创建json：
本地创建json文件就行
pass

app.vue中写入：

mounted(){
    this.axios.get()  //之所以我们可以用this.axios是因为我们已经在main.js中把axios挂在到vue实例中,如果没有挂在就需要import axios from 'axios'
  },

this.axios.get('') //需要写入this.axios.get('/mock/user/login.json')//因为我们是请求本地这个跟就是public所以我们可以省略,后面接的就是/目录的下一层直到模拟数据

我们需要在data数据中创建res:{}用于存放模拟响应的数据

data(){
    return{
      res:{}
    }

示例：

请求以及返回：

 mounted(){
    this.axios.get('/mock/user/login.json').then((res)=>{
        //返回数据
        this.res = res;
    })
  },

第二种方法easy-mock平台：
pass

第三种mockjs api插件：
前面2中主要是借助第三方平台还自己写json.
这第三种是利用mockapi进行自定义生成数据。
安装：

npm install mock --save-dev

//定义mockapi的状态如果为true代表加载,否则不加载,这里采用require进行从上到下加载
const mock = true;
if(mock){
  require('./mock/api'); //这里采用require进行从上到下加载
}

示例：
![CLL4]B}NENE)V4L){@09OEQ.png][2]

这里我们还需要准备一个mock文件夹里面创建api.js或者mock.js用于存放我们生成的数据

mock.js内容：
导入mock插件进行生成对象调用方法$1为接口 $2为数据

import mock from 'mockjs'

mock.mock('/api/user/login',{
    "status":0,
    "data":{
        "id":12,
        "username":'admin',
        "email":'admin@164.com',
        "phone":'123445',
        "role":0,
        "createtime":123132321312,
        "updatetime":211323123121

    }
})

引入mock生成的数据：

const mock = true;
if(mock){
  require('./mock/api'); //mock的位置
}

注意mock目录下的mock文件要是api.js

启动nodejs服务器：
npm run serve
游览器访问：

通过前几节的学习利用vue-tools的vue插件进行查看app实例下的data数据

如果要多生成几个接口：

import mock from 'mockjs'

mock.mock('/api/user/login',{
    "status":0,
    "data":{
        "id":12,
        "username":'admin',
        "email":'admin@164.com',
        "phone":'123445',
        "role":0,
        "createtime":123132321312,
        "updatetime":211323123121

    }
})

mock.mock('/api/re/ret',{
    "status":0,
    "data":{
        "id":12,
        "username":'user',
        "email":'user@164.com',
        "phone":'123445',
        "role":0,
        "createtime":123132321312,
        "updatetime":211323123121

    }
})

示例：
![4ZWE3BK1070Z]4$47~F(FSO.png][4]

接下来说说mock的语法：

mock.mock('/api/re/ret',{
    "status":0,
    "data":{
        "id|1-3":12, //id|1-3产生1-3的随机数
        "username":'@cname', //随机产生名字 cname中文 name为英文
        "email":'user@164.com',
        "phone":'123445',
        "role":0,
        "createtime":123132321312,
        "updatetime":211323123121

    }
})

示例：

总结：
mock在开发中生成随机数据进行访问,用于前后联调,比较重要,3中方法推荐后两种.