1. 非前后端分離架構

1. 前端html后端servlet

被tomcat服務器打包，統一指定根目錄入口。通過原生表單發送到后端，后端根據請求數據進行重定向或請求轉發，這樣就不能進行動態渲染，也就必須存在很多靜態html對應每一個請求。

這里原生表單和react的api請求表單是有區別的，原生表單通常只能通過http包裝一個簡單key，value進行傳輸。但api表單可以發送任何形式的數據，因為發送數據通過json格式進行包裝理論上可以包裝任意數量，任意形式(如value可以為列表也可以為字典)的鍵值對。

2. 前端html后端python且使用websocket

1. 這種處理方式和前端html后端servlet基本一樣，都是通過后端的python程序或servlet程序完成頁面跳轉。
2. 前端html同樣可以通過js原生api請求，或者導入axios發出api請求而不是原生表單請求。然后后端處理后返回數據到前端。這是正常執行curd操作(數據庫操作)的基本流程。
   但是如果遇到需要頻繁更新操作如聊天室的人數變化，聊天消息的發送的接受等就需要用到websocket而不是api請求，api請求fetch是在應用層傳輸http數據發送一次就端開適合大量數據傳輸執行curd操作，
   websocket工作在網絡層一直保持連接，快速傳輸更新少量數據，且這些數據通常是程序執行期間在內存中保存的實時數據如聊天室的人數變化，聊天消息的動態發送等。
   websocket一個很明顯的作用就是，比如當一個用戶進入了聊天室應該讓所有用戶都立即看到聊天室變化，如果此時用fetch發出http請求那么其他用戶必須手動刷新頁面才能看到變化，因為http是發送一次請求就斷開，其他用戶并不能動態感受變化，除非在前端設置自動刷新。
   但是websocket本質也是套接字雙向傳輸，工作過程是，前端點擊按鈕觸發前端socket請求，后端監聽對應事件的socket接受到請求通過后端函數更新內存數據(不是數據庫)，然后在通過socket廣播修改后的數據到前端監聽對應事件的socket，然后調用前端js函數修改前端數據。

3. 前端jsp，后端servlet

雖然實現了動態頁面，但是由于jsp的動態渲染機制依然是執行java代碼而且還將java代碼和html混在一起了，所以被thymeleaf模板替代。thymeleaf模板獨立了html和java代碼。

4. 前端thymeleaf，后端sevlet

實現動態頁面，前后端代碼更加獨立，優于jsp

4. php

php和jsp很像都是將代碼直接嵌入html。但是不同的是php是一種獨立的語言，具備獨立開發后端接口的能力。實現完全的前后端分離架構，比如前端出一個api請求，ngnix服務器對api路徑的解析后，請求對應的php文件，然后將請求的php文件通過cgi接口執行后將程序結果返回給前端。就好比是前端react后端servlet中間件tomcat。

二. 前后端分離架構

前后端分離后不再需要依賴后端的動態渲染，前端頁面美化全部由前端組件本身完成后端只需要提供數據。

1. 前端react后端servlet

前端通過api向后端發出請求，后端處理后返回數據到前端，前端自己通過數據渲染自己。

2. php

前端出一個api請求，ngnix服務器對api路徑的解析后，請求對應的php文件，然后將請求的php文件通過cgi接口執行后將程序結果返回給前端。就好比是前端react后端servlet中間件tomcat。