Nuxt3 建立 API

Nuxt3 是一個使用 Vue3 的 Web 框架，在呈現網頁內容的同時，有時候我們也會需要提供沒有圖形化介面的 API 資訊，在 Nuxt3 中很簡單的就可以建立，只要在 server 資料夾中增加 api 資料夾，並建立 js 或 ts 檔案，就會自動產生檔名的 API，這裡筆者使用 server/api/users.ts 做示範：

	
my-vue3-project/
|-- public/
`-- server/
    `-- api/
        `-- users.ts
	

在 users.ts 中就可以建立 API 要回應的內容：

    
export default defineEventHandler((event) => {
    return [
        {
            id: 1,
            name: '小明'
        },
        {
            id: 2,
            name: '大頭'
        }
    ]
})

    

可以瀏覽下列網址看到這個 API 的回應內容了(可能需要替換 port)

    
http://localhost:3001/api/users
    

區分不同的 HTTP Method

上面建立的是所有 HTTP Method 的請求，包含 GET, POST... 等等全部都會指向 server/api/user.ts 中，如果需要其他方法，例如 POST, DELETE，則在可以在檔名後面增加 HTTP Method 即可，透過下面的範例很簡單就可以了解：

	
my-vue3-project/
|-- public/
`-- server/
    `-- api/
        |-- users.ts
        |-- users.post.ts
        `-- users.delete.ts
	

除了 post 和 delete 以外的 Http Method 都會導向 users.ts 檔案中做處理

自訂回應狀態碼

POST 方法通常會用來「新增」，假設新增成功通常會使用 201 狀態碼回應，這裡示範自訂回應狀態碼的方式：

    
export default defineEventHandler((event) => {

    // todo: 新增使用者的程式碼

    // 回傳 201 Created 狀態碼
    setResponseStatus(event, 201)
})
    

讀取 URL 中的參數

假設要取得指定的使用者，API URL 很可能會長得像: /api/users/1 ，那我們就可以使用中括號的方式，裡面放這個變數名稱，例如：

	
my-vue3-project/
|-- public/
`-- server/
    `-- api/
        `-- users/
        	`-- [id].get.ts
	

這裡我們使用最簡單的方式示範依照 id 回應資料：

    
export default defineEventHandler((event) => {
    const id = getRouterParam(event, 'id')

    if (id === '1') {
        return {
            id: 1,
            name: '小明'
        }
    }

    if (id === '2') {
        return {
            id: 2,
            name: '大頭'
        }
    }

    throw createError({
        statusCode: 404,
        statusMessage: 'Id not found',
    })
})
    

上面也有示範到如果要讓回應的狀態碼(HTTP Code)不是 200，則需要透過拋出例外的方式達成，這裡找不到 id 就會拋出 404

參考資料：
Nuxt - server