Nuxt.js Server

ภาพรวม

Nuxt ใช้ Nitro เป็นเซิร์ฟเวอร์ที่ให้ความสามารถในการสร้าง API endpoints, middleware และ server-side rendering (SSR) ในแอปพลิเคชันของคุณ

Server API Endpoints

สร้าง API endpoints ได้ง่ายๆ ในโฟลเดอร์ server/api

// server/api/hello.ts
export default defineEventHandler((event) => {
  return {
    message: "สวัสดีจากเซิร์ฟเวอร์!",
    time: new Date().toISOString(),
  };
});

เข้าถึงได้ที่: http://localhost:3000/api/hello

Route Handlers

จัดการ request ตาม path ของ URL:

// server/api/users/[id].ts
export default defineEventHandler(async (event) => {
  // ดึงค่า id จาก URL
  const id = event.context.params?.id;

  // ตัวอย่างการดึงข้อมูลจากฐานข้อมูล
  const user = await getUserById(id);

  if (!user) {
    // ส่งข้อผิดพลาด 404 ถ้าไม่พบผู้ใช้
    throw createError({
      statusCode: 404,
      statusMessage: "ไม่พบผู้ใช้",
    });
  }

  return user;
});

Server Middleware

สร้าง middleware สำหรับประมวลผล request ก่อนถึง API endpoint:

// server/middleware/auth.ts
export default defineEventHandler((event) => {
  // ตรวจสอบ token จาก header
  const token = getHeader(event, "Authorization");

  if (!token) {
    throw createError({
      statusCode: 401,
      statusMessage: "ต้องระบุ Token",
    });
  }

  // ตรวจสอบความถูกต้องของ token
  try {
    const user = verifyToken(token);
    // เพิ่มข้อมูลผู้ใช้ใน context
    event.context.user = user;
  } catch (err) {
    throw createError({
      statusCode: 403,
      statusMessage: "Token ไม่ถูกต้อง",
    });
  }
});

Server Utilities

1. ใช้งาน H3 Utilities

// ตัวอย่างการใช้ H3 utilities
import { getQuery, readBody, setCookie } from "h3";

export default defineEventHandler(async (event) => {
  // อ่าน query parameters
  const { search } = getQuery(event);

  // อ่าน request body
  const body = await readBody(event);

  // ตั้งค่า cookie
  setCookie(event, "last_visited", new Date().toISOString(), {
    maxAge: 60 * 60 * 24 * 7, // 1 week
  });

  return { success: true };
});

2. Server-Side Storage

// ตัวอย่างการใช้ storage
const storage = useStorage();

// บันทึกข้อมูล
await storage.setItem("cache:user:1", { name: "John Doe" });

// อ่านข้อมูล
const user = await storage.getItem("cache:user:1");

Server Routes

กำหนดกฎการเรนเดอร์และแคชสำหรับแต่ละ route:

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // Static generation at build time
    "/about": { prerender: true },

    // ใช้งานแคช 1 ชั่วโมง
    "/api/*": { cache: { maxAge: 60 * 60 } },

    // เปลี่ยนเส้นทาง
    "/old": { redirect: "/new" },

    // เปิด CORS สำหรับ API เฉพาะ
    "/api/public/**": { cors: true },

    // เปิดใช้งาน SSR
    "/admin/**": { ssr: true },

    // เปิดใช้งาน SSG
    "/products": { static: true },
  },
});

Server Plugins

รันโค้ดบนเซิร์ฟเวอร์เมื่อแอปเริ่มต้น:

// server/plugins/db.ts
import { createClient } from "some-db-client";

export default defineNitroPlugin((nitroApp) => {
  // สร้างการเชื่อมต่อฐานข้อมูล
  const db = createClient({
    // ตั้งค่าการเชื่อมต่อ
  });

  // แชร์ db instance ผ่าน nitroApp
  nitroApp.db = db;

  // ปิดการเชื่อมต่อเมื่อปิดแอป
  nitroApp.hooks.hook("close", async () => {
    await db.close();
  });
});

สรุป

• ใช้ server/api สำหรับสร้าง API endpoints
• ใช้ middleware สำหรับตรวจสอบและประมวลผล request
• ใช้ routeRules กำหนดกฎการเรนเดอร์และแคช
• ใช้ server plugins สำหรับโค้ดที่รันเมื่อเริ่มต้นเซิร์ฟเวอร์
• ใช้ H3 utilities สำหรับจัดการ request/response

TIP

• ใช้ TypeScript เพื่อความปลอดภัยของประเภทข้อมูล
• จัดการข้อผิดพลาดให้เหมาะสมในทุก API endpoint
• ใช้ environment variables สำหรับข้อมูลลับ
• ทดสอบ API endpoints ด้วย $fetch หรือ useFetch