Nuxt (9) Server Route 設定

為什麼要設定 Server Route

在 Nuxt.js 專案中設定 Server Route 的主要原因是為了處理後端邏輯、API 請求或需要伺服器端渲染的內容。這些路由允許你在應用中處理與客戶端無關的邏輯，例如：

1. API 端點：你可以使用 Server Route 來創建自定義的 API 端點。這樣你可以直接在 Nuxt 項目中處理數據請求，而不需要依賴外部的 API 服務。

2. 伺服器端渲染 (SSR)：在 SSR 模式下，某些頁面的內容可能需要在伺服器端渲染。Server Route 可以處理這些頁面的動態數據，加快首屏渲染的速度。

3. 伺服器端處理：有時候你需要處理一些客戶端無法完成的邏輯，如文件上傳、資料庫操作或與其他後端服務的交互。Server Route 允許你在伺服器上處理這些操作。

4. 安全性：有些邏輯需要保密或防止用戶在客戶端篡改，例如驗證或加密處理。這些邏輯通常應該放在伺服器端，以確保安全。

設定方式

1. 創建一個 server 目錄

首先，確保在你的 Nuxt 專案根目錄中創建一個名為 server 的目錄。如果這個目錄已經存在，你可以跳過這一步。

2. 在 server 目錄下創建 api 目錄

在 server 目錄下創建一個名為 api 的子目錄。這個目錄將用來存放你的 API 路由文件。

- server
  - api

3. 創建一個 API 路由文件

在 server/api 目錄下，創建一個 JavaScript 文件（例如 hello.js）。這個文件將定義一個簡單的 API 路由， server/api/hello.js:

export default defineEventHandler((event) => {
  return {
    message: "Hello, World!",
  };
});

4. 測試你的 API 路由

啟動你的 Nuxt.js 應用後，你可以訪問 http://localhost:3000/api/hello 來測試剛才創建的 API 路由。你應該會看到類似以下的 JSON 響應：

{
  "message": "Hello, World!"
}

5. 使用 API 路由

你可以在 Nuxt 應用的任何地方使用這些 API 路由，例如在 pages 或 components 中發送 HTTP 請求：

async fetch() {
  const response = await fetch('/api/hello');
  const data = await response.json();
  console.log(data); // { message: "Hello, World!" }
}

帶入 query

可以在 API 路由帶入 query，如這邊帶入 name = mario

const { data } = await useFetch("/api/ninja?name=mario");

在 server/api 底下的路由 js 檔，可透過 getQuery 取得 query

export default defineEventHandler((event) => {
  const { name } = getQuery(event);

  return {
    message: `Hello Ninjas ${name}`,
  };
});

post 方法

server route 也可以接收 post 請求，作法如下:

帶入第二個物件參數， method 設為 post，並帶入 body 資料。

const { data } = await useFetch("/api/ninja?name=mario", {
  method: "post",
  body: {
    age: 30,
  },
});

在 server/api 底下的路由 js 檔，可透過 readBody 取得參數

export default defineEventHandler(async (event) => {
  // handle post data
  const { age } = await readBody(event);
  return {
    message: `Hello ${name}, you are ${age} years old`,
  };
});

帶入參數

可以在 API 路由帶入參數， 用 [] 代表參數名稱建立 路由 js 檔

- server
  - api
    - currency
      - [code].js

從 event 參數中取得路由參數

// [code].js
export default defineEventHandler(async (event) => {
  const { code } = event.context.params;
  return code;
});