前端测试数据怎么利用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进行生成，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。