MOCK.JS 生成隨機數據，攔截 Ajax 請求

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 的語法規範包括兩部分：

1. 數據模板定義規範（Data Template Definition，DTD）
2. 數據佔位符定義規範（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

---

參考文檔

• 官方文檔
• 官網示例