對目前的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服務)
以上,就是我對於前后端分離的一些看法,以及一些實踐,如果大家有什么好的想法,歡迎交流。