0Pricing
Vue Academy · Урок

Серверные маршруты и конечные точки API Nuxt

Каталог server/api/, defineEventHandler(), утилиты H3, промежуточное ПО и обработка ошибок

«Серверные маршруты и конечные точки API Nuxt» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Nuxt — полноценный стек

Nuxt 3 включает серверный движок Nitro. Каталог server/ позволяет создавать конечные точки API рядом со страницами — для многих приложений отдельная серверная часть не нужна.

Каталог server/api

Файлы в server/api/ становятся маршрутами API в /api. server/api/hello.ts отвечает по адресу /api/hello.

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

defineEventHandler

Каждый серверный маршрут экспортирует обработчик, созданный с помощью defineEventHandler. Всё, что он возвращает, отправляется в ответе и автоматически преобразуется в JSON.

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

Суффиксы методов HTTP

Добавьте к имени файла суффикс метода, чтобы ограничить маршрут. users.get.ts обрабатывает GET, а users.post.ts — POST. Без суффикса маршрут отвечает на запросы любого метода.

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

Чтение параметров запроса

Используйте вспомогательную функцию getQuery, чтобы прочитать строку параметров запроса URL из события.

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

Чтение тела запроса

Для запросов POST/PUT функция readBody разбирает входящее тело JSON. Она асинхронная, поэтому вызовите её с await.

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

Динамические серверные маршруты

Имена файлов в квадратных скобках работают и на сервере. Файл server/api/users/[id].get.ts читает id с помощью getRouterParam.

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

Генерация HTTP-ошибок

Используйте createError, чтобы возвращать корректные ответы HTTP с кодом и сообщением об ошибке, а не выбрасывать обычную ошибку.

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

Объект события H3

Аргумент event поступает из H3 — HTTP-фреймворка Nitro. Он содержит запрос и ответ и служит точкой входа для всех вспомогательных функций.

Установка статуса и заголовков

Вспомогательные функции, такие как setResponseStatus и setHeader, позволяют управлять ответом, когда простого возвращаемого значения недостаточно.

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

Вызов собственного API со страниц

Со страницы загружайте собственную конечную точку с помощью useFetch или $fetch. Во время SSR Nuxt вызывает обработчик напрямую, пропуская повторный обмен по HTTP.

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

Быстрая проверка

Проверьте свои знания о серверных маршрутах Nuxt.

Итоги

Вы изучили серверные маршруты Nuxt:

  • Файлы в server/api/ становятся конечными точками API.
  • defineEventHandler определяет обработчик, а его возвращаемое значение становится ответом.
  • Суффиксы .get.ts/.post.ts ограничивают метод HTTP.
  • Для события H3 используйте getQuery, readBody, getRouterParam и createError.

Часто задаваемые вопросы

Урок «Серверные маршруты и конечные точки API Nuxt» бесплатный?

Да — полный текст урока «Серверные маршруты и конечные точки API Nuxt» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Серверные маршруты и конечные точки API Nuxt»?

Каталог server/api/, defineEventHandler(), утилиты H3, промежуточное ПО и обработка ошибок Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Серверные маршруты и конечные точки API Nuxt»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Структура проекта Nuxt 3 и маршрутизация на основе файлов
  2. Получение данных: useFetch и useAsyncData
  3. Серверные маршруты и конечные точки API Nuxt
  4. Режимы SSR, SSG и SPA
← Назад к Vue Academy