1矿微、 安裝

1.1 瀏覽器安裝

1.1.1 去github下載mockjs,點我去下載

<script type="text/javascript" src="./path/to/your/mockjs/dist/mock.js"></script>

1.1.2 直接使用cdn引用

<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>

2.2 Node (CommonJS)安裝

# 安裝
npm install mockjs

2座慰、使用

2.1 攔截接口請求仑氛，并返回自己要想要的數(shù)據(jù)

2.1.1 攔截精確路徑的get請求，并模擬

// mockjs攔截代碼

const mock = Mock = require('mockjs')
Mock.mock('/api/sign/out', 'get', (options) => {
    console.log(options);
    return {
        data: true,
        code: 0,
        message:'success'
    }
})

// 請求代碼如下

axios.get('/api/sign/out')
    .then(function (response) {
        console.log(response);
    })

2.1.2 用正則匹配某些路徑來攔截

//模擬一個get請求
Mock.mock(/\/api\/getUsers/, 'get', (options) => {
    console.log(options);
    return [1, 2, 3]
})

// 請求代碼
/* 
 以下兩個請求都會被攔截 并返回數(shù)據(jù) [1, 2, 3]
 因為 Mock.mock 函數(shù)的第一個參數(shù)是個正則表達(dá)式（/\/api\/getUsers/）
 /api/getUsers 和  /api/getUsers/toast 這兩個路徑都匹配
*/
axios.get('/api/getUsers?ID=12345')
    .then(function (response) {
        console.log(response);
    })
// 為給定 ID 的 user 創(chuàng)建請求
axios.get('/api/getUsers/toast')
    .then(function (response) {
        console.log(response);
    })

2.1.3 攔截一個post請求搜贤，并返回自己要想要的數(shù)據(jù)

Mock.mock(/\/api\/login/, 'post', () => {
    return {
        token: window.btoa("token")
    }
})

// 請求代碼
axios.post('/api/login', {
        username: 'xyz',
        pwd: '123456'
    })
    .then(function (response) {
        console.log(response);
    })

2.1.4 其他使用場景

• 1 根據(jù)請求傳遞參數(shù)的不同谆沃，返回不同的數(shù)據(jù)

模擬分頁接口，我們調(diào)試分頁的時候很好用哈

// get請求
function parseQueryString(array) {
    if (!Array.isArray(array)) return {}
    if (array.length <= 1) return {}
    let queryString = array[1]
    let queryArray = queryString.split('&')
    return queryArray.reduce((queryObj, queryItem) => {
        let key = queryItem.split('=')[0]
        let val = queryItem.split('=')[1]
        queryObj[key] = val
        return queryObj
    }, {})
}

Mock.mock(/\/api\/getPagedNews/, 'get', (options) => {
    // 通過url 解析出我們想要的分頁參數(shù)
    //  options.url =  /api/getPagedNews?page=2&pageSize=5
    let query = parseQueryString(options.url.split('?'))
    let returnResponse = {
        code: 0,
        data:[]
    }
    // 根據(jù)用戶傳遞的分頁參數(shù) 返回不同數(shù)量 不同的分頁數(shù)據(jù)
    for (let index = 1; index <= query.pageSize; index++) {
        returnResponse.data.push({
            title:`新聞${(query.page-1) * 10 + index}`
        })        
    }
    return returnResponse
})

// 獲取第一頁數(shù)據(jù) 每頁10條
axios.get('/api/getPagedNews?page=1&pageSize=10')
    .then(function (response) {
        console.log(response.data);
    })

//獲取第二頁數(shù)據(jù) 每頁5條
axios.get('/api/getPagedNews?page=2&pageSize=5')
    .then(function (response) {
        console.log(response.data);
    })

模擬用戶登錄（若用戶傳遞的用戶名是 admin 密碼是 123456 則提示用戶登錄成功入客，否則登錄失敼鼙小）

Mock.mock(/\/api\/login/, 'post', (option) => {
    console.log(option);
    // 獲取post請求傳過來的參數(shù)
    let params = JSON.parse(option.body)

    let response = {
        code: 0,
        data: []
    }

    if (params.username === 'admin' && params.pwd === '123456') {
        response.data = {
            token: window.btoa("token")
        }
    } else {
        response = {
            code: 401,
            data: null
        }
    }

    return response
})

// 請求代碼
axios.post('/api/login', {
        username: 'xyz',
        pwd: '123456'
    })
    .then(function (response) {
        console.log(response.data);
    })
axios.post('/api/login', {
        username: 'admin',
        pwd: '123456'
    })
    .then(function (response) {
        console.log(response.data);
    })