聊聊前端和後臺分離那點"破"事！

寫在前邊

今天咱們來講說前端和後臺那點「破」事，不管是你學習前端仍是後臺，都要相互打交道，打着打着交道兩夥人就打了起來，尤爲是初學者剛開始接觸先後臺對接的時候，系統出了錯誤都想甩鍋，前端說，大家後臺的接口根本訪問不了數據。後臺就把鍋甩給前端，是大家前端根本沒有訪問到後臺接口好很差。

只要你作前端或者後臺，都要作對接的，這是毋庸置疑的，這篇文章仍是主要針對一些初學者和剛剛到公司工做的實習生或應屆畢業生，儘量的避免「甩鍋」的狀況，畢竟前端和後臺的共同目標是解決二者之間的數據對接問題。

這篇文章可以兼顧到剛剛接觸前端和後臺的初學者，小鹿從最簡單的客戶端和服務端提及，由於當時剛剛接觸這些概念的時候，也是挺懵逼的，畢竟如今其餘公衆號也不多分享這麼基礎的東西，那小鹿今天就負責分享給你前端和後臺那點事！

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 說明出現服務器端錯誤，這時候後臺人員會去解決。

這是兩個很明顯的前端和後臺的錯誤信息，最致命的問題就是沒法可以經過錯誤信息定位到是前端仍是後臺的錯誤。

這時最好的排查方案就是先後臺的開發人員都要對本身負責的一塊從新作一次測試，保證沒有問題以後，就進行逐步排查其餘問題引發的。

是否在同一局域網內，或者服務器上部署是否能夠訪問，或者數據在傳輸中是否是出現了問題。咱們以前也分享過不少網絡原理的知識，這時候前端你就會用上，問題也可能出如今瀏覽器中，因此前幾天小鹿也分享了瀏覽器的工做原理。

小結

今天分享到的基本都是以前小鹿和團隊合做作先後端分離的時候總結出來的經驗，最主要的就是遇到問題先不要甩鍋，而是快速定位問題，而後解決問題。

不少人爲何喜歡甩鍋，其實這就是人性上的一個缺點，老是用最簡單的方式解決問題，由於甩鍋就直接把問題扯的和本身無關了。而思考怎麼定位問題這件事情確很難去執行，因此人的大腦自動選擇最快的方案。