問題：

小張同學(xué)的項目采用的是前后端分離架構(gòu)，現(xiàn)在前后端程序猿已經(jīng)碰過面畦娄，協(xié)商好了一些前端需要的數(shù)據(jù)接口沈撞，于是前后端程序猿同時開工碼代碼蜈垮。

這時候小張同學(xué)某個頁面需要后端數(shù)據(jù)，但是后端叔叔還沒有將該數(shù)據(jù)的借口開發(fā)出來菊碟，此時小張只能做假數(shù)據(jù)（專業(yè)點叫mock數(shù)據(jù)节芥，_），但是小張的ajax的借口寫的是與后端叔叔商量好的絕對路徑（域名+請求路徑+請求參數(shù)逆害，跨域問題已解決）头镊，因為這是以后真正的請求路徑，所以小張又不像先寫本地相對路徑魄幕，后期再來修改（萬一后臺叔叔開發(fā)的慢了相艇，鬼知道有多少接口要修改呀）。于是他就迷茫了纯陨。坛芽。。

仔細看看這其實就是前后端分離中的mock數(shù)據(jù)和聯(lián)調(diào)的問題翼抠，就現(xiàn)在來說能解決的方式有很多種咙轩。先說mock數(shù)據(jù)，gulp阴颖，webpack活喊，fekit（去哪兒網(wǎng)的一款前端自動化構(gòu)建工具，據(jù)說歷史比webpack和gulp都要久遠）等等自動化構(gòu)建工具都有mock數(shù)據(jù)的功能膘盖，這不是問題胧弛；再說絕對路徑的問題，其實只需要做一個host的映射就行了侠畔。

進入正題结缚，前后端聯(lián)調(diào)。

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

我的理解是前后端聯(lián)調(diào)是一種真實業(yè)務(wù)數(shù)據(jù)和本地mock數(shù)據(jù)之間來回切換以達到前后端分離架構(gòu)下的不同開發(fā)速度時數(shù)據(jù)交換的一種方式方法（有點繞）软棺。

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

前面解釋前后端聯(lián)調(diào)是可能有些繞红竭，這里舉例來說明一下。

回到上面小張的問題喘落，假設(shè)小張現(xiàn)在ajax中的url寫的是相對路徑（如：./mock/user.json）茵宪，小張現(xiàn)在面臨的是后端接口沒有數(shù)據(jù)，需要本地mock數(shù)據(jù)瘦棋，但是當(dāng)后端接口開發(fā)完成稀火，并且有了測試數(shù)據(jù)后，小張是不是需要切換到后端數(shù)據(jù)呢赌朋？答案是肯定的凰狞，但是小張需要在本地mock數(shù)據(jù)和后端接口數(shù)據(jù)之間來回切換，為什么呢沛慢？很明顯嗎赡若，本地的mock數(shù)據(jù)是小張自己寫的，肯定符合前端需求团甲，但是后端接口首先需要測試通不通逾冬？還需要測試數(shù)據(jù)格式對不對？有可能前兩部都整好了躺苦，但是后端還沒有填寫足夠的數(shù)據(jù)（比如身腻，列表頁，小張想分頁圾另，后端叔叔就寫了兩條測試數(shù)據(jù)霸株，你咋整？）集乔，所以呀去件，小張需要根據(jù)后端叔叔對接口的調(diào)整不斷的來回切換url，這樣豈不是還在受后端的影響扰路，還談毛線前后端分離呀尤溜！

所以當(dāng)我們在前后端分離架構(gòu)中，不斷來回切換本地mock數(shù)據(jù)和后端接口數(shù)據(jù)時就遇到了聯(lián)調(diào)的問題汗唱。

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

首先我們已經(jīng)知道宫莱，在現(xiàn)在流行的“前后端完全分離”架構(gòu)中，前后端聯(lián)調(diào)是一個不可能避免的問題哩罪，就我目前對前后端聯(lián)調(diào)的理解來說授霸，我認為需要聯(lián)調(diào)的有以下兩個方面的資源：

css巡验、js、圖片等前端靜態(tài)資源文件碘耳。

ajax獲取的后端數(shù)據(jù)显设。

而前后端分離的架構(gòu)的應(yīng)用可能也分為兩種情況：

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

前后端開發(fā)分離登夫，但是部署時是一個域名和一臺服務(wù)器乾蛤。

還有就是需要聯(lián)調(diào)的場景也是兩種情況：

開發(fā)階段

調(diào)試階段

針對以上2方面資源和2種應(yīng)用情況還有2種場景（2到家了遥皂。叶眉。。）僻焚，接下來我們看看怎樣通過mock數(shù)據(jù)和host的映射來實現(xiàn)解決這些問題允悦。

先解釋一下 ‘222’

2種資源

為什么我將資源分為兩種呢？首先來看css溅呢、js文件和圖片是通過link澡屡、scripts、img標(biāo)簽來引入的（樣式中的圖片也是一個道理）咐旧， 它們是不存在跨域問題的驶鹉，你在哪里引入都無所謂。

而ajax獲取后端數(shù)據(jù)是有跨域問題的铣墨，雖然說可以解決室埋，但是有可能是該數(shù)據(jù)（或者后端部署環(huán)境）和上面的css、js伊约、圖片等靜態(tài)資源是不在同一臺服務(wù)器上的姚淆，也可能是同一臺服務(wù)器不同域名下的，如果都在同一域名同一服務(wù)器下屡律，開發(fā)階段肯定也不在一起吧腌逢！

2種應(yīng)用情況

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

2種不同的部署情況直接導(dǎo)致了前期在設(shè)計聯(lián)調(diào)方案的時候就不同了来庭，下面會詳細介紹妒蔚。

2種開發(fā)場景

這不用多說了，雖然現(xiàn)在主張前后端分離，但也不能不和后端叔叔親近親近了呀肴盏，不然誰給你數(shù)據(jù)區(qū)科盛，所以說真?zhèn)€開發(fā)階段都可能遇到聯(lián)調(diào)的問題。

聯(lián)調(diào)開始

在講解聯(lián)調(diào)之前菜皂，你需要了解主流自動化構(gòu)建工具本地mock數(shù)據(jù)的方法土涝，本例以gulp來講解，不了解的小伙伴可以看看Gulp和Webpack對比的mock數(shù)據(jù)部分幌墓。

開發(fā)階段

兩臺服務(wù)器對應(yīng)兩個域名

這是最nice的方案，也是聯(lián)調(diào)最舒服的方式冀泻。

在這種方式下常侣，前后和后端各有各的服務(wù)器和域名。后端會把他們開發(fā)的后端業(yè)務(wù)代碼弹渔，實時的上傳到服務(wù)器上（也可能不是胳施，如放在后端叔叔自己的電腦上，實現(xiàn)是一樣的肢专，只不過域名變成了叔叔的ip地址）舞肆；而我們前端的代碼會實時的上傳到我們前端的服務(wù)器上（同理也可能在自己的電腦上，開發(fā)完一塊上傳）博杖。

為了后面方面講解椿胯，前端服務(wù)器域名為“chping.website”，后端服務(wù)器域名為"chping.site"剃根。

css哩盲、js和圖片等靜態(tài)文件

此時，我們的靜態(tài)文件的請求路徑建議使用我們前端服務(wù)器的絕對路徑狈醉，為什么呢廉油？因為如果我們寫本地的相對路徑，等把我們的入口文件交給后端后苗傅，路徑還是絕對路徑抒线，豈不是成了后端服務(wù)器的路徑了，那就壞菜了渣慕，還得一個一個修改成我們前端的絕對路徑（如：http://chping.website/css/reset.css）嘶炭。

那可能有小伙伴說，這樣的話摇庙，我在開發(fā)階段旱物，我們的服務(wù)器上還沒有自己的靜態(tài)文件呢，去請求的話卫袒，會報404的宵呛！

對的，這時候就該我們的host的出場了夕凝，我們知道當(dāng)進行域名解析的時候宝穗，第一步是在瀏覽器緩存中尋找户秤，如果沒找到，第二步在我們系統(tǒng)的緩存中尋找（就是本地的hosts文件）逮矛，然后....（想詳細了解請看網(wǎng)絡(luò)請求過程掃盲的DNS解析部分）就沒有然后了鸡号。既然域名解析需要通過hosts文件這一步，那么我們就修改一下它须鼎，讓訪問http://chping.website這個域名的請求鲸伴，全都訪問我們本地的mock數(shù)據(jù)就好了呀！

在hosts文件中添加下面這一條

127.0.0.1chping.website

好的晋控，搞定汞窗，從此以后所有訪問域名http://chping.website的請求都會被映射到本地了，然后再結(jié)合gulp的mock數(shù)據(jù)赡译，就完成了你寫的是域名+絕對路徑（如：http://chping.website/css/reset.css）仲吏，但是請求的卻是你本地mock的數(shù)據(jù)（上面的請求會被映射到http://localhost/css/reser.css）。這樣你就不需要來回修改請求路徑了_蝌焚。

ajax后端數(shù)據(jù)

開發(fā)工程中裹唆，靜態(tài)文件的聯(lián)調(diào)問題可能還是比較少的，特征也不明顯只洒。但是通過ajax獲取后端數(shù)據(jù)使用聯(lián)調(diào)的情況可就多了去了许帐，前面為什么要前后端聯(lián)調(diào)一節(jié)中已經(jīng)通過小張的例子說明了，就不在贅述了毕谴。

其實在介紹完css舞吭、js、圖片等靜態(tài)文件一節(jié)析珊，相信你也能猜到了怎么去前后端聯(lián)調(diào)了羡鸥。很簡單，ajax中的請求還是寫絕對路徑（如：http://chping.site/userlist忠寻，獲取用戶列表）惧浴，此時后端接口如果沒有開發(fā)好，和上一節(jié)一樣通過hosts文件的修改可以實現(xiàn)chping.site域名映射到本地來奕剃。如果后端像讓你給他測試一下接口獲取的數(shù)據(jù)對不對衷旅，你可以在修改一下hosts文件就可以了。

可能還有小伙伴問了纵朋，這樣還不是改來改去柿顶，麻煩死了。首先來說操软，相比較你修改多個url地址和修改一個hosts文件嘁锯，孰輕孰重，一目了然；其次家乘，怎么可能讓你去每次都去修改hosts文件呢蝗羊，麻煩死了。現(xiàn)在向大家推薦一款小插件仁锯，在google商店里搜索一下HostAdmin就找到它了耀找，下載安裝就好了，然后簡單配置一下你的hosts地址业崖，就可以愉快地切換hosts的映射了（HostAdmin的使用自行g(shù)oogle野芒，干這行豈能不會用軟件）。

好了双炕，兩臺服務(wù)器對應(yīng)兩個不同域名的場景在開發(fā)階段就這樣愉快地結(jié)束了复罐。但是在實際開發(fā)中，中小公司很少給你兩臺服務(wù)器和兩個域名的雄家，一般正常情況就是一臺服務(wù)器一個域名的。

一臺服務(wù)器一個域名

我仔細想一下胀滚，此時這個服務(wù)器會給誰管理呢趟济？

想都不用想肯定不是前端，后端叔叔比你對服務(wù)器熟悉多了咽笼，交給你去管理那是出鬼了（我還真遇到過顷编，不過也是給后端首先使用，最后才把前端的代碼放到服務(wù)器上）剑刑，所以說在這種情況下媳纬，你就老老實實在本地開發(fā)就行了。

css施掏、js和圖片等靜態(tài)文件

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

如果你采用相對項目根路徑的書寫方式來寫你的靜態(tài)文件路徑時，一定要先和后端叔叔商量好狸驳，將來項目部署的時候他會把你的前端整個項目放在哪里预明？如果不是根目錄下，你就掛了耙箍。比如：你的reset.css的路徑時/exports/styles/common/reset.css撰糠，后端叔叔把你前端項目放在了根目錄下的frontEnd文件夾下，reset.css文件就報404了辩昆。

如果后端采用的java阅酪，你需要特別注意的是，tomcat的根目錄并不是webapps文件，而后端項目默認是部署在webapps/ROOT文件下的遮斥，所以你如果使用了相對項目根路徑的書寫方式來寫你的靜態(tài)文件路徑時峦失，對不起又是404了。

ajax后端數(shù)據(jù)

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

開發(fā)階段小結(jié)

其實在開發(fā)階段做聯(lián)調(diào)的情況還是很少的较屿，一般都在自己的機器上開發(fā)隧魄，后端會自己做單元測試，根本不用前端來給他做測試的（先別罵隘蝎，完事一塊购啄，哈哈）；而前端更不需要了嘱么，都在自己機器上開發(fā)狮含。及時有兩臺服務(wù)器和域名，有幾個每開發(fā)一個功能就上傳服務(wù)器呀（此服務(wù)器指項目上線時部署的服務(wù)器）曼振，有病吧几迄！所以說，在這個階段只需要做好hosts映射就行了冰评，不會讓你來回切換域名映射的映胁。

但是接下來的調(diào)試階段就不一樣了，項目前后端大體都已經(jīng)開發(fā)完成了甲雅，Beta版本已經(jīng)部署了解孙，這時候如果出現(xiàn)bug就需要頻繁的線上線下（真實數(shù)據(jù)和mock數(shù)據(jù)）切換了。

調(diào)試階段

調(diào)試階段的情況說明剛才提了一下抛人，現(xiàn)在再詳細的闡述一下：

首先弛姜，已發(fā)布的Beta版本在測試的時候，發(fā)現(xiàn)前端頁面上有個地方有個小bug妖枚，需要你修改一下娱据，于是你訪問線上的頁面，看了一下這個bug盅惜，發(fā)現(xiàn)是某個css樣式文件里面出錯了中剩，于是你希望在本地修改，然后線上版本可以直接查看抒寂，這樣就可以實時看到你的修改在線上的真實樣子了结啼。

兩臺服務(wù)器兩個域名

這里就不在分靜態(tài)文件和后端數(shù)據(jù)分開介紹了，其實道理都一樣的屈芜，另外此時后端數(shù)據(jù)都是真實的了郊愧，也不需要你管后端了朴译，此時你本地的mock數(shù)據(jù)已經(jīng)下崗了。

首先你只需要打開前面你安裝的HostAdmin属铁，通過它配置一下你的hosts文件（如果年前面的做了眠寿，此時你已經(jīng)配置好了），然后chping.website這個域名你可以在本地和線上之間來回切換了焦蘑。

再具體一點就是：

啟動你本地的項目

將chping.website域名通過HostAdmin設(shè)置為

127.0.0.1? ? ? ? chping.website# 202.201.112.232? chping.website? //假設(shè)202.201.112.232是線上服務(wù)器的ip

打開瀏覽器盯拱，并清除一下瀏覽器緩存，重新打開你們開發(fā)的網(wǎng)站例嘱。此時網(wǎng)站是獲取到的靜態(tài)資源就是從你本地獲取的了狡逢，但是ajax獲取的數(shù)據(jù)確實后端返回的真是數(shù)據(jù)。

然后你開始修改bug拼卵，這時候線上的版本可以實時查看你修改的前端內(nèi)容奢浑，修改完bug，QA說了OK腋腮，你就可以把修改的文件替換掉服務(wù)器上的版本就行了雀彼。

一臺服務(wù)器一個域名

這種情況就復(fù)雜了，此時只有一個域名即寡，如果你開發(fā)階段是按照我前面說的徊哑，寫的是相對路徑，那么此時你是沒有辦法實現(xiàn)兩臺服務(wù)器兩個域名那種線下修改嘿悬，線上查看的高大上聯(lián)調(diào)的。那該怎么辦呢水泉？

第一種方式就是善涨，你在本地修改，本地查看草则，測試好了以后上傳到服務(wù)器钢拧，看看線上環(huán)境可不可以，OK當(dāng)然好炕横；不行就本地接著改源内，然后在上傳。

第二種方式就是份殿，在開發(fā)階段你給靜態(tài)文件前面加上一個假的域名膜钓，然后像兩個域名一樣進行假的域名與本地映射配置，然后像兩個域名一樣開發(fā)卿嘲。等部署的時候颂斜，在服務(wù)器上也暫時做一個本地映射，你就可以實現(xiàn)同兩個域名一樣的線下修改拾枣，向上查看了沃疮。但是盒让，最后真正上線的時候，你就需要收到司蔬，把假域名全部刪掉邑茄。所以說，一臺服務(wù)器一個域名的時候俊啼，前端靜態(tài)文件做聯(lián)調(diào)是很不方便的肺缕。

小結(jié)

總結(jié)一下，前后端聯(lián)調(diào)是一種真實業(yè)務(wù)數(shù)據(jù)和本地mock數(shù)據(jù)之間來回切換以達到前后端分離架構(gòu)下的不同開發(fā)速度時數(shù)據(jù)交換的一種方式方法吨些，而實現(xiàn)就是利用自動化構(gòu)建工具的mock數(shù)據(jù)功能和修改域名解析文件hosts來實現(xiàn)的搓谆。

如果你的項目是兩臺服務(wù)器和兩個域名，隨便你折騰豪墅。但是如果你是一臺服務(wù)器和一個域名的話泉手，就有些麻煩了，而這個麻煩僅對于你前端靜態(tài)文件聯(lián)調(diào)有影響偶器，需要你好好思考一下怎么解決了斩萌。

想要了解解決方案，請先關(guān)注屏轰。