Введение

Итак, в прошлом видео мы познакомились с концепцией, которая позволяет взаимодействовать с внешними ресурсами. Сейчас давайте рассмотрим практики и разберемся, как можно с этим работать на практике.

Создание серверного приложения

Для начала, создадим серверное приложение, которое будет взаимодействовать с внешними сервисами. У нас в проекте есть специальная директория, которая называется server. Именно в этой директории будут находиться все серверные функции.

Для работы со сторонними приложениями мы должны создать отдельную подпапку под названием api. Обратите внимание, что эта подпапка должна называться именно так — в противном случае ничего работать не будет. Все серверные функции должны находиться в этой директории.

Структура серверных функций

Серверные функции, которые вы создаете, представляют собой своеобразные middleware. Эти функции выполняются между вашим frontend-приложением и внешними сервисами. Каждая контрольная точка представляет собой отдельный файл в этой серверной части.

Например, мы можем создать файл hello.ts. Название этого файла будет являться именем контрольной точки, к которой можно обращаться. Внутри этого файла мы создаём специальную функцию, которая называется defineEventHandler. Это обработчик событий, который срабатывает при обращении к созданному маршруту.

export default defineEventHandler((event) => {
  return {
    hello: 'world'
  }
})

Эта служебная конструкция должна возвращать какой-то JSON-ответ, то есть данные в формате JSON. Внутри функции вы можете прописать любую логику. Например, можно обратиться к внешнему API, получить оттуда данные и вернуть их пользователю.

Пример создания контрольной точки

Допустим, для примера мы создадим контрольную точку под названием hello, которая просто вернёт какой-то JSON-ответ. После того как вы создали файл и прописали логику, вы можете обратиться к вашему локальному серверу и проверить, что действительно всё работает.

Итог

Таким образом, мы с вами создали простой серверный endpoint с использованием функции defineEventHandler, которая возвращает JSON-ответ. Теперь можно двигаться дальше и добавлять более сложную логику для работы с внешними API.