對(duì)目前的web來(lái)說(shuō)，前后端分離已經(jīng)變得越來(lái)越流行了，越來(lái)越多的企業(yè)/網(wǎng)站都開(kāi)始往這個(gè)方向靠攏。那么，為什么要選擇前后端分離呢？前后端分離對(duì)實(shí)際開(kāi)發(fā)有什么好處呢?

為什么選擇前后端分離

  • 在以前傳統(tǒng)的網(wǎng)站開(kāi)發(fā)中，前端一般扮演的只是切圖的工作，只是簡(jiǎn)單地將UI設(shè)計(jì)師提供的原型圖實(shí)現(xiàn)成靜態(tài)的HTML頁(yè)面，而具體的頁(yè)面交互邏輯，比如與后臺(tái)的數(shù)據(jù)交互工作等，可能都是由后臺(tái)的開(kāi)發(fā)人員來(lái)實(shí)現(xiàn)的，或者是前端是緊緊的耦合后臺(tái)。比如，以前淘寶的Web基本上都是基于MVC框架webx，架構(gòu)決定了前端只能依賴(lài)后端。所以他們的開(kāi)發(fā)模式依然是，前端寫(xiě)好靜態(tài)demo，后端翻譯成VM模版，這種模式的問(wèn)題就不說(shuō)了，被吐槽了很久。

  • 而且更有可能后臺(tái)人員直接兼顧前端的工作，一邊實(shí)現(xiàn)API接口，一邊開(kāi)發(fā)頁(yè)面，兩者互相切換著做，而且根據(jù)不同的url動(dòng)態(tài)拼接頁(yè)面，這也導(dǎo)致后臺(tái)的開(kāi)發(fā)壓力大大增加。前后端工作分配不均。不僅僅開(kāi)發(fā)效率慢，而且代碼難以維護(hù)。而前后端分離的話，則可以很好的解決前后端分工不均的問(wèn)題，將更多的交互邏輯分配給前端來(lái)處理，而后端則可以專(zhuān)注于其本職工作，比如提供API接口，進(jìn)行權(quán)限控制以及進(jìn)行運(yùn)算工作。而前端開(kāi)發(fā)人員則可以利用nodejs來(lái)搭建自己的本地服務(wù)器，直接在本地開(kāi)發(fā)，然后通過(guò)一些插件來(lái)將api請(qǐng)求轉(zhuǎn)發(fā)到后臺(tái)，這樣就可以完全模擬線上的場(chǎng)景，并且與后臺(tái)解耦。前端可以獨(dú)立完成與用戶交互的整一個(gè)過(guò)程，兩者都可以同時(shí)開(kāi)工，不互相依賴(lài)，開(kāi)發(fā)效率更快，而且分工比較均衡。

如何做到前后端分離

(以下的內(nèi)容都是基于我們的電影購(gòu)票網(wǎng)站來(lái)討論的)
前端的技術(shù)框架是: vue全家桶+nodejs+express(實(shí)現(xiàn)的是單頁(yè)面(SPA)應(yīng)用)
首先，先分清楚前后端的工作

  • 前端的工作：實(shí)現(xiàn)整一個(gè)前端頁(yè)面以及交互邏輯，以及利用ajax與nodejs服務(wù)器（中間層)交互

  • 后端的工作：提供API接口，利用redis來(lái)管理session,與數(shù)據(jù)庫(kù)交互

我們項(xiàng)目的整一個(gè)架構(gòu)如下:

平面設(shè)計(jì)培訓(xùn),網(wǎng)頁(yè)設(shè)計(jì)培訓(xùn),美工培訓(xùn),游戲開(kāi)發(fā),動(dòng)畫(huà)培訓(xùn)

接下來(lái)進(jìn)入正題，如何實(shí)現(xiàn)前后端分離

  1. 一般來(lái)說(shuō)，要實(shí)現(xiàn)前后端分離，前端就需要開(kāi)啟一個(gè)本地的服務(wù)器來(lái)運(yùn)行自己的前端代碼，以此來(lái)模擬真實(shí)的線上環(huán)境，并且，也是為了更好的開(kāi)發(fā)。因?yàn)槟阍趯?shí)際開(kāi)發(fā)中，你不可能要求每一個(gè)前端都去搭建一個(gè)java(php)環(huán)境，并且在java環(huán)境下開(kāi)發(fā)，這對(duì)于前端來(lái)說(shuō)，學(xué)習(xí)成本太高了。但如果本地沒(méi)有開(kāi)啟服務(wù)器的話，不僅無(wú)法模擬線上的環(huán)境，而且還面臨到了跨域的問(wèn)題，因?yàn)槟闳绻麑?xiě)靜態(tài)的html頁(yè)面，直接在文件目錄下打開(kāi)的話，你是無(wú)法發(fā)出ajax請(qǐng)求的(瀏覽器跨域的限制),因此，你需要在本地運(yùn)行一個(gè)服務(wù)器，可是又不想搭建陌生而龐大的java環(huán)境，怎么辦法呢？nodejs正好解決了這個(gè)問(wèn)題。在我們項(xiàng)目中，我們利用nodejs的express框架來(lái)開(kāi)啟一個(gè)本地的服務(wù)器，然后利用nodejs的一個(gè)http-proxy-middleware插件將客戶端發(fā)往nodejs的請(qǐng)求轉(zhuǎn)發(fā)給真正的服務(wù)器，讓nodejs作為一個(gè)中間層。這樣，前端就可以無(wú)憂無(wú)慮的開(kāi)發(fā)了

  2. 由于前后端分離后，前端和后臺(tái)同時(shí)開(kāi)發(fā)時(shí)，就可能遇到前端已經(jīng)開(kāi)發(fā)好一個(gè)頁(yè)面了，可是卻等待后臺(tái)API接口的情況。比如說(shuō)A是負(fù)責(zé)前端，B是負(fù)責(zé)后臺(tái)，A可能用了一周做好了基本的結(jié)構(gòu)，并且需要API接口聯(lián)調(diào)后，