Mock.js使用

Forest10 發(fā)布于2019-08-20 15:22 / 452人閱讀

摘要：是一款前端開發(fā)中攔截請(qǐng)求再生成隨機(jī)數(shù)據(jù)響應(yīng)的工具可以用來模擬服務(wù)器響應(yīng)優(yōu)點(diǎn)是非常簡(jiǎn)單方便無侵入性基本覆蓋常用的接口數(shù)據(jù)類型大概記錄下使用過程詳細(xì)使用可以參見文檔安裝使用安裝或直接數(shù)據(jù)模板格式屬性名生成規(guī)則屬性值請(qǐng)求發(fā)起請(qǐng)求響應(yīng)響應(yīng)模板隨機(jī)

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

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

安裝

使用npm安裝: npm install mockjs;
或直接;

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

"name|rule": value

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

GET請(qǐng)求

發(fā)起get請(qǐng)求:

$.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": [{   // 隨機(jī)生成1到3個(gè)數(shù)組元素
        "name": "@cname",  // 中文名稱
        "id|+1": 88,    // 屬性值自動(dòng)加 1，初始值為88
        "age|18-28": 0,   // 18至28以內(nèi)隨機(jī)整數(shù), 0只是用來確定類型
        "birthday": "@date("yyyy-MM-dd")",  // 日期
        "city": "@city(true)",   // 中國(guó)城市
        "color": "@color",  // 16進(jìn)制顏色
        "isMale|1": true,  // 布爾值
        "isFat|1-2": true,  // true的概率是1/3
        "fromObj|2": obj,  // 從obj對(duì)象中隨機(jī)獲取2個(gè)屬性
        "fromObj2|1-3": obj,  // 從obj對(duì)象中隨機(jī)獲取1至3個(gè)屬性
        "brother|1": ["jack", "jim"], // 隨機(jī)選取 1 個(gè)元素
        "sister|+1": ["jack", "jim", "lily"], // array中順序選取元素作為結(jié)果
        "friends|2": ["jack", "jim"] // 重復(fù)2次屬性值生成一個(gè)新數(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)時(shí)也可以是使用function, 如:

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

結(jié)果:

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

POST請(qǐng)求

發(fā)起post請(qǐng)求:

$.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í)間

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

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

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

數(shù)據(jù)集

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

第一種:

// 生成一個(gè)email格式的字符串
console.log(Mock.mock("@email"));  // 結(jié)果: [email protected]

第二種:

var Random = Mock.Random;
console.log(Random.email());  // 結(jié)果: [email protected]

提供的種類有:

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

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

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é)果: 未知

校驗(yàn)

Mock.valid(template, data): 用來校驗(yàn)真實(shí)數(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));

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82196.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Forest10

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

flex布局示例代碼二

閱讀 1653·2019-08-30 15:44
JavaScript 實(shí)現(xiàn) iOS 下的計(jì)算器

閱讀 2576·2019-08-30 11:19
「譯」Flexbox 基本原理

閱讀 407·2019-08-30 11:06
Codepen 每周精選：值得收藏的24個(gè)頁面特效（2018-5-21）

閱讀 1570·2019-08-29 15:27
簡(jiǎn)單說通過JS的隱式轉(zhuǎn)換，關(guān)鍵時(shí)刻救你一命

閱讀 3088·2019-08-29 13:44
網(wǎng)站代碼優(yōu)化

閱讀 1631·2019-08-28 18:28
CSS 尺寸

閱讀 2361·2019-08-28 18:17
【Vue原理】Compile - 源碼版之 Parse 主要流程

閱讀 1991·2019-08-26 10:41

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

Mock.js使用

相關(guān)文章

**讓前端攻城師獨(dú)立于后端進(jìn)行開發(fā): Mock.js**

**vue-vue項(xiàng)目中mock.js的使用**

**前后端真正分離，網(wǎng)線被拔，也能請(qǐng)求數(shù)據(jù)（mock.js）**

**在mockjs官網(wǎng)上沒學(xué)到的**

webpack4+vue2+axios+vue-router的多頁+單頁混合應(yīng)用框架

發(fā)表評(píng)論

0條評(píng)論

Forest10

男|高級(jí)講師

TA的文章

flex布局示例代碼二

JavaScript 實(shí)現(xiàn) iOS 下的計(jì)算器

「譯」Flexbox 基本原理

Codepen 每周精選：值得收藏的24個(gè)頁面特效（2018-5-21）

簡(jiǎn)單說通過JS的隱式轉(zhuǎn)換，關(guān)鍵時(shí)刻救你一命

網(wǎng)站代碼優(yōu)化

CSS 尺寸

【Vue原理】Compile - 源碼版之 Parse 主要流程

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

Mock.js使用

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！