實現先後端分離的心得

實現先後端分離的心得

對目前的web來講，先後端分離已經變得愈來愈流行了，愈來愈多的企業/網站都開始往這個方向靠攏。那麼，爲何要選擇先後端分離呢？先後端分離對實際開發有什麼好處呢?

爲何選擇先後端分離

• 在之前傳統的網站開發中，前端通常扮演的只是切圖的工做，只是簡單地將UI設計師提供的原型圖實現成靜態的HTML頁面，而具體的頁面交互邏輯，好比與後臺的數據交互工做等，可能都是由後臺的開發人員來實現的，或者是前端是牢牢的耦合後臺。好比，之前淘寶的Web基本上都是基於MVC框架webx，架構決定了前端只能依賴後端。因此他們的開發模式依然是，前端寫好靜態demo，後端翻譯成VM模版，這種模式的問題就不說了，被吐槽了好久。
• 並且更有可能後臺人員直接兼顧前端的工做，一邊實現API接口，一邊開發頁面，二者互相切換着作，並且根據不一樣的url動態拼接頁面，這也致使後臺的開發壓力大大增長。先後端工做分配不均。不只僅開發效率慢，並且代碼難以維護。而先後端分離的話，則能夠很好的解決先後端分工不均的問題，將更多的交互邏輯分配給前端來處理，然後端則能夠專一於其本職工做，好比提供API接口，進行權限控制以及進行運算工做。而前端開發人員則能夠利用nodejs來搭建本身的本地服務器，直接在本地開發，而後經過一些插件來將api請求轉發到後臺，這樣就能夠徹底模擬線上的場景，而且與後臺解耦。前端能夠獨立完成與用戶交互的整一個過程，二者均可以同時開工，不互相依賴，開發效率更快，並且分工比較均衡。

如何作到先後端分離

(如下的內容都是基於咱們的電影購票網站來討論的)
前端的技術框架是: vue全家桶+nodejs+express(實現的是單頁面(SPA)應用)
首先，先分清楚先後端的工做

• 前端的工做：實現整一個前端頁面以及交互邏輯，以及利用ajax與nodejs服務器（中間層)交互
• 後端的工做：提供API接口，利用redis來管理session,與數據庫交互

咱們項目的整一個架構以下:

接下來進入正題，如何實現先後端分離

1. 通常來講，要實現先後端分離，前端就須要開啓一個本地的服務器來運行本身的前端代碼，以此來模擬真實的線上環境，而且，也是爲了更好的開發。由於你在實際開發中，你不可能要求每個前端都去搭建一個java(php)環境，而且在java環境下開發，這對於前端來講，學習成本過高了。但若是本地沒有開啓服務器的話，不只沒法模擬線上的環境，並且還面臨到了跨域的問題，由於你若是寫靜態的html頁面，直接在文件目錄下打開的話，你是沒法發出ajax請求的(瀏覽器跨域的限制),所以，你須要在本地運行一個服務器，但是又不想搭建陌生而龐大的java環境，怎麼辦法呢？nodejs正好解決了這個問題。在咱們項目中，咱們利用nodejs的express框架來開啓一個本地的服務器，而後利用nodejs的一個http-proxy-middleware插件將客戶端發往nodejs的請求轉發給真正的服務器，讓nodejs做爲一箇中間層。這樣，前端就能夠無憂無慮的開發了

2. 因爲先後端分離後，前端和後臺同時開發時，就可能遇到前端已經開發好一個頁面了，但是卻等待後臺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前端服務器的職責

1. 做爲靜態文件服務器，當用戶訪問網站的時候，將index.html以及其引入的js、css、fonts以及圖片返回給用戶
2. 負責將客戶端發來的ajax請求轉發給後臺服務器

其實前端服務器的部署工做是算比較簡單的，具體有如下兩個點:

1. 將開發完的前端代碼，利用webpack打包成靜態壓縮文件
2. 在服務器上，利用pm2負載均衡器來執行如下的代碼來開啓服務器:

評論區有人提到有一個不錯的文章，我看了下以爲寫得確實很詳細，你們也可能看一下:https://segmentfault.com/a/1190000009329474?_ea=2038402 (感受這就是業務與專業的區別哈哈)
(PS:其實也有一個作法，就是用nginx來作反向代理，負責轉發請求，根據客戶端訪問的url把這個請求轉發到不一樣的服務，好比訪問/api/*的請求，就轉發到後臺服務，訪問其它的請求，就轉發到nodejs服務)
以上，就是我對於先後端分離的一些見解，以及一些實踐，若是你們有什麼好的想法，歡迎交流。本次項目代碼的地址爲:https://github.com/chenjigeng/filmshopping

本文地址在->本人博客地址, 歡迎給個 start 或 follow