Mock.js開發(fā)中攔截Ajax

Mock.js 是一款前端開發(fā)中攔截Ajax請求再生成隨機數(shù)據(jù)響應(yīng)的工具.可以用來模擬服務(wù)器響應(yīng). 優(yōu)點是非常簡單方便, 無侵入性, 基本覆蓋常用的接口數(shù)據(jù)類型.

在我們的生產(chǎn)實際中，后端的接口往往是較晚才會出來，并且還要寫接口文檔，于是我們的前端的許多開發(fā)都要等到接口給我們才能進行，這樣對于我們前端來說顯得十分的被動，于是有沒有可以制造假數(shù)據(jù)來模擬后端接口呢，答案是肯定的。應(yīng)該有人通過編寫json文件來模擬后臺數(shù)據(jù)，但是很局限，比如增刪改查這些接口怎么實現(xiàn)呢，于是今天我們來介紹一款非常強大的插件Mock.js，可以非常方便的模擬后端的數(shù)據(jù)，也可以輕松的實現(xiàn)增刪改查這些操作。

大概記錄下使用過程, 詳細使用可以參見Mock文檔 Mock Wiki

安裝

使用npm安裝: npm install mockjs;
或直接<script src="http://mockjs.com/dist/mock.js"></script>;

數(shù)據(jù)模板格式:

'name|rule': value

屬性名|生成規(guī)則: 屬性值

GET請求

發(fā)起get請求:

$.ajax({
    url: 'http://test.com',
    type: 'get',
    dataType: 'json'
}).done(function(data, status, xhr) {
    console.log(JSON.stringify(data, null, 4));
});

Mock.js響應(yīng):

var obj = {'aa':'11', 'bb':'22', 'cc':'33', 'dd':'44'};

// Mock響應(yīng)模板
Mock.mock('http://test.com', {
    "user|1-3": [{   // 隨機生成1到3個數(shù)組元素
        'name': '@cname',  // 中文名稱
        'id|+1': 88,    // 屬性值自動加 1，初始值為88
        'age|18-28': 0,   // 18至28以內(nèi)隨機整數(shù), 0只是用來確定類型
        'birthday': '@date("yyyy-MM-dd")',  // 日期
        'city': '@city(true)',   // 中國城市
        'color': '@color',  // 16進制顏色
        'isMale|1': true,  // 布爾值
        'isFat|1-2': true,  // true的概率是1/3
        'fromObj|2': obj,  // 從obj對象中隨機獲取2個屬性
        'fromObj2|1-3': obj,  // 從obj對象中隨機獲取1至3個屬性
        'brother|1': ['jack', 'jim'], // 隨機選取 1 個元素
        'sister|+1': ['jack', 'jim', 'lily'], // array中順序選取元素作為結(jié)果
        'friends|2': ['jack', 'jim'] // 重復(fù)2次屬性值生成一個新數(shù)組
    },{
        'gf': '@cname'
    }]
});

可以看到結(jié)果:

{
    "user": [
        {
            "name": "董靜",
            "id": 88,
            "age": 25,
            "birthday": "2015-04-01",
            "city": "湖南省 懷化市",
            "color": "#c0f279",
            "isMale": false,
            "isFat": false,
            "fromObj": {
                "dd": "44",
                "aa": "11"
            },
            "fromObj2": {
                "bb": "22",
                "cc": "33"
            },
            "brother": "jack",
            "sister": "jack",
            "friends": [
                "jack",
                "jim",
                "jack",
                "jim"
            ]
        },
        {
            "gf": "田杰"
        }
    ]
}

響應(yīng)時也可以是使用function, 如:

Mock.mock('http://test.com', 'get', function() {
    return Mock.mock({
        "user|1-3": [{
            'name': '@cname',
            'id': 88
        }
      ]
    });
});

結(jié)果:

{
    "user": [
        {
            "name": "許超",
            "id": 88
        }
    ]
}

POST請求

發(fā)起post請求:

$.ajax({
    url: 'http://test.com',
    type: 'post',
    dataType: 'json',
    data: {
      account: 888,
      pwd: 'abc123'
    }
}).done(function(data, status, xhr) {
    console.log(JSON.stringify(data, null, 4));
});

Mock.js響應(yīng):

Mock.mock('http://test.com', function(options) {
    console.log(options);
    return Mock.mock({
        "user|1-3": [{
            'name': '@cname',
            'id|+1': 88
        }
      ]
    });
});

可以看到結(jié)果:

{url: "http://test.com", type: "POST", body: "account=888&pwd=abc123"}

{
    "user": [
        {
            "name": "曾明",
            "id": 88
        }
    ]
}

自定義響應(yīng)時間

可以自定義設(shè)置響應(yīng)時間, 可以是絕對值, 也可以是區(qū)間.

// 設(shè)置4秒后再響應(yīng)
Mock.setup({ timeout: 4000 });  

// 設(shè)置1秒至4秒間響應(yīng)
Mock.setup({ timeout: '1000-4000' });

數(shù)據(jù)集

Mock.Random是一個工具類，用于生成各種格式隨機數(shù)據(jù). 有兩種寫法:

第一種:

// 生成一個email格式的字符串
console.log(Mock.mock('@email'));  // 結(jié)果: s.uorjeqdou@crqfpdypt.gw

第二種:

var Random = Mock.Random;
console.log(Random.email());  // 結(jié)果: r.quyppn@yit.cv

提供的種類有:

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

如果上面沒有你需要的種類, 還可以自定義擴展, 如下:

Random.extend({
    weekday: function(date) {
        var weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        return this.pick(weekdays);
    },
    sex: function(date) {
        var sexes = ['男', '女', '中性', '未知'];
        return this.pick(sexes);
    }
});

console.log(Random.weekday());  // 結(jié)果: Saturday
console.log(Mock.mock('@weekday'));  // 結(jié)果: 112Tuesday
console.log(Random.sex());  // 結(jié)果: 男
console.log(Mock.mock('@sex'));  // 結(jié)果: 未知

校驗

Mock.valid(template, data): 用來校驗真實數(shù)據(jù)data是否與數(shù)據(jù)模板template匹配

var tempObj = { "user|1-3": [{ 'name': '@cname', 'id|18-28': 88 } ]};
var realData = { "user": [{ 'name': '張三', 'id': 90 } ]};
console.log(Mock.valid(tempObj, realData));

JSON Schema

Mock.toJSONSchema(template): 用來把Mock.js風(fēng)格的數(shù)據(jù)模板template轉(zhuǎn)換成JSON Schema

var tempObj = { "user|1-3": [{ 'name': '@cname', 'id|18-28': 88 } ]};
console.log(Mock.toJSONSchema(tempObj));

增刪改查這些操作

1.一個簡單的例子：

Mock.mock('http://123.com',{
    'name|3':'fei',//這個定義數(shù)據(jù)的模板形式下面會介紹
    'age|20-30':25,
})

$.ajax({
    url:'http://123.com',
    dataType:'json',
    success:function(e){
       console.log(e)
    }
})

在這個例子中我們截獲地址為http://123.com返回的數(shù)據(jù)是一個擁有name和age的對象，那么ajax返回的數(shù)據(jù)就是Mock定義的數(shù)據(jù)，返回的數(shù)據(jù)格式如下：

{
     name:'feifeifei',
     age:26,
}

至于上面的定義模板數(shù)據(jù)的格式是什么意思，下面就給大家介紹。

2.介紹如何定義數(shù)據(jù)

數(shù)據(jù)模板中的每個屬性由 3 部分構(gòu)成：屬性名、生成規(guī)則、屬性值：

// 屬性名 name
// 生成規(guī)則 rule
// 屬性值 value
'name|rule': value
1.'name|min-max': string 通過重復(fù) string 生成一個字符串，重復(fù)次數(shù)大于等于 min，小于等于 max 例子：'lastName|2-5':'jiang', 重復(fù)jiang這個字符串 2-5 次

2.'name|count': string 通過重復(fù) string 生成一個字符串，重復(fù)次數(shù)等于 count
例子：'firstName|3':'fei', 重復(fù)fei這個字符串 3 次，打印出來就是'feifeifei'。

3.'name|min-max': number 生成一個大于等于 min、小于等于 max 的整數(shù)，屬性值 number 只是用來確定類型。
例子：'age|20-30':25, 生成一個大于等于 20、小于等于 30 的整數(shù)，屬性值 25 只是用來確定類型

4.'name|+1': number 屬性值自動加 1，初始值為 number
例子：'big|+1':0, 屬性值自動加 1，初始值為 0，以后每次請求在前面的基礎(chǔ)上+1

5.'name|min-max.dmin-dmax': number 生成一個浮點數(shù)，整數(shù)部分大于等于 min、小于等于 max，小數(shù)部分保留 dmin 到 dmax 位。
例子：'weight|100-120.2-5':110.24, 生成一個浮點數(shù),整數(shù)部分大于等于 100、小于等于 120，小數(shù)部分保留 2 到 5 位

6.'name|1': boolean 隨機生成一個布爾值，值為 true 的概率是 1/2，值為 false 的概率同樣是 1/2
例子：'likeMovie|1':Boolean, 隨機生成一個布爾值，值為 true 的概率是 1/2，值為 false 的概率同樣是 1/2。

7.屬性值是對象：var obj={'host':'www.baidu','port':'12345','node':'selector'}

7-1.'name|count': object 從屬性值 object 中隨機選取 count 個屬性。例子：'life1|2':obj, 從屬性值 obj 中隨機選取 2 個屬性

7-2.'name|min-max': object 從屬性值 object 中隨機選取 min 到 max個屬性
　　例子：'life1|1-2':obj, 從屬性值 obj 中隨機選取 1 到 2 個屬性。

8.屬性值是數(shù)組：var arr=['momo','yanzi','ziwei']

8-1.'name|1': array 從屬性值 array 中隨機選取 1 個元素，作為最終值
　　例子：'friend1|1':arr, 從數(shù)組 arr 中隨機選取 1 個元素，作為最終值。

8-2.'name|+1': array 從屬性值 array 中順序選取 1 個元素，作為最終值。
　　例子：'friend2|+1':arr, 從屬性值 arr 中順序選取 1 個元素，作為最終值，第一次就是'momo',第二次請求就是'yanzi'

8-3.'name|count': array 通過重復(fù)屬性值 array 生成一個新數(shù)組，重復(fù)次數(shù)為 count。
　　例子：'friend3|2':arr, 重復(fù)arr這個數(shù)字2次作為這個屬性值，得到數(shù)據(jù)應(yīng)該是['momo','yanzi','ziwei','momo','yanzi','ziwei']

8-4.'name|min-max': array 通過重復(fù)屬性值 array 生成一個新數(shù)組，重復(fù)次數(shù)大于等于 min，小于等于 `max
　　例子：'friend3|2-3':arr,//通過重復(fù)屬性值 arr 生成一個新數(shù)組，重復(fù)次數(shù)大于等于 2，小于等于 3

3.實際的ajax請求例子：

var arr=['momo','yanzi','ziwei']
        var obj={
            'host':'www.baidu',
            'port':'12345',
            'node':'selector'
        }

        Mock.mock('http://www.bai.com',{
            'firstName|3':'fei',//重復(fù)fei這個字符串 3 次，打印出來就是'feifeifei'。
            'lastName|2-5':'jiang',//重復(fù)jiang這個字符串 2-5 次。
            'big|+1':0, //屬性值自動加 1，初始值為 0
            'age|20-30':25,//生成一個大于等于 20、小于等于 30 的整數(shù)，屬性值 25 只是用來確定類型
            'weight|100-120.2-5':110.24,//生成一個浮點數(shù),整數(shù)部分大于等于 100、小于等于 120，小數(shù)部分保留 2 到 5 位。
            'likeMovie|1':Boolean,//隨機生成一個布爾值，值為 true 的概率是 1/2，值為 false 的概率同樣是 1/2。
            'friend1|1':arr,//從數(shù)組 arr 中隨機選取 1 個元素，作為最終值。
            'friend2|+1':arr,//從屬性值 arr 中順序選取 1 個元素，作為最終值
            'friend3|2-3':arr,//通過重復(fù)屬性值 arr 生成一個新數(shù)組，重復(fù)次數(shù)大于等于 2，小于等于 3。
            'life1|2':obj,//從屬性值 obj 中隨機選取 2 個屬性
            'life1|1-2':obj,//從屬性值 obj 中隨機選取 1 到 2 個屬性。
            'regexp1':/^[a-z][A-Z][0-9]$/,//生成的符合正則表達式的字符串

        })

        $.ajax({
            url:'http://www.bai.com',
            dataType:'json',
            success:function(e){
                console.log(e)
            }
        })

4.如何實現(xiàn)數(shù)據(jù) 增 刪 改 查 的模擬數(shù)據(jù)接口

下面我就模擬后端刪除功能的接口實現(xiàn)

/*模擬刪除數(shù)據(jù)的方式*/
var arr=[
    {name:'fei',age:20,id:1},
    {name:'liang',age:30,id:2},
    {name:'jun',age:40,id:3},
    {name:'ming',age:50,id:4}
]

Mock.mock('http://www.bai.com','delete',function(options){
    var id = parseInt(options.body.split("=")[1])//獲取刪除的id
    var index;
    for(var i in arr){
        if(arr[i].id===id){//在數(shù)組arr里找到這個id
            index=i
            break;
        }
    }
    arr.splice(index,1)//把這個id對應(yīng)的對象從數(shù)組里刪除
    return arr;//返回這個數(shù)組,也就是返回處理后的假數(shù)據(jù)
})
$.ajax({
    url:'http://www.bai.com',
    type:"DELETE",
    data:{
        id:1//假設(shè)需要刪除id=1的數(shù)據(jù)
    },
    dataType:'json',
    success:function(e){
        console.log(e)
    }
})

至于更多的詳細文檔可以去官方網(wǎng)站查看，http://mockjs.com/，Mock.js簡單易學(xué)，可以便于前端的快速開發(fā)，也可以自己定義好需要的格式，讓后端配合你，按照你的格式編寫他的后端代碼。

參考:https://www.cnblogs.com/zhenfei-jiang/p/7235339.html

https://segmentfault.com/a/1190000008839142

隨機數(shù)據(jù)例子：
http://mockjs.com/examples.html#Random.cparagraph(%20min?,%20max?%20)

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前端開發(fā)過程中免不了出現(xiàn)等接口的情況，而靜態(tài) JSON 不足以體現(xiàn)前端高大上的逼格，是時候拿出 mock.js 了...
    MrWelson閱讀 1,924評論 0贊 0
  • 學(xué)習(xí)目的 ①開發(fā)時，后端還沒完成數(shù)據(jù)輸出，前端只好寫靜態(tài)模擬數(shù)據(jù)。數(shù)據(jù)牽制與后端，前端頁面無法很好的展示，...
    _1633_閱讀 4,714評論 0贊 24
  • Mock簡明文檔 Mock.mock() Mock.mock( requestUrl?, requestType?...
    殺個程序猿祭天閱讀 4,602評論 1贊 8
  • 語法規(guī)范 包含兩部分：1）數(shù)據(jù)模板定義規(guī)范（Data Template Definition,DTD）2）數(shù)據(jù)占位...
    0981b16f19c7閱讀 2,449評論 0贊 0
  • 一、Mock簡介 ??在我們的生產(chǎn)實際中，后端的接口往往是較晚才會出來，并且還要寫接口文檔，于是我們的前端的許多開...
    無劍_君閱讀 957評論 0贊 9

友情鏈接更多精彩內(nèi)容