mockJS生成模拟数据，拦截ajax请求

人间小美味695

已于 2022-11-20 12:33:14 修改

阅读量624

点赞数 2

分类专栏： # 插件类 # JavaScript 文章标签： javascript npm html mock 前端

于 2021-04-06 11:34:13 首次发布

本文链接：https://blog.csdn.net/cainiaoyihao_/article/details/115454525

版权

JavaScript 同时被 2 个专栏收录

33 篇文章 7 订阅

订阅专栏

插件类

15 篇文章 1 订阅

订阅专栏

内容介绍：

小伙伴们在前端开发过程中可能因为各种原因无法及时获得后端提供的接口和文档，这样极大影响了开发进度增加了项目后期的工作量。在这里我们选择进行接口模拟，通过对公司数据接口规范和以往项目数据结构的了解，进行初步的接口模拟，在没有正式接口的情况下，也可以大量测试页面效果，只需在获得接口文档后替换请求路径和参数，对项目代码做小范围调整，即可完成对接。

以下为部分常用数据格式及扩展方法的示例，需要立即上手的同学可以直接取用，想要了解更详细参数及方法的，可前往 mockJS官方文档 进行进一步学习。

常用参数及扩展方法示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mockjs</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://mockjs.com/dist/mock.js"></script>
    <style>
        td {
            line-height: 20px;
            border: 1px solid #999;
        }
        
        tr>td:first-child {
            text-align: center;
            vertical-align: middle;
        }
        
        tr>td:last-of-type {
            /* 自动换行（包括网址）： */
            word-wrap: break-word;
            word-break: break-all;
            white-space: normal;
        }
    </style>
</head>

<body>
    <a href="http://mockjs.com/examples.html">mockjs文档</a>
    <hr>
    <div id="cons">
    </div>

    <script>
        // 拓展mockjs
        Mock.Random.extend({
            // 手机号-自己添加前缀
            phone: function() {
                var phonePrefixs = ['132', '135', '189', '137', '153']
                return this.pick(phonePrefixs) + Mock.mock(/\d{8}/)
            },
            // 生成随机颜色
            randomColor: function() {
                var colorArr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
                var result = "#";
                for (let index = 0; index < 6; index++) {
                    result += this.pick(colorArr)
                }
                return result
            },
            // 生成时间戳（秒）
            atime: function() {
                var randomTime = Math.random() * 1000 * (1000 * 60 * 60 * 24);
                var theTime = (new Date().getTime() - randomTime) / 1000;
                return Math.floor(theTime)
            },
        })


        // 生成范围内随机数数组：
        const Random = Mock.Random;
        Mock.mock('https://api.com/getdate', {
            "code": "200",
            "status": "1",
            "message": "success",
            "data": {
                'array|20': [
                    () => Random.integer(400, 1200)
                ],
            }
        });




        //模拟后台
        // Mock.mock( rurl?, rtype?, template|function(options) )
        Mock.mock('https://api.com', {
            "code": "200",
            "status": "1",
            "message": "success",
            "allnum": "30",
            "totalpage": "3",
            "data": {
                "userList|30": [{
                    'id|+1': 1,
                    'name': '@cname', //中文名称-cfirst,clast
                    'age|1-100': 100, //100以内随机整数
                    'gender|1': ['男', '女'],
                    'birthday': '@date("yyyy-MM-dd")', //日期
                    //region,province,city,county
                    'city': '@city(true)', //中国城市-region,city,province,county,zip
                    'phone': '@phone',
                    "number|1-100.1-10": 1,
                    'time': '@time("HH:mm:ss")',
                    'now': '@now()', //"year",month,week,day,hour,minute,second等
                    'range': '@range(1,10,2)', //开始-结束-间隔（一位：0开始）
                    'color': '@color()', //color,hex,rgb,rgba,hsl
                    'boolean|1': true,
                    'object|2-4': {
                        "110000": "北京市",
                        "120000": "天津市",
                        "130000": "河北省",
                        "140000": "山西省"
                    },
                    'image': "@image('100x30', '#894FC4', '#FFF', 'png', '894FC4')", //size, background, foreground, format, text
                    'dataImage': "@dataImage('200x100', 'Hello Mock.js!')", //size,text
                    'url': '@url("http", "baidu.com")', //url: http://www.baidu.com
                    'email': '@email', //随机生成一个邮箱地址,
                    'ip': '@ip', //随机生成一个ip地址
                    'cparagraph': '@cparagraph(1,2)', //段落-min-max
                    'csentence': '@csentence(3,4)', //句子-min-max
                    'cword': '@cword(3,6)', //词语
                    'ctitle': '@ctitle(8,12)', //标题
                    'capitalize': '@capitalize("hello")', //首字母大写
                    'upper': '@upper("hello")', //转大写
                    'lower': '@lower("HELLO")', //
                    'pick': '@pick(["1","2","3","4","5","6","7"])', //随机选一
                    'shuffle': '@shuffle(["1","2","3","4","5","6","7"])', //乱序
                    'increment': '@increment(100)', //参数为间隔值，参数为空从1开始
                    'randomColor': '@randomColor()', //自定义扩展
                }],
                "phoneList|5": [{
                    "phone": "@phone"
                }]
            }
        });

        //JQuery方式
        $.ajax({
            type: "post",
            url: "https://api.com",
            data: {
                id: 2
            },
            dataType: "json",
            success: function(res) {
                console.log(res);
                var result = res.data.userList[0],
                    showStr = "";
                for (const key in result) {
                    if (Object.hasOwnProperty.call(result, key)) {
                        showStr += '<tr><td>' + key + '</td><td>' + JSON.stringify(result[key]) + '</td></tr>'
                    }
                }
                $("#cons").html(showStr)
            }
        });
    </script>
</body>

</html>