JavaScript之MockJS快速入门(超详细)

一时失言乱红尘 2022-12-11 07:57 463阅读 0赞

### 什么是MockJS ###

> 在前后端分离的开发环境中，前端同学需要等待后端同学给出接口及接口文档之后，才能继续开发。而MockJS可以让前端同学独立于后端同学进行开发，前端同学可以根据业务先梳理出接口文档并使用MockJS模拟后端接口。那么MockJS是如何模拟后端接口的呢？MockJS通过拦截特定的AJAX请求，并生成给定的数据类型的随机数，以此来模拟后端同学提供的接口。

### 准备工作 ###

首先安装MockJS，安装axios是为了发送AJAX请求测试模拟的接口，使用其他方式如原生AJAX请求或$.ajax都是可以的，使用其他方式发送AJAX请求无需安装axios。

npm install mockjs --save
    npm install axios --save

在main.js中加入使mock生效  
![在这里插入图片描述][20200929160123603.png_pic_center]

### 正式开始 ###

MockJS有两种方式定义模拟接口返回的数据，一种是使用数据模板定义，这种方式自由度大，可以自定义各种随机的数据类型，一种是使用MockJS的Random工具类的方法定义，这种方式自由度小，只能随机出MockJS提供的数据类型。

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

数据模板的格式为 ‘属性名|生成规则’:‘属性值’ ,生成规则决定了生成的数据的属性值。 生成规则一共有7种，分别是：

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

#### 代码示例： ####

// 引入express, mockjs
    const express = require('express');
    const Mock = require('mockjs');
    
    // 创建一个express服务器的对象
    const app = express();
    
    // 设置跨域问题
    app.all("*", (req, res, next)=>{ 
        // 设置任何域名都可以请求我们的服务器
        res.header("Access-Control-Allow-Origin", "*");
        // 设置请求的的方式
        res.header("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE");
        // 设置默认请求头和字符编码格式
        res.header("Content-type", "application/json;charset=utf-8");
    
        next()
    })
    
    // 创建了一个 /test 的接口，get请求形式的接口
    app.get("/test", (req, res) => { 
        // 调用Mock对象的mock方法来生成随机数据
        // const data = Mock.mock({ 
        // "product_id|+2": 1
        // })
    
        Mock.Random.extend({ 
            status: function(){ 
                // 编写代码完成状态数据的设置并返回
                const arr = ["已收货", "未收货", "已付款", "未付款", "已评价"]
                return this.pick(arr)
            }
        })
    
        const data = Mock.mock({ 
            "list|5":[
                { 
                    // "product_id|+2": 1,
                    // "name|1-3":"jack",
                    // "money|1-100.2-6": 1,
                    // "isPass|1":true,
                    // "myDate": '@date()',
                    // "name":"@cname",
                    "myStatus": "@status()",
                }
            ]
        })
    
        res.send(data);
    })
    
    // 让我们的服务器在某个端口运行
    app.listen(3000);
    console.log("服务器已经运行在 http://localhost:3000")

#### Mock.mock template 形式![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70_pic_center 1] ####

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

#### Mock.mock function 形式 ####

![在这里插入图片描述][20200929160035748.png_pic_center]

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

#### 自定义宽展函数 ####

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

[20200929160123603.png_pic_center]: /images/20221123/f954ca6090ac46acb34c6f8ab6f53332.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/f8040fac96cd4197980451ca1676af14.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/76a32a7fa9844eec90b283fc3d2e1b1e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/c9973bd790df4650a2c21abae54f14d6.png
[20200929160035748.png_pic_center]: /images/20221123/9d35b6b2e021490a811b6035952a35bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/7bcfcc1f5cb643249d9b252b2852d1db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/9263053bcabb4d4e936c46d1fe8117d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/bc247e1248e74b9195b49069f2ad8677.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/69cddf9211fa462c9b94531a65d39d04.png