Mock.js使用

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

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

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

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

安裝

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

數(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"] // 重復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風格的數(shù)據(jù)模板template轉(zhuǎn)換成JSON Schema

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

GPU云服務(wù)器云服務(wù)器 mock.js https使用oos使用本地怎么使用使用云服務(wù)器阿里云服務(wù)器虛擬主機使用使用

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/82196.html

發(fā)表評論

登陸后可評論

0條評論

Forest10

男|高級講師

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

TA的文章

flex布局示例代碼二

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

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

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

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

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

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

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

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

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

Mock.js使用

相關(guān)文章

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

**vue-vue項目中mock.js的使用**

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

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

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

發(fā)表評論

0條評論

Forest10

男|高級講師

TA的文章

flex布局示例代碼二

JavaScript 實現(xiàn) iOS 下的計算器

「譯」Flexbox 基本原理

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

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

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

CSS 尺寸

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

最新活動

資訊專欄INFORMATION COLUMN

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

Mock.js使用

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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