Mock.js：先後端分離開發工具

概述

Mock.js實現的功能

1. 基於 數據模板 生成數據
2. 基於 HTML模板 生成數據
3. 攔截並模擬 Ajax請求

用法

瀏覽器：

<!-- （必選）加載 Mock --> <script src="http://mockjs.com/dist/mock.js"></script> <script> // 使用 Mock var data = Mock.mock({ 'list|1-10': [{ 'id|+1': 1 }] }); $('<pre>').text(JSON.stringify(data, null, 4)) .appendTo('body') </script> 

返回值:

{
"list": [ { "id": 1 }, { "id": 2 }, { "id": 3 } ] } 

---

JQuery：

配置模擬數據：

Mock.mock('http://g.cn', { 'name' : '@name', 'age|1-100': 100, 'color' : '@color' }); 

發送Ajax請求：

$.ajax({
    url: 'http://g.cn', dataType:'json' }).done(function(data, status, xhr){ console.log( JSON.stringify(data, null, 4) ) })； 

返回數據：

// 結果1 { "name": "Elizabeth Hall", "age": 91, "color": "#0e64ea" } // 結果2 { "name": "Michael Taylor", "age": 61, "color": "#081086" } 

---

Node.js：

// 安裝 npm install mockjs // 使用 var Mock = require('mockjs'); var data = Mock.mock({ 'list|1-10': [{ 'id|+1': 1 }] }); console.log(JSON.stringify(data, null, 4)) 

---

Angular.js:

<!-- 引用 --> <script src="http://mockjs.com/dist/mock-min.js"></script> <script src="http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js"></script> <!-- 兼容angular (mock.js默認不兼容angular，需額外引用兼容包)--> <script src="./src/mock.angular.js"></script> <!-- 模擬數據 --> <script src="./mockData.js"></script> <!-- 使用 --> <script> (function() { (function() { var app; app = angular.module('app', []); //使用mockjax方法覆蓋Ajax請求 Mock.mockjax(app); return app.controller('appCtrl', function($scope, $http) { var box; box = $scope.box = []; $scope.get = function() { $http({ url: 'http://www.baidu.com', method: 'POST', params: {a: 1}, data : {b:1} }).success(function(data) { return box.push(data); }); $http({ url: 'http://baidu.com' }).success(function(data) { console.log(data); }); }; return $scope.get(); }); })(); }).call(this); </script> 

mock數據mockData.js:

Mock.mock('http://www.baidu.com', { 'name': '@name()', 'age|1-100': 100, 'color': '@color' }); 

---

語法

Mock.js 的語法規範包括兩部分：

1. 數據模板定義（Data Temaplte Definition，DTD）
2. 數據佔位符定義（Data Placeholder Definition，DPD）

數據模板定義 DTD

數據模板中的每一個屬性由 3 部分構成：屬性名、生成規則、屬性值：

// 屬性名 name // 生成規則 rule // 屬性值 value 'name|rule': value 

注意：

• 屬性名 和 生成規則 之間用 | 分隔。
• 生成規則 是可選的。

• 生成規則 有 7 種格式：

  1. 'name|min-max': value
  2. 'name|count': value
  3. 'name|min-max.dmin-dmax': value
  4. 'name|min-max.dcount': value
  5. 'name|count.dmin-dmax': value
  6. 'name|count.dcount': value
  7. 'name|+step': value

• 生成規則 的 含義 須要依賴 屬性值 才能肯定。

• 屬性值 中能夠含有 @佔位符。
• 屬性值 還指定了最終值的初始值和類型。

生成規則和示例：

1. 屬性值是字符串 String

1. 'name|min-max': 'value' 經過重複 'value' 生成一個字符串，重複次數大於等於 min，小於等於 max。
2. 'name|count': 'value' 經過重複 'value' 生成一個字符串，重複次數等於 count。

2. 屬性值是數字 Number

1. 'name|+1': 100 屬性值自動加 1，初始值爲 100
2. 'name|1-100': 100 生成一個大於等於 一、小於等於 100 的整數，屬性值 100 只用來肯定類型。

3. 'name|1-100.1-10': 100 生成一個浮點數，整數部分大於等於 一、小於等於 100，小數部分保留 1 到 10 位。

   {
       'number1|1-100.1-10': 1, 'number2|123.1-10': 1, 'number3|123.3': 1, 'number4|123.10': 1.123 } // => { "number1": 12.92, "number2": 123.51, "number3": 123.777, "number4": 123.1231091814 } 

3. 屬性值是布爾型 Boolean

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

4. 屬性值是對象 Object

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

5. 屬性值是數組 Array

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

6. 屬性值是數組 Function

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

數據佔位符定義 DPD

佔位符 只是在屬性值字符串中佔個位置，並不出如今最終的屬性值中。佔位符 的格式爲：

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

注意：

1. 用 @ 來標識其後的字符串是 佔位符。
2. 佔位符 引用的是 Mock.Random 中的方法。
3. 經過 Mock.Random.extend() 來擴展自定義佔位符。
4. 佔位符 也能夠引用 數據模板 中的屬性。

5. 佔位符 會優先引用 數據模板 中的屬性

   {
    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 模板生成模擬數據。

方法使用詳情請參考mock.js文檔