你是(shi)小阿巴，剛(gang)入職的全棧(zhan)程序員。

所謂全棧，就是 全干(gan)，整個網(wang)站項(xiang)目的后端和前(qian)端都由你一個人負責(ze)開(kai)發。

當用(yong)戶打開一個網(wang)站(zhan)，能直(zhi)觀看到、可交互操作的(de)界面，就(jiu)是前端。

而(er)當用戶點(dian)擊操作(zuo)按鈕后(hou)，觸(chu)發的操作(zuo)驗證(zheng)、數據查詢、業務邏輯(ji)處理等種種 “看不(bu)到” 的操作(zuo)，都由后(hou)端(duan)來完成。

 

本文對應視頻版：

 

你使用的開發(fa)技術(shu)是比你年齡都大的 JSP，它的特(te)點(dian)是把前端(duan) HTML 網頁(ye)代碼和(he)后端(duan) Java 代碼混在一起(qi)寫。

 

剛開始項(xiang)目代(dai)碼(ma)不多的(de)時候，你寫的(de)很(hen)舒服。

但隨著(zhu)項目(mu)越做越大，更多同(tong)事加入了這(zhe)個項目(mu)的開發，你也(ye)漸漸發現了幾個問題。

 

1. 代碼混亂難維(wei)護：前端后端代碼糾纏在一起，不利(li)于閱讀，也不利(li)于排查(cha) Bug。

2. 團(tuan)隊協作困(kun)難：你在改前端樣式，同事在改后端邏輯(ji)，經常(chang)改著改著就(jiu)沖突(tu)了(le)。

3. 人員(yuan)要(yao)求更高：開(kai)發(fa)人員(yuan)必須同時(shi)學習前端和后端技術(shu)，今天寫 CSS 調樣式，明天寫 SQL 查數據庫，根(gen)本忙不過來。

4. 部署效率低(di)下(xia)：由于前(qian)端后端寫在一起(qi)，哪怕改個按鈕(niu)顏色都要重新(xin)編譯部署整個項目。

 

受這(zhe)些(xie)問題(ti)的影(ying)響(xiang)，項目(mu)開發效(xiao)率越來越低，Bug 卻越來越多，你(ni)壓力山大(da)、發如雨下。

老板看出(chu)了你毛兒的不易，給公(gong)司請來了一位新(xin)的技術(shu)導師，號稱 “全(quan)棧(zhan)冤種” 的魚(yu)皮。

魚皮(pi)看(kan)了看(kan)你的項(xiang)目(mu)，搖了搖頭：連前(qian)后端分離都不做么(me)？

你疑(yi)惑地問：前后端分離？沒聽說過。

這時，你的(de)同(tong)事(shi)阿(a)土申插嘴道：我知道啊！我們現在把前端靜態文(wen)件(jian)放(fang)在 static 文(wen)件(jian)夾(jia)，JSP 代(dai)碼放(fang)在 jsp 文(wen)件(jian)夾(jia)，這不就是前后端分離嗎？

 

魚皮皺眉(mei)：那(nei)只(zhi)是文件夾分離，不是真(zhen)正的(de)前后端分離。

阿(a)土申不服(fu)：魚皮老狗，那(nei)你說(shuo)說(shuo)用(yong)什么技術(shu)才算(suan)是前后端分離(li)？

魚皮笑道：前后端分離可不是某種特定的技術，而是一種 架構 思想。

看(kan)看(kan)你們現在的(de)(de)項目，用戶訪(fang)問網(wang)站時，是(shi)由后(hou)端服(fu)務器接(jie)收請求，然后(hou)在后(hou)端查詢數據并拼(pin)接(jie)到 HTML 網(wang)頁模(mo)板中，生成完整的(de)(de)網(wang)頁，最后(hou)再返回(hui)給(gei)用戶。

 

顯然(ran)，后(hou)端(duan)承受了太多！

而如果改造為前后端分離(li)：

• 前端專注于用(yong)戶界(jie)面(mian)的呈現和(he)交互邏(luo)輯

• 后端專注于數據處理和業(ye)務邏(luo)輯(ji)，不涉及(ji)界(jie)面代碼和網(wang)頁(ye)生成

• 用戶在前端進行操作時，前端通過 API 接口 向后端(duan)發送請求，由(you)后端(duan)處理操作并返回(hui)數據(ju)給(gei)前端(duan)，由(you)前端(duan)完(wan)成數據(ju)的最終展示。

 

你不明覺(jue)厲(li)：可是這樣做(zuo)有什么好處呢？

魚皮指著你之前列出(chu)的(de)問(wen)題說：前后端分離就是專門解決這些痛點的(de)！

1）首先是 代碼分離：將前端(duan)代(dai)碼和(he)后(hou)端(duan)代(dai)碼完全分(fen)開，最好是(shi) 2 個獨立(li)的項目(mu)

2）代碼分離后，就可以 開發分離：前端和后端程序員可以(yi)同時干(gan)活，互不干(gan)擾。

3）還可以 部署(shu)分離：前端和后(hou)端項目各自獨立(li)部(bu)署(shu)，后(hou)端出了問題或(huo)者修改了邏(luo)輯(ji)，不用重新(xin)部(bu)署(shu)前端。

4）做到前面 3 個分離后，我們便能實現前后端分離的本質 —— 職責分離，專(zhuan)業的(de)人(ren)干專(zhuan)業的(de)事情，各自(zi)發揮(hui)特長，整體效率自(zi)然(ran)更(geng)高。當然(ran)最主要的(de)是，后端出了問題，前端不用背(bei)鍋。

 

聽著魚皮滔(tao)滔(tao)不絕，你雙眼放光：前后端(duan)分離這么厲害，是(shi)不是(shi)還能(neng)提(ti)升網站性能(neng)呢？

魚(yu)皮搖(yao)搖(yao)頭：不(bu)一(yi)定，而且有時前(qian)后(hou)(hou)端(duan)分離可能更慢！因為(wei)用(yong)戶訪問網(wang)站(zhan)時，瀏覽器需要先加載(zai)前(qian)端(duan)頁面(mian)，然后(hou)(hou)執行 JavaScript 腳本請(qing)求后(hou)(hou)端(duan)數(shu)據(ju)，這比傳統的后(hou)(hou)端(duan)直接返回完整頁面(mian)多了一(yi)次網(wang)絡請(qing)求。

 

但是也(ye)別(bie)灰心，前后端分離后，前端和(he)后端都可以分別(bie)進行(xing)優化，更靈(ling)活。

 

你點了點頭：原來如此，看來前后端分離的主要目的是 提升開發(fa)效(xiao)率(lv)和代碼維護性(xing)，而不是(shi)提升性能(neng)。

于是你帶領團隊開始重構項目(mu)，前端(duan)用 React 框架重寫了整個界(jie)面，打包成靜態文件部署到 CDN 加(jia)速網絡上；后端(duan)則專門提供 API 接(jie)口，返回 JSON 數(shu)據，部署在獨立的服務器上，互不影響(xiang)。

幾個月后，你(ni)感(gan)受(shou)到(dao)了前(qian)后端(duan)分離的優勢：

• 團隊(dui)成員各司其職

• 前端技術靈活(huo)選擇

• 后端服(fu)務(wu)多(duo)端復用

 

雖然(ran)前(qian)端(duan)(duan)和后端(duan)(duan)對接的過(guo)程(cheng)中偶爾(er)會斗嘴打架，但你也通過(guo)自己(ji)總結的一套前(qian)后端(duan)(duan)分離的實戰經驗完美解決。

 

你興(xing)奮地對魚皮說：前后端分(fen)離也太爽(shuang)了吧！

魚皮笑著問：那我問你，前后(hou)端分離(li)一定比(bi)不分離(li)更好(hao)么？

你不(bu)假思索：那當然了！你看看這盛世豈不(bu)如你所愿？

魚皮(pi)搖搖頭：小(xiao)阿巴你(ni)要記住，沒有(you)最好(hao)的(de)(de)架構，只(zhi)有(you)相對更合(he)適的(de)(de)架構！是否采用前后端分離，要根(gen)據團隊(dui)項目(mu)規模、項目(mu)實際需求、團隊(dui)技術(shu)能力等綜合(he)決定。

你：我明白(bai)了，拋開實際(ji)場景談架構都(dou)是耍流氓~

魚皮(pi)：最(zui)后(hou)問個問題，用了(le) React 框架一定(ding)就是前后(hou)端(duan)分離么？

朋友，說說你(ni)的看(kan)法(fa)吧。

 

更多編程(cheng)學習資源

• //www.code-nav.cn/post/1640648711119892481