Vue Academy · Pelajaran

Laluan Pelayan dan Titik Akhir API Nuxt

Direktori server/api/, defineEventHandler(), utiliti H3, perisian tengah, pengendalian ralat.

Pelajaran 3 daripada 413 langkah

Laluan Pelayan dan Titik Akhir API Nuxt ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Nuxt ialah Timbunan Penuh

Nuxt 3 menyertakan enjin pelayan (Nitro). Direktori server/ membolehkan Anda membina titik akhir API bersama-sama halaman Anda — untuk banyak aplikasi, bahagian belakang berasingan tidak diperlukan.

Direktori server/api

Fail dalam server/api/ menjadi laluan API di bawah /api. server/api/hello.ts memberikan respons pada /api/hello.

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

defineEventHandler

Setiap laluan pelayan mengeksport pengendali yang dicipta dengan defineEventHandler. Apa-apa sahaja yang dikembalikannya akan dihantar sebagai respons dan disiri kepada JSON secara automatik.

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

Akhiran Kaedah HTTP

Tambahkan akhiran kaedah pada nama fail untuk mengehadkan kaedah yang boleh digunakan. users.get.ts mengendalikan GET, manakala users.post.ts mengendalikan POST. Tanpa akhiran, laluan tersebut menjawab sebarang kaedah.

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

Membaca Parameter Pertanyaan

Gunakan pembantu getQuery untuk membaca rentetan pertanyaan URL daripada peristiwa tersebut.

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

Membaca Isi Badan Permintaan

Untuk permintaan POST/PUT, readBody menghuraikan badan JSON yang diterima. Operasi ini tidak segerak, jadi gunakan await.

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

Laluan Pelayan Dinamik

Nama fail dalam kurungan juga berfungsi pada pelayan. server/api/users/[id].get.ts membaca id menggunakan getRouterParam.

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

Melemparkan Ralat HTTP

Gunakan createError untuk mengembalikan respons ralat HTTP yang betul dengan kod status dan mesej, bukannya melemparkan ralat biasa.

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

Objek Peristiwa H3

Argumen event datang daripada H3, iaitu rangka kerja HTTP Nitro. Argumen ini membawa permintaan dan respons serta menjadi titik masuk bagi semua fungsi pembantu.

Menetapkan Status dan Pengepala

Pembantu seperti setResponseStatus dan setHeader membolehkan Anda mengawal respons apabila mengembalikan nilai sahaja tidak mencukupi.

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

Memanggil API Anda dari Halaman

Daripada halaman, ambil data daripada titik akhir Anda sendiri dengan useFetch atau $fetch. Semasa SSR, Nuxt memanggil pengendali secara terus dan melangkau perjalanan pergi balik HTTP.

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

Semakan Ringkas

Uji pengetahuan Anda tentang laluan pelayan Nuxt.

Jawab dalam pelajaran interaktif

Ulang Kaji

Anda telah mempelajari laluan pelayan Nuxt:

Fail dalam server/api/ menjadi titik akhir API.
defineEventHandler mentakrifkan pengendali; nilai yang dikembalikannya ialah respons.
Akhiran .get.ts/.post.ts mengehadkan kaedah HTTP.
Gunakan getQuery, readBody, getRouterParam dan createError pada peristiwa H3.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 42
Pelajaran: 156

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Laluan Pelayan dan Titik Akhir API Nuxt” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Laluan Pelayan dan Titik Akhir API Nuxt”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Laluan Pelayan dan Titik Akhir API Nuxt”?

Direktori server/api/, defineEventHandler(), utiliti H3, perisian tengah, pengendalian ralat. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Laluan Pelayan dan Titik Akhir API Nuxt” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Struktur Projek Nuxt 3 dan Penghalaan Berasaskan Fail
Pengambilan Data: useFetch dan useAsyncData
Laluan Pelayan dan Titik Akhir API Nuxt
Mod SSR berbanding SSG berbanding SPA

← Kembali ke Vue Academy