mock.js 使用教程

mock.js

數據模板

#查看模板生成的數據
var data = Mock.mock({
    //list|1-10 數組元素個數隨機范圍， id|+2 屬性值遞增, age|20-30數值隨機范圍
    // test|3.2-5 3.xx-3.xxxxx 整數位3，小數位位數范圍為2-5
    //'yourname|2-4': 'alice-' 重復字符串的次數范圍2-4
    //常規真實數據格式，@name @color @url @first @last

    'list|1-10': [{'id|+2': 1 , 'age|20-30': 100}],
    'name': '@name',
    'color': '@color',
    'url': '@url',
    'email': '@email',
    'friends|3': [{name: '@name'}],
    'price|10-20.2-5': 11,
    'cost|10-20.3': 11,
    'test|3.2-5': 52,
    'yourname|2-4': 'alice-'
    });

    JSON.stringify(data, null, 2);

var data = Mock.mock({
     name: {
     first: '@FIRST',
     middle: '@FIRST',
     last: '@LAST',
     full: '@first @middle @last'
        }
    });
JSON.stringify(data, null, 2);

#攔截請求，返回模擬數據
var Mock.mock('http://g.cn', {
    'list|3-8': [{'id|+3': 1}]
    });

1. 數據模板定義
   'name|rule': value name 為屬性名, rule 為規則, value 為值，屬性名和生成規則之間用|分隔，生成規則的格式有7種：

   • 'name|min-max': value
   • 'name|count': value
   • 'name|min-max.dmin-dmax': value //.dmin-dmax 小數點后保留的位數范圍
   • 'name|min-max.dcount': value //小數點后保留dcount位
   • 'name|count.dmin-dmax': value //貌似用處不大
   • 'name|+step': value //從value遞增/減

   **屬性值可以包含占位符(如@name)，屬性值指定了最終值的初始值和數據類型. **

   1. 屬性值是字符串 String

      • 'name|min-max': 'value' 通過重復 'value' 生成一個字符串，重復次數大於等於 min，小於等於 max。

      • 'name|count': 'value' 通過重復 'value' 生成一個字符串，重復次數等於 count。

   2. 屬性值是數字 Number

      • 'name|+1': 100 屬性值自動加 1，初始值為 100
      • 'name|1-100': 100 生成一個大於等於 1、小於等於 100 的整數，屬性值 100 只用來確定類型。
      • 'name|1-100.1-10': 100 生成一個浮點數，整數部分大於等於 1、小於等於 100，小數部分保留 1 到 10 位。

   3. 屬性值是布爾型 Boolean

      • 'name|1': value 隨機生成一個布爾值，值為 true 的概率是 1/2，值為 false 的概率是 1/2。
      • 'name|min-max': value 隨機生成一個布爾值，值為 value 的概率是 min / (min + max)，值為 !value 的概率是 max / (min + max)。

   4. 屬性值是對象 Object

      • 'name|min-max': {} 從屬性值 {} 中隨機選取 min 到 max 個屬性。
      • 'name|count': {} 從屬性值 {} 中隨機選取 count 個屬性。

   5. 屬性值是數組 Array

      • 'name|1': [{}, {} ...] 從屬性值 [{}, {} ...] 中隨機選取 1 個元素，作為最終值。
      • 'name|min-max': [{}, {} ...] 通過重復屬性值 [{}, {} ...] 生成一個新數組，重復次數大於等於 min，小於等於 max。
      • 'name|count': [{}, {} ...] 通過重復屬性值 [{}, {} ...] 生成一個新數組，重復次數為 count。

   6. 屬性值是數組 Function

      • 'name': function(){} 執行函數 function(){}，取其返回值作為最終的屬性值，上下文為 'name' 所在的對象。

2. 數據占位符定義
   占位符 只是在屬性值字符串中占個位置，並不出現在最終的屬性值中。占位符 的格式為：

    @占位符
    @占位符(參數 [, 參數])
   

   • 用 @ 來標識其后的字符串是 占位符。

   • 占位符 引用的是 Mock.Random 中的方法。

   • 通過 Mock.Random.extend() 來擴展自定義占位符。

   • 占位符 也可以引用 數據模板 中的屬性。

   • 占位符 會優先引用 數據模板 中的屬性

       {
        name: {
        first: '@FIRST',
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
           }
       }
       // =>
       {
        "name": {
        "first": "Charles",
        "middle": "Brenda",
        "last": "Lopez",
        "full": "Charles Brenda Lopez"
           }
       }
     

常用方法

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

根據數據模板生成模擬數據。

參數的含義和默認值如下所示：

參數 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 選項集。

Mock.mockjax(library)

覆蓋（攔截） Ajax 請求，目前內置支持 jQuery、Zepto、KISSY。

Mock.Random

Mock.Random 是一個工具類，用於生成各種隨機數據。Mock.Random 的方法在數據模板中稱為“占位符”，引用格式為 @占位符(參數 [, 參數]) 。

Mock.tpl(input, options, helpers, partials)

基於 Handlebars、Mustache 的 HTML 模板生成模擬數據。