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了