1.什么是Mock.js?
生成隨機數(shù)據(jù)，攔截 Ajax 請求。
通過隨機數(shù)據(jù)，模擬各種場景；不需要修改既有代碼，就可以攔截 Ajax 請求，返回模擬的響應數(shù)據(jù)；支持生成隨機的文本、數(shù)字、布爾值、日期、郵箱、鏈接、圖片、顏色等；支持支持擴展更多數(shù)據(jù)類型，支持自定義函數(shù)和正則。
優(yōu)點是非常簡單方便, 無侵入性, 基本覆蓋常用的接口數(shù)據(jù)類型.
2.安裝
使用npm安裝:npm install mockjs;
或直接<script src="http://mockjs.com/dist/mock.js"></script>;
3.使用方式
? ?1-基本語法
Mock.mock('地址',{ "dataname|rule":{"對應的值"} })?
說明：地址就是我們通過ajax獲取數(shù)據(jù)時候填寫的地址，這里填寫的地址可以是任意不存在的地址，第二個參數(shù)是我們要模擬的數(shù)據(jù)，以及相應的規(guī)則。
? ? 2-語法規(guī)則
? ? 參照官網(wǎng)實例即可：
示例：
Mock.mock('https://www.test.com',{
? ? ? "userInfo|4":[{? ? //生成|num個如下格式名字的數(shù)據(jù)
? ? ? ? ? "id|+1":1,? //數(shù)字從當前數(shù)開始后續(xù)依次加一
? ? ? ? ? "name":"@cname",? ? //名字為隨機中文名字
? ? ? ? ? "ago|18-28":25,? ? //年齡為18-28之間的隨機數(shù)字
? ? ? ? ? "sex|1":["男","女"],? ? //性別是數(shù)組中的一個，隨機的
? ? ? ? ? "job|1":["web","UI","python","php"]? ? //工作是數(shù)組中的一個
? ? ? }]
? ? })
最后通過ajax接收數(shù)據(jù)，形式如下：
? ? //ajax接收數(shù)據(jù)，通過jq
? ? $.get('https://www.test.com',function(data){
? ? ? ? console.log(JSON.parse(data));
? ? })
最終生成的數(shù)據(jù)為：
注意：
對于通過Random屬性而來的一些隨機數(shù)據(jù)-比如隨機生成圖片，使用方式如下：
Mock.mock('http://www.test.com',{
? ? ? ? ? ? "ListInfo|5":[{
? ? ? ? ? ? ? "img":Mock.Random.image('200x100')
? ? ? ? ? ? }]
? ? ? ? });
//這里的圖片數(shù)據(jù)就是隨機生成的，只是大小被指定為200X100了
