輸入網址後發生什麼事？前端、後端、伺服器與資料庫一次看懂

把網站拆成四個角色，先看懂資料從哪裡來

在瀏覽器輸入網址、按下 Enter，過一下子就看到完整畫面，這個動作平常快到不太會特別注意。不過當你開始請 AI 做網站，問題很快就會出現：畫面要改哪裡？登入資料存在哪裡？為什麼本機可以用，上線後卻讀不到資料？要回答這些問題，得先把網站拆成前端、後端、伺服器與資料庫四個角色。

這支影片會用購物網站的操作流程，把四個角色放回同一張圖裡。你會看到：

• 瀏覽器送出請求後，網站內容怎麼回到畫面上。
• HTML、CSS 與 JavaScript 如何組成使用者看得到的前端。
• 後端為什麼要負責處理邏輯、權限與資料存取。
• 資料庫如何長期保存會員、商品與購物車內容。
• 後端程式和讓它持續執行的伺服器，為什麼是兩件事。
• 網站上線時，各個部分通常會部署到什麼位置。

看懂分工的目的，不是要求你立刻把四個部分全部自己寫完，而是讓你能和 AI 討論正確範圍。只做活動頁，可能不需要後端與資料庫；如果要讓多人登入、保存訂單，架構就完全不同。當你能說清楚使用人數、資料要不要保存，以及準備部署到哪裡，AI 才不會一開始就替一個小工具架出過重的系統，或把需要權限保護的資料全部塞在前端。

這些角色只靠文字看，很容易讀到後面又混在一起，所以這篇也準備了互動式簡報。你可以跟著請求流程逐步查看資料經過哪一層，也能比較不同網站規模需要哪些部分。先把整張地圖看懂，後面再分別深入 HTML、CSS、JavaScript、後端與 API 時，就比較知道每個名詞在整個網站的哪個位置。