App下載

web前端怎么配合后端開發(fā)?如何交互?

猿友 2021-05-28 14:22:27 瀏覽數(shù) (13029)
反饋

很多人對 web 開發(fā)不是很了解,為什么一個 web 應(yīng)用要分成前后端開發(fā)呢?一起開發(fā)不好嗎?其實隨著軟件工程化的概念逐漸深入后,很多公司都會按照軟件工程學(xué)的觀點,把開發(fā)和測試分離,把前端和后端分離。那么前后端分離后,前端與后盾如何交互?前端又該怎么配合后端開發(fā)呢?接下來就讓小編來告訴你。

為什么要進(jìn)行前后端分離

最開始的時候,web 應(yīng)用只需要后端開發(fā)工程師,前端的工作也由后端進(jìn)行開發(fā)。因為剛開始對 web 應(yīng)用的美觀要求沒有那么高,而且這個時候有很多使用動態(tài)頁面(每次請求服務(wù)器都會動態(tài)生成一個頁面),所以當(dāng)時并不存在前后端之說,只有后端在苦逼的做開發(fā)。后來,客戶逐漸要求更好看的頁面,這時候就出現(xiàn)前后端了。以 java 為例,最開始使用 servlet 就能進(jìn)行后端開發(fā)(直接使用 servlet 輸出一個 HTML 文件流)。但是為了降低代碼耦合程度(使用 MVC 模型),出現(xiàn)了 JSP(一種動態(tài)生成 HTML 的技術(shù),讓 HTML 在 JSP 中生成,servlet 不再處理頁面的生成,只專注于邏輯和數(shù)據(jù)的處理)。這時候后端就可以把頁面開發(fā)單獨提出來給前端開發(fā)了,這個階段因為 JSP 也要會一定的 java,所以又出現(xiàn)了一種叫 EL 的語言(在 JSP 中使用,比 java 簡單,準(zhǔn)確的來說應(yīng)該稱其為表達(dá)式,EL 表達(dá)式使前端不需要掌握 java 也能獲取服務(wù)器數(shù)據(jù))。前端在頁面開發(fā)的同時還要兼顧頁面美觀,所以對 CSS 的要求也提升了。再往后,JSON 和 AJAX 讓前后端徹底分了家。前端只需要開發(fā)靜態(tài)頁面,然后用 AJAX 與后端進(jìn)行數(shù)據(jù)交互,然后將后端返回的數(shù)據(jù)拿到前端進(jìn)行渲染,就能達(dá)到現(xiàn)代 Web 應(yīng)用的效果。自此,前端只需要負(fù)責(zé)展示頁面的開發(fā),一些簡單邏輯以及與后端的數(shù)據(jù)交互,后端只需要負(fù)責(zé)給前端傳遞數(shù)據(jù)以及一些關(guān)鍵的服務(wù)。這樣子的開發(fā)模式使整個 web 應(yīng)用的耦合度更松了(前端可以用靜態(tài)的 json 取代動態(tài)的 json 來開發(fā),后端測試的時候只需要測試輸出的 json)。

前后端怎么交互?

上面有介紹了,他們可以通過 json 進(jìn)行數(shù)據(jù)交互,前端通過 AJAX 進(jìn)行 json 的發(fā)送和接收,通過 json 解析獲取數(shù)據(jù),后端通過相關(guān)的技術(shù)( java 和 python 都有專門解析和發(fā)送 json 的包,比如 java有?net.sf.json? 包)。

前端如何配合后端開發(fā)

一般有兩種方式。一種是前端規(guī)定接口,后端負(fù)責(zé)接口實現(xiàn)的。由于數(shù)據(jù)的展現(xiàn)處理都是由前端進(jìn)行實現(xiàn),所以前端可以要求后端給定相應(yīng)格式的 json。另一種方式是前后端一起協(xié)定接口定義。因為前端對后端了解比較少,所以如果只由前端定義接口,到時候接口會很混亂,前后端一起協(xié)定接口定義,后端在開發(fā)的時候就能對接口進(jìn)行封裝,使后端開發(fā)更輕松。 

小結(jié)

現(xiàn)在的前后端分離,更多的是后端去配合前端進(jìn)行功能實現(xiàn),所以與其說是前端配合后端開發(fā),不如說是后端配合前端開發(fā)。這個時候前端跟后端進(jìn)行接口定義的時候,前端一定要有一定的主動權(quán),不然后端給你的 json 可能會讓你的心情變得郁悶。

學(xué)習(xí)前端與后端交互課程,可以到 W3Cschool 編程課學(xué)習(xí)。

前端與后端交互必備:Ajax + JSON 入門課程。

后端開發(fā):W3Cschool編程課-后端課程。


1 人點贊