Mockjs 前端接口數據模擬

　　在前后端分離的項目中，通常需要啟動一個后台服務器來配合前端項目的接口需求。Mockjs的作用是攔截ajax請求並模擬各種數據返回，讓前端開發可以更加自由獨立。

安裝

npm install mockjs

使用

　　Mock.mock()第一個參數是需要攔截的接口，第二個參數表明ajax請求類型（get/post/put/delete等），第三個參數是模擬返回值的數據模版。

　　接口可以通過字符串或者正則匹配：字符串需要和接口完全一樣，正則只需要一部分匹配就行。請求類型參數如果省略，就表示任何類型的請求都可以攔截。數據模版可以生成各種隨機數據，參見語法規范。

import Mock from "mockjs";

/*** 設置隨機的接口響應時間，10-2500毫秒 ***/
Mock.setup({
    timeout: '10-2500'
})

/*** 監聽user接口，采用正則匹配 ***/
Mock.mock(/\/user/, {
    info: {
        name: Mock.Random.cname(),
        "age|12-38": 1,
        "sex|1": ["male", "female"]
    }
})
$.ajax({
    url: '/user/1111'
}).done(function(data, status, jqXHR) {
    console.log(JSON.stringify(data, null, 4))
})

/*** 監聽list接口，采用字符串匹配 ***/
Mock.mock("/list","post", {
    'info|15-25': [{
        'index|+1': 1,
        'name': '@first @last',
        'id': '@integer( 10000, 99999 )',
        'date': '@datetime',
        'img': "@image('200x200')",
        'prod': "@sentence( 6, 22 )"

    }]
})
$.ajax({
    url: '/list',
    dataType: 'json',
    type:'post'
}).done(function(data, status, jqXHR) {
    console.log(JSON.stringify(data, null, 4))
})

　　將mockjs相關代碼寫在獨立的js文件里，開發時引用該文件，打包時去掉對該文件的引用即可。