mock在vue项目中的使用

什么是mock

Mock是什么. 可能还有些读者之前并没有接触过Mock，不清楚Mock是个啥。. Mock简单来理解，就是在测试过程中，对于某些不容易构造或者不容易获取的对象，用一个虚拟的对象来创建以便测试。. 而这个虚拟的对象就是mock对象。. mock对象就是真实对象在调试期间的代替品。

以上是百度的解释，我的理解就是：模拟接口
因为在开发中，我们需要ui的设计图以及后端的接口才能开始开发，如果按部就班开发进度就会非常感人。这时候我们就可以通过mock模拟接口，跟后端同步开发，加快开发进度。

mock官网

第一步（创建vue项目，安装插件）

1.创建vue项目

vue create mock-demo

2.安装mock

cnpm i mockjs --save-dev

3.安装axios

cnpm i axios --save

第二步（创建mock文件夹）

新建一个mock文件夹（跟src文件同级），mock文件夹内新建index.js文件

// 1.引入mock
const Mock = require('mockjs')

// 2.模拟数据
const users = {
        roles: ['admin'],
        introduction: 'I am a super administrator',
        avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
        name: 'Super Admin',
        date: '@date',
        avatar: "@image('200x100', '#50B347', '#FFF', 'Mock.js')", //参数：大小；背景；foreground（文字颜色）；文字 
        description: '@paragraph', // 描述
        ip: "@ip()", // ip地址
        email: "@email"
}

//3.返回一个函数
module.exports = function(app){
    if(process.env.Mock == "true"){// 对环境变量进行一个判断，方便我们替换真实接口
        //监听http请求
        app.get('/user/userinfo', function(req, res) {
            //将数据传入Mock.mock 方法中，生成的数据返回给浏览器
            res.json(Mock.mock(users));
        });
    }
}

第三步（配置vue.config.js文件）

在这里进行请求拦截，换成我们mock的数据

module.exports = {
    devServer: {
        before: require('./mock/index.js')// axios 请求拦截
    }
}

第四步（在项目中使用）

<template>
  <div class="home" v-if="data">
    头像: <img :src="data.avatar" alt=""><br>
    姓名：{{data.name}}<br>
    生日：{{data.date}}<br>
    邮箱：{{data.email}}<br>
    IP：  {{data.ip}}<br>
    介绍：{{data.introduction}}<br>

  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Home',
  data(){
    return {
      data: null
    }
  },
  mounted(){
    axios.get('/user/userinfo').then(res => {
      console.log(res)
      this.data = res.data
    }).catch(err => {
      console.error(err)
    })
  }
}
</script>

第五步（添加环境边境变量）

如果后端接口写完了，如何快速替换真实接口呢？
添加环境边境变量，方便我们替换真实接口
*注意：一个 Vue CLI 项目有三个模式：你需要根据自己的情况进行配置

我的是development 模式用于 vue-cli-service serve，所以我的环境边境变量文件名字是 ：.env.development

Mock=true

并在mock的index.js的函数中进行判断，上面的index.js代码我已经写了

 if(process.env.Mock == "true"){// 对环境变量进行一个判断，方便我们替换真实接口
 	...
 }

补充

项目地址