在開發(fā)過程中够挂，有很多的ajax請求，前后端分離開發(fā)你肯定遇到這樣的問題踏枣，后臺給你的接口文檔，你需要在本地模擬數(shù)據(jù)返回钙蒙，可能你也用到過我之前用的蠢方法茵瀑，就是新建一個test.json文件，放入接口文檔中寫的返回示例躬厌，這么做有個很大的問題是不夠靈活马昨，而且還需要切換url，現(xiàn)在學會使用mock.js攔截ajax請求扛施，更加方便的構造你需要的假數(shù)據(jù)鸿捧。
一.簡單示例
在這里我舉的例子是在vue項目中如何使用mock.js。
- 安裝mockjs
npm install mockjs --save-dev - 在項目中創(chuàng)建mock.js疙渣，并寫一個簡單的返回示例匙奴，后面攔截其他url的ajax請求直接參考這個示例。
//引入mockjs
import Mock from 'mockjs'
//使用mockjs模擬數(shù)據(jù)
Mock.mock('/\/api\/msdk\/proxy\/query_common_credit/', {
"ret":0,
"data":
{
"mtime": "@datetime",//隨機生成日期時間
"score|1-800": 800,//隨機生成1-800的數(shù)字
"rank|1-100": 100,//隨機生成1-100的數(shù)字
"stars|1-5": 5,//隨機生成1-5的數(shù)字
"nickname": "@cname",//隨機生成中文名字
}
//data里的屬性看不懂妄荔，需要詳細看語法規(guī)范,博客鏈接:http://www.reibang.com/p/4579f40e6108
});
main.js里面引入該文檔
import './assets/js/mock'//此部分引入的是我們所編寫的mockjs文檔xxx.vue文件中調用mock.js中模擬的數(shù)據(jù)接口泼菌，這時返回的response就是mock.js中用Mock.mock(‘url’,data）中設置的data了。
query_common_credit(){
var loginMode = 'msdk';//游戲內默認msdk(wx|qq|msdk)
var url = '/api/msdk/proxy/query_common_credit';
this.$axios.get(url)
.then(response => {
})
.catch(error => {
})
}
二.攔截數(shù)據(jù)的方法Mock.mock()
這里我舉例最常用的格式
Mock.mock(url,data);
url用正則寫啦租，這樣get請求傳參時哗伯，也能攔截數(shù)據(jù)了。
Mock.mock('/\/api\/msdk\/proxy\/query_common_credit/', {
"ret":0,
"data":
{
"mtime": "@datetime",//隨機生成日期時間
"score|1-800": 800,//隨機生成1-800的數(shù)字
"rank|1-100": 100,//隨機生成1-100的數(shù)字
"stars|1-5": 5,//隨機生成1-5的數(shù)字
"nickname": "@cname",//隨機生成中文名字
}
//data里的屬性看不懂刷钢，需要詳細看語法規(guī)范,博客鏈接:http://www.reibang.com/p/4579f40e6108
});
三.設置延時請求到數(shù)據(jù)
不設置延時很有可能遇到坑笋颤，這里需要留意，因為真實的請求是需要時間的内地，mock不設置延時則是馬上拿到數(shù)據(jù)返回伴澄，這兩個情況不同可能導致在接口聯(lián)調時出現(xiàn)問題。所以最好要先設置延時請求到數(shù)據(jù)阱缓。
//延時400s請求到數(shù)據(jù)
Mock.setup({
timeout: 400
})
//延時200-600毫秒請求到數(shù)據(jù)
Mock.setup({
timeout: '200-600'
})
四.Mock.mock()方法中定義data返回的格式
生成規(guī)則和示例：
1. 屬性值是字符串 String
-
'name|min-max': string通過重復
string生成一個字符串非凌，重復次數(shù)大于等于min，小于等于max荆针。 -
'name|count': string通過重復
string生成一個字符串敞嗡，重復次數(shù)等于count。
2. 屬性值是數(shù)字 Number
-
'name|+1': number屬性值自動加 1航背，初始值為
number喉悴。 -
'name|min-max': number生成一個大于等于
min、小于等于max的整數(shù)玖媚，屬性值number只是用來確定類型箕肃。 -
'name|min-max.dmin-dmax': number生成一個浮點數(shù)，整數(shù)部分大于等于
min今魔、小于等于max勺像，小數(shù)部分保留dmin到dmax位障贸。
Mock.mock({
'number1|1-100.1-10': 1,
'number2|123.1-10': 1,
'number3|123.3': 1,
'number4|123.10': 1.123
})
// =>
{
"number1": 12.92,
"number2": 123.51,
"number3": 123.777,
"number4": 123.1231091814
}
3. 屬性值是布爾型 Boolean
-
'name|1': boolean隨機生成一個布爾值，值為 true 的概率是 1/2吟宦，值為 false 的概率同樣是 1/2篮洁。
-
'name|min-max': value隨機生成一個布爾值，值為
value的概率是min / (min + max)殃姓，值為!value的概率是max / (min + max)袁波。
4. 屬性值是對象 Object
-
'name|count': object從屬性值
object中隨機選取count個屬性。 -
'name|min-max': object從屬性值
object中隨機選取min到max個屬性辰狡。
5. 屬性值是數(shù)組 Array
-
'name|1': array從屬性值
array中隨機選取 1 個元素锋叨，作為最終值。 -
'name|+1': array從屬性值
array中順序選取 1 個元素宛篇，作為最終值。 -
'name|min-max': array通過重復屬性值
array生成一個新數(shù)組薄湿，重復次數(shù)大于等于min叫倍，小于等于max。 -
'name|count': array通過重復屬性值
array生成一個新數(shù)組豺瘤，重復次數(shù)為count吆倦。
6. 屬性值是函數(shù) Function
-
'name': function執(zhí)行函數(shù)
function，取其返回值作為最終的屬性值坐求，函數(shù)的上下文為屬性'name'所在的對象蚕泽。
7. 屬性值是正則表達式 RegExp
-
'name': regexp根據(jù)正則表達式
regexp反向生成可以匹配它的字符串。用于生成自定義格式的字符串桥嗤。Mock.mock({ 'regexp1': /[a-z][A-Z][0-9]/, 'regexp2': /\w\W\s\S\d\D/, 'regexp3': /\d{5,10}/ }) // => { "regexp1": "pJ7", "regexp2": "F)\fp1G", "regexp3": "561659409" }
五.Mock.Random生成各種隨機數(shù)據(jù)须妻。
Mock.Random 提供的完整方法（占位符）如下：
| Type | Method |
|---|---|
| Basic | boolean, natural, integer, float, character, string, range, date, time, datetime, now |
| Image | image, dataImage |
| Color | color |
| Text | paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle |
| Name | first, last, name, cfirst, clast, cname |
| Web | url, domain, email, ip, tld |
| Address | area, region |
| Helper | capitalize, upper, lower, pick, shuffle |
| Miscellaneous | guid, id |
//例子
Mock.mock(/(\/api\/)([a-z]{2,4})(\/proxy\/query_common_credit_detail)/, {
"err":0,
"data": {
boo1:"@boolean",//隨機獲取boolean值
img:"@image",//隨機獲取圖片路徑
name:"@name"http://隨機獲取名字
}
});
/*打印出的數(shù)據(jù)是這樣的，得到了想要的隨機數(shù)據(jù)
data:{
img:"http://dummyimage.com/728x90",
name:"Betty Anderson",
boo1:false,
}*/
