楓林紀阿林

BAT的後端開發工程師不請自來。

這個問題的本質其實是在前後端分離的大趨勢下，前後端開發者如何將各自的代碼串聯起來，對外發佈一個完整的服務。

接下來，我們就分別從前端和後端來介紹。

後端

後端又稱服務端，是負責接收前端的請求，然後進行邏輯處理，去讀寫數據庫，最後將結果返回的功能節點。目前在前後端分離的大前提下，不僅是java，php，Python等等大多是通過開放http/https接口的方式與前端交流。有的特殊服務還會使用websocket協議，不過使用場景要遠遠少於http，所以在此不多介紹了。

目前市面常見的web工程都有MVC這樣一個概念，即model-view-controller，它是一種軟件設計典範，用一種業務邏輯、數據、界面顯示分離的方法組織代碼，將業務邏輯聚集到一個部件裡面，在改進和個性化定製界面及用戶交互的同時，不需要重新編寫業務邏輯。MVC被獨特的發展起來用於映射傳統的輸入、處理和輸出功能在一個邏輯的圖形化用戶界面的結構中。我們的封裝的代碼，可以說就在controller層。

以Java為例，如何實現一個接口呢。只需要在java的某個類中，增加@controller註解，這個類裡的函數，在項目啟動的時候，就會根據各自定義的path被自動加載為api了。舉例來說，現在有兩個controller，在url

http://xxx.yyy.com/api/

http://xxx.yyy.com/api/A/A1

前端

前端通常負責的工作除了渲染界面，還有兩部分組成：

1 捕捉用戶的操作，

2 根據操作請求後端api並獲取結果展示給用戶。

我們前面介紹的前後端交互，就是第二部分的工作。前端通過調用後端提供的api來傳遞和獲取數據，最後再將數據渲染到頁面上。

不過值得提一句的是，html並不負責與java交互，從基礎來說，html只負責頁面架構，具體捕捉用戶操作，獲取數據等步驟，是由JavaScript來實現的。

以上是我的淺見，歡迎各位在下方評論區與我溝通。

我是蘇蘇思量，來自BAT的Java開發工程師，每日分享科技類見聞，歡迎關注我，與我共同進步。

蘇蘇思量

本人計算機專業畢業，從事Java Web研發三年半，我就以個人的經歷來談談後端Java怎麼和前端HTML交互，由於主要從事Java服務端的研發，對前端HTML的認識有限，個人淺見，一起交流。

剛畢業參加工作時，首先接觸到的是Java前端技術是JSP，當時做基礎架構方面的工作，有一些管理界面需要研發，而團隊的技術線就是JSP+Spring+Duboo+Zookeeper+mysql，我當然也延續了這一技術線，前後使用了一年左右的JSP，前後端研發都一起搞，包括數據庫部署、上線維護等都有所涉及。JSP技術使用Java編程語言編寫類XML的tags和scriptlets，來封裝產生動態網頁的處理邏輯。JSP頁面由HTML代碼和嵌入其中的Java代碼所組成。服務器在頁面被客戶端請求以後對這些Java代碼進行處理，然後將生成的HTML頁面返回給客戶端的瀏覽器。隨著技術的發展，JSP逐漸被團隊淘汰。

積極擁抱變化，是互聯網公司或者互聯網團隊需要做的事情，spring boot + spring cloud的技術線進入了我們的視野。基礎架構全面引入spring boot，積極推動微服務的發展成為團隊的新課題。在推動spring boot的使用中，發現其支持的thymeleaf模板引擎有諸多的優點，在leader拍板之後，團隊的前端技術就由JSP替換為thymeleaf。thymeleaf的優點是靜態html嵌入標籤屬性，瀏覽器可以直接打開模板文件，便於前後端聯調，同時也是springboot官方推薦方案。

技術總是不斷髮展的，前後端分離，面向接口編程的理念又進入我們的團隊。hymeleaf這種前後端一起部署的技術體系已經不能滿足我們的要求，為了推動前後端分離和專業的人做專業的事，將功能需求做頁面劃分，後端和前端定義接口標準，然後依此為契約，同步進行研發。發展到這裡，前端的React技術棧又進入了我們團隊的視野，由於其前端的技術太過專業，我當時只是簡單的瞭解了一下，沒有深入去學習，就專注於做服務端的接口研發。

引入該理念不久，我就跳槽後，進入新的公司新的團隊，開始使用velocity。對於這個選擇，沒有更多的理由，融入新的環境新的團隊，必須要讓自己瞭解和使用團隊的技術線，其性能良好，據說比jsp性能還要好些，但是自己沒有做過相關的測試。到目前為止也在使用velocity，但會積極推動團隊擁抱新變化，採用新的技術線來做相關的需求，比如freemarker等又成了團隊的新的選擇。

夕陽雨晴

剛畢業的時候公司使用的是SSH+JSP，後來升級為SpringMVC+velocity，但是前後端的代碼還是在一個項目中，現在使用的springCloud+node.js實現前後端分離，可以說前後端的數據交互一直在改變！

HTML：超文本標記語言，定義了文本，圖形，動畫等在瀏覽器上的圖形化界面，可以說HTML就是我們看得著，聽得到的東西！

但是HTML的標籤都是“死的”，只是頁面渲染，我們需要使用瀏覽器解釋語言（javascript等）來與後端交互，實現數據的傳輸，前端的請求方式包括：

①，form表單提交請求：通過在form標籤中使用action配置鏈接，使用method配置請求方法（get，post等），提交請求到後端，同時獲得數據填充表單！

②，使用超鏈接進行跳轉：使用a標籤，配置href跳轉地址可以跳轉到另外的頁面！

③，使用ajax異步調用：使用ajax模擬http請求，將獲得的數據局部刷新至頁面！

④，直接http請求：現在前後端分離的項目，多半使用http直接訪問後端接口，並且因為是不同的項目，還會存在跨域問題，需要使用nginx等配置轉發來解決！

前端傳入的參數可以是作為get方法直接拼接在請求鏈接後面，也可以使用json格式的數據，放入請求體中，當然後端返回的有可能是數據，也有可能是其他的頁面鏈接，需要在前端進行處理，進行跳轉！

上面是我對於前後端交互的拙見，有錯誤請務必指正，謝謝！

哎喲JAVA不錯哦

後臺java和前端HTML的交互實質就是後臺java服務和瀏覽器中網頁的通信，其通信協議主要是http和https協議。

Servlet規範詳細描述了後臺服務外界通信的標準，實現servlet接口便可以實現服務與外界通信。基於Java語言的web server實現了標準的servlet API。現在的Spring MVC等框架就是基於Servlet規範實現的。

Ajax 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。Ajax 在瀏覽器與 Web 服務器之間使用異步數據傳輸（HTTP 請求），這樣就可使網頁從服務器請求少量的信息，而不是整個頁面。現代瀏覽器均支持ajax技術。