本章將學習如何在後端處理兩種主要的資料傳遞方式：GET 請求的網址參數與 POST 請求的表單資料。
1 核心概念
後端接收資料主要分兩種方式，Nitro 把這件事變得超級簡單：
GET 請求（網址參數）
網址樣子：/api/search?keyword=nuxt
後端寫法：const query = getQuery(event)
結果：query.keyword 等於 'nuxt'
POST 請求（隱藏內容）
情境：表單送出、登入、存檔。
後端寫法：const body = await readBody(event)
命名小技巧
你可以透過檔名來限制 HTTP 方法：
server/api/submit.post.ts
← 只接受 POST 請求（GET 會報錯 405 Method Not Allowed）
server/api/search.get.ts
← 只接受 GET 請求
2 給 Claude Code 的中文指令 複製使用
我們要建立兩個 API，一個負責用 GET 接收名字打招呼，一個負責用 POST 接收使用者資料。
請幫我建立處理 GET 與 POST 請求的後端與測試頁面：
- 建立 GET API
server/api/greet.get.ts：- 使用
getQuery(event)取得網址參數name。 - 回傳：
{ message: 'Hello ' + name }。
- 使用
- 建立 POST API
server/api/submit.post.ts：- 使用
await readBody(event)取得前端送來的 JSON 資料。 - 回傳一個物件，包含接收到的資料以及一個狀態欄位：
{ status: 'success', receivedData: body }。
- 使用
- 建立前端頁面
app/pages/form-test.vue：- 有一個輸入框 input（綁定 name ref）。
- 按鈕 A「測試 GET」：點擊後呼叫
useFetch('/api/greet', { query: { name: name.value } })。 - 按鈕 B「測試 POST」：點擊後呼叫
useFetch('/api/submit', { method: 'POST', body: { name: name.value, age: 18 } })。 - 在下方顯示 API 回傳的結果（response data）。
3 驗收重點
請檢查 Claude 完成後的結果：
GET 測試（Query）
- 在輸入框打 "Jack"。
- 點擊「測試 GET」。
- 結果顯示：
Hello Jack。 - 檢查 Network：確認請求網址是
/api/greet?name=Jack。
POST 測試（Body）
- 點擊「測試 POST」。
- 結果顯示：
{ status: 'success', receivedData: { name: 'Jack', age: 18 } }。 - 檢查 Network：確認 Request Payload（或是 Body）裡面是 JSON 格式的資料。
檔名檢查
- 確認 API 檔名分別是
.get.ts和.post.ts。 - 試著用瀏覽器直接訪問
http://localhost:3000/api/submit（這是 GET 請求）。
預期結果：應該要看到錯誤畫面（405 Method Not Allowed），這代表 Nuxt 幫你擋掉了錯誤的方法。
💡 架構師筆記（API 的型別）
你可能已經發現，使用 useFetch 呼叫內部 API 時，Nuxt 其實知道回傳的型別！
當你在 VS Code 寫 data.value. 時，如果它自動跳出 message 或 status 提示，這就是 Nuxt 最強大的 End-to-End Type Safety。
你不用手寫 TypeScript Interface，Nuxt 自動幫你推導出來了。