Mockjs 前端介面資料模擬

楊小匠發表於2018-09-07
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檔案裡，開發時引用該檔案，打包時去掉對該檔案的引用即可。

相關文章