加 Routes
讓你的 server 對不同 URL 回應
⏱ 預估 ~8 分鐘
01 · 讀一讀
你的 server 目前只回應一個 URL：根路徑 /。如果你連到 localhost:3000/about 或 localhost:3000/anything-else，你會拿到錯誤。
真實網站有很多頁 — 首頁、關於、聯絡、產品頁，還有更多。每頁都有自己的 route — 一個 server 知道怎麼處理的 URL 路徑。
加 routes 是你教 server 對不同 URL 回應不同內容的方法。每個 app.get() 呼叫建立一個新 route。
💡 想像一下想像 routes 像辦公室的接待。有人要找業務部，接待把他帶到一個房間。要找客服，帶到另一個房間。你的 server 是接待員，routes 是路線。
重點整理
- 每個 app.get('/path', ...) 建一個新 route
- Path 是 URL 裡 localhost:3000 後面的部分
- 不同 routes 可以回完全不同的內容
- 這就是每個網站提供不同頁面的方式
02 · 真機練習
用文字編輯器打開你的 app.js，加這兩個新 routes。放在你現有 app.get('/') route 後面，但 app.listen() 那行前面。
app.get('/about', (req, res) => {
res.send('This is the about page. I built this server myself!');
});
app.get('/contact', (req, res) => {
res.send('Contact me at: hello@mysite.com');
});03 · 真機練習
你的 server 還在跑舊程式碼。要看到改動，你要停掉 server 重啟。 回到 server 跑的終端機、按 Ctrl+C 停掉、再啟動一次。
node app.js
04 · 選擇題
在 app.get('/about', handler) 裡，/about 表示什麼？
- 要送出的檔案名稱
- 觸發這個 handler 的 URL 路徑
- 電腦上的一個資料夾
- 變數名稱
05 · 填空
在 Express 裡，app.get('/about', ...) 建立一個對 _____ 路徑回應的 route。
06 · 真機練習
現在測試你的新 routes！打開瀏覽器、連到這兩個 URL: 1. http://localhost:3000/about — 應該顯示你的 about 頁文字 2. http://localhost:3000/contact — 應該顯示你的 contact 頁文字 也試試 http://localhost:3000 確認原本的 route 還能動。
http://localhost:3000/about
http://localhost:3000/contact
07 · 選擇題
你的 server 有 /、/about、/contact 的 routes。使用者拜訪 http://localhost:3000/pricing。會發生什麼？
- Express 自動建立 pricing 頁
- Server 出錯掛掉
- Server 回 "Cannot GET /pricing" 錯誤，因為沒有 route 匹配那個路徑
- 請求被轉到 / route
⚠ 完整互動體驗需要 JavaScript。請啟用 JavaScript 後重新整理。
※ 本站為獨立繁中教學專案，非 Anthropic 官方產品。Claude™ 為 Anthropic, PBC 商標。