<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://requirejs.org/docs/release/2.1.16/comments/require.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.4.3/jquery.js"></script>
<title>mockjs -较全的用例</title>
</head>
<body>
<dvi class="data1"></dvi>
<div class="data2"></div>
<div class="data3"></div>
</body>
<script>
// 配置 Mock 路径
require.config({
???paths: {
???????mock: ‘http://mockjs.com/dist/mock‘
???}
});
// 加载 Mock
require([‘mock‘], function(Mock) {
???/*第一部分与第二部分没有关系*/
???/*第一部分*/
???// Mock.mock( template )
???//数据模板
???var data = Mock.mock({
???????‘list|4‘: [{
???????????‘id|+1‘: 1
???????}],
???????name: Mock.Random.cname(), ?//随机产生一个中文的姓名
???????addr: Mock.mock(‘@county(true)‘), //随机生成一个地址
???????‘age|18-60‘: 1, //随机生成一个数字 大小在18到60
???????birth: Mock.Random.date(), //随机生成一个日期
???????sex: Mock.Random.integer(0, 1),//随机生成一个整数,0/1 ,根据这个来给“男” “女”
???????email:Mock.mock(‘@EMAIL()‘), //随机生成一个邮箱
???????‘moblie|1‘:[‘13531544954‘,‘13632250649‘,‘15820292420‘,‘15999905612‘], //在数组中随机找一个
???????‘num1|1-100.2‘:1, //1-100 中随机生成一个保留两位小数点
???????‘num2|100-300.2‘:1,
???????‘classroom|1‘:[‘精品语文班‘,‘精品作业A班‘,‘英语班‘,‘语文班‘],
???????‘from|1‘:[‘到店咨询‘,‘微店‘,‘壹家教‘,‘学习服务平台‘],
???????‘status|1‘:[‘意识强烈‘,‘预报名‘,‘意向一般‘,‘暂无意向‘],
????????time:Mock.Random.date(‘yyyy-MM-dd‘),
????????mobile:/^1[0-9]{10}$/ ?//用正则匹配1开头的11位数字的手机号
???});
???//打印
???$(‘<pre>‘).text(JSON.stringify(data, null, 4)).appendTo($(‘.data1‘));
???/*第二部分*/
???// Mock.mock(rurl, template)
???Mock.mock(/\.json/, { ???//匹配.json文件
???????‘list|1-10‘: [{ ?????//数据模板,随机生成一个对象数组
???????????‘id|+1‘: 1, ??//1开始,递增
???????????‘email‘: ‘@EMAIL‘,
???????????‘regexp3‘: /\d{5,10}/
???????}]
???});
???$.ajax({
???????url: ‘hello.json‘, ??//请求访问json文件,拦截hello.json的请求,返回mock数据模板中的数据
???????dataType: ‘json‘,
???????success:function(data, status, jqXHR) {
???????//获得mock数据模板中的数据,打印
???????$(‘<pre>‘).text(JSON.stringify(data, null, 4)).appendTo($(‘.data2‘));
???}
???})
???/*第三部分*/
???var data3 =Mock.mock(/\.json/, { ???//匹配.json文件,可执行匹配成功的参数
?????????‘list|1-10‘: [{ ?????//数据模板
????????????????‘id|+1‘: 1,
????????????????‘email‘: ‘@EMAIL‘,
????????????????‘regexp4‘: /\d{5,10}/,
?????????????????‘name‘: Mock.Random.cname(), ?//随机产生一个中文的姓名
????????????}]
????????});
???????function sendData(url) {
???????????$.ajax({
????????????????url: url,
????????????????dataType: ‘json‘,
???????????????function(data3, status, jqXHR) {
????????????????//获得mock数据模板中的数据,打印
????????????????$(‘<pre>‘).text(JSON.stringify(data3, null,5)).appendTo($(‘.data3‘));
????????????}
????????????})
???????}
???????sendData("hello.json"); ?//调用方法渲染出数据
});
</script>
</html>
mockJs语法糖用例
原文地址:https://www.cnblogs.com/lwj820876312/p/9092752.html