Mock 使用方式 + 在 Vue 项目中使用 Mock

古城微笑少年丶 2022-08-29 00:17 378阅读 0赞

### Mock ###

*  Mock 介绍
 *  搭建测试项目
 *  mock.js 模拟数据的基础使用方式
 *  Vue 项目中使用 mock.js 拦截数据
 *  后端接口写好后，mock.js 的移除处理

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

***写下博客用于自我复习、总结。  
如有错误之处，请各位大佬指出。  
学习资料来源于：尚硅谷***

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

# Mock 介绍 #

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

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_center 1]  
简单叙述一下：

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

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

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

# 搭建测试项目 #

1、找一个空文件夹，打开 cmd 命令行，执行命令： vue create xxx  
（xxx：文件夹名称随意）  
![在这里插入图片描述][fa514e247e7443089bf5b167d0714eb2.png]  
2、随后在接下来的选择中，为了演示就用 Vue2 的默认项目即可。  
![在这里插入图片描述][bbd8909043d34fe296481885ee1cce2b.png]  
3、在通过漫长的等待后，终于创建成功。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]  
4、此时进入项目，安装相关依赖：

使用 axios 发送 ajax：`cnpm install axios –save`

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

![在这里插入图片描述][7f633fef0f084cb695d159f9effe39fb.png]  
5、测试项目创建完成。

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

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

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

想要测试一下基础方法，我们可以在刚才的项目文件夹下，创建一个 mock 文件夹，里面包含一个 js 文件，用来测试使用基础使用方式。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 1]  
想要测试 mock 的基础语法，我们只需要在 testMock.js 文件中包含以下基础内容：

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

随后使用 node xxx （xxx：js文件名）的形式，运行即可看到输出结果。此时已经可以看到上述代码的运行结果。  
![在这里插入图片描述][be8a7de5385843a9ae8d51fc97ed30f0.png]  
这就是最基本的模拟数据方法，使用的 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')
    })

我们可以看到效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 2]

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

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。  
![在这里插入图片描述][8f811af0298043519ed5a8df4bb27ee3.png]  
其中的内容为：

此时，我们就可以去 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、测试成功：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 3]

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

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

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

1、在package.json中，我们可以看到项目运行的命令。  
![在这里插入图片描述][efdd3b1370e04e73ae7e0e14157a7fe6.png]  
2、这些命令会对应着 Vue CLI 项目中不同的模式：  
![在这里插入图片描述][f40302f8acbb420e841f51a38a04526f.png]  
3、综上所述，我们使用的项目运行 npm run serve 会对应着 development 模式。我们移除 mock 的处理，只需要通过设置 development 模式的环境变量，就可以实现。具体来看：

（1）首先查看环境变量的设置：  
![在这里插入图片描述][1dbca67736eb4c568b97e996f841412b.png]  
我们选用 `.env.[mode]` 这种用法，即：在指定的模式中被载入。

（2）在项目的根目录下，创建 .env.development 环境变量文件（ file 类型即可），其中的内容如下：  
![在这里插入图片描述][f9345fcbc8f24d4a8935b3bff3360fae.png]  
（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 是否会拦截请求了。测试成功：  
![在这里插入图片描述][02a12561239c48a9a1001dddf26f428c.png]  
![在这里插入图片描述][11c837a28c2d40d8bd35807235aac6dd.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_center]: /images/20220829/393ebaf59f624f8a98cddd57ba8f9366.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20220829/fcf99161e0ae481cb412dbd40ebd8fc1.png
[fa514e247e7443089bf5b167d0714eb2.png]: /images/20220829/d7ab53f919fa40a7a049cddff8d25554.png
[bbd8909043d34fe296481885ee1cce2b.png]: /images/20220829/722b5876d3c14694b5bedba2fee9ffca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]: /images/20220829/cb40b0b7170249d68d2b6e97385613b2.png
[7f633fef0f084cb695d159f9effe39fb.png]: /images/20220829/e314c3c9129946fa910297092cf03969.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 1]: /images/20220829/cf3d2db47abb4105b96b86630d44e36b.png
[be8a7de5385843a9ae8d51fc97ed30f0.png]: /images/20220829/deeb9bdd17154277ad337c1b17ae1ccd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 2]: /images/20220829/6eb6517846ae4f84906c62bf294be02e.png
[8f811af0298043519ed5a8df4bb27ee3.png]: /images/20220829/1f757d5cd3e54f938b769efd9e904316.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 3]: /images/20220829/865ff5b82cbe4783b039ada3d5cd094a.png
[efdd3b1370e04e73ae7e0e14157a7fe6.png]: /images/20220829/8c2386bf947b4d14b22b8f3112427e2f.png
[f40302f8acbb420e841f51a38a04526f.png]: /images/20220829/ac4dd062899b4a4081e80a9c339616f5.png
[1dbca67736eb4c568b97e996f841412b.png]: /images/20220829/d1690ecb885b42acb08b1a566713261f.png
[f9345fcbc8f24d4a8935b3bff3360fae.png]: /images/20220829/e2e9d77d93884c65a5f900d52023d625.png
[02a12561239c48a9a1001dddf26f428c.png]: /images/20220829/a6373f88a9ad4488b05ce396a9c4bd8d.png
[11c837a28c2d40d8bd35807235aac6dd.png]: /images/20220829/b3003672eca44935985e1192cf520b5a.png