Vue Academy · Lekcja

Trasy serwerowe i endpointy API w Nuxt

Katalog server/api/, defineEventHandler(), narzędzia H3, middleware oraz obsługa błędów.

Lekcja 3 z 413 kroki

Trasy serwerowe i endpointy API w Nuxt to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Nuxt obsługuje cały stos

Nuxt 3 zawiera silnik serwerowy (Nitro). Katalog server/ pozwala tworzyć punkty końcowe API obok stron — w przypadku wielu aplikacji nie jest potrzebny osobny backend.

Katalog server/api

Pliki w katalogu server/api/ stają się trasami API pod adresem /api. Plik server/api/hello.ts odpowiada pod adresem /api/hello.

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

defineEventHandler

Każda trasa serwera eksportuje handler utworzony za pomocą defineEventHandler. Wszystko, co zwraca, jest wysyłane jako odpowiedź i automatycznie serializowane do JSON.

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

Sufiksy metod HTTP

Dodaj sufiks metody do nazwy pliku, aby ograniczyć obsługiwane żądania. users.get.ts obsługuje GET, a users.post.ts obsługuje POST. Bez sufiksu trasa odpowiada na żądania dowolną metodą.

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

Odczytywanie parametrów zapytania

Użyj pomocnika getQuery, aby odczytać ciąg zapytania URL ze zdarzenia.

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

Odczytywanie treści żądania

W przypadku żądań POST/PUT funkcja readBody analizuje przychodzącą treść JSON. Jest asynchroniczna, dlatego należy użyć await.

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

Dynamiczne trasy serwera

Na serwerze również działają nazwy plików z nawiasami kwadratowymi. server/api/users/[id].get.ts odczytuje id za pomocą getRouterParam.

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

Zgłaszanie błędów HTTP

Użyj createError, aby zwrócić prawidłową odpowiedź błędu HTTP z kodem statusu i komunikatem zamiast zgłaszać zwykły błąd.

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

Obiekt zdarzenia H3

Argument event pochodzi z H3, czyli frameworka HTTP Nitro. Zawiera żądanie i odpowiedź oraz stanowi punkt wejścia dla wszystkich funkcji pomocniczych.

Ustawianie statusu i nagłówków

Pomocniki takie jak setResponseStatus i setHeader pozwalają sterować odpowiedzią, gdy samo zwrócenie wartości nie wystarcza.

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

Wywoływanie własnego API ze stron

Ze strony pobierz dane z własnego punktu końcowego za pomocą useFetch lub $fetch. Podczas SSR Nuxt wywołuje handler bezpośrednio, pomijając żądanie HTTP.

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

Szybki test

Sprawdź swoją wiedzę na temat tras serwera Nuxt.

Odpowiedz w interaktywnej lekcji

Podsumowanie

Wiesz już, jak działają trasy serwera Nuxt:

Pliki w server/api/ stają się punktami końcowymi API.
defineEventHandler definiuje handler, a jego wartość zwracana jest odpowiedzią.
Sufiksy .get.ts/.post.ts ograniczają obsługiwaną metodę HTTP.
Na obiekcie zdarzenia H3 używaj getQuery, readBody, getRouterParam i createError.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 42
Lekcje: 156

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Trasy serwerowe i endpointy API w Nuxt” jest bezpłatna?

Tak — pełny tekst „Trasy serwerowe i endpointy API w Nuxt” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Trasy serwerowe i endpointy API w Nuxt”?

Katalog server/api/, defineEventHandler(), narzędzia H3, middleware oraz obsługa błędów. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Trasy serwerowe i endpointy API w Nuxt”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Struktura projektu Nuxt 3 i routing oparty na plikach
Pobieranie danych: useFetch i useAsyncData
Trasy serwerowe i endpointy API w Nuxt
Tryby SSR, SSG i SPA

← Powrót do Vue Academy