前言：
本篇博文昨天七夕寫的，一天下來被虐得體無完膚，苦逼的單身狗只能學習，對！我愛學習，關掉朋友圈，並寫了一篇博文發泄發泄。這次寫mock.js的使用，能使前后端分離，分離，分離，重要的是說三遍。
特別說明：本篇博文適合單身貴族看。對於其他觀眾，不負責不承認。
mockjs介紹：
你是否遇見過，前端開發過程中需要數據測試，但后端卻遲遲沒給你，沒感情了分手吧。
是否遇見過需要親自收集各種各樣的數據。
那mock.js便可以很好的幫你解決問題。有了它前端就可以事先模擬數據，前提是和后端約定好了數據接口，怎樣的數據。使用mock就可以生成你要的數據了，從而實現開發時前后端分離。
mockjs主要功能：
- 基於數據模板生成模擬數據。
- 基於HTML模板生成模擬數據。
- 攔截並模擬 ajax 請求。
mockjs關鍵知識點介紹：
（詳細請看官方文檔）
關鍵點1：Mock.mock()
Mock.mock( rurl?, rtype?, template|function( options ) )
這里的參數都是可選：
-
rurl(可選)。
表示需要攔截的 URL，可以是 URL 字符串或 URL 正則。例如 //domain/list.json/、'/domian/list.json'。 -
rtype(可選)。
表示需要攔截的 Ajax 請求類型。例如 GET、POST、PUT、DELETE 等。 -
template(可選)。
表示數據模板，可以是對象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。 -
function(options)(可選)。
表示用於生成響應數據的函數。 -
options：指向本次請求的 Ajax 選項集。
關鍵點2：模板生成語法：
- 數據模板中的每個屬性由 3 部分構成：屬性名、生成規則、屬性值：
// 屬性名 name
// 生成規則 rule
// 屬性值 value
'name|rule': value
- 屬性名 和 生成規則 之間用豎線 | 分隔。
- 生成規則 是可選的。
- 生成規則 有 7 種格式：
- 'name|min-max': value
- 'name|count': value
- 'name|min-max.dmin-dmax': value
- 'name|min-max.dcount': value
- 'name|count.dmin-dmax': value
- 'name|count.dcount': value
- 'name|+step': value
- 生成規則 的 含義 需要依賴 屬性值的類型 才能確定。
- 屬性值 中可以含有 @占位符。
- 屬性值 還指定了最終值的初始值和類型。
舉個栗子：
栗子1：
//string表示屬性名
//3表示后面屬性值重復次數
Mock.mock({
"string|3": "★"
})
結果：
//星星數量為3
{
"string": "★★★"
}
栗子2：
// num為屬性名
// 生成一個大於等於1，小於等於100 的整數，屬性值100只是用來確定類型
Mock.mock({
"num|1-100": 100
})
結果
{
"number": 8
}
mockjs簡單使用栗子：
1.引入mockjs，引入jquery（此處用jq封裝好的ajax發送請求）
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
2.使用mock生成數據模板
//這里的第一個參數http://api.cn 就是下面ajax請求的url，mock對該url進行攔截'
//這里的第二個參數就是template數據模板，mock會返回模板生成的數據
Mock.mock('http://api.cn', {
'name': '@name',
'age|1-100': 100,
'city': '@city'
});
3.ajax發送請求
//url需要和上面的mock的url相同
$.ajax({
url: 'http://api.cn',
dataType: 'json'
}).done(function(data, status, xhr) {
alert(
JSON.stringify(data, null, 4)
)
});
4.效果：
溜了溜了
本文只是說說mockjs的簡單使用總結，能實現前后端分離開發，加快開發效率哦。需要了解更多，在官網文檔里。
最后說說：單身也要好好過，只是還沒遇到對的人。有另一半的，好好珍惜TA。
嗯 還差個bgm。
一句話： 我還是相信，星星會說話，石頭會開花，穿過夏天的木柵欄和冬天的風雪之后，你終會到達。