最近我的朋友Jack進(jìn)入一家新的公司，正好公司項目采用的是前后端分離架構(gòu)，技術(shù)棧是Jack非常熟悉的vue全家桶，后端用的是Java語言瞭亮。

在前后端開發(fā)人員碰面之后，協(xié)商確定好了前端需要的數(shù)據(jù)接口（扯那么多固棚，其實也就是關(guān)于json數(shù)據(jù)的字段的定義），然后前后端程序猿就嗨皮地并線開發(fā)去了仙蚜。

前后端聯(lián)調(diào)前夕

我的朋友Jack他們這家公司做本地旅游項目的此洲，安排到他手上的活兒是該旅游項目的webapp工程。

項目動工伊始委粉，一切都得從頭來做呜师。在公司沒日沒夜的開發(fā)了一天之后，Jack在沒有借助vue-cli官方提供的腳手架工具下贾节，徒手從零開始汁汗，搭建了一套基于公司特定要求的vue項目的工程架構(gòu)目錄。（關(guān)于如何從零開始搭建vue項目的腳手架工程栗涂，后面我會單獨寫一個系列）知牌。

前端項目環(huán)境搭建好之后，就正式進(jìn)入了項目首頁的業(yè)務(wù)編碼工作斤程。Jack又沒日沒夜的敲了一天代碼之后角寸，首頁header區(qū)域、輪播圖以及導(dǎo)航圖標(biāo)的頁面布局和邏輯開發(fā)都實現(xiàn)了忿墅，此時他想調(diào)用后端數(shù)據(jù)測試下流程扁藕，但是后端程序猿還沒有將該數(shù)據(jù)的接口開發(fā)出來，沒辦法疚脐，我的朋友Jack此時只能在本地模擬點假數(shù)據(jù)亿柑，逼格高點的說法叫mock數(shù)據(jù)。

搗鼓半天棍弄，首頁的mock數(shù)據(jù)終于弄好了望薄，如下圖所示：

但是現(xiàn)在有一個問題讓Jack很困惑，他的axios寫的url路徑是與后端程序猿商量好的絕對路徑（域名+請求路徑+請求參數(shù)）照卦，因為這是以后真正的請求路徑式矫，所以我朋友Jack又不想先寫本地相對路徑，后期再來修改役耕，萬一后端程序猿開發(fā)的慢了采转，鬼知道到時候有多少接口需要修改，所以他就迷茫不知所措了。

其實故慈，仔細(xì)看看板熊，這就是前后端分離中的mock數(shù)據(jù)和接口聯(lián)調(diào)的問題。要想弄懂其中緣由察绷，下面讓我們分幾點來聊聊干签。

什么是前后端接口聯(lián)調(diào)

之前開發(fā)寫代碼的時候，所有的ajax數(shù)據(jù)都不是后端返回的真實數(shù)據(jù)拆撼，而是我們自己通過接口mock模擬的假數(shù)據(jù)容劳，當(dāng)前端的代碼編寫完畢，后端的接口也已經(jīng)寫好之后闸度，我們就需要把mock數(shù)據(jù)干掉竭贩，嘗試使用后端提供的數(shù)據(jù)，進(jìn)行前后端的一個調(diào)試莺禁，這個過程我們就把它稱之為前后端的接口聯(lián)調(diào)留量。

為什么要聯(lián)調(diào)

本地的mock數(shù)據(jù)是黃俊自己寫的，肯定符合前端需求哟冬，但是后端接口首先需要測試通不通楼熄，還需要測試數(shù)據(jù)格式對不對，還有后端有沒有填寫足夠的數(shù)據(jù)浩峡，比如寫列表頁可岂，前端想分頁，如果后端就寫了兩條測試數(shù)據(jù)翰灾，你咋整青柄？

所以，Jack需要根據(jù)后端對接口的調(diào)整预侯，不斷地來回切換url致开，這樣豈不是還在受后端的影響，還談什么毛線的前后端分離萎馅，名存實亡嘛双戳！

如何實現(xiàn)前后端接口聯(lián)調(diào)

首先，我們已經(jīng)知道糜芳，目前的前后端分離的架構(gòu)應(yīng)用分為兩種情況：

前后端完全分離飒货，前后端分別擁有自己的域名和服務(wù)器。

前后端開發(fā)分離峭竣，但是部署時是一個域名和一臺服務(wù)器塘辅。

雖然架構(gòu)可以采用前后端分離，但是部署有可能就不一樣了皆撩，這和項目的大小扣墩，公司的情況等等都有關(guān)系了哲银，一個百八十人用的小系統(tǒng)，還得兩臺服務(wù)器兩個域名呻惕，你不覺著浪費嗎荆责？

兩種不同的部署情況直接導(dǎo)致了前期在設(shè)計聯(lián)調(diào)方案的時候就不同了。

如果你們公司的項目在部署時是兩臺服務(wù)器對應(yīng)兩個域名亚脆，恭喜你做院，這是最nice的方案，也是聯(lián)調(diào)最舒服的方式濒持。

但是键耕，我朋友Jack呆的這家公司是一家剛起步的小公司，肯定是怎么節(jié)省成本怎么來柑营，問過后端郁竟，才知道他們公司是屬于第二種情況，也就是開發(fā)時前后端分離由境，部署時是一個域名和一臺服務(wù)器。知道這個之后蓖议，他就明白接下來該怎么操作了虏杰。

Jack之前在項目根目錄static文件夾下新建了一個mock文件夾，里面寫了一些json文件勒虾，當(dāng)我們做聯(lián)調(diào)的時候纺阔，這些mock數(shù)據(jù)就沒用了，我們要把mock數(shù)據(jù)切換成后端提供給我們的真實的數(shù)據(jù)修然。

當(dāng)我的朋友Jack把static文件夾下的mock數(shù)據(jù)刪除之后笛钝，在運行項目，發(fā)現(xiàn)報錯了愕宋，瀏覽器告訴他玻靡，你訪問的mock下面的index.json文件找不到404。

我們平時本地前端開發(fā)環(huán)境dev地址大多是 localhost:8080中贝，而后臺服務(wù)器的訪問地址就有很多種情況了囤捻，比如 后端程序猿本地IP（127.0.0.1:8889），或者外網(wǎng)域名邻寿，當(dāng)前端與后臺進(jìn)行數(shù)據(jù)交互時蝎土，自然就出現(xiàn)跨域問題（后臺服務(wù)沒做處理情況下）。axios不支持jsonp, 所以我們就要使用http-proxy-middleware中間件做代理绣否。

現(xiàn)在通過在前端修改 vue-cli 的配置可解決： vue-cli中的 config/index.js 下配置 dev選項的 {proxyTable}:

proxyTable: {

'/api': {

target: '127.0.0.1:8889', // 真實請求的地址

changeOrigin: true, // 是否跨域

}

}

如果你想在公司的vue項目中實現(xiàn)前后端聯(lián)調(diào)誊涯，不需要再使用類似于fiddler charles的抓包代理工具了，你只需要使用proxyTable這個配置項蒜撮，把你需要請求的后端的服務(wù)器地址寫在target值里就OK了暴构。

解決完跨域問題后，接下來Jack該想想怎么在一臺服務(wù)器一個域名下進(jìn)行聯(lián)調(diào)的問題了。比較常見的做法是前端在本地修改丹壕，本地查看庆械，測試好了以后上傳到服務(wù)器，看看線上環(huán)境可不可以菌赖，OK的話一切都好缭乘；不行就本地接著改，然后在上傳琉用。

聯(lián)調(diào)完之后堕绩，如何將前端打包的項目文件發(fā)給后端，這里也需要注意兩點：

（1）css邑时、js和圖片等靜態(tài)文件

這時候的靜態(tài)文件在開發(fā)階段不需要任何考慮奴紧，按照你喜歡的相對路徑或者相對于項目的根路徑的形式寫就行了，因為早晚還得交給后端晶丘。但是黍氮，需要注意：

如果你采用 相對項目根路徑的書寫方式來寫你的靜態(tài)文件路徑 時，一定要先和后端商量好浅浮，將來項目部署的時候他會把你的前端整個項目放在哪里沫浆？如果不是根目錄下，你就掛了滚秩。比如：你的reset.css的路徑是 /exports/styles/common/reset.css 专执，后端把你前端項目放在了根目錄下的 frontEnd 文件夾下， reset.css 文件就報404了郁油。

如果后端采用的java本股，你需要特別注意的是， tomcat的根目錄 并不是 webapps 文件桐腌，而后端項目默認(rèn)是部署在 webapps/ROOT 文件下的拄显，所以你如果使用了相對項目根路徑的書寫方式來寫你的靜態(tài)文件路徑時，對不起又是404了案站。

（2）ajax后端數(shù)據(jù)

因為現(xiàn)在唯一的一臺服務(wù)器還是在后端程序猿那里凿叠，所以此時你還是可以寫絕對路徑（域名+請求路徑），利用hosts文件來改變域名映射實現(xiàn)聯(lián)調(diào)嚼吞。

編者有話說

看這篇文章的朋友盒件，不管你是在大公司還是在小公司，都需要知道舱禽，并不是說你將dist文件打包發(fā)給后端就完事了炒刁，就不需要了解leader后面操作的點擊部署、合并分支的事兒了誊稚。

基礎(chǔ)命令翔始、拉取分支罗心、構(gòu)建編譯包、copy生產(chǎn)包到服務(wù)器城瞎、備份資料渤闷、啟動腳本、灰度發(fā)布脖镀、等等流程其實都是很有必要了解的飒箭。

要不然最開始沒有這些基礎(chǔ)設(shè)施、基礎(chǔ)組件蜒灰，誰來搭建+運行呢弦蹂，畢竟還是需要第一批吃螃蟹的人.

即使大公司，也有小團(tuán)隊的强窖，有的小團(tuán)隊不一定遵循大公司那一套自動化部署教程凸椿，也有自己玩自己的輪子+工具。

就算是大公司翅溺， 如果基礎(chǔ)架構(gòu)組的工具做好了脑漫，但是沒有總監(jiān)以上的大佬面向公司推廣， 這些基礎(chǔ)設(shè)施不一定能面向公司內(nèi)部使用咙崎。

基礎(chǔ)設(shè)施优幸、基礎(chǔ)組件能夠面向公司內(nèi)部大量使用，離不開公司高層領(lǐng)導(dǎo)的支撐叙凡、當(dāng)然也有基礎(chǔ)設(shè)施團(tuán)隊的辛苦開發(fā)、還需要有使用基礎(chǔ)組件的機遇和業(yè)務(wù)場景密末。

總結(jié)：當(dāng)你處在前后端分離的大浪潮下握爷，做前端的要將眼光放在整個項目上，統(tǒng)籌全局严里，不要偏安一隅新啼，待在前端的小角落里獨自玩耍。

一句話刹碾，格局要放大燥撞，步子要邁開，然后才是低頭前行迷帜。

希望篇文章可以幫助在這個行業(yè)發(fā)展的朋友和童鞋們物舒，在論壇博客等地方少花些時間找資料，把有限的時間戏锹，真正花在學(xué)習(xí)上冠胯，有需要幫助或資料的朋友可以加Q號：625452324相信對于已經(jīng)工作和遇到技術(shù)瓶頸或者寫博客碼友，都會有好的幫助锦针。