概述
1.基于 數(shù)據(jù)模板 生成模擬數(shù)據(jù)呀酸。
2.基于 HTML模板 生成模擬數(shù)據(jù)响驴。
3.攔截并模擬 ajax 請求。
解決的問題
開發(fā)時捶码，后端還沒完成數(shù)據(jù)輸出羽氮，前端只好寫靜態(tài)模擬數(shù)據(jù)。
數(shù)據(jù)太長了宙项，將數(shù)據(jù)寫在js文件里乏苦，完成后挨個改url。
某些邏輯復雜的代碼尤筐，加入或去除模擬數(shù)據(jù)時得小心翼翼汇荐。
想要盡可能還原真實的數(shù)據(jù)，要么編寫更多代碼盆繁，要么手動修改模擬數(shù)據(jù)掀淘。
特殊的格式，例如IP,隨機數(shù)油昂，圖片革娄，地址，需要去收集冕碟。
超爛的破網(wǎng)速…
…
以上都不再是問題
接下來體驗攔截ajax請求并返回模擬數(shù)據(jù)拦惋。
步驟1 - 安裝
安裝太簡單，跳過
步驟2 - 配置模擬數(shù)據(jù)
Mock.mock('http://g.cn',
{ 'name' : '[@name](/user/name)()',
'age|1-100': 100,
'color' : '[@color](/user/color)'
});
步驟3 - 發(fā)送ajax請求(jquery版)
$.ajax({
url: 'http://g.cn',
}).done(function(data, status, xhr){
console.log( JSON.stringify(data, null, 4) )
})
步驟4 - 查看響應的結(jié)果
// 結(jié)果1
{
"name": "Elizabeth Hall",
"age": 91,
"color": "#0e64ea"
}
// 結(jié)果2
{
"name": "Michael Taylor",
"age": 61,
"color": "#081086"
}
// 結(jié)果N ..
結(jié)尾
演示： mock-demo
演示： mock-angular-demo
參考： mock.js
源碼： mock-angular
博客： think2011
