網站架構
上圖是一種常見的網站架構，為前後端分離，分別由前端、後端及資料庫所組成，本系列會以此架構進行講解。
前端
前端負責顯示頁面，讓使用者瀏覽操作，使用者可以點擊按鈕等物件進行互動及獲得反饋。
後端
後端負責處理邏輯業務，使用者會透過操作前端頁面向後端發送請求，後端接收請求後會進行對應處理，如註冊、登入等，並回傳資料回前端。
資料庫
資料庫負責儲存資料，紀錄各種資訊，如使用者的帳號及密碼等，後端會連線至資料庫進行互動存取。
常見使用情境
這邊舉幾個常見的例子供大家參考：
使用者註冊
- 使用者打開網站 (在瀏覽器輸入網址)，前端將頁面顯示給使用者
- 使用者前往註冊頁面輸入欲設立之帳號密碼後，點擊註冊按鈕
- 帳號密碼會被發送至後端，請求後端註冊此帳號密碼
- 後端接收請求後，將密碼儲存至資料庫 (這步驟的密碼可能會先經過 hash)
- 若成功儲存至資料庫，則回傳成功的結果給前端，使用者收到註冊成功的通知，否則收到註冊失敗
使用者登入
- 使用者打開網站 (在瀏覽器輸入網址)，前端將頁面顯示給使用者
- 使用者前往登入頁面輸入帳號密碼後，點擊登入按鈕
- 帳號密碼會被發送至後端，請求後端登入此帳號密碼
- 後端接收請求後，透過 email 查詢資料庫裡是否有該組帳號密碼，沒有則回傳登入失敗
- 比較查詢出的密碼是否正確 (hash compare)，不正確則回傳登入失敗
- 正確時會產生 token 之類的身分憑證，回傳時一併發送至前端，前端保存憑證以進行後續操作，使用者收到登入成功的通知
使用者查詢個人資料
- 使用者登入後，前往個人頁面
- 前端持登入產生的 token 發送請求至後端，要求後端提供個人資料
- 後端接收請求後，從 token 解析出使用者的身分 (id / email 等)，若解析失敗則回傳查詢失敗
- 透過 email 查詢資料庫裡是否有該使用者的資料，沒有則回傳查詢失敗
- 否則回傳查詢的結果給前端，使用者收到自己的個人資料
結語
本章節帶各位初步認識了網站的基本運作原理，讓大家有基礎的概念，對後續文章能以更快的速度理解。
前後端分離的架構其實是從 MVC 的概念延伸而來的，將工作職責切分開來，前端專心在 UI/UX 上，後端專心在邏輯業務。 同時前後端分離在測試上相對方便。且只要 API 相同，即可抽換成不同的後端程式，不需要重寫前端的介面。
下一章將介紹 API，讓大家知道前後端之間是如何進行溝通的。