寫在前邊
今天我們來說說前端和後臺那點“破”事，無論是你學習前端還是後臺，都要相互打交道，打着打着交道兩夥人就打了起來，尤其是初學者剛開始接觸前後臺對接的時候，系統出了錯誤都想甩鍋，前端說，你們後臺的接口根本訪問不了數據。後臺就把鍋甩給前端，是你們前端根本沒有訪問到後臺接口好不好。
只要你做前端或者後臺，都要做對接的，這是毋庸置疑的，這篇文章還是主要針對一些初學者和剛剛到公司工作的實習生或應屆畢業生，儘可能的避免“甩鍋”的情況，畢竟前端和後臺的共同目標是解決兩者之間的數據對接問題。
這篇文章能夠兼顧到剛剛接觸前端和後臺的初學者，小鹿從最簡單的客戶端和服務端說起，因爲當時剛剛接觸這些概念的時候，也是挺懵逼的，畢竟現在其他公衆號也很少分享這麼基礎的東西，那小鹿今天就負責分享給你前端和後臺那點事！
1
什麼是客戶端？
何爲客戶端？顧名思義，從字面意義上講，客戶端，那肯定是客戶使用的一端設備，直接面向用戶的和客戶的，比如我們的前端的網頁、手機端的Android和IOS、以及硬件設備等，都可以稱之爲客戶端。
客戶端的職責基本就是直接和用戶做交互，比如用戶輸入用戶名和密碼進行登錄，比如點擊按鈕上傳照片，再比如用戶輸入相關個人信息，然後點擊保存按鈕進行存儲。
剛開始接觸客戶端的小夥伴可能會疑問，這些數據都去哪了？難道存儲在我們的客戶設備中（手機、瀏覽器）？
少量的數據確實存儲在本地客戶端設備中，比如我們的手機中或者電腦瀏覽器中。像阿里巴巴這麼大的公司，用戶是非常龐大的，數據量也是非常龐大的，客戶端設備是存放不下的，需要將相關數據存放在服務端。你可能會問，服務端是什麼東西？
我們爲了能夠形象點說明，我們可以把客戶端當做我們賓館入住的客戶，而服務人員作爲服務端，把櫃子當做是數據庫。整個流程就是，入住賓館的客戶會把貴重的東西交給賓館的服務人員進行保管，然後服務人員再把入住客戶的東西分類存放在櫃子中，那麼整個過程就類似前後臺的數據對接的過程。
2
什麼是服務端？
之前在羣裏看到一個初學的小夥伴問到服務器是什麼？Tomcat 是什麼？雖然這個問題讓已經工作的人看起來很幼稚。但是每一個老手都是從菜鳥過來的，說實話，小鹿當時對服務器、Tomcat 等相關也是挺懵逼的。
所謂的服務器，在谷歌搜索了一下，我感覺還是對於初學者不友好。
一個管理資源併爲用戶提供服務的計算機軟件。
其實對於初學者來說最好的理解就是，我們電腦就可以當做一個服務器，所謂的網絡上說買阿里雲的服務器，只不過就是一臺電腦，放在其他地區，24小時開機狀態，每當用戶請求數據，都會在該服務器獲取。而我們電腦通常在使用的時候纔會開機使用，而不是像阿里雲的服務器一樣 24 小時開機狀態持續提供服務。
那 Tomcat 是什麼？Tomcat 服務器是一個免費的開放源代碼的Web 應用服務器。Web 服務器，對的，我們如果在電腦上安裝上 Tomcat 之後，我們會有一個啓動服務程序，啓動之後，我們無論是前端還是移動端，都可以服務端進行通信了。
3
客戶端和服務端的通信過程
前後端是如何進行通信的呢？我們最常用的就是 ajax，那什麼是 ajax 呢？我們可以把 ajax 想象成一種前後端通信的工具，我們前端使用 ajax，同時按照特定的 ajax 的數據格式，才能把前端網頁中的數據（比如：用戶名和密碼）傳輸給服務端，然後服務端纔會把數據存儲到數據庫中。
在 ajax 未出現之前，我們前端傳輸數據都是每向服務器傳輸一次，都要進行整個前端頁面的刷新，有些數據儘管不變，我們還要進行整體刷新一次。爲了解決這個問題，ajax 就出現在了人們的開發生活中。ajax 可以完成局部網站內容的刷新，而不像以前需要刷新整個網站。
客戶端在向服務端傳遞數據的時候，服務端必須提前說給客戶端接口地址，也就是說，前端往服務端傳數據要有一個特定的地址，就像是送外賣，沒有地址，外賣往哪裏送呢？都是一個道理，一般後臺開發者對於不同的數據都會暴露出不同的接口，前端開發者通過接口傳遞和訪問數據就可以了。
4
前後臺對接前的準備
因爲我們現在的項目基本都是前後端分離了，所謂的分離就是，做一個系統，前端人員只負責客戶端的相關頁面就可以，而不用管後臺如何存儲數據的，而後臺的開發者只關心數據如何存儲的，而不用關心數據是如何展現給用戶的。
之前並沒有完全的前後端分離，比如 JSP，需要一個人進行前後臺的開發，這樣既有優點也有缺點，一個人開發當然成本很低，現在很多小公司都在用 jsp 或者前後臺沒有做到完全分離。公司明明可以花一個人的前做兩個人的事情，爲何偏偏找兩個人呢？你說是吧。
爲了能夠完成順利的對接，前端要做好前端的事情，後臺要處理好後臺的事情，不要做無畏的犧牲，在對接上雙方進行甩鍋。在大學做了很多的項目，在前後臺對接的時候總結了一些實用性的經驗，以下才是真材實料的乾貨。
首先我們明確做一個大系統，一般需要分配幾個前端外加幾十個後臺，有時候前端只需要一個開發者就可以，畢竟前端做的東西不多，一個就足夠。
前端開在開發前要做的準備就是，一般前端往往比後端早開發完，等待着對接就行了，但是前端爲了在與後臺對接時不必要的犧牲，所以自己可以提前模擬後臺傳遞過來的數據格式，比如 JSON 字符串數據格式，也是我們開發中最常用到的，我們前端人員測試假如拿到了該數據，這裏是模擬哈，然後我們前端的程序能否正確的運行，數據能夠正常的進行渲染展現給用戶。
如果所有的數據沒有問題，我們到時候把後臺人員提供給前臺的接口地址拿來指定就可以了，這就解決了一個問題，前端人員不會因爲自己做的快而白白浪費時間等着後臺開發完做測試，而是自己提前模擬後臺的數據，做測試，測試完，你就瘋狂地摸魚就可以了，豈不是美滋滋。
而後臺人員要做的就是能夠將數據庫中的數據取出，能夠準確無誤的返回給前端，就是後臺提供的接口地址和數據格式要保證準確。那後臺人員說了，我能從控制檯打印出返回給前臺的數據，也很正常，但是前端和我說拿不到數據，怪我咯？這麼說的話，我就認爲後臺開發人員的鍋，爲什麼呢？
因爲前端和後臺中間有一個數據通信的過程，後臺人員不能單單隻靠着斷點輸出到控制檯就完事了，而是通過模擬前端請求的工具來測試一下這個接口在瀏覽器中或者測試工具中是否能夠訪問，這纔是後端人員判斷該接口是否能夠正確返回給前端的依據所在，而不是反了數據就完事了，前端能不能接的到，就是前端的問題了，那這活沒法幹。
5
項目出現問題如何解決？
如果客戶端完成搭建，完成搭建的含義就是頁面可以在客戶要求的瀏覽器中正常的運行，頁面的數據都是自己模擬的數據，且能正常的進行渲染顯示。
後臺要做的就是返給前端的功能接口可以正常的使用請求工具或者瀏覽器訪問到數據，一般這個數據都爲 JSON 格式。
好了，前後臺開始準備對接，這時，後臺人員找到前端人員說，可以進行數據對接了， 前後對接會有一個接口說明文檔，大概長這個樣子：
每個接口 URL 對應的功能是什麼，以及返回數據的字段格式代表什麼意思，這些都會在接口文檔中進行詳細的說明。
PS：記得剛開始做前後端分離對接的時候，沒有什麼接口文檔，上邊所述的數據字段基本都是口頭對接，有時候難免出現問題，比如，登錄出現問題了，登錄用戶名前端接收的是 username，而後臺傳輸的字段爲 user，人候項目經理來了，說你們改一下這一塊，這時候無論是前端還是後臺，都不想把這個鍋自己背吧。
所以團隊合作，一定在寫代碼之前把所有的文檔商量好，哪些需要前端人員去寫，哪些需要後臺人員去寫，在對接或後期項目出現問題的時候，不至於各種甩鍋。
雖然我們前後臺都各自準備好了，對接時遇到問題我們該如何快速定位呢？
一般這時候也是各種甩鍋了，前端說是你們後臺服務器出現的問題，而後臺會反駁說明明是你前端的問題。爭吵是沒有任何意義的，能不能解決問題纔是前後端更應該專注的地方。
首先定位問題現在兩個地方查看，一個是在瀏覽器的 Console 控制檯中；或者在後臺的控制檯中。
第二步應該分析錯誤的信息，比如前端最容易出現的問題就是獲取不到數據，控制檯這時會報錯，報錯信息如下：
很明顯的跨域問題，要麼前端人員快速解決這個問題，或者讓後臺人員配合解決這個問題就好了。
如果後臺控制檯報錯信息如下：
顯示狀態碼 500 錯誤，HTTP 常見的響應狀態碼中 500 說明出現服務器端錯誤，這時候後臺人員會去解決。
這是兩個很明顯的前端和後臺的錯誤信息，最致命的問題就是無法能夠通過錯誤信息定位到是前端還是後臺的錯誤。
這時最好的排查方案就是前後臺的開發人員都要對自己負責的一塊重新做一次測試，保證沒有問題之後，就進行逐步排查其他問題引起的。
是否在同一局域網內，或者服務器上部署是否可以訪問，或者數據在傳輸中是不是出現了問題。我們之前也分享過很多網絡原理的知識，這時候前端你就會用上，問題也可能出現在瀏覽器中，所以前幾天小鹿也分享了瀏覽器的工作原理。
小結
今天分享到的基本都是之前小鹿和團隊合作做前後端分離的時候總結出來的經驗，最主要的就是遇到問題先不要甩鍋，而是快速定位問題，然後解決問題。
很多人爲什麼喜歡甩鍋，其實這就是人性上的一個缺點，總是用最簡單的方式解決問題，因爲甩鍋就直接把問題扯的和自己無關了。而思考怎麼定位問題這件事情確很難去執行，所以人的大腦自動選擇最快的方案。