如果您对前端的其它内容的学习感兴趣，欢迎前往👉 个人博客主页 👈翻阅
📝 一个努力学习的程序猿

---

专栏：
HTML和CSS
JavaScript
jQuery
Vue
Vue3
React
TypeScript
uni-app
Linux
前端面试分享
前端学习+方案分享(VitePress、html2canvas+jspdf、vuedraggable、videojs)
前端踩坑日记（ElementUI）

---

Mock 介绍

在前后端开发过程中，后端进行接口开发，前端使用对应接口从数据库获取前端想要展现的数据。对于后端来讲，它们需要根据需求文档，确定要写的接口的功能。有时，虽然接口还没有写出来，但是相关接口文档已经写出来了。这时前端如果想要调用接口，但是接口还没有完成，前端开发人员也就只能含泪上班摸摸鱼了。

那在开发过程中，为了避免这样的情况发生，现在前端已经能够独立于后端进行开发，也就是前端开发人员可以自己根据接口文档去模拟假数据。这个问题的解决方案就是使用第三方库 mock.js。它将可以用来生成随机的数据并拦截Ajax请求。

那么为什么要学习了解并在一些情况下考虑选择使用 Mock 来模拟数据呢？我自己把测试数据写死，我看也挺好，再安装第三方库是不是麻烦了点？

对于上述疑问，不妨先来看看在 Mock 官网给出的六大特性。

简单叙述一下：

Mock 要做的是前后端分离，从而让前端人员能够独立于后端进行开发。但是如果在前端模拟接口十分麻烦，那就得不偿失了。但是 Mock 完全不用担心，它的用法十分简单。而且，当我们想使用 Mock 时，不需要修改既有的代码，只需要让其拦截 Ajax 请求即可。想正常发送 Ajax 请求调用接口时，只需要不让 Mock 拦截请求即可。除此以外，后端提供的数据，每次都是相同的。如果在某种情况下，想测试不同数据的效果，让后端同事去数据库修改数据，一是麻烦，二是不够随机性。而 Mock 可以在每次拦截时都返回一组随机数据，模拟各种场景。它支持生成随机文本、数字、布尔值、日期、邮箱、链接、图片、颜色等各种各样的数据。这还不算完，如果想自定义随机其他类型数据，我们也可以对其进行扩展，而且扩展方式也很简单，扩展的时候还支持自定义函数和正则表达式。总结来说，功能性极强，对前端开发人员很友好。

本篇文章将主要介绍如何在 Vue 项目中使用 Mock 拦截请求并返回模拟数据。

---

搭建测试项目

1、找一个空文件夹，打开 cmd 命令行，执行命令： vue create xxx
（xxx：文件夹名称随意）

2、随后在接下来的选择中，为了演示就用 Vue2 的默认项目即可。

3、在通过漫长的等待后，终于创建成功。

4、此时进入项目，安装相关依赖：

使用 axios 发送 ajax：cnpm install axios --save

使用 mockjs 生成随机数据：cnpm install mockjs --save-dev

5、测试项目创建完成。

---

mock.js 模拟数据的基础使用方式

在 Vue 项目中使用 Mock 之前，先简单介绍一下相关使用方式。

想要测试一下基础方法，我们可以在刚才的项目文件夹下，创建一个 mock 文件夹，里面包含一个 js 文件，用来测试使用基础使用方式。

想要测试 mock 的基础语法，我们只需要在 testMock.js 文件中包含以下基础内容：

// 先用 require 导入 mockjs
const Mock = require('mockjs')
// 随后就可随意测试 mockjs 语法
let id = Mock.mock('@id')
console.log(id);

随后使用 node xxx （xxx：js文件名）的形式，运行即可看到输出结果。此时已经可以看到上述代码的运行结果。

这就是最基本的模拟数据方法，使用的 Mock.mock。它将根据数据模板生成模拟数据。

对于 Mock.mock 中可选用的用法和可用工具类可参考官方文档。官方文档介绍的很详细，案例也全部都展现了出来，很容易理解：

http://mockjs.com/examples.html
https://github.com/nuysoft/Mock/wiki

在这里就不将它们全部复制过来了。我们只需要在需要时查看官方文档，寻找相关用法即可。为了之后方便查看，在这里只展示几个用法。

const Mock = require('mockjs')
const fs = require('fs')

let obj = Mock.mock({
    id: "@id()",                   // 得到随机的id
    username: "@cname()",          // 随机生成中文名字
    date: "@date()",               // 随机生成日期
    avatar: "@image('200x200','red','#fff','avatar')",   // 随机生成图片
    description: "@paragraph()",   // 随机生成描述
    ip: "@ip()",                   // 随机生成ip地址
    email: "@email()",             // 随机生成email

    // 范围内，随机重复字符串次数
    "string|1-10": "xxx",
    // 范围内，随机生成数字
    "number|1-100": 100,
    // 随机生成布尔值
    "boolean|1": true,
    // 在对象中，抽取随机数个数据
    "object|1-4": {
        "110000": "北京市",
        "120000": "天津市",
        "130000": "河北省",
        "140000": "山西省"
    },
    // 在数组中，抽取随机数个数据
    "array|1-10": [
        {
            // 抽出的每个数据中的对象将轮流从该数组中抽取
            "name|+1": [
                "Hello",
                "Mock.js",
                "!"
            ]
        }
    ],
    // 根据正则表达式，随机生成自定义数据
    'regexp': /[a-z][A-Z][0-9]/,
})
fs.writeFile('./result.json',JSON.stringify(obj),()=>{
    console.log('done')
})

我们可以看到效果：

算上上面的用法，共有三种生成随机数据的形式：

let Random = Mock.Random
Random.email()
// => "n.clark@miller.io"
Mock.mock('@email')
// => "y.lee@lewis.org"
Mock.mock( { email: '@email' } )
// => { email: "v.lewis@hall.gov" }

第一种是直接拿到对应工具类的对象，并直接调用其中方法，比如 Random 是一个工具类，用于生成随机数据。

第二种是使用Mock.mock，直接使用对应方法的 @ 即可，不用刻意调用某个工具类。但是这种方式和第一种方式一样，输出的是个字符串。

第三种依然使用Mock.mock，但是会以对象的形式返回随机数据。由于后端接口返回的数据将会是JSON格式，所以为了模拟数据，通常用这种方式写。

---

Vue 项目中使用 mock.js 拦截数据

如果想要在项目中使用 mock，首先需要在项目根目录下找到或者新建 vue.config.js。其中的内容为：

module.exports = {
    devServer: {
        before: require('./mock/index.js') // 引入 mock/index.js
    }
}

随后在对应文件夹中，新建一个 index.js。

其中的内容为：

const Mock = require('mockjs'); // 导入依赖模块

// 返回一个函数
module.exports = function(app){
    // 监听 http 请求
    app.get('/user/userinfo', function(rep, res){
        // 设置要返回的数据
        let json = {
            id: "@id()",                    // 得到随机的id
            username: "@cname()",           // 随机生成中文名字
            date: "@date()",                // 随机生成日期
            avatar: "@image('200x200','red','#fff','avatar')",  // 生成图片                  
            description: "@paragraph()",    // 描述
            ip: "@ip()",                    // ip地址
            email: "@email()",              // email
        }
        res.json(Mock.mock(json));
    });
}

此时，我们就可以去 Vue 组件中发送 axios 请求，去获取 mock 提供的数据。

1、首先运行项目： npm run serve

2、随后在任意一个 Vue 组件里发送请求：

import axios from "axios";
export default {
  mounted() {
    axios.get('/user/userinfo').then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    })
  }
}

3、测试成功：

---

后端接口写好后，mock.js 的移除处理

最终不要忘记，mock.js 只是用来模拟接口。当后端接口完成后，就需要将 mock.js 从项目中“移除”。但是所谓移除不是单纯的把之前的拦截文件去掉或者注释掉。之前提到过 mock 的一个特性，就是开发无侵入，我们可以利用 Vue CLI 的特性，给一个判断接口是否存在的功能。具体说明：

1、在package.json中，我们可以看到项目运行的命令。

2、这些命令会对应着 Vue CLI 项目中不同的模式：

3、综上所述，我们使用的项目运行 npm run serve 会对应着 development 模式。我们移除 mock 的处理，只需要通过设置 development 模式的环境变量，就可以实现。具体来看：

（1）首先查看环境变量的设置：

我们选用 .env.[mode] 这种用法，即：在指定的模式中被载入。

（2）在项目的根目录下，创建 .env.development 环境变量文件（ file 类型即可），其中的内容如下：

（3）在我们使用 mock 模拟接口的 index.js 文件中，我们只需要做以下处理即可：

module.exports = function(app){
    // 增加判断条件：
    if(process.env.MOCK == 'true'){
        // 监听 http 请求
        app.get('/user/userinfo', function(rep, res){
            // 设置要返回的数据
            let json = {
                id: "@id()",                   // 得到随机的id
                username: "@cname()",          // 随机生成中文名字
                date: "@date()",               // 随机生成日期
                avatar: "@image('200x200','red','#fff','avatar')",   // 生成图片                
                description: "@paragraph()",   // 描述
                ip: "@ip()",                   // ip地址
                email: "@email()",             // email
            }
            res.json(Mock.mock(json));
        });
    }
}

（4）随后，只需要调整这个环境变量值，就可以决定 mock 是否会拦截请求了。测试成功：