vue菜鳥從業記：公司項目裏如何進行先後端接口聯調

最近個人朋友王小閏進入一家新的公司，正好公司項目採用的是先後端分離架構，技術棧是王小閏很是熟悉的vue全家桶，後端用的是Java語言。

在先後端開發人員碰面以後，協商肯定好了前端須要的數據接口（扯那麼多，其實也就是關於json數據的字段的定義），而後先後端程序猿就嗨皮地併線開發去了。

先後端聯調前夕

個人朋友王小閏他們這家公司作本地旅遊項目的，安排到他手上的活兒是該旅遊項目的webapp工程。

項目動工伊始，一切都得從頭來作。在公司沒日沒夜的開發了一天以後，王小閏在沒有藉助vue-cli官方提供的腳手架工具下，徒手從零開始，搭建了一套基於公司特定要求的vue項目的工程架構目錄。（關於如何從零開始搭建vue項目的腳手架工程，後面我會單獨寫一個系列）。

前端項目環境搭建好以後，就正式進入了項目首頁的業務編碼工做。王小閏又沒日沒夜的敲了一天代碼以後，首頁header區域、輪播圖以及導航圖標的頁面佈局和邏輯開發都實現了，此時他想調用後端數據測試下流程，可是後端程序猿尚未將該數據的接口開發出來，沒辦法，個人朋友王小閏此時只能在本地模擬點假數據，逼格高點的說法叫mock數據。

搗鼓半天，首頁的mock數據終於弄好了，以下圖所示：

可是如今有一個問題讓王小閏很困惑，他的axios寫的url路徑是與後端程序猿商量好的絕對路徑（域名+請求路徑+請求參數），由於這是之後真正的請求路徑，因此我朋友王小閏又不想先寫本地相對路徑，後期再來修改，萬一後端程序猿開發的慢了，鬼知道到時候有多少接口須要修改，因此他就迷茫不知所措了。

其實，仔細看看，這就是先後端分離中的mock數據和接口聯調的問題。要想弄懂其中原因，下面讓咱們分幾點來聊聊。

什麼是先後端接口聯調

以前開發寫代碼的時候，全部的ajax數據都不是後端返回的真實數據，而是咱們本身經過接口mock模擬的假數據，當前端的代碼編寫完畢，後端的接口也已經寫好以後，咱們就須要把mock數據幹掉，嘗試使用後端提供的數據，進行先後端的一個調試，這個過程咱們就把它稱之爲先後端的接口聯調。

爲何要聯調

本地的mock數據是王小閏本身寫的，確定符合前端需求，可是後端接口首先須要測試通不通，還須要測試數據格式對不對，還有後端有沒有填寫足夠的數據，好比寫列表頁，前端想分頁，若是後端就寫了兩條測試數據，你咋整？

因此，王小閏須要根據後端對接口的調整，不斷地來回切換url，這樣豈不是還在受後端的影響，還談什麼毛線的先後端分離，名不副實嘛！

如何實現先後端接口聯調

首先，咱們已經知道，目前的先後端分離的架構應用分爲兩種狀況：

• 1. 先後端徹底分離，先後端分別擁有本身的域名和服務器。
• 2. 先後端開發分離，可是部署時是一個域名和一臺服務器。

雖然架構能夠採用先後端分離，可是部署有可能就不同了，這和項目的大小，公司的狀況等等都有關係了，一個百八十人用的小系統，還得兩臺服務器兩個域名，你不覺着浪費嗎？

兩種不一樣的部署狀況直接致使了前期在設計聯調方案的時候就不一樣了。

若是大家公司的項目在部署時是兩臺服務器對應兩個域名，恭喜你，這是最nice的方案，也是聯調最舒服的方式。

可是，我朋友王小閏呆的這家公司是一家剛起步的小公司，確定是怎麼節省成本怎麼來，問事後端，才知道他們公司是屬於第二種狀況，也就是開發時先後端分離，部署時是一個域名和一臺服務器。知道這個以後，他就明白接下來該怎麼操做了。

王小閏以前在項目根目錄static文件夾下新建了一個mock文件夾，裏面寫了一些json文件，當咱們作聯調的時候，這些mock數據就沒用了，咱們要把mock數據切換成後端提供給咱們的真實的數據。

當個人朋友王小閏把static文件夾下的mock數據刪除以後，在運行項目，發現報錯了，瀏覽器告訴他，你訪問的mock下面的index.json文件找不到404。

咱們平時本地前端開發環境dev地址大可能是 localhost:8080，然後臺服務器的訪問地址就有不少種狀況了，好比 後端程序猿本地IP（127.0.0.1:8889），或者外網域名，當前端與後臺進行數據交互時，天然就出現跨域問題（後臺服務沒作處理狀況下）。axios不支持jsonp, 因此咱們就要使用http-proxy-middleware中間件作代理。

如今經過在前端修改 vue-cli 的配置可解決： vue-cli中的 config/index.js 下配置 dev選項的 {proxyTable}:

proxyTable: {
    '/api': {
        target: '127.0.0.1:8889',  // 真實請求的地址
        changeOrigin: true,  // 是否跨域
    }
}
複製代碼

若是你想在公司的vue項目中實現先後端聯調，不須要再使用相似於fiddler charles的抓包代理工具了，你只須要使用proxyTable這個配置項，把你須要請求的後端的服務器地址寫在target值裏就OK了。

解決完跨域問題後，接下來王小閏該想一想怎麼在一臺服務器一個域名下進行聯調的問題了。比較常見的作法是前端在本地修改，本地查看，測試好了之後上傳到服務器，看看線上環境可不能夠，OK的話一切都好；不行就本地接着改，而後在上傳。

聯調完以後，如何將前端打包的項目文件發給後端，這裏也須要注意兩點：

（1）css、js和圖片等靜態文件

這時候的靜態文件在開發階段不須要任何考慮，按照你喜歡的相對路徑或者相對於項目的根路徑的形式寫就好了，由於遲早還得交給後端。可是，須要注意：

若是你採用 相對項目根路徑的書寫方式來寫你的靜態文件路徑 時，必定要先和後端商量好，未來項目部署的時候他會把你的前端整個項目放在哪裏？若是不是根目錄下，你就掛了。好比：你的reset.css的路徑是 /exports/styles/common/reset.css ，後端把你前端項目放在了根目錄下的 frontEnd 文件夾下， reset.css 文件就報404了。

若是後端採用的java，你須要特別注意的是， tomcat的根目錄 並非 webapps 文件，然後端項目默認是部署在 webapps/ROOT 文件下的，因此你若是使用了相對項目根路徑的書寫方式來寫你的靜態文件路徑時，對不起又是404了。

（2）ajax後端數據

由於如今惟一的一臺服務器仍是在後端程序猿那裏，因此此時你仍是能夠寫絕對路徑（域名+請求路徑），利用hosts文件來改變域名映射實現聯調。

閏土有話說

看這篇文章的童鞋，無論你是在大公司仍是在小公司，都須要知道，並非說你將dist文件打包發給後端就完事了，就不須要了解leader後面操做的點擊部署、合併分支的事兒了。

基礎命令、拉取分支、構建編譯包、copy生產包到服務器、備份資料、啓動腳本、灰度發佈、等等流程其實都是頗有必要了解的。

要否則最開始沒有這些基礎設施、基礎組件，誰來搭建+運行呢，畢竟仍是須要第一批吃螃蟹的人.

即便大公司，也有小團隊的，有的小團隊不必定遵循大公司那一套自動化部署教程，也有本身玩本身的輪子+工具。

就算是大公司， 若是基礎架構組的工具作好了，可是沒有總監以上的大佬面向公司推廣， 這些基礎設施不必定能面向公司內部使用。

基礎設施、基礎組件可以面向公司內部大量使用，離不開公司高層領導的支撐、固然也有基礎設施團隊的辛苦開發、還須要有使用基礎組件的機遇和業務場景。

總結：就像我以前文章裏講過的，當你處在先後端分離的大浪潮下，作前端的要將眼光放在整個項目上，統籌全局，不要偏安一隅，待在前端的小角落裏獨自玩耍。

一句話，格局要放大，步子要邁開，而後纔是低頭前行。

---

更多文章我會第一時間更新在公衆號<閏土大叔>裏面，歡迎關注~