使用Mock.js生成前端測試資料

摘要： 前端工程師在做前後端分離的專案的時，有時候介面未開發完成，或者開發環境不允許使用介面，這時候就需要前端工程師自己模擬資料了，模擬資料的方式有很多種，今天給大家介紹一款npm包，Mock.js。 首先我們要明白Mock.js的本質是攔截ajax請求，並返回約定好的資料。資料需要根據開發者的需...

前端工程師在做前後端分離的專案的時，有時候介面未開發完成，或者開發環境不允許使用介面，這時候就需要前端工程師自己模擬資料了，模擬資料的方式有很多種，今天給大家介紹一款npm包，Mock.js。

首先我們要明白Mock.js的本質是攔截ajax請求，並返回約定好的資料。資料需要根據開發者的需求結合Mock.js的文件來定製，下面來看一下如何使用：

引入mock.js和JQuery

<script src="js/jquery-1.12.4.min.js"></script>

<script src="http://mockjs.com/dist/mock.j... ;></script>

建立模擬Api，這裡需要結合需求按照文件編寫，攔截Ajax請求，返回測試資料，這裡面需要注意的是mock的第一個引數，指的是我們將來發送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請求，只要是用XMLhttprequest的例項傳送的請求，都會被Mock.js攔截，諸如axios、vue-resurce等等。

看一下響應結果：

{

"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的使用。

歡迎大家關注、轉發、點選好看