mock.js 的用處
- 前后端分離 ：讓前端攻城師獨立於后端進行開發。
- 增加單元測試的真實性 ：通過隨機數據，模擬各種場景。
- 開發無侵入 ：不需要修改既有代碼，就可以攔截 Ajax 請求，返回模擬的響應數據。
- 用法簡單 ：符合直覺的接口。
- 數據類型豐富 ：支持生成隨機的文本、數字、布爾值、日期、郵箱、鏈接、圖片、顏色等。
- 方便擴展 ：支持支持擴展更多數據類型，支持自定義函數和正則。
配置模擬數據案例
Mock.mock('http://g.cn', {
'name' : '@name',
'age|1-100': 100,
'color' : '@color'
});
發送Ajax請求：
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript">
$.ajax({
url: 'http://g.cn',
dataType:'json'
}).done(function(data, status, xhr){
console.log(
JSON.stringify(data, null, 4)
)
})；
</script>
返回json數據
{
"name": "William Garcia",
"age": 74,
"color": "#f27c79"
}
mock.js 語法
Mock.js 的語法規范包括兩部分：
- 數據模板定義規范（Data Template Definition，DTD）
- 數據占位符定義規范（Data Placeholder Definition，DPD）
數據模板定義規范 DTD
數據模板中的每個屬性由 3 部分構成：** 屬性名、生成規則、屬性值：**
// 屬性名 name
// 生成規則 rule
// 屬性值 value
'name|rule': value
Mock.Random
方法
Mock.Random 提供的完整方法（占位符）如下：
| ** Type ** | ** Method** |
|---|---|
| Basic | boolean, natural, integer, float, character, string, range, date, time, datetime, now |
| Image | image, dataImage |
| Color | color |
| Text | paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle |
| Name | first, last, name, cfirst, clast, cname |
| Web | url, domain, email, ip, tld |
| Address | area, region |
| Helper | capitalize, upper, lower, pick, shuffle |
| Miscellaneous | guid, id |