什麼是前後端分離?

孫海婷發表於2017-10-10

在網站開發過程中,對於前後端的分界線似乎一直是眾說紛紜。在網上搜尋什麼是前後端分離,更是說什麼的都有,天花亂墜,描述不清。從一開始完全沒有前後端的概念,到後來的糾纏不清。

傳統的分離方法

在我的腦海中一提到前端和後端,基本上第一個出現的區別點就是:後端是跟資料庫跟伺服器打交道的,前端是跟瀏覽器打交道的。似乎沒有什麼問題,大家都這麼認為的。當然這沒有什麼錯,我們一直以來都認為僅僅是以瀏覽器作分界,把這兩部分的程式碼分離出來。但是前後端分離的初衷是為了分離前後端開發人員的職責,同時解決開發模式的問題。但似乎他們的職責在以前甚至於現在都並不明確,雖然前端是跟瀏覽器打交道,但是最終瀏覽器拿到的頁面是伺服器通過模板生成的一個臨時靜態頁面而已。所以,實際上後端也摻和進來了,因為他要處理模板。當然,一般傳統上的開發協作模式有兩種:

  • 一種是前端先寫一個靜態頁面,寫好後,讓後端去套模板。靜態頁面可以本地開發,也無需考慮業務邏輯只需要實現View即可。不足是還需要後端套模板,這些前端程式碼後端需要瀏覽一遍,以免出錯。

  • 另一種協作模式是,前端直接去寫模板,這樣做的問題在於,前端編寫過程中很依賴與後端環境,如果當後端沒寫完的情況下,前端幾乎沒法幹活。

顯然這兩種方式似乎都有很多問題,但至少這還是目前為止大部分公司所採用的模式。他們從物理層來區分前後端的開發,同時淡化了前端在邏輯上的色彩。由於前端所做的事情就是來實現一個頁面的靜態版本,所以,大多數公司又給前端工程師們找了點活幹。你去看現在公司在招聘的時候前端工程師的要求,除了對頁面的基本製作技能外還有額外的設計職責。例如至少會一門後端程式語言NodeJs或者php或者Java。


到這裡原本我們以為已經將前後端分離開來了,但是在模版這個尷尬的問題上,前後端的工程師們絕對吃過不少苦頭。目前直接在jsp或是php裡面寫html應該不多了。前後端分離正在是正火。那麼怎麼分離,誰佔的多點,誰佔的少點,根據各個公司的技術水平來。前端開發工程師牛了,就想著前端的mvc,mvvm,直出。後端牛了,就想著,你把這個原型給後端,其他不用管了。


傳統的開發方法
之前的php程式碼寫在html程式碼裡,不存在純粹的php檔案和html檔案,這裡就是前後端不分離,大概意思就是php和html,你中我有,我中有你.
但是呢,後來開發的時候遇到很多問題,前端(html,css,js)工程師對php程式碼可能讀不懂,php工程師也不對css那些內容非常熟悉,所以後來人們想出一個辦法,把程式碼分離!這樣就能讓每個人在各自的領域更好的發揮,這樣雖然消耗了一定的效率,但是對於開發人員從某一角度來說是友好的.


前後端分離並沒有網上說的那麼複雜。
1.首先要知道所有的程式都是一資料為基礎的,沒有資料的程式沒有實際意義,程式的本質就是對程式的增刪改查。
2.前後端分離就是把資料操作和顯示分離出來。前端專注做資料顯示,通過文字,圖片或者圖示等方式讓資料形象直觀的顯示出來。後端專注做資料的操作。前端把資料發給後端,有後端對資料進行修改。
3.後端一般用java,c#等語言,現在的node屬於JavaScript也能進行後端操作,此處不意義裂解語言。後端來進行資料庫的連結,並對資料進行操作。
4.後端提供介面給前端呼叫,來觸發後端對資料的操作。
基本原理就是這樣,可能語言上不準確,思想是沒有問題的。


所以開發網站的核心現在基本上就是:

  1. html + css :頁面展示

  2. javascript + ajax(這個算是瀏覽器的一部分,可以通過 javascript 呼叫) : 頁面互動、邏輯處理

通常的開發框架選擇:

  1. 簡單網站: jquery + bootstrap

  2. 後臺管理系統: angularjs + jquery + bootstrap + webpack

  3. 複雜的產品: react + redux + webpack



相關文章