前言
最近在實踐個人項目F-Rent時大量使用了模擬數(shù)據(jù)，包括隨機返回接口數(shù)據(jù)吏砂、img等...<Br />
帶著需求尋找到Mock.js時讓我眼前一亮，Mock.js可以攔截并模擬ajax請求 但是項目是線上所以帶著需求又尋找到了線上接口服務(wù)easy-Mock支持Mock.js語法，搭配使用簡直棒棒的！<br />
關(guān)于本地模擬數(shù)據(jù)的配置和安裝我就不做介紹了婶溯，網(wǎng)上有很多案例。<br />
我下面會直接用我已經(jīng)mock好的數(shù)據(jù)進行解剖詳解
語法
{
"success": true,
"data": {
"list|5-20": [{
"id|100-10000": 10000,
"name": "@cname",
"type": "求租",
"label|1": ["獨衛(wèi)", "男室友", "女室友", "曬房", "反饋", "閑聊", "閑置", "交友", "獨衛(wèi)", ],
"labeltype|1": ["singwei", "manchum", "girlchum", "sumroom", "feedback", "gossip", "lieidle", "makefriends", "singwei", ],
"title": "@csentence(5)",
"source": "@csentence",
"icon": "https://unsplash.it/244/132/?random&id=",
"url|1-3": [{
"name|+1": ["https://unsplash.it/244/132/?random&id=", "https://unsplash.it/244/132/?random&type=", "https://unsplash.it/244/132/?random&data="]
}],
"urlid|1-100": 100,
"date": "@datetime",
"see|100-10000": 10000,
"fabulous|100-10000": 10000,
"comment|100-10000": 10000,
}]
}
}
我們可以先到Mock.js查看語法偷霉，此Mock.js語法的json數(shù)據(jù)是F-Rent首頁的綜合數(shù)據(jù)，最后輸出的數(shù)據(jù)為：
<Br />
簡單解剖
首先list|5-20指的是再五到二十中隨機生成N條list數(shù)據(jù),這樣就可以實現(xiàn)首頁批量生成N條數(shù)據(jù)褐筛！
id|100-10000:10000指的是從100到10000中隨機取一個數(shù)字輸出<Br />label|1:["獨衛(wèi)", "男室友", "女室友", "曬房", "反饋"]最后可以輸出從字符串中隨機取一個數(shù)據(jù)來輸出
url|1-3最后輸出的數(shù)據(jù)為從name中隨機取1-3條數(shù)據(jù)輸出类少，我們可以看到數(shù)據(jù)的格式為：
@cname、@csentence渔扎、@datatime這些就不做介紹了硫狞，具體可以看Mock.js語法
Mock數(shù)據(jù)
由于內(nèi)容過多，我會發(fā)布到F-Rent項目倉庫中提供大家參考晃痴，有什么問題可以留言或者在F-Rent項目倉庫中提Issues
