mock-stores——簡單易用的數據mock方案

mock-stores是一款簡單易用的數據mock npm包,能夠針對沒法攔截ajax請求或者非ajax請求的項目作mock,簡單易用僅需三步,即可完成整個過程。優勢有:webpack

1.簡單易用易部署git

2.隨處可用github

3.無髒代碼web

4.輕量級(僅十多行代碼)ajax

5.改變mock數據無需從新編譯npm

6.我實在想不出來還有比這個更簡單省事的了json

1.安裝

$ yarn add mock-stores -D

2.ProvidePlugin

首先在你項目的根目錄下,建立mock目錄,而後在該文件夾下建立js/json文件,存放服務端返回的json數據,而後在webpack.config.js文件中全局提供該插件,而後你就能夠處處使用該變量了。ide

// webpack.config.js
  plugins: [
    new webpack.ProvidePlugin({
      Store: 'mock-stores'
  })

3.Mock it

在服務端返回數據的地方填充該對象,並提供一個你爲該接口建立的json/js文件的名字,mock-stores對象會根據該名字在mock目錄下查找對應的文件,返回該數據:fetch

fetch('/users.json')
   .then(function(response) {
     let item = Store['yourMockJsFileName'] || response.json()
   })

在mock目錄下,你還能夠不斷建立目錄,mock-stores對象會根據名字去查找。插件

開發環境中,mock-stores對象使用的是你建立的mock數據,生產環境則使用的是線上數據,這一切都是自動完成的,所以,你無須移除 Store['yourMockJsFileName'] 這個對象

github地址:https://github.com/hawx1993/m...

相關文章
相關標籤/搜索