Vue Academy · Ders

Nuxt Sunucu Route'ları ve API Uç Noktaları

server/api/ dizini, defineEventHandler(), H3 yardımcıları, ara yazılım ve hata yönetimi.

3. ders / 413 adım

Nuxt Sunucu Route'ları ve API Uç Noktaları, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Nuxt Tam Yığınlıdır

Nuxt 3, bir sunucu motoru (Nitro) içerir. server/ dizini, birçok uygulama için ayrı bir arka uca ihtiyaç duymadan sayfalarınızın yanında API uç noktaları oluşturmanızı sağlar.

server/api Dizini

server/api/ içindeki dosyalar, /api altında API rotalarına dönüşür. server/api/hello.ts, /api/hello adresinde yanıt verir.

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

defineEventHandler

Her sunucu rotası, defineEventHandler ile oluşturulan bir işleyiciyi dışa aktarır. İşleyicinin döndürdüğü değer yanıt olarak gönderilir ve otomatik olarak JSON'a serileştirilir.

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

HTTP Yöntemi Sonekleri

Bir yöntemi sınırlandırmak için dosya adına yöntem soneki ekleyin. users.get.ts, GET isteklerini; users.post.ts, POST isteklerini işler. Sonek olmadığında rota tüm yöntemlere yanıt verir.

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

Sorgu Parametrelerini Okuma

Olaydaki URL sorgu dizesini okumak için getQuery yardımcı işlevini kullanın.

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

İstek Gövdesini Okuma

POST/PUT isteklerinde readBody, gelen JSON gövdesini ayrıştırır. Bu işlem zaman uyumludur; bu nedenle başına await ekleyin.

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

Dinamik Sunucu Rotaları

Köşeli parantezli dosya adları sunucuda da çalışır. server/api/users/[id].get.ts, kimliği getRouterParam ile okur.

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

HTTP Hataları Fırlatma

Düz bir hata fırlatmak yerine durum kodu ve ileti içeren uygun HTTP hata yanıtları döndürmek için createError kullanın.

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

H3 Olay Nesnesi

event bağımsız değişkeni, Nitro'nun HTTP çatısı olan H3'ten gelir. İstek ve yanıtı taşır ve tüm yardımcı işlevler için giriş noktasıdır.

Durum ve Üst Bilgileri Ayarlama

setResponseStatus ve setHeader gibi yardımcı işlevler, yalnızca bir değer döndürmenin yeterli olmadığı durumlarda yanıtı denetlemenizi sağlar.

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

Sayfalardan API'nizi Çağırma

Bir sayfadan kendi uç noktanızdan veri çekmek için useFetch veya $fetch kullanın. SSR sırasında Nuxt, HTTP üzerinden gidip gelmeyi atlayarak işleyiciyi doğrudan çağırır.

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

Hızlı Kontrol

Nuxt sunucu rotaları konusundaki bilginizi sınayın.

İnteraktif derste cevapla

Özet

Nuxt sunucu rotalarını öğrendiniz:

server/api/ içindeki dosyalar API uç noktalarına dönüşür.
defineEventHandler bir işleyici tanımlar; işleyicinin döndürdüğü değer yanıttır.
.get.ts/.post.ts sonekleri HTTP yönteminin kapsamını belirler.
H3 olayı üzerinde getQuery, readBody, getRouterParam ve createError kullanın.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 42
Dersler: 156

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Nuxt Sunucu Route'ları ve API Uç Noktaları” dersi ücretsiz mi?

Evet — “Nuxt Sunucu Route'ları ve API Uç Noktaları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Nuxt Sunucu Route'ları ve API Uç Noktaları” dersinde ne öğreneceğim?

server/api/ dizini, defineEventHandler(), H3 yardımcıları, ara yazılım ve hata yönetimi. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Nuxt Sunucu Route'ları ve API Uç Noktaları” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Nuxt 3 Proje Yapısı ve Dosya Tabanlı Yönlendirme
Veri Çekme: useFetch ve useAsyncData
Nuxt Sunucu Route'ları ve API Uç Noktaları
SSR ve SSG ile SPA Modu

← Vue Academy Sayfasına Dön