出現(xiàn)的原因
1泥技、開發(fā)進(jìn)度的不同
2神妹、前后端分離
優(yōu)勢
1颓哮、前后端分離—–定義好接口文檔之后，前端人員不用再等待后臺的接口
2鸵荠、增加測試的真實(shí)性
3冕茅、可攔截Ajax請求，并返回請求
4蛹找、易上手
5姨伤、數(shù)據(jù)類型豐富、支持?jǐn)U展
安裝及使用
- 引入mockjs ： http://mockjs.com/dist/mock.js
- 模擬數(shù)據(jù)
Mock.mock( rurl, rtype, function( options ) )
記錄用于生成響應(yīng)數(shù)據(jù)的函數(shù)庸疾。當(dāng)攔截到匹配 rurl 和 rtype 的 Ajax 請求時(shí)乍楚，函數(shù) function(options) 將被執(zhí)行，并把執(zhí)行結(jié)果作為響應(yīng)數(shù)據(jù)返回届慈。
rurl: 請求的路徑
rtype: 請求的方式 GET POST 等
function(options): 表示用于生成響應(yīng)數(shù)據(jù)的函數(shù)
options
指向本次請求的 Ajax 選項(xiàng)集炊豪，含有 url凌箕、type 和 body 三個(gè)屬性
// 第一種
// 第一個(gè)參數(shù)是接口
// 第二個(gè)參數(shù)是返回的對象 拧篮，返回一個(gè)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
}
]
});
});
- 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ī)則: 屬性值
- 數(shù)組
'user|1-3': [], // 隨機(jī)生成1到3個(gè)數(shù)組元素
- 姓名
'name': '@cname', // 隨機(jī)中文名稱
- ID
'id|+1': 1, // 屬性值自動加 1词渤，初始值為1
- 年齡
'age|18-28': 0, // 18至28以內(nèi)隨機(jī)整數(shù), 0只是用來確定類型
- 時(shí)間
'time': '@date("yyyy-MM-dd")', // 日期
- 城市
'city': '@city(true)', // 中國城市
- 顏色
'color': '@color', // 16進(jìn)制顏色
- 布爾
'isMale|1': true, // 布爾值
'isFat|1-2': true, // true的概率是1/3
- 從某對象中抽取屬性
var params = {a: 1, b: 2, c: 3};
'params|2': params, // 從params對象中隨機(jī)獲取2個(gè)屬性
'params2|1-3': params, // 從params對象中隨機(jī)獲取1至3個(gè)屬性
- 數(shù)組抽取
'arr|1': ['a', 'b'], // 隨機(jī)選取 1 個(gè)元素
'arr1|+1': ['c', 'b', 'a'], // array中順序選取元素作為結(jié)果
'arr2|2': ['b', 'a'] // 重復(fù)2次元素生成一個(gè)新數(shù)組
'email': '@email'
- 設(shè)置響應(yīng)時(shí)間
// 設(shè)置4秒后再響應(yīng)
Mock.setup({ timeout: 1000 });
// 設(shè)置1秒至3秒間響應(yīng)
Mock.setup({ timeout: '1000-3000' });
