Mock.js的使用

MOCK.js 安裝及使用

一、mock.js 簡介

   生產隨機數據，攔截ajax請求。

 

1、前后端分離：讓前端工程師獨立於后端進行開發

 

2、開發無入侵：不需要修改既有代碼，就可以攔截Ajax請求，返回模擬的響應數據。

 

3、數據類型豐富：支持生成隨機的文本、數字、布爾值、日期、郵箱、鏈接、圖片、等等

 

4、增加單元測試的真實性：通過隨機數據，模擬各種場景。

 

5、用法簡單：符合直覺的接口

 

6、方便擴展：支持擴展更多數據類型，支持自定義函數，和正則。

二、mock.js 的下載與安裝

　　Mock.js 官方網站：http://mock.js.com

 

　　npm 安裝 

npm install mockjs

 

    或者直接引用在 <script>

三、數據模板格式

“name | rule “: value

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

 

 

四、get請求用法

   Ajax發起get請求

 

// 減少代碼量使用jquery ajax請求方法

 

$.ajxa({

url: "http://test.com",

type: "get",

dataType : "json" 

}).done(function (data,status,xhr){

 //JSON.stringfy(value[,replacer[,space]])

 // value 將要序列化成一個JSON字符串的值

 //如果該參數是一個函數，則在序列化的過程中，被序列化的值的每個屬性都會經過該函數的轉化和處理，如果該參數是一個數組，

 //則只有包含在這個數組中的屬性名才會被序列化到最終的字符串參數中，如果該參數的為null或者未提供，則對象所有的屬性都會被序列化

 //space(可選)指定縮進的空白字符串，用於美化輸出，如果參數沒有提供將沒有空格

 

 console.log(JSON.stringify(data,null,4));

})

 

 

 

//Mock.js響應



Mock.mock('http://test.com',{

 'user|1-3':[{

  'name':'@name',//中文名稱

  'id|+1':23, //id 初始值為23自動加1

  'age|18-43':0,//age 18-43之間的隨機書

  'birthday'：'@date("yyyy-MM-dd")',

  'city':'@city(true)',//中國城市

  'color':'@color',//16進制顏色

 

 },{

  'gf':'@name'

 }]

});

 

 

生成樣式

 

 

其中響應時也是可以使用function

Mock.mock('http://test.com','get',function() {

 return.Mock({

  "user|1-3": [{

   'name':'@name',

   'id':88

  }]

 });

});

 

 

 

 

 

//結果:

{

 "user":[

  {

   "name":"徐超",

   "id":88

  }

 ]

}

 

五、post 請求

Post請求和get請求類似。

 

六、其他用法與工具

1、自定義響應時間

 

//設置4秒再響應

Mock.setup({timeout :4000 });

 

//設置1到4秒間響應

Mock.setup({timeout :'1000-4000' });

 

 

2、數據集

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

 

//生成一個email格式的字符串

 

console.log(Mock.mock('@email'));

 

//第二種:

var Random = Mock.random;

console.log(Random.email());

 

 

提供的數據類型

 

 

 

如果沒有可以自行自定義擴展

Random.extend({

 weekday: function(date) {

  var weekdays = ['周一','周二','周三','周四','周五'];

  return this.pick(weekdays);

 

 }

});

 

console.log("輸出你看下就知道了");

 

 

3、校驗

Mock.valid(template, data)

用來校驗真實數據data和模板數據template匹配

 

var tempObj = {

 "user|1-3" : [{'name':'@name','id|28-338'} ]

};

 

var realData = { "user":[{'name': '張三','id':90 }]};

 

console.log(Mock.valid(tempObj,realData));

 

 

 

4、JSON Schema

 

 Mock.toJSONSchema(template)

用來把Mock.js風格的的數據模板template轉換成JSON Schema