Mock.js使用

Forest10 發布于2019-08-20 15:22 / 445人閱讀

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

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

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

安裝

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

數據模板格式:

"name|rule": value

屬性名|生成規則: 屬性值

GET請求

發起get請求:

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

Mock.js響應:

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

// Mock響應模板
Mock.mock("http://test.com", {
    "user|1-3": [{   // 隨機生成1到3個數組元素
        "name": "@cname",  // 中文名稱
        "id|+1": 88,    // 屬性值自動加 1，初始值為88
        "age|18-28": 0,   // 18至28以內隨機整數, 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中順序選取元素作為結果
        "friends|2": ["jack", "jim"] // 重復2次屬性值生成一個新數組
    },{
        "gf": "@cname"
    }]
});

可以看到結果:

{
    "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": "田杰"
        }
    ]
}

響應時也可以是使用function, 如:

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

結果:

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

POST請求

發起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響應:

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

可以看到結果:

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

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

自定義響應時間

可以自定義設置響應時間, 可以是絕對值, 也可以是區間.

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

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

數據集

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

第一種:

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

第二種:

var Random = Mock.Random;
console.log(Random.email());  // 結果: 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());  // 結果: Saturday
console.log(Mock.mock("@weekday"));  // 結果: 112Tuesday
console.log(Random.sex());  // 結果: 男
console.log(Mock.mock("@sex"));  // 結果: 未知

校驗

Mock.valid(template, data): 用來校驗真實數據data是否與數據模板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風格的數據模板template轉換成JSON Schema

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82196.html

讓前端攻城師獨立于后端進行開發: Mock.js

摘要：一是什么目前的大部分公司的項目都是采用的前后端分離后端接口的開發和前端人員是同時進行的那么這個時候就會存在一個問題在頁面需要使用大量數據進行渲染生成前后端開發人員的接口也許并沒有寫完作為前端的我們也就沒有辦法獲取數據所以前端工程師就需要自己 showImg(https://segmentfault.com/img/remote/1460000013022563); 一.Mock.js是...

Fundebug 2019-08-22 14:06 評論0 收藏0
vue-vue項目中mock.js的使用

摘要：表示需要攔截的請求類型。添加信息攔截請求，調用函數先看一下這個是什么獲取信息更改后輸入標題，點擊提交，再點擊獲取，可以看到返回了我們提交的數據，并且是對象的形式，拿到數據后就可以做進一步的操作了。 mock.js 官網地址：mockjs.com/ mockjs是用來模擬產生一些虛擬的數據，可以讓前端在后端接口還沒有開發出來時獨立開發。我們可以使用真實的url，mockjs可以攔截ajax請求...

Object 2019-05-23 17:34 評論0 收藏0
前后端真正分離，網線被拔，也能請求數據（mock.js）

摘要：六使用擴展很多時候，服務器都有定義固定的返回值，如為則表示該請求有效。做了一回標題黨（別吐槽，說的大實話，真的可以不用后臺，就能拿數據，快！，向下看...）一、mock.js 是什么？官網機票?簡單的描述一下， mock.js 可以在后臺接口沒有更新時，來本地模擬數據達到測試界面功能的一個很方便的工具庫，mock.js 可以攔截ajax 請求，重指向并返回你定義的模板數據。更多細節，可查...

高璐 2019-05-23 13:53 評論0 收藏0
在mockjs官網上沒學到的

摘要：模板在模板中生成多條數據后返回數據請求攔截響應攔截封裝輸出引入使用數據模板數據占位符數據模板在官網都沒有定義。使用占位符表示。后記網上有好多關于的文章。 mock會攔截下指定的請求，并返回由mock計算出的數據。 mock攔截下的請求不會在network里出現。 mock方便前端脫離后端進行開發。先來一個dome說明怎么使用。mock怎么與項目結合使用。 mockjs demo...

CNZPH 2019-08-26 14:00 評論0 收藏0
webpack4+vue2+axios+vue-router的多頁+單頁混合應用框架

摘要：適用于主要入口頁面生成多頁，子頁面和次要頁面使用單頁形式的項目。文件用來存放固定的數據，而文件可更加自由的處理并返回數據。 VUE2的單頁應用框架有人分享了，多頁應用框架也有人分享了，這里分享一個單頁+多頁的混合應用框架吧，node.js寫了一個簡單的mock服務也集成在里面，整體初現雛形，還有很多需要優化和改善的地方。。。項目結構 │ ├─build ...

whatsns 2019-08-23 11:44 評論0 收藏0