在網(wǎng)站開(kāi)發(fā)過(guò)程中策泣，對(duì)于前后端的分界線似乎一直是眾說(shuō)紛紜衙傀。在網(wǎng)上搜索什么是前后端分離，更是說(shuō)什么的都有萨咕，天花亂墜统抬，描述不清。從一開(kāi)始完全沒(méi)有前后端的概念危队，到后來(lái)的糾纏不清聪建。

傳統(tǒng)的分離方法

在我的腦海中一提到前端和后端，基本上第一個(gè)出現(xiàn)的區(qū)別點(diǎn)就是:后端是跟數(shù)據(jù)庫(kù)跟服務(wù)器打交道的茫陆，前端是跟瀏覽器打交道的金麸。似乎沒(méi)有什么問(wèn)題，大家都這么認(rèn)為的簿盅。當(dāng)然這沒(méi)有什么錯(cuò)挥下，我們一直以來(lái)都認(rèn)為僅僅是以瀏覽器作分界揍魂，把這兩部分的代碼分離出來(lái)。但是前后端分離的初衷是為了分離前后端開(kāi)發(fā)人員的職責(zé)棚瘟，同時(shí)解決開(kāi)發(fā)模式的問(wèn)題现斋。但似乎他們的職責(zé)在以前甚至于現(xiàn)在都并不明確，雖然前端是跟瀏覽器打交道偎蘸，但是最終瀏覽器拿到的頁(yè)面是服務(wù)器通過(guò)模板生成的一個(gè)臨時(shí)靜態(tài)頁(yè)面而已庄蹋。所以，實(shí)際上后端也摻和進(jìn)來(lái)了禀苦，因?yàn)樗幚砟０迓稀．?dāng)然，一般傳統(tǒng)上的開(kāi)發(fā)協(xié)作模式有兩種：

一種是前端先寫(xiě)一個(gè)靜態(tài)頁(yè)面振乏，寫(xiě)好后蔗包，讓后端去套模板。靜態(tài)頁(yè)面可以本地開(kāi)發(fā)慧邮，也無(wú)需考慮業(yè)務(wù)邏輯只需要實(shí)現(xiàn)View即可调限。不足是還需要后端套模板，這些前端代碼后端需要瀏覽一遍误澳，以免出錯(cuò)耻矮。

另一種協(xié)作模式是，前端直接去寫(xiě)模板忆谓，這樣做的問(wèn)題在于裆装，前端編寫(xiě)過(guò)程中很依賴與后端環(huán)境，如果當(dāng)后端沒(méi)寫(xiě)完的情況下倡缠，前端幾乎沒(méi)法干活哨免。

顯然這兩種方式似乎都有很多問(wèn)題，但至少這還是目前為止大部分公司所采用的模式昙沦。他們從物理層來(lái)區(qū)分前后端的開(kāi)發(fā)琢唾，同時(shí)淡化了前端在邏輯上的色彩。由于前端所做的事情就是來(lái)實(shí)現(xiàn)一個(gè)頁(yè)面的靜態(tài)版本盾饮，所以采桃，大多數(shù)公司又給前端工程師們找了點(diǎn)活干。你去看現(xiàn)在公司在招聘的時(shí)候前端工程師的要求丘损，除了對(duì)頁(yè)面的基本制作技能外還有額外的設(shè)計(jì)職責(zé)普办。例如至少會(huì)一門后端編程語(yǔ)言NodeJs或者php或者Java。

到這里原本我們以為已經(jīng)將前后端分離開(kāi)來(lái)了徘钥，但是在模版這個(gè)尷尬的問(wèn)題上衔蹲，前后端的工程師們絕對(duì)吃過(guò)不少苦頭。目前直接在jsp或是php里面寫(xiě)html應(yīng)該不多了吏饿。前后端分離正在是正火踪危。那么怎么分離，誰(shuí)占的多點(diǎn)猪落，誰(shuí)占的少點(diǎn)贞远，根據(jù)各個(gè)公司的技術(shù)水平來(lái)。前端開(kāi)發(fā)工程師牛了笨忌，就想著前端的mvc,mvvm蓝仲，直出。后端牛了官疲，就想著袱结，你把這個(gè)原型給后端，其他不用管了途凫。

傳統(tǒng)的開(kāi)發(fā)方法

之前的php代碼寫(xiě)在html代碼里,不存在純粹的php文件和html文件,這里就是前后端不分離,大概意思就是php和html,你中我有,我中有你.

但是呢,后來(lái)開(kāi)發(fā)的時(shí)候遇到很多問(wèn)題,前端(html,css,js)工程師對(duì)php代碼可能讀不懂,php工程師也不對(duì)css那些內(nèi)容非常熟悉,所以后來(lái)人們想出一個(gè)辦法,把代碼分離!這樣就能讓每個(gè)人在各自的領(lǐng)域更好的發(fā)揮,這樣雖然消耗了一定的效率,但是對(duì)于開(kāi)發(fā)人員從某一角度來(lái)說(shuō)是友好的.

前后端分離并沒(méi)有網(wǎng)上說(shuō)的那么復(fù)雜垢夹。

1.首先要知道所有的程序都是一數(shù)據(jù)為基礎(chǔ)的，沒(méi)有數(shù)據(jù)的程序沒(méi)有實(shí)際意義维费，程序的本質(zhì)就是對(duì)程序的增刪改查果元。

2.前后端分離就是把數(shù)據(jù)操作和顯示分離出來(lái)。前端專注做數(shù)據(jù)顯示犀盟，通過(guò)文字而晒，圖片或者圖標(biāo)等方式讓數(shù)據(jù)形象直觀的顯示出來(lái)。后端專注做數(shù)據(jù)的操作阅畴。前端把數(shù)據(jù)發(fā)給后端倡怎，有后端對(duì)數(shù)據(jù)進(jìn)行修改。

3.后端一般用java贱枣，c#等語(yǔ)言监署，現(xiàn)在的node屬于JavaScript也能進(jìn)行后端操作，此處不意義裂解語(yǔ)言冯事。后端來(lái)進(jìn)行數(shù)據(jù)庫(kù)的鏈接焦匈，并對(duì)數(shù)據(jù)進(jìn)行操作。

4.后端提供接口給前端調(diào)用昵仅，來(lái)觸發(fā)后端對(duì)數(shù)據(jù)的操作缓熟。

基本原理就是這樣，可能語(yǔ)言上不準(zhǔn)確摔笤，思想是沒(méi)有問(wèn)題的够滑。

所以開(kāi)發(fā)網(wǎng)站的核心現(xiàn)在基本上就是：

html + css ：頁(yè)面展示

javascript + ajax（這個(gè)算是瀏覽器的一部分轻姿，可以通過(guò) javascript 調(diào)用） : 頁(yè)面交互穿铆、邏輯處理

通常的開(kāi)發(fā)框架選擇：

簡(jiǎn)單網(wǎng)站： jquery + bootstrap

后臺(tái)管理系統(tǒng)： angularjs + jquery + bootstrap + webpack

復(fù)雜的產(chǎn)品： react + redux + webpack