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

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

為什么要進行前后端分離

最開始的時候，web 應用只需要后端開發(fā)工程師，前端的工作也由后端進行開發(fā)。因為剛開始對 web 應用的美觀要求沒有那么高，而且這個時候有很多使用動態(tài)頁面（每次請求服務器都會動態(tài)生成一個頁面），所以當時并不存在前后端之說，只有后端在苦逼的做開發(fā)。后來，客戶逐漸要求更好看的頁面，這時候就出現(xiàn)前后端了。以 java 為例，最開始使用 servlet 就能進行后端開發(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 簡單，準確的來說應該稱其為表達式，EL 表達式使前端不需要掌握 java 也能獲取服務器數(shù)據(jù)）。前端在頁面開發(fā)的同時還要兼顧頁面美觀，所以對 CSS 的要求也提升了。再往后，JSON 和 AJAX 讓前后端徹底分了家。前端只需要開發(fā)靜態(tài)頁面，然后用 AJAX 與后端進行數(shù)據(jù)交互，然后將后端返回的數(shù)據(jù)拿到前端進行渲染，就能達到現(xiàn)代 Web 應用的效果。自此，前端只需要負責展示頁面的開發(fā)，一些簡單邏輯以及與后端的數(shù)據(jù)交互，后端只需要負責給前端傳遞數(shù)據(jù)以及一些關鍵的服務。這樣子的開發(fā)模式使整個 web 應用的耦合度更松了（前端可以用靜態(tài)的 json 取代動態(tài)的 json 來開發(fā)，后端測試的時候只需要測試輸出的 json）。

前后端怎么交互？

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

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

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

小結(jié)

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

學習前端與后端交互課程，可以到 W3Cschool 編程課學習。

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

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