JavaScript之MockJS快速入门(超详细)-蒲公英云

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

什么是MockJS

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

准备工作

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

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

在main.js中加入使mock生效
在这里插入图片描述

正式开始

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

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

'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value

在这里插入图片描述

代码示例：

// 引入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")