實現前後端分離的心得
對目前的web來說，前後端分離已經變得越來越流行了，越來越多的企業/網站都開始往這個方向靠攏。那麼，為什麼要選擇前後端分離呢？前後端分離對實際開發有什麼好處呢?
為什麼選擇前後端分離
- 在以前傳統的網站開發中，前端一般扮演的只是切圖的工作，只是簡單地將UI設計師提供的原型圖實現成靜態的HTML頁面，而具體的頁面互動邏輯，比如與後臺的資料互動工作等，可能都是由後臺的開發人員來實現的，或者是前端是緊緊的耦合後臺。比如，以前淘寶的Web基本上都是基於MVC框架webx，架構決定了前端只能依賴後端。所以他們的開發模式依然是，前端寫好靜態demo，後端翻譯成VM模版，這種模式的問題就不說了，被吐槽了很久。
- 而且更有可能後臺人員直接兼顧前端的工作，一邊實現API介面，一邊開發頁面，兩者互相切換著做，而且根據不同的url動態拼接頁面，這也導致後臺的開發壓力大大增加。前後端工作分配不均。不僅僅開發效率慢，而且程式碼難以維護。而前後端分離的話，則可以很好的解決前後端分工不均的問題，將更多的互動邏輯分配給前端來處理，而後端則可以專注於其本職工作，比如提供API介面，進行許可權控制以及進行運算工作。而前端開發人員則可以利用nodejs來搭建自己的本地伺服器，直接在本地開發，然後通過一些外掛來將api請求轉發到後臺，這樣就可以完全模擬線上的場景，並且與後臺解耦。前端可以獨立完成與使用者互動的整一個過程，兩者都可以同時開工，不互相依賴，開發效率更快，而且分工比較均衡。
如何做到前後端分離
(以下的內容都是基於我們的電影購票網站來討論的)
前端的技術框架是: vue全家桶+nodejs+express(實現的是單頁面(SPA)應用)
首先，先分清楚前後端的工作
- 前端的工作：實現整一個前端頁面以及互動邏輯，以及利用ajax與nodejs伺服器（中間層)互動
- 後端的工作：提供API介面，利用redis來管理session,與資料庫互動
我們專案的整一個架構如下:
接下來進入正題，如何實現前後端分離
- 一般來說，要實現前後端分離，前端就需要開啟一個本地的伺服器來執行自己的前端程式碼，以此來模擬真實的線上環境，並且，也是為了更好的開發。因為你在實際開發中，你不可能要求每一個前端都去搭建一個java(php)環境，並且在java環境下開發，這對於前端來說，學習成本太高了。但如果本地沒有開啟伺服器的話，不僅無法模擬線上的環境，而且還面臨到了跨域的問題，因為你如果寫靜態的html頁面，直接在檔案目錄下開啟的話，你是無法發出ajax請求的(瀏覽器跨域的限制),因此，你需要在本地執行一個伺服器，可是又不想搭建陌生而龐大的java環境，怎麼辦法呢？nodejs正好解決了這個問題。在我們專案中，我們利用nodejs的express框架來開啟一個本地的伺服器，然後利用nodejs的一個http-proxy-middleware外掛將客戶端發往nodejs的請求轉發給真正的伺服器，讓nodejs作為一箇中間層。這樣，前端就可以無憂無慮的開發了
- 由於前後端分離後，前端和後臺同時開發時，就可能遇到前端已經開發好一個頁面了，可是卻等待後臺API介面的情況。比如說A是負責前端，B是負責後臺，A可能用了一週做好了基本的結構，並且需要API介面聯調後，才能繼續開發，而此時B卻還沒有實現好所需要的介面，這種情況，怎麼辦呢？在我們這個專案裡，我們是通過了mock來提供一些假資料，我們先規定好了API介面，設計出了一套API文件，然後我們就可以通過API文件，利用mock(http://mockjs.com)來返回一些假資料，這樣就可以模擬傳送API到接受響應的整一個過程，因此前端也不需要依賴於後端開發了，可以獨立開發，等到後臺的API全部設計完之後，就可以比較快速的聯調。
為什麼要引入nodejs作為中間層
前面的我發的專案結構圖中，已經表明，在這個專案裡，我們將nodejs作為中間層，那麼，為什麼我們要特地引入nodejs呢？直接用java做不就行了嗎？
- 我覺得引入nodejs主要是為了分層開發，職責劃分，nodejs作為前端伺服器，由前端開發人員負責，前端開發人員不需要知道java後臺是如何實現的，也不需要知道API介面是如何實現的，我們只需要關心我們前端的開發工作，並且管理好nodejs前端伺服器，而後臺開發人員也不需要考慮如何前端是如何部署的，他只需要做好自己擅長的部分，提供好API介面就可以；
- nodejs本身有著獨特的非同步、非阻塞I/O的特點，這也就意味著他特別適合I/O密集型操作，在處理併發量比較大的請求上能力比較強，因此，利用它來充當前端伺服器，向客戶端提供靜態檔案以及響應客戶端的請求，我覺得這是一個很不錯的選擇。
前端伺服器如何部署
nodejs前端伺服器的職責
- 作為靜態檔案伺服器，當使用者訪問網站的時候，將index.html以及其引入的js、css、fonts以及圖片返回給使用者
- 負責將客戶端發來的ajax請求轉發給後臺伺服器
其實前端伺服器的部署工作是算比較簡單的，具體有以下兩個點:
- 將開發完的前端程式碼，利用webpack打包成靜態壓縮檔案
- 在伺服器上，利用pm2負載均衡器來執行以下的程式碼來開啟伺服器:
評論區有人提到有一個不錯的文章，我看了下覺得寫得確實很詳細，大家也可能看一下:https://segmentfault.com/a/1190000009329474?_ea=2038402 (感覺這就是業務與專業的區別哈哈)
(PS:其實也有一個做法，就是用nginx來做反向代理，負責轉發請求，根據客戶端訪問的url把這個請求轉發到不同的服務，比如訪問/api/*的請求，就轉發到後臺服務，訪問其它的請求，就轉發到nodejs服務)
以上，就是我對於前後端分離的一些看法，以及一些實踐，如果大家有什麼好的想法，歡迎交流。
本次專案程式碼的地址為:https://github.com/chenjigeng/filmshopping