使⽤Mock.js⽣成前端测试数据
Mock.js是⼀个模拟数据⽣成器，可以让前端独⽴于后端进⾏开发。如果你正在开发⼀个前端页⾯，可是后台还没有完成供你调⽤的Api，并且数据格式已经确定，那么你就可以使⽤Mock.js模拟相关的接⼝，⽣成假数据来查看页⾯效果。Mock.js的功能：⽣成随机数据，拦截 Ajax 请求。
安装
npm install mockjs
创建模拟Api，拦截Ajax请求，返回测试数据
//模拟后台
"user|5-10": [{
'name': '@cname',  //中⽂名称
'age|1-100': 100,  //100以内随机整数
'birthday': '@date("yyyy-MM-dd")', //⽇期
'city': '@city(true)'  //中国城市
}]
});
发送ajax请求
//JQuery⽅式
$.ajax({
url: 'api',
dataType: 'json'
}).done(function(data, status, xhr) {
console.log(
JSON.stringify(data, null, 4)
)
});
//原⽣ajax⽅式
function myajax(url) {
if (window.XMLHttpRequest) {
ajax = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!ajax) {
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
ajax.open("GET", url, true);
ajax.send(null);
if (adyState == 4 && ajax.status == 200) {
console.sponseText);
}
}
}
myajax('api');
查看响应
{
"user": [
{
"name": "锺丽",
"age": 17,
"birthday": "1983-11-01",
"city": "内蒙古⾃治区⾚峰市"
},
{
"name": "陈艳",
"age": 25,
"birthday": "1973-07-10",
"city": "河南省驻马店市"
},
{
"name": "冯霞",
"age": 59,
"birthday": "2010-10-28",
"city": "澳门特别⾏政区离岛"
},
{
"name": "贾秀英",
"age": 63,
"birthday": "1973-01-22",
"city": "新疆维吾尔⾃治区伊犁哈萨克⾃治州"
},
{
"name": "周勇",
"age": 34,
"birthday": "1985-05-21",
"city": "湖南省衡阳市"
}
]
}
⽰例
// 使⽤ Mock
var Mock = require('mockjs')
/**
*
* 数据模板
* 属性名|⽣成规则: 属性值
*/
var data = k({
// 属性 list 的值是⼀个数组，其中含有 1 到 10 个元素  'list|1-10': [{
// 属性 id 是⼀个⾃增数，起始值为 1，每次增 1
'id|+1': 1,
'name': '@FIRST'
}]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))
运⾏结果
{
"list": [
{
"id": 1,
"name": "Larry"
},
{
"id": 2,
"name": "Edward"
},
{
"id": 3,
"name": "Jessica"
},
{
"id": 4,
"name": "William"
},
{
"id": 5,
"name": "Christopher"
},
{
"id": 6,
"name": "Michael"
},
{
"id": 7,
"name": "Susan"
},
{
"id": 8,
"name": "Shirley"
},
{
"id": 9,
"name": "Angela"
},
{
"id": 10,
"name": "George"
}
]前端页面模板
}
到此这篇关于使⽤Mock.js⽣成前端测试数据的⽂章就介绍到这了，更多相关Mock.js⽣成测试数据内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。