先前介紹了PHP語法、表單處理以及登入機制，現在要開始前往現代網頁也就是前後端分離架構，了解傳統網頁與現代網頁的差別。
什麼是前後端分離
顧名思義就是把前端跟後端分開，喂..有這麼簡單就好了，其實這樣說對但也不算對，指的是在開發程式的過程中，將前端(Frontend)後端(Backend)做獨立開發部署。
傳統網頁運作方式
在早期的網站設計中，每個頁面幾乎都是一份獨立的 HTML 文件，當使用者切換頁面時，瀏覽器會向伺服器發送 HTTP Request 後，伺服器傳回整頁 HTML ，並將整頁重新整理，缺點也很明顯因為前後端緊密耦合，當專案變大時，重複的內容需要在每個檔案中分別維護，修改起來非常麻煩。
圖一、傳統網頁架構
現代網頁運作方式
而現代網頁為了改善傳統網頁的痛點，普遍採用前後端分離的架構。在這種模式下，前端負責使用者介面的呈現與互動，而後端則專注於處理商業邏輯、資料儲存與身分驗證。兩者透過 API（通常是 RESTful API 或 GraphQL）進行通訊，以 JSON 格式交換資料，進而實現局部更新。
圖二、前後端示意
前端:泛指使用者介面(UI)與使用者體驗(UX)。
後端:負責資料儲存、接收以及運算等等處理行為，通常不會直接跟使用者接觸到。
圖三、現代網頁架構
JSON
JSON(JavaScript Object Notation)是一種輕量級資料交換格式，通常用於網路應用程式之間的資料傳遞。優點在於結構清楚、輕量、跨語言支援，特別需要注意的是只能用雙引號，不能使用單引號，確保了跨語言的相容性，基本形式分為以下兩種：
物件（Object）：
名稱(key)和值(value)之間使用冒號( : )隔開，每個名稱／值對之間使用逗號(，)分割，並且使用大括號 ( {} )括起來。
{
"student_name":"houz",
"club_name":"506"
}
陣列（Array）：
一個或多個值用逗號(，)分割後，使用中括號( [] )括起來形成了列表。
[0,1,2,3,4]
本篇文章到這裡就結束了，如果喜歡我的文章或覺得有用的話，歡迎動動手指點擊愛心，你/妳的支持是我最大的動力，我們下篇文章見🙌。
