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

2023-02-06 987

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： JS之MockJS快速入门(超详细)

什么是MockJS

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

准备工作

首先安装MockJS，安装 axios只是为了发送AJAX请求测试模拟的接口，使用其他方式如原生AJAX请求或s.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")