0Pricing
Vue Academy · บทเรียน

เส้นทางเซิร์ฟเวอร์และจุดปลายทาง API ของ Nuxt

ไดเรกทอรี server/api/ ฟังก์ชัน defineEventHandler() ยูทิลิตี H3 มิดเดิลแวร์ และการจัดการข้อผิดพลาด

เส้นทางเซิร์ฟเวอร์และจุดปลายทาง API ของ Nuxt เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

Nuxt เป็นฟูลสแตก

Nuxt 3 มีเอนจินเซิร์ฟเวอร์ (Nitro) ไดเรกทอรี server/ ช่วยให้คุณสร้างจุดปลายทาง API ควบคู่ไปกับหน้าเว็บได้ โดยไม่ต้องมีแบ็กเอนด์แยกต่างหากสำหรับหลายแอป

ไดเรกทอรี server/api

ไฟล์ใน server/api/ จะกลายเป็นเส้นทาง API ภายใต้ /api โดย server/api/hello.ts จะตอบสนองที่ /api/hello

server/
  api/
    hello.ts   ->  /api/hello
    posts.ts   ->  /api/posts

defineEventHandler

เส้นทางเซิร์ฟเวอร์ทุกเส้นทางจะส่งออกตัวจัดการที่สร้างด้วย defineEventHandler สิ่งที่ตัวจัดการส่งคืนจะถูกส่งเป็นการตอบกลับและแปลงเป็น JSON โดยอัตโนมัติ

// server/api/hello.ts
export default defineEventHandler((event) => {
  return { message: 'Hello from the server' }
})

ส่วนต่อท้ายเมธอด HTTP

เพิ่มส่วนต่อท้ายเมธอดในชื่อไฟล์เพื่อจำกัดเมธอดที่ใช้ได้ users.get.ts จัดการ GET และ users.post.ts จัดการ POST หากไม่มีส่วนต่อท้าย เส้นทางจะตอบสนองต่อทุกเมธอด

server/api/
  users.get.ts   ->  GET /api/users
  users.post.ts  ->  POST /api/users

การอ่านพารามิเตอร์คำขอ

ใช้ตัวช่วย getQuery เพื่ออ่านสตริงคำขอของ URL จากเหตุการณ์

export default defineEventHandler((event) => {
  const query = getQuery(event)
  return { search: query.q }
})

การอ่านเนื้อหาคำขอ

สำหรับคำขอ POST/PUT ตัวช่วย readBody จะแยกวิเคราะห์เนื้อหา JSON ที่ส่งเข้ามา ฟังก์ชันนี้ทำงานแบบไม่พร้อมกัน ดังนั้นโปรดรอผลด้วย await

export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  return { received: body }
})

เส้นทางเซิร์ฟเวอร์แบบไดนามิก

ชื่อไฟล์วงเล็บเหลี่ยมก็ใช้กับเซิร์ฟเวอร์ได้เช่นกัน server/api/users/[id].get.ts จะอ่าน id ด้วย getRouterParam

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

การส่งคืนข้อผิดพลาด HTTP

ใช้ createError เพื่อส่งคืนการตอบกลับข้อผิดพลาด HTTP ที่ถูกต้องพร้อมรหัสสถานะและข้อความ แทนการส่งข้อผิดพลาดทั่วไป

export default defineEventHandler((event) => {
  const id = getRouterParam(event, 'id')
  if (!id) {
    throw createError({ statusCode: 400, statusMessage: 'Missing id' })
  }
})

ออบเจ็กต์เหตุการณ์ H3

อาร์กิวเมนต์ event มาจาก H3 ซึ่งเป็นเฟรมเวิร์ก HTTP ของ Nitro อาร์กิวเมนต์นี้มีทั้งคำขอและการตอบกลับ และเป็นจุดเริ่มต้นของฟังก์ชันตัวช่วยทั้งหมด

การกำหนดสถานะและส่วนหัว

ตัวช่วยอย่าง setResponseStatus และ setHeader ช่วยให้คุณควบคุมการตอบกลับได้ เมื่อการส่งคืนค่าเพียงอย่างเดียวไม่เพียงพอ

export default defineEventHandler((event) => {
  setResponseStatus(event, 201)
  setHeader(event, 'Cache-Control', 'no-cache')
  return { created: true }
})

การเรียก API ของคุณจากหน้าเว็บ

จากหน้าเว็บ ให้ดึงข้อมูลจากจุดปลายทางของคุณเองด้วย useFetch หรือ $fetch ระหว่าง SSR Nuxt จะเรียกตัวจัดการโดยตรง จึงข้ามการเดินทางไปกลับผ่าน HTTP

const { data } = await useFetch('/api/posts')

ตรวจสอบความเข้าใจ

ทดสอบความรู้ของคุณเกี่ยวกับเส้นทางเซิร์ฟเวอร์ของ Nuxt

สรุป

คุณได้เรียนรู้เส้นทางเซิร์ฟเวอร์ของ Nuxt:

  • ไฟล์ใน server/api/ จะกลายเป็นจุดปลายทาง API
  • defineEventHandler ใช้กำหนดตัวจัดการ และค่าที่ส่งคืนคือการตอบกลับ
  • ส่วนต่อท้าย .get.ts/.post.ts ใช้จำกัดเมธอด HTTP
  • ใช้ getQuery, readBody, getRouterParam และ createError กับเหตุการณ์ H3

คำถามที่พบบ่อย

บทเรียน “เส้นทางเซิร์ฟเวอร์และจุดปลายทาง API ของ Nuxt” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “เส้นทางเซิร์ฟเวอร์และจุดปลายทาง API ของ Nuxt” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “เส้นทางเซิร์ฟเวอร์และจุดปลายทาง API ของ Nuxt”

ไดเรกทอรี server/api/ ฟังก์ชัน defineEventHandler() ยูทิลิตี H3 มิดเดิลแวร์ และการจัดการข้อผิดพลาด คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “เส้นทางเซิร์ฟเวอร์และจุดปลายทาง API ของ Nuxt” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. โครงสร้างโปรเจกต์ Nuxt 3 และการกำหนดเส้นทางจากไฟล์
  2. การดึงข้อมูล: useFetch และ useAsyncData
  3. เส้นทางเซิร์ฟเวอร์และจุดปลายทาง API ของ Nuxt
  4. โหมด SSR เทียบกับ SSG เทียบกับ SPA
← กลับไปที่ Vue Academy