国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

Mock.js使用

Forest10 / 449人閱讀

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

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

大概記錄下使用過(guò)程, 詳細(xì)使用可以參見(jiàn)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",  // 中文名稱(chēng)
        "id|+1": 88,    // 屬性值自動(dòng)加 1，初始值為88
        "age|18-28": 0,   // 18至28以?xún)?nèi)隨機(jī)整數(shù), 0只是用來(lái)確定類(lèi)型
        "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è)工具類(lèi)，用于生成各種格式隨機(jī)數(shù)據(jù). 有兩種寫(xiě)法:

第一種:

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

第二種:

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

提供的種類(lèi)有:

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

如果上面沒(méi)有你需要的種類(lèi), 還可以自定義擴(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): 用來(lái)校驗(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): 用來(lái)把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://m.specialneedsforspecialkids.com/yun/82196.html

相關(guān)文章

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

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

    Fundebug 評(píng)論0 收藏0

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

    摘要：表示需要攔截的請(qǐng)求類(lèi)型。添加信息攔截請(qǐng)求，調(diào)用函數(shù)先看一下這個(gè)是什么獲取信息更改后輸入標(biāo)題，點(diǎn)擊提交，再點(diǎn)擊獲取，可以看到返回了我們提交的數(shù)據(jù)，并且是對(duì)象的形式，拿到數(shù)據(jù)后就可以做進(jìn)一步的操作了。 mock.js 官網(wǎng)地址：mockjs.com/ mockjs是用來(lái)模擬產(chǎn)生一些虛擬的數(shù)據(jù)，可以讓前端在后端接口還沒(méi)有開(kāi)發(fā)出來(lái)時(shí)獨(dú)立開(kāi)發(fā)。我們可以使用真實(shí)的url，mockjs可以攔截ajax請(qǐng)求...

    Object 評(píng)論0 收藏0

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

    摘要：六使用擴(kuò)展很多時(shí)候，服務(wù)器都有定義固定的返回值，如為則表示該請(qǐng)求有效。做了一回標(biāo)題黨 （別吐槽，說(shuō)的大實(shí)話(huà)，真的可以不用后臺(tái)，就能拿數(shù)據(jù)，快！，向下看...）一、mock.js 是什么？官網(wǎng)機(jī)票?簡(jiǎn)單的描述一下， mock.js 可以在后臺(tái)接口沒(méi)有更新時(shí)，來(lái)本地模擬數(shù)據(jù)達(dá)到測(cè)試界面功能的一個(gè)很方便的工具庫(kù)，mock.js 可以攔截ajax 請(qǐng)求， 重指向并返回你定義的模板數(shù)據(jù)。更多細(xì)節(jié)，可查...

    高璐 評(píng)論0 收藏0

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

    摘要：模板在模板中生成多條數(shù)據(jù)后返回?cái)?shù)據(jù)請(qǐng)求攔截響應(yīng)攔截封裝輸出引入使用數(shù)據(jù)模板數(shù)據(jù)占位符數(shù)據(jù)模板在官網(wǎng)都沒(méi)有定義。使用占位符表示。后記網(wǎng)上有好多關(guān)于的文章。 mock會(huì)攔截下指定的請(qǐng)求，并返回由mock計(jì)算出的數(shù)據(jù)。 mock攔截下的請(qǐng)求不會(huì)在network里出現(xiàn)。 mock方便前端脫離后端進(jìn)行開(kāi)發(fā)。 先來(lái)一個(gè)dome說(shuō)明怎么使用。mock怎么與項(xiàng)目結(jié)合使用。 mockjs demo...

    CNZPH 評(píng)論0 收藏0

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

    摘要：適用于主要入口頁(yè)面生成多頁(yè)，子頁(yè)面和次要頁(yè)面使用單頁(yè)形式的項(xiàng)目。文件用來(lái)存放固定的數(shù)據(jù)，而文件可更加自由的處理并返回?cái)?shù)據(jù)。 VUE2的單頁(yè)應(yīng)用框架有人分享了，多頁(yè)應(yīng)用框架也有人分享了，這里分享一個(gè)單頁(yè)+多頁(yè)的混合應(yīng)用框架吧，node.js寫(xiě)了一個(gè)簡(jiǎn)單的mock服務(wù)也集成在里面，整體初現(xiàn)雛形，還有很多需要優(yōu)化和改善的地方。。。 項(xiàng)目結(jié)構(gòu) │ ├─build ...

    whatsns 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<