当前位置：首页 > news >正文

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

news 2025/6/25 19:11:21

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-demo1.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>

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