首頁 > web前端 > js教程 > mockjs的常用方法分享

mockjs的常用方法分享

小云云
發布: 2018-03-28 17:02:32
原創
2933 人瀏覽過

本文主要和大家分享mockjs的常用方法,結合文字和程式碼和大家講解,希望能幫助大家。

一.mock.mock()

根據資料模板產生模擬資料。更關鍵的是,我們發起Ajax請求的時候要能夠接收這些資料。這就是Mock.mock()的作用!

Mock.mock( rurl?, rtype?, template|function( options ) )

(1).參數的意義與預設值

#參數 rurl :可選。表示需要攔截的 URL,可以是 URL 字串或 URL 正規。例如 /\/domain\/list.json/、'/domian/list.json'。
參數 rtype:可選。表示需要攔截的 Ajax 請求類型。例如 GET、POST、PUT、DELETE 等。
參數 template:可選。表示資料模板,可以是物件或字串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
參數 function(options):可選。表示用於產生響應資料的函數。
參數 options:指向本請求的 Ajax 選項集。

(2).方法

2.Mock.mock( template )   依據資料範本產生類比資料

3.Mock.mock( rurl, template )

3.Mock.mock( rurl, template )
#記錄資料模板。當攔截到符合 rurl 的 Ajax 請求時,將根據資料範本 template 產生類比數據,並以回應資料傳回。

4.Mock.mock( rurl, function( options ) )
記錄用於產生回應資料的函數。當攔截到符合 rurl 的 Ajax 請求時,函數 function(options) 將被執行,並將執行結果作為回應資料回傳。

5.Mock.mock( rurl, rtype, template )
記錄資料範本。當攔截到符合 rurl 和 rtype 的 Ajax 請求時,則會根據資料範本 template 產生類比數據,並以回應資料傳回。

7.Mock.mock( rurl, rtype, function( options ) )

記錄用於產生回應資料的函數。當攔截到符合 rurl 和 rtype 的 Ajax 請求時,函數 function(options) 會被執行,並將執行結果回復為回應資料。

(3).列子

var data8 = Mock.mock(/\.json/,"get",{  
  "name":"@name",  
  "isTrue|1":true,  
  "color":"@color"  
})  
  
Mock.mock(/\.json/, 'post', function(options) {  
    return options.type  
})  
$.ajax({  
    url: 'hello.json',  
    type: 'get',  
    dataType: 'json'  
}).done(function (data, status, jqXHR) {  
    $(&#39;<pre class="brush:php;toolbar:false">&#39;).text(JSON.stringify(data, null, 4))  
        .appendTo(&#39;body&#39;)  
})  
  
$.ajax({  
    url: &#39;hello.json&#39;,  
    type: &#39;post&#39;,  
    dataType: &#39;json&#39;  
}).done(function (data, status, jqXHR) {  
    $(&#39;<pre class="brush:php;toolbar:false">&#39;).text(JSON.stringify(data, null, 4))  
        .appendTo(&#39;body&#39;)  
})
登入後複製

查看官網列子

二.Mock.Random

Mock.Random 是工具類,用於產生各種隨機資料

(1).基本上使用

1.Mock.Random.boolean() 傳回一個隨機的布林值。

2.Random.natural() 回傳一個隨機的自然數(大於等於 0 的整數)

3.Random.integer()傳回一個隨機的整數。

4.Random.float()傳回一個隨機的浮點數。

5.Random.character()傳回一個隨機字元。

6.Random.string()傳回一個隨機字串

7.Random.range( start?, stop, step? )回傳一個整數陣列。

查看官方網站

(2).日期+時間

#1.日期
Random.date()  "2002-10-23"
Random.date('yyyy-MM-dd')  // "1975-04-27"
Random.date('yy-MM-dd')    //   "00-01-08"

#2.時間:
Random.time()   // "05:06:06"

3.日期與時間
Random.datetime('yyyy-MM-dd A HH: mm:ss') 

4.目前的日期和時間 Ranndom.now()

(3).模擬Web資料

(4).模擬地理位置資料

(5).顏色+文字+姓氏(名字)

請查看官網

三.Mock.valid( template, data )

#校驗真實資料data 是否與資料模板template 相符。



template 必選。  表示資料模板,可以是物件或字串。例如 { 'list|1-10':[{}] }、'@EMAIL'。
data   必選。 表示真實資料。

eg:

var template = {
    name: &#39;value1&#39;
}
var data = {
    name: &#39;value2&#39;
}
Mock.valid(template, data)
// =>
[
    {
        "path": [
            "data",
            "name"
        ],
        "type": "value",
        "actual": "value2",
        "expected": "value1",
        "action": "equal to",
        "message": "[VALUE] Expect ROOT.name&#39;value is equal to value1, but is value2"
    }
]
登入後複製

四.Mock.toJSONSchema( template )

把 Mock.js 風格的資料模板 template 轉換成 JSON Schema。

五.Mock.setup()

###Mock.setup( settings ) 設定攔截 Ajax 請求時的行為。支援的配置項目有:timeout。 ###
  1. 參數的意義與預設值
        settings  必選。配置項集合。
        timeout   可選。
         指定被攔截的 Ajax 請求的回應時間,單位為毫秒。數值可以是正整數,例如 400,表示 400 毫秒 後才會回傳回應內容;也可以是橫槓 '-' 風格的字串,例如 '200-600',表示回應時間介於 200 和 600 毫秒之間。預設值是'10-100'。

    Mock.setup({
        timeout: 400
    })
    Mock.setup({
        timeout: '200-600'
    })

    目前,介面 Mock.setup( settings ) 僅用於設定 Ajax 請求,且將來可能用於設定 Mock 的其他行為。

#

以上是mockjs的常用方法分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板