前端與後端到底在做什麼？— 用餐廳來比喻網站架構
如果你曾經好奇過「前端工程師」和「後端工程師」到底在做什麼，為什麼要分成兩種，這篇文章會用一個你一定去過的地方來解釋 — 餐廳。
把網站想像成一間餐廳
一間餐廳要正常運作，需要兩個區域各司其職：
- 外場（前台）：你走進餐廳看到的一切 — 裝潢、菜單、服務生、座位
- 廚房（後台）：你看不到的地方 — 備料、烹飪、食材管理、出餐流程
網站也是一樣：
- 前端（Frontend） = 外場
- 後端（Backend） = 廚房
前端 — 餐廳的外場
前端在做什麼？
前端負責的就是你在螢幕上看到、摸到、互動的一切。
用餐廳來比喻：
| 餐廳外場 | 網站前端 |
|---|---|
| 餐廳裝潢風格 | 網頁的視覺設計、配色、字體 |
| 菜單的排版 | 頁面的版面配置（Layout） |
| 服務生引導你入座 | 頁面導航（Navigation） |
| 服務生遞菜單給你 | 載入頁面內容 |
| 你點餐、按鈴叫服務生 | 按鈕點擊、表單填寫等互動 |
| 餐廳的裝飾品、背景音樂 | 動畫效果、轉場特效 |
前端用的技術
還記得上一篇介紹的 HTML 和 CSS 嗎？它們就是前端的基本工具：
- HTML = 餐廳的基本結構（牆壁、桌子、椅子）
- CSS = 裝潢設計（油漆顏色、燈光、桌布）
- JavaScript = 互動機制（服務鈴、自動門、電子菜單）
而前端工程師常用的 框架（Framework），像是 Vue.js、React、Next.js，就像是「餐廳裝潢的模組化套件」— 讓你可以更有效率地打造出漂亮的外場空間。
以我自己的工作為例，在開發藝術銀行 Art Bank 這個專案時，我們使用 Nuxt 3（Vue.js 的進階框架）來打造前端，讓使用者可以瀏覽藝術作品、收藏作品、操作會員系統。這些你在畫面上看到的互動，全部都是前端的工作。
後端 — 餐廳的廚房
後端在做什麼？
後端負責的是你看不到但不可或缺的一切。
用餐廳來比喻：
| 餐廳廚房 | 網站後端 |
|---|---|
| 接到點菜單，開始備料烹飪 | 接收前端的請求，處理業務邏輯 |
| 管理食材庫存 | 管理資料庫中的資料 |
| 確認材料是否足夠 | 驗證使用者權限、資料正確性 |
| 把做好的餐點送到出餐口 | 把處理結果回傳給前端 |
| 記錄每天的營業額和進貨紀錄 | 記錄 Log、監控系統狀態 |
後端用的技術
後端常見的程式語言和工具：
- Node.js（JavaScript 的後端版本）
- Python、PHP、Java、Go 等
- 資料庫：MySQL、PostgreSQL、MongoDB
以我的經驗為例，在公司的專案中，後端負責處理 ERP/CRM 企業系統的串接，管理訂單、會員資料和金流物流。這些看不見的幕後工作，全部都是後端在處理。
API — 點菜單
好，現在前端是外場，後端是廚房。那它們之間是怎麼溝通的？
答案是：API。
API 就像點菜單
在餐廳裡，外場和廚房之間靠點菜單來溝通：
- 你跟服務生說要一份牛排（使用者操作）
- 服務生寫下「一份牛排、七分熟」（前端整理請求）
- 點菜單送到廚房（前端呼叫 API）
- 廚房收到單子，開始料理（後端處理邏輯）
- 餐點做好，送到出餐口（後端回傳資料）
- 服務生端到你的桌上（前端顯示結果）
用技術的語言來說：
前端 → 發送 HTTP 請求（Request）→ 後端
後端 → 處理完畢，回傳回應（Response）→ 前端舉個真實的例子
假設你在一個購物網站按下「加入購物車」按鈕：
- 前端：偵測到你按了按鈕，發送一個 API 請求給後端，內容是「使用者 A 要把商品 B 加入購物車」
- 後端：收到請求後，檢查商品是否還有庫存、使用者是否已登入，然後把這筆資料寫進資料庫
- 後端：回傳「成功！購物車已更新」
- 前端：收到回應後，在畫面上顯示購物車數量 +1 的動畫
整個過程可能只花不到一秒鐘，但前端和後端各自完成了自己的工作。
資料庫 — 食材倉庫
每間餐廳都需要一個倉庫來儲存食材。網站也需要一個地方來存放資料，那就是資料庫（Database）。
| 餐廳倉庫 | 資料庫 |
|---|---|
| 各種食材分類放好 | 資料依照表格（Table）分類儲存 |
| 冷藏區、冷凍區、乾貨區 | 不同的資料表：會員表、商品表、訂單表 |
| 進貨紀錄 | 新增資料（INSERT） |
| 盤點庫存 | 查詢資料（SELECT） |
| 丟掉過期食材 | 刪除資料（DELETE） |
後端工程師會透過資料庫語言（SQL） 來操作資料庫，就像倉庫管理員用清單來管理進出貨一樣。
實際案例：你登入一個網站的流程
讓我們把所有角色串在一起，看看你在登入一個網站時，前端、後端、API、資料庫是怎麼協作的：
1. 你看到登入頁面（前端）
前端把登入表單（帳號、密碼輸入框、登入按鈕）顯示在你的螢幕上。就像服務生把菜單遞給你。
2. 你輸入帳號密碼，按下登入（前端 → API → 後端）
前端把你輸入的帳號密碼包裝好，透過 API 送到後端。就像服務生把你的點菜單送進廚房。
3. 後端去資料庫查詢（後端 → 資料庫）
後端收到帳號密碼，去資料庫裡查「有沒有這個使用者？密碼對不對？」就像廚師去倉庫確認有沒有你要的食材。
4. 後端回傳結果（後端 → API → 前端）
- 如果帳密正確：回傳「登入成功」+ 使用者資料
- 如果帳密錯誤：回傳「帳號或密碼錯誤」
5. 前端更新畫面
- 成功：跳轉到首頁，顯示你的名字
- 失敗：在登入表單下方顯示紅色錯誤訊息
整個流程一氣呵成，前端和後端各司其職。
那到底需不需要兩個都學？
這是很多新手會問的問題。答案是：看你的目標。
只學前端
喜歡視覺設計、互動效果、使用者體驗的人很適合。前端入門門檻相對較低，學會 HTML/CSS/JavaScript 就能做出看得見的東西，成就感很高。
只學後端
喜歡邏輯思考、資料處理、系統設計的人很適合。後端的世界比較抽象，但學會之後能處理的事情非常多。
前後端都學（全端 Full-Stack）
就像餐廳裡既能當服務生又能進廚房做菜的人。好處是理解整個系統的全貌，溝通更順暢。
我自己是從前端入門的，後來也慢慢學了後端的 Node.js 和資料庫，現在可以獨立完成從前端到後端的完整項目。選擇哪個方向都沒有對錯，重要的是你對什麼比較有興趣。
結語
回顧一下今天學到的：
- 前端 = 餐廳外場（你看得到的一切）
- 後端 = 餐廳廚房（看不到但不可或缺）
- API = 外場和廚房之間的點菜單
- 資料庫 = 食材倉庫
- 一個完整的網站，需要前端和後端協作才能運作
下次你在使用任何網站或 App 的時候，試著想想看：「這個按鈕是前端做的，按下去之後應該是呼叫 API 到後端去處理吧？」你會發現，網站的運作邏輯其實就跟去餐廳吃飯一樣直覺。
站內相關文章：