出現(xiàn)的原因

1、開發(fā)進(jìn)度的不同
2、前后端分離

優(yōu)勢

1、前后端分離—–定義好接口文檔之后，前端人員不用再等待后臺的接口
2、增加測試的真實(shí)性
3、可攔截Ajax請求，并返回請求
4、易上手
5、數(shù)據(jù)類型豐富、支持?jǐn)U展

安裝及使用

1. 引入mockjs ： http://mockjs.com/dist/mock.js

2. 模擬數(shù)據(jù)

Mock.mock( rurl, rtype, function( options ) )
記錄用于生成響應(yīng)數(shù)據(jù)的函數(shù)。當(dāng)攔截到匹配 rurl 和 rtype 的 Ajax 請求時，函數(shù) function(options) 將被執(zhí)行，并把執(zhí)行結(jié)果作為響應(yīng)數(shù)據(jù)返回。
rurl: 請求的路徑
rtype: 請求的方式 GET POST 等
function(options): 表示用于生成響應(yīng)數(shù)據(jù)的函數(shù)
options
指向本次請求的 Ajax 選項集，含有 url、type 和 body 三個屬性

// 第一種
// 第一個參數(shù)是接口
// 第二個參數(shù)是返回的對象 ，返回一個json對象
Mock.mock('http://aaa.com', {
    // 屬性名|生成規(guī)則: 屬性值
    'name|3': 'fei',
    'age|20-30': 25,
});



// 第二種
// 可提取請求的參數(shù)與信息
Mock.mock('http://test.com', function(options) {
    console.log(options);
    return Mock.mock({
        "user|1-3": [{
            'name': '@cname',
            'id|+1': 88
        }
      ]
    });
});

3. ajax請求數(shù)據(jù)

ajax({
    url: 'http://aaa.com',
    method: 'POST',
    data: {
        name: 'hyj',
        age: 18
    },
    callback: function (data) {
        console.log(data);
    }
});

4.mock基本數(shù)據(jù)
基本模板：屬性名|生成規(guī)則: 屬性值

1. 數(shù)組

    'user|1-3': [], // 隨機(jī)生成1到3個數(shù)組元素

2. 姓名

     'name': '@cname',  // 隨機(jī)中文名稱

3. ID

'id|+1': 1,    // 屬性值自動加 1，初始值為1

4. 年齡

'age|18-28': 0,   // 18至28以內(nèi)隨機(jī)整數(shù), 0只是用來確定類型

5. 時間

 'time': '@date("yyyy-MM-dd")',  // 日期

6. 城市

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

7. 顏色

'color': '@color',  // 16進(jìn)制顏色

8. 布爾

'isMale|1': true,  // 布爾值
'isFat|1-2': true,  // true的概率是1/3

9. 從某對象中抽取屬性

var params = {a: 1, b: 2, c: 3};


'params|2': params,  // 從params對象中隨機(jī)獲取2個屬性
'params2|1-3': params,  // 從params對象中隨機(jī)獲取1至3個屬性

10. 數(shù)組抽取

'arr|1': ['a', 'b'], // 隨機(jī)選取 1 個元素
'arr1|+1': ['c', 'b', 'a'], // array中順序選取元素作為結(jié)果
'arr2|2': ['b', 'a'] // 重復(fù)2次元素生成一個新數(shù)組

11. email

'email': '@email'

12. 設(shè)置響應(yīng)時間

// 設(shè)置4秒后再響應(yīng)
Mock.setup({ timeout: 1000 });  

// 設(shè)置1秒至3秒間響應(yīng)
Mock.setup({ timeout: '1000-3000' });