如何在輕鬆的在前端項目中mock數據

博客更新地址啦～，歡迎訪問：https://jerryyuanj.github.io/

在前端項目中，我們經常會有需要mock數據的需求，這樣我們後端的接口就不會影響我們的開發進度，大大提高開發效率。但是很多時候，mock需要的配置項都比較繁瑣，我又是一個很怕麻煩的人，所以我寫了一個小插件，基於webpack和webpack-dev-server的。只要幾行代碼，你就可以在你的項目中輕鬆實現數據的mock。

• 該插件目前只支持GET請求。
• 插件項目地址：happy-mock-webpack-plugin。如果對你有幫助，歡迎star。如果有bug或者有些需求需要改進，歡迎issue討論。
• 你可以clone下項目後，參考examples文件夾中的例子。

安裝

npm install happy-mock-webpack-plugin

使用

在webpack的配置文件中，加入插件:

const HappyMockMockPlugin = require('happy-mock-webpack-plugin')
const path = require('path')

module.exports = {
  // other configs
  plugins: [
    // other plugins...
    new HappyMockMockPlugin({
      root: path.resolve(__dirname, 'mock'),
      lazy: true,
      autoRefresh: true
    })
  ]
}

Mock 文件

目錄結構:

- src
  - app.js
- mock
  - user
    - profile.json
    - orders.js
  - menu.js

這裏的目錄路徑就是請求的路徑，比如，如果你使用了axios，那麼axios.get('/user/profile')將會請求mock/user/profile.json文件。
下面提供幾種mock文件的例子：

• /mock/user/orders.js

這個js文件導出一個函數，這個函數接收兩個參數: request 和 response，這兩個對象來自於webpack-dev-server中，即是express中的請求和響應對象。你可以根據請求參數的不同來返回不同的結果。

module.exports = (request, response) => {
  // handle request ...
  // modify response ...
  return {
    data: []
  }
}

• /mock/user/profile.json

{
  "name": "John Doe"
}

• /mock/menu.js

module.exports = {
  items: [],
  from: 'xx'
}

其他文件都會按原樣返回。

配置

• root

  String

  mock文件夾的路徑，必須是一個絕對路徑

• lazy

  Boolean

  如果設置成true的話，文件將會在接收到對應請求時被加載，在這種情況下，請求處理時間可能會稍微長一點，但是項目啓動的時間相對設置成false時短了。

  如果設置成false的話，項目會在啓動的時候就加載好所有的mock文件放入緩存中，所以項目啓動時間會有所增加，但是請求的響應速度會加快。

• autoRefresh

  Boolean

  設置成true的話，只要你修改了mock文件夾下的文件，瀏覽器都會自動刷新以獲取最新的數據。設置成false的話，你只能手動刷新來打到目的。

  注意：這個配置只有在lazy設置成true的時候起作用。如果lazy爲false的話，那麼優先會加載緩存，你需要重啓項目才能獲得更新後的mock數據。