打造你的專屬 API (Server 篇上)
我們在 Day 22 概念性地認識了 Nuxt 強大的後端引擎 Nitro。今天，我們將親自動手，學習如何使用 server/ 資料夾來打造真正的後端功能。
1. 您的 API 工作坊：`server/api/`
Nuxt 有一個非常直觀的約定：
所有放在 server/api/ 資料夾底下的檔案，都會自動變成一個 API 端點 (endpoint)，並且網址會自動加上 /api 前綴。
每個檔案都需要 export default defineEventHandler(...)，這個 event 物件包含了所有請求的相關資訊。
2. 建立您的第一個 GET API
讓我們來建立一個 /api/hello，它會回傳一個簡單的 JSON 物件。
只需要建立 server/api/hello.ts 這個檔案：
// server/api/hello.ts
export default defineEventHandler((event) => {
return {
message: 'Hello from your Nuxt API!'
};
}); 存檔後，直接在瀏覽器訪問 http://localhost:3000/api/hello，您應該就能看到結果了！是不是非常簡單？
3. 處理動態路由
如果我們想建立一個 /api/users/[id] 這樣的動態路由呢？只需要在檔名中使用方括號 []。
建立 server/api/users/[id].ts：
// server/api/users/[id].ts
export default defineEventHandler((event) => {
// 使用 getRouterParam() 這個工具函式，從 event 物件中取得網址上的參數
const userId = getRouterParam(event, 'id');
return {
userId: userId,
name: `User-${userId}`
};
}); 現在訪問 /api/users/123，您就會看到 { "userId": "123", "name": "User-123" }。
4. 處理不同的請求方法 (GET, POST...)
一個 API 端點通常需要處理不同的 HTTP 方法。在 Nuxt 中，我們可以直接透過檔名後綴來區分，非常優雅。
讓我們建立一個只會回應 POST 請求的 API。
建立 server/api/submit.post.ts：
// 檔名以 .post.ts 結尾，所以只會回應 POST 請求
export default defineEventHandler(async (event) => {
// 對於 POST 這類會攜帶資料的請求，我們可以用 readBody() 來解析請求的內容
const body = await readBody(event);
console.log('收到的資料:', body);
return {
received: true,
data: body
};
}); 您可以用 useFetch 或 $fetch 搭配 method: 'POST' 來測試這個 API。
今日總結
今天我們學會了如何在 Nuxt 中建立 API 的核心技巧！
在 server/api/ 中建立檔案即可產生 API。
使用 [...].ts 建立動態路由，並用 getRouterParam 取得參數。
使用 .get.ts, .post.ts 等檔名後綴來處理特定 HTTP 方法。
使用 readBody 來取得 POST 請求的資料。
API 建立好了，但如果我們想在所有 API 被呼叫前都執行一段共用的程式碼（例如：檢查權限、紀錄 log），該怎麼辦呢？明天，我們將來學習 server/ 資料夾下的另外幾個好幫手：Middleware、Routes 和 Utils。