0Pricing
Vue Academy · Lezione

Route server e endpoint API di Nuxt

Directory server/api/, defineEventHandler(), utility H3, middleware, gestione degli errori.

Route server e endpoint API di Nuxt è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Nuxt è full-stack

Nuxt 3 include un motore server (Nitro). La directory server/ consente di creare endpoint API accanto alle pagine, senza bisogno di un backend separato per molte applicazioni.

La directory server/api

I file in server/api/ diventano route API sotto /api. server/api/hello.ts risponde all'indirizzo /api/hello.

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

defineEventHandler

Ogni route server esporta un handler creato con defineEventHandler. Qualunque valore restituisca viene inviato come risposta e serializzato automaticamente in JSON.

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

Suffissi per i metodi HTTP

Aggiunga al nome del file un suffisso del metodo per limitarlo. users.get.ts gestisce GET, mentre users.post.ts gestisce POST. Senza suffisso, la route risponde a qualsiasi metodo.

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

Lettura dei parametri di query

Utilizzi l'helper getQuery per leggere la stringa di query dell'URL dall'evento.

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

Lettura del body della richiesta

Per le richieste POST/PUT, readBody analizza il body JSON in arrivo. È asincrono, quindi lo attenda con await.

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

Route server dinamiche

Anche sul server è possibile utilizzare i nomi di file tra parentesi quadre. server/api/users/[id].get.ts legge l'id con getRouterParam.

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

Generazione di errori HTTP

Utilizzi createError per restituire risposte HTTP di errore appropriate con un codice di stato e un messaggio, invece di lanciare un errore semplice.

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

L'oggetto evento di H3

L'argomento event proviene da H3, il framework HTTP di Nitro. Contiene la richiesta e la risposta ed è il punto di ingresso per tutte le funzioni helper.

Impostazione di stato e header

Helper come setResponseStatus e setHeader consentono di controllare la risposta quando non è sufficiente restituire un valore.

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

Chiamare la propria API dalle pagine

Da una pagina, recuperi il proprio endpoint con useFetch o $fetch. Durante l'SSR, Nuxt chiama direttamente l'handler, evitando un round trip HTTP.

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

Verifica rapida

Verifichi la sua conoscenza delle route server di Nuxt.

Riepilogo

Ha imparato a utilizzare le route server di Nuxt:

  • I file in server/api/ diventano endpoint API.
  • defineEventHandler definisce un handler; il suo valore di ritorno è la risposta.
  • I suffissi .get.ts/.post.ts limitano il metodo HTTP.
  • Utilizzi getQuery, readBody, getRouterParam e createError sull'evento H3.

Domande Frequenti

La lezione «Route server e endpoint API di Nuxt» è gratuita?

Sì — il testo completo di «Route server e endpoint API di Nuxt» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Route server e endpoint API di Nuxt»?

Directory server/api/, defineEventHandler(), utility H3, middleware, gestione degli errori. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Route server e endpoint API di Nuxt»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Struttura dei progetti Nuxt 3 e routing basato sui file
  2. Recupero dei dati: useFetch e useAsyncData
  3. Route server e endpoint API di Nuxt
  4. Modalità SSR, SSG e SPA a confronto
← Torna a Vue Academy