express:webpack dev-server開發中如何調用后端服務器的接口?


開發環境:
    前端:webpack + vue + vue-resource,基於如下模板創建的開發環境:  https://github.com/vuejs-templates/webpack 
    后端:java, tomcat

問題:
    前端開發人員在使用webpack + vue的開發環境調試時,發現在所有需要調用后端接口的地方就很麻煩,目前處理如下:
    1. 將每個接口的返回值放在一個json文件中,這些json文件統一放到static目錄下
    2. 開發的時候, 然后所有需要調用后端接口的地方,就先把路徑指向static下對應的json文件名,獲取數據;
    3. 發布的時候,將所有接口的路徑改為正常的路徑。
    這樣每次發布都很麻煩,而且很容易出錯。

分析:
    通過分析webpack的build/dev-server.js文件,發現這個是使用express來實現的一個簡單的web服務器,那么就考慮是否可以參考自己寫一個express的中間件,將所有對於后端接口的調用都轉為調用真正的后端接口,這樣在發布的時候就不需要修改路徑了。

解決方法:
      通過分析 build/dev-server.js 源碼,發現里面有用到 http-proxy-middleware( https://npm.taobao.org/package/http-proxy-middleware)  ,並且在代碼中有注釋:Define HTTP proxies to your custom API backend  ,這不就是我想要的嗎?
    
    然后看后面的代碼中去讀取config/index.js內的dev.proxyTable來對http-proxy-middleware做初始化,所以我就在config/index.js的proxyTable中添加了如下內容:
    proxyTable: {       
        '/appserver/SinglePowerStation': 'http://192.168.1.82:8899',
        '/appserver/powerStationManage': 'http://192.168.1.82:8899',
    },
    
   這里有幾點要說明:
    0)我要實現的目的是把所有以  SinglePowerStation、 powerStationManage 開頭的接口調用都轉到后端服務器上;
    1)我的后端服務器地址是 http://192.168.1.82:8899
    2)后端接口前綴只有 SinglePowerStation、 powerStationManage 兩種;
    
    至於proxyTable的格式是通過分析build/dev-server.js內的如下代碼總結出來的:
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }  
  app.use(proxyMiddleware(context, options))
})


——————完———————







免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM