很多人對(duì) web 開發(fā)不是很了解，為什么一個(gè) web 應(yīng)用要分成前后端開發(fā)呢？一起開發(fā)不好嗎？其實(shí)隨著軟件工程化的概念逐漸深入后，很多公司都會(huì)按照軟件工程學(xué)的觀點(diǎn)，把開發(fā)和測(cè)試分離，把前端和后端分離。那么前后端分離后，前端與后盾如何交互？前端又該怎么配合后端開發(fā)呢？接下來(lái)就讓小編來(lái)告訴你。
為什么要進(jìn)行前后端分離
最開始的時(shí)候，web 應(yīng)用只需要后端開發(fā)工程師，前端的工作也由后端進(jìn)行開發(fā)。因?yàn)閯傞_始對(duì) web 應(yīng)用的美觀要求沒(méi)有那么高，而且這個(gè)時(shí)候有很多使用動(dòng)態(tài)頁(yè)面（每次請(qǐng)求服務(wù)器都會(huì)動(dòng)態(tài)生成一個(gè)頁(yè)面），所以當(dāng)時(shí)并不存在前后端之說(shuō)，只有后端在苦逼的做開發(fā)。后來(lái)，客戶逐漸要求更好看的頁(yè)面，這時(shí)候就出現(xiàn)前后端了。以 java 為例，最開始使用 servlet 就能進(jìn)行后端開發(fā)（直接使用 servlet 輸出一個(gè) HTML 文件流）。但是為了降低代碼耦合程度（使用 MVC 模型），出現(xiàn)了 JSP（一種動(dòng)態(tài)生成 HTML 的技術(shù)，讓 HTML 在 JSP 中生成，servlet 不再處理頁(yè)面的生成，只專注于邏輯和數(shù)據(jù)的處理）。這時(shí)候后端就可以把頁(yè)面開發(fā)單獨(dú)提出來(lái)給前端開發(fā)了，這個(gè)階段因?yàn)?JSP 也要會(huì)一定的 java，所以又出現(xiàn)了一種叫 EL 的語(yǔ)言（在 JSP 中使用，比 java 簡(jiǎn)單，準(zhǔn)確的來(lái)說(shuō)應(yīng)該稱其為表達(dá)式，EL 表達(dá)式使前端不需要掌握 java 也能獲取服務(wù)器數(shù)據(jù)）。前端在頁(yè)面開發(fā)的同時(shí)還要兼顧頁(yè)面美觀，所以對(duì) CSS 的要求也提升了。再往后，JSON 和 AJAX 讓前后端徹底分了家。前端只需要開發(fā)靜態(tài)頁(yè)面，然后用 AJAX 與后端進(jìn)行數(shù)據(jù)交互，然后將后端返回的數(shù)據(jù)拿到前端進(jìn)行渲染，就能達(dá)到現(xiàn)代 Web 應(yīng)用的效果。自此，前端只需要負(fù)責(zé)展示頁(yè)面的開發(fā)，一些簡(jiǎn)單邏輯以及與后端的數(shù)據(jù)交互，后端只需要負(fù)責(zé)給前端傳遞數(shù)據(jù)以及一些關(guān)鍵的服務(wù)。這樣子的開發(fā)模式使整個(gè) web 應(yīng)用的耦合度更松了（前端可以用靜態(tài)的 json 取代動(dòng)態(tài)的 json 來(lái)開發(fā)，后端測(cè)試的時(shí)候只需要測(cè)試輸出的 json）。
前后端怎么交互？
上面有介紹了，他們可以通過(guò) json 進(jìn)行數(shù)據(jù)交互，前端通過(guò) AJAX 進(jìn)行 json 的發(fā)送和接收，通過(guò) json 解析獲取數(shù)據(jù)，后端通過(guò)相關(guān)的技術(shù)（ java 和 python 都有專門解析和發(fā)送 json 的包，比如 java有?net.sf.json? 包）。
前端如何配合后端開發(fā)
一般有兩種方式。一種是前端規(guī)定接口，后端負(fù)責(zé)接口實(shí)現(xiàn)的。由于數(shù)據(jù)的展現(xiàn)處理都是由前端進(jìn)行實(shí)現(xiàn)，所以前端可以要求后端給定相應(yīng)格式的 json。另一種方式是前后端一起協(xié)定接口定義。因?yàn)榍岸藢?duì)后端了解比較少，所以如果只由前端定義接口，到時(shí)候接口會(huì)很混亂，前后端一起協(xié)定接口定義，后端在開發(fā)的時(shí)候就能對(duì)接口進(jìn)行封裝，使后端開發(fā)更輕松。
小結(jié)
現(xiàn)在的前后端分離，更多的是后端去配合前端進(jìn)行功能實(shí)現(xiàn)，所以與其說(shuō)是前端配合后端開發(fā)，不如說(shuō)是后端配合前端開發(fā)。這個(gè)時(shí)候前端跟后端進(jìn)行接口定義的時(shí)候，前端一定要有一定的主動(dòng)權(quán)，不然后端給你的 json 可能會(huì)讓你的心情變得郁悶。
學(xué)習(xí)前端與后端交互課程，可以到 W3Cschool 編程課學(xué)習(xí)。
前端與后端交互必備：Ajax + JSON 入門課程。
后端開發(fā)：W3Cschool編程課-后端課程。
