Mock.js新手教程

1.什么是Mock.js?

生成隨機(jī)數(shù)據(jù)无切,攔截 Ajax 請求。

通過隨機(jī)數(shù)據(jù)钦铺,模擬各種場景订雾;不需要修改既有代碼,就可以攔截 Ajax 請求矛洞,返回模擬的響應(yīng)數(shù)據(jù)洼哎;支持生成隨機(jī)的文本、數(shù)字沼本、布爾值噩峦、日期、郵箱抽兆、鏈接识补、圖片、顏色等辫红;支持支持?jǐn)U展更多數(shù)據(jù)類型凭涂,支持自定義函數(shù)和正則。

優(yōu)點(diǎn)是非常簡單方便, 無侵入性, 基本覆蓋常用的接口數(shù)據(jù)類型.

2.安裝

使用npm安裝:npm install mockjs;

或直接<script src="http://mockjs.com/dist/mock.js"></script>;

3.使用方式

? ?1-基本語法

Mock.mock('地址',{ "dataname|rule":{"對應(yīng)的值"} })?

說明:地址就是我們通過ajax獲取數(shù)據(jù)時(shí)候填寫的地址贴妻,這里填寫的地址可以是任意不存在的地址切油,第二個(gè)參數(shù)是我們要模擬的數(shù)據(jù),以及相應(yīng)的規(guī)則名惩。

? ? 2-語法規(guī)則

? ? 參照官網(wǎng)實(shí)例即可:

示例:

Mock.mock('https://www.test.com',{

? ? ? "userInfo|4":[{? ? //生成|num個(gè)如下格式名字的數(shù)據(jù)

? ? ? ? ? "id|+1":1,? //數(shù)字從當(dāng)前數(shù)開始后續(xù)依次加一

? ? ? ? ? "name":"@cname",? ? //名字為隨機(jī)中文名字

? ? ? ? ? "ago|18-28":25,? ? //年齡為18-28之間的隨機(jī)數(shù)字

? ? ? ? ? "sex|1":["男","女"],? ? //性別是數(shù)組中的一個(gè)澎胡,隨機(jī)的

? ? ? ? ? "job|1":["web","UI","python","php"]? ? //工作是數(shù)組中的一個(gè)

? ? ? }]

? ? })

最后通過ajax接收數(shù)據(jù),形式如下:

? ? //ajax接收數(shù)據(jù)娩鹉,通過jq

? ? $.get('https://www.test.com',function(data){

? ? ? ? console.log(JSON.parse(data));

? ? })

最終生成的數(shù)據(jù)為:

注意:

對于通過Random屬性而來的一些隨機(jī)數(shù)據(jù)-比如隨機(jī)生成圖片攻谁,使用方式如下:

Mock.mock('http://www.test.com',{

? ? ? ? ? ? "ListInfo|5":[{

? ? ? ? ? ? ? "img":Mock.Random.image('200x100')

? ? ? ? ? ? }]

? ? ? ? });

//這里的圖片數(shù)據(jù)就是隨機(jī)生成的,只是大小被指定為200X100了

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末弯予,一起剝皮案震驚了整個(gè)濱河市邓梅,隨后出現(xiàn)的幾起案子础钠,更是在濱河造成了極大的恐慌征绎,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,542評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件欢顷,死亡現(xiàn)場離奇詭異,居然都是意外死亡西饵,警方通過查閱死者的電腦和手機(jī)蜈膨,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來等舔,“玉大人骚灸,你說我怎么就攤上這事』胖玻” “怎么了甚牲?”我有些...
    開封第一講書人閱讀 163,912評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長蝶柿。 經(jīng)常有香客問我丈钙,道長,這世上最難降的妖魔是什么交汤? 我笑而不...
    開封第一講書人閱讀 58,449評論 1 293
  • 正文 為了忘掉前任雏赦,我火速辦了婚禮,結(jié)果婚禮上芙扎,老公的妹妹穿的比我還像新娘星岗。我一直安慰自己,他們只是感情好戒洼,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,500評論 6 392
  • 文/花漫 我一把揭開白布俏橘。 她就那樣靜靜地躺著,像睡著了一般圈浇。 火紅的嫁衣襯著肌膚如雪寥掐。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,370評論 1 302
  • 那天磷蜀,我揣著相機(jī)與錄音召耘,去河邊找鬼。 笑死蠕搜,一個(gè)胖子當(dāng)著我的面吹牛怎茫,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播妓灌,決...
    沈念sama閱讀 40,193評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼轨蛤,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了虫埂?” 一聲冷哼從身側(cè)響起祥山,我...
    開封第一講書人閱讀 39,074評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎掉伏,沒想到半個(gè)月后缝呕,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體澳窑,經(jīng)...
    沈念sama閱讀 45,505評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,722評論 3 335
  • 正文 我和宋清朗相戀三年供常,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了摊聋。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,841評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡栈暇,死狀恐怖麻裁,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情源祈,我是刑警寧澤煎源,帶...
    沈念sama閱讀 35,569評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站香缺,受9級特大地震影響手销,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜图张,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,168評論 3 328
  • 文/蒙蒙 一锋拖、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧埂淮,春花似錦姑隅、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,783評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至痪蝇,卻和暖如春鄙陡,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背躏啰。 一陣腳步聲響...
    開封第一講書人閱讀 32,918評論 1 269
  • 我被黑心中介騙來泰國打工趁矾, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人给僵。 一個(gè)月前我還...
    沈念sama閱讀 47,962評論 2 370
  • 正文 我出身青樓毫捣,卻偏偏與公主長得像,于是被迫代替她去往敵國和親帝际。 傳聞我的和親對象是個(gè)殘疾皇子蔓同,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,781評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 學(xué)習(xí)目的 ①開發(fā)時(shí),后端還沒完成數(shù)據(jù)輸出蹲诀,前端只好寫靜態(tài)模擬數(shù)據(jù)斑粱。數(shù)據(jù)牽制與后端,前端頁面無法很好的展示脯爪,...
    _1633_閱讀 4,560評論 0 24
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,116評論 25 707
  • 用兩張圖告訴你则北,為什么你的 App 會(huì)卡頓? - Android - 掘金 Cover 有什么料矿微? 從這篇文章中你...
    hw1212閱讀 12,723評論 2 59
  • 天玄大陸的冒險(xiǎn)者們,貂爺我又帶著干貨來啦尚揣!昨兒個(gè)貂爺跟大家分享了即將上線的新副本“符傀巢穴”涌矢,不知道大家都還有...
    游戲娛談閱讀 535評論 0 0
  • 從什么時(shí)候開始愛上聽歌的呢? 不知道惑艇, 總感覺蒿辙,在我有記憶的那一刻起, 就一直追隨著音樂滨巴。 2017年7月18日,...
    云悅明閱讀 177評論 0 0