Mock.js的使用

MOCK.js 安裝及使用

一、mock.js 簡介

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

 

一、先後端分離：讓前端工程師獨立於後端進行開發

 

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

 

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

 

四、增長單元測試的真實性：經過隨機數據，模擬各類場景。

 

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

 

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

2、mock.js 的下載與安裝

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

 

　　npm 安裝 

npm install mockjs

 

    或者直接引用在 <script>

3、數據模板格式

「name | rule 「: value

「屬性名| 生成規則」: 屬性值

 

 

4、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

  }

 ]

}

 

5、post 請求

Post請求和get請求相似。

 

6、其餘用法與工具

一、自定義響應時間

 

//設置4秒再響應

Mock.setup({timeout :4000 });

 

//設置1到4秒間響應

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

 

 

二、數據集

 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("輸出你看下就知道了");

 

 

三、校驗

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));

 

 

 

四、JSON Schema

 

 Mock.toJSONSchema(template)

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