前端测试数据怎么利用Mock.js进行生成
发布时间:2020-12-14 14:17:47
来源:亿速云
阅读:108
作者:Leah
本篇文章为大家展示了前端测试数据怎么利用Mock.js进行生成,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
Mock.js是一个模拟数据生成器,可以让前端独立于后端进行开发。如果你正在开发一个前端页面,可是后台还没有完成供你调用的Api,并且数据格式已经确定,那么你就可以使用Mock.js模拟相关的接口,生成假数据来查看页面效果。Mock.js的功能:生成随机数据,拦截 Ajax 请求。
参考文档:https://github.com/nuysoft/Mock/wiki/Getting-Started
语法规范:https://github.com/nuysoft/Mock/wiki/Syntax-Specification
安装npm install mockjs
创建模拟Api,拦截Ajax请求,返回测试数据//模拟后台
Mock.mock('http://api.com', {
"user|5-10": [{
'name': '@cname', //中文名称
'age|1-100': 100, //100以内随机整数
'birthday': '@date("yyyy-MM-dd")', //日期
'city': '@city(true)' //中国城市
}]
});
发送ajax请求//JQuery方式
$.ajax({
url: 'http://api.com',
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);
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
console.log(ajax.responseText);
}
}
}
myajax('http://api.com');
查看响应{
"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 = Mock.mock({
// 属性 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进行生成,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。