Mock.js初步使用（浏览器端）

Hadoop_Liang

已于 2023-02-13 21:46:05 修改

阅读量573

点赞数 1

分类专栏：前端文章标签： mock.js Powered by 金山文档

于 2023-02-12 08:00:00 首次发布

本文链接：https://blog.csdn.net/qq_42881421/article/details/128990990

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Mock.js：生成随机数据，拦截 Ajax 请求。官方地址：http://mockjs.com/

第一个demo

demo.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>mockjs demo</title>
</head>
<body>

</body>
<!-- 引入jquery和mock，这里用在线引入，也可以先下载对应js文件然后本地引入 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
<script>
// 使用 Mock
var data = Mock.mock({
    'list|1-10': [{
        'id|+1': 1
    }]
});
$('<pre>').text(JSON.stringify(data, null, 4))
    .appendTo('body')

</script>
</html>

浏览器访问效果

这里的核心是

Mock.mock({
    'list|1-10': [{
        'id|+1': 1
    }]
});

语法格式：Mock.mock( template )

作用：根据数据模板生成模拟数据。

template:数据模板，数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

案例中：

// list为属性名
// 1-10为生成规则
// 冒号后面为属性值
'list|1-10': [{
        'id|+1': 1
    }]

注意：

属性名和生成规则之间用 | 分隔。

生成规则是可选的。

生成规则有 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

生成规则的含义需要依赖属性值才能确定。

属性值中可以含有 @占位符。

属性值还指定了最终值的初始值和类型。

发起ajax请求

发起ajax请求demo

ajax-demo.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>mockjs demo</title>
</head>
<body>
    <button onclick="getData()">点我</button>
</body>
<!-- 引入jquery和mock -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
<script>
    var obj = {'aa':'11', 'bb':'22', 'cc':'33', 'dd':'44'};
    // Mock响应模板
    var data = Mock.mock('http://test.com', {
        "user|1-3": [{   // 随机生成1到3个数组元素
            'name': '@cname',  // 中文名称
            'id|+1': 88,    // 属性值自动加 1，初始值为88
            'age|18-28': 0,   // 18至28以内随机整数, 0只是用来确定类型
            'birthday': '@date("yyyy-MM-dd")',  // 日期
            'city': '@city(true)',   // 中国城市
            'color': '@color',  // 16进制颜色
            'isMale|1': true,  // 布尔值
            'isFat|1-2': true,  // true的概率是1/3
            'fromObj|2': obj,  // 从obj对象中随机获取2个属性
            'fromObj2|1-3': obj,  // 从obj对象中随机获取1至3个属性
            'brother|1': ['jack', 'jim'], // 随机选取 1 个元素
            'sister|+1': ['jack', 'jim', 'lily'], // array中顺序选取元素作为结果
            'friends|2': ['jack', 'jim'] // 重复2次属性值生成一个新数组
        },{
            'gf': '@cname'
        }]
    });    
</script>
<script>
    function getData(){
        $.ajax({
            url: 'http://test.com',
            type: 'get',
            dataType: 'json'
        }).done(function(data, status, xhr) {
            console.log(JSON.stringify(data, null, 4));
        });    
    }
</script>

</html>

浏览器访问，点击按钮，查看控制台效果