拿下Mockjs，让你不再等待后端老铁

比眉伴天荒 2023-02-17 11:21 10阅读 0赞

### 目标 ###

> 懂得什么是mock  
> 明白mock的基本用法  
> 了解json5的作用  
> 会使用mock和vue-cli结合  
> 会把mock应用于原生、jquery中的ajax请求

## 1. Mock ##

##### 1.1 Mock简介 #####

Mock.js，生成随机数据，拦截Ajax请求

**Mock官网**[http://mockjs.com/][http_mockjs.com]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70]

##### 1.2 Mock实战作用 #####

当前端工程师要独立于后端并行开发时，后端接口还没有完成（只有后端提供参考的接口文档），那么前端怎么获取数据。

前端自己搭建web server自己模拟假数据，为了使数据更接近于实际需求，那么我们就用到了第三方库mockjs来生成随机数据，拦截Ajax请求

最后当后端接口完全实现，前端工程师只需移除Mock模拟的接口数据即可

##### 1.3 Mock原理 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 1]

## 2. mock和vue-cli结合 ##

图解：mock、json5、devServer、axios的职责

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 2]

##### 2.1 用脚手架快速搭建vue项目 #####

vue脚手架会让我们在创建vue项目时，方便快捷且高效，对于vue脚手架的了解，get一下此文章[vue脚手架][vue]

##### 2.2 安装依赖 #####

1.  使用axios发送请求（npm install axios --save）
2.  使用mockjs产生随机数据（npm install mockjs --save-dev）
3.  使用json5扩展json文件的功能（npm install json5 --save-dev）

**注意**：上述依赖仅用于mock模拟数据，对于其他功能，需安装相应依赖

##### 2.3 mock的基本使用 #####

1.  在项目根目录创建mock文件夹（项目为脚手架创建的项目，下同）
2.  使用Mock.mock这个API，生成我们需要模拟的数据（此图为数据类型，十分丰富）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 3]

1.  在mock文件夹下创建测试用的testMock.js（本文生成的数据为一个对象格式的json数据）

代码：

const Mock = require('mockjs')
    const obj = Mock.mock({ 
        id: "@id", //获取随机的id对象
        cname: "@cname()", //随机生成中文名称
        date: "@date", //随机生成日期
        avatar: "@image('200*200','red','#fff','avatar')", //生成图片且含参数
        description: "@paragraph()", //生成内容描述
        ip: "@ip", //IP地址
        email: "@email()" //email
    })
    console.log(obj)

数据：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 4]  
**此处数据即为所需数据，且动态随机生成**

##### 2.4 引入json5库来解析json5格式 #####

1.  什么是json5  
    json5为json的扩展，在json的基础上新增了强大的功能
2.  本文为何使用json5

*  json文件格式繁琐，必须键和值都包含引号（json5不必）
 *  json文件不支持注释（json5支持）

1.  在mock文件夹下新建userInfo.json5文件

{ 
        id: "@id", //获取随机的id对象
        cname: "@cname()", //随机生成中文名称
        date: "@date", //随机生成日期
        avatar: "@image('200*200','red','#fff','avatar')", //生成图片且含参数
        description: "@paragraph()", //生成内容描述
        ip: "@ip", //IP地址
        email: "@email()", //email
    }

1.  在mock文件夹下新建testJSON5.js（用于读取json5文件）

const fs = require('fs') // 引入文件读取模块
    const path = require('path') // 引入路径模块
    const JSON5 = require('json5') // 引入json5模块
    const json = fs.readFileSync(path.join(__dirname, './userInfo.json5'), 'utf-8') // 对本地json5文件进行读取
    var obj = JSON5.parse(json) // 将读取的字符串转换为json对象
    console.log(obj)

运行testJSON5.js（读取数据为json格式）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 5]

##### 2.5 在mock文件夹下新建index.js文件 #####

要想在vue项目中使用mock，就要在devServer启动服务之前（devServer：\{before：\}），对其进行拦截，让mock生效（请求自己本地的mock数据

const fs = require('fs')
    const path = require('path')
    const Mock = require('mockjs')
    const JSON5 = require('json5')
    
    function getJsonFile(filePath) {  // 读取json文件
        var json = fs.readFileSync(path.join(__dirname, filePath), 'utf-8') // 读取指定json文件
        return JSON5.parse(json) // 解析并返回
    }
    
    // 返回一个函数
    module.exports = function(app) { 
        // 对环境变量进行判断
        if (process.env.MOCK == 'true') { 
            app.get('/user/userInfo', (req, res) => {  //发送http请求
                // 每次响应时读取mock可以随机生成的json文件
                // getJsonFile方法定义了如何读取json文件并解析成数据对象
                var json = getJsonFile('./userInfo.json5')
                res.json(Mock.mock(json))
            })
        }
    }

**注意**：webpack启动服务时，任何请求都会被`devServer.before`中间件拦截，我们在此时可做一系列操作，操作完成后其他中间件才开始工作

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 6]

##### 2.6 webpack相关的配置 #####

调整webpack配置最简单的方式就是在 vue.config.js中的 configureWebpack 选项提供一个对象，该对象将会被webpack-merge合并入最终的webpack配置

1.  在项目根目录下创建vue.config.js文件

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

##### 2.7 发送axios请求来测试 #####

1.  在项目src文件夹下找到components文件夹下的HelloWorld.vue（主组件）
2.  在生命周期上挂载axios请求

1.  启动服务器，查看响应结果

![在这里插入图片描述][20200613202815562.gif]  
**注意**：此处生成的数据会随着index.js中内容的改变来动态变化  
**综上：使用Mock成功在vue项目中模拟了接口数据**

##### 2.8 在vue项目中移除Mock #####

1.  在项目根目录下创建.env.development文件，并写入

MOCK=true

1.  在index.js中发送请求时判断MOCK的值，为true时使用mock，false时移除mock（演示略）

## 3. jquery项目中使用mock.js ##

图解：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 7]  
注意：mock.js下载地址：[https://github.com/nuysoft/Mock/blob/160173f6ab95e13f82bf63c0b301926447e7e106/dist/mock-min.js][https_github.com_nuysoft_Mock_blob_160173f6ab95e13f82bf63c0b301926447e7e106_dist_mock-min.js]

##### 3.1 创建jquery中用到ajax的项目 #####

1.  在项目根目录下创建js文件夹，内含（jquery.min.js、mock.min.js）
2.  在项目根目录下创建mock文件夹，内含（mock.js）

Mock.mock('/user/userInfo', 'get', { 
        id: "@id", //获取随机的id对象
        cname: "@cname()", //随机生成中文名称
        date: "@date", //随机生成日期
        avatar: "@image('200*200','red','#fff','avatar')", //生成图片且含参数
        description: "@paragraph()", //生成内容描述
        ip: "@ip", //IP地址
        email: "@email()" //email
    })

1.  在项目根目录下创建index.html文件

代码：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="js/jquery.min.js"></script>
        <script src="js/mock-min.js"></script>
    </head>
    
    <body>
    
    </body>
    <script src="./mock/mock.js"></script>
    <script>
        $.ajax({ 
            url: '/user/userInfo',
            dataType: 'json',
            success: function(data) { 
                console.log(data)
            }
        })
    </script>
    
    </html>

打开页面（发送请求）

![在这里插入图片描述][2020061320563279.gif]  
**请求成功，数据返回正常**

##### 3.2 jquery中的mock移除 #####

1.  直接把mock.js 注释掉（简单粗暴）
2.  在引入mock.js之前定义MOCk变量（MOCK=‘true’），在mock.js中对MOCK进行判断（if()MOCK==‘true’），再执行mock.js

## 总结： ##

#### 1. Mock功能强悍，不仅能应用于本文的两种情景，还可模拟（微信小程序，移动app等接口数据） ####

#### 2. 希望大家在Mock的帮助下可快速高效的开发，同时有更优秀的作品 ####

#### 3. Come on ####

[http_mockjs.com]: http://mockjs.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200613185020191.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020061319013426.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200613204058574.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[vue]: https://blog.csdn.net/cwq521o/article/details/105890608
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/202006131926467.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200613194526476.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200613195127750.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200613195826951.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[20200613202815562.gif]: https://img-blog.csdnimg.cn/20200613202815562.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200613204202780.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[https_github.com_nuysoft_Mock_blob_160173f6ab95e13f82bf63c0b301926447e7e106_dist_mock-min.js]: https://github.com/nuysoft/Mock/blob/160173f6ab95e13f82bf63c0b301926447e7e106/dist/mock-min.js
[2020061320563279.gif]: https://img-blog.csdnimg.cn/2020061320563279.gif