0Pricing
Vue Academy · Pelajaran

Rute Server dan Endpoint API Nuxt

Direktori server/api/, defineEventHandler(), utilitas H3, middleware, serta penanganan error.

Rute Server dan Endpoint API Nuxt adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Nuxt Bersifat Full-Stack

Nuxt 3 menyertakan mesin server (Nitro). Direktori server/ memungkinkan Anda membuat titik akhir API berdampingan dengan halaman—untuk banyak aplikasi, Anda tidak memerlukan backend terpisah.

Direktori server/api

Berkas dalam server/api/ menjadi rute API di bawah /api. server/api/hello.ts merespons di /api/hello.

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

defineEventHandler

Setiap rute server mengekspor pengendali yang dibuat dengan defineEventHandler. Apa pun yang dikembalikannya akan dikirim sebagai respons dan otomatis diserialisasikan ke JSON.

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

Sufiks Metode HTTP

Tambahkan sufiks metode ke nama berkas untuk membatasinya. users.get.ts menangani GET, sedangkan users.post.ts menangani POST. Tanpa sufiks, rute tersebut merespons metode apa pun.

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

Membaca Parameter Kueri

Gunakan pembantu getQuery untuk membaca string kueri URL dari peristiwa.

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

Membaca Isi Permintaan

Untuk permintaan POST/PUT, readBody mengurai isi JSON yang masuk. Proses ini bersifat asinkron, jadi gunakan await.

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

Rute Server Dinamis

Nama berkas dengan tanda kurung juga berfungsi di server. server/api/users/[id].get.ts membaca id dengan getRouterParam.

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

Menghasilkan Galat HTTP

Gunakan createError untuk mengembalikan respons galat HTTP yang tepat dengan kode status dan pesan, bukan melempar galat biasa.

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

Objek Peristiwa H3

Argumen event berasal dari H3, yaitu kerangka kerja HTTP milik Nitro. Argumen ini membawa permintaan dan respons serta menjadi titik masuk bagi semua fungsi pembantu.

Mengatur Status dan Header

Pembantu seperti setResponseStatus dan setHeader memungkinkan Anda mengendalikan respons saat mengembalikan nilai saja tidak cukup.

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

Memanggil API Anda dari Halaman

Dari halaman, ambil data dari titik akhir Anda sendiri dengan useFetch atau $fetch. Selama SSR, Nuxt memanggil pengendali secara langsung sehingga tidak perlu melakukan perjalanan pulang-pergi melalui HTTP.

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

Uji Singkat

Uji pengetahuan Anda tentang rute server Nuxt.

Ringkasan

Anda telah mempelajari rute server Nuxt:

  • Berkas dalam server/api/ menjadi titik akhir API.
  • defineEventHandler mendefinisikan pengendali; nilai yang dikembalikannya menjadi respons.
  • Sufiks .get.ts/.post.ts membatasi metode HTTP.
  • Gunakan getQuery, readBody, getRouterParam, dan createError pada peristiwa H3.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Rute Server dan Endpoint API Nuxt” gratis?

Ya — teks lengkap “Rute Server dan Endpoint API Nuxt” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Rute Server dan Endpoint API Nuxt”?

Direktori server/api/, defineEventHandler(), utilitas H3, middleware, serta penanganan error. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Rute Server dan Endpoint API Nuxt” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Struktur Proyek Nuxt 3 dan Perutean Berbasis File
  2. Pengambilan Data: useFetch dan useAsyncData
  3. Rute Server dan Endpoint API Nuxt
  4. Mode SSR vs SSG vs SPA
← Kembali ke Vue Academy