Узнайте, как создать собственный API внутри Nuxt.js

Знаете ли вы, что в Nuxt.js можно создавать собственные конечные точки API? Это означает, что вам не нужно запускать отдельный сервер. Вместо этого вы можете сделать это прямо в своем приложении Nuxt!

В этой статье вы узнаете, как это сделать. Вы создадите простой экспресс-сервер с конечной точкой, которая позволит вам получать данные из базы данных.

Давайте посмотрим, как настроить собственный сервер API!

Свойство serverMiddleware

Nuxt имеет свойство serverMiddleware, которое позволяет создавать дополнительные маршруты API внутри вашего приложения.

Как это работает? Nuxt создает экземпляр connect, который является промежуточным уровнем для Node.js. Благодаря экземпляру connect вы можете создать собственный API с разными конечными точками.

Свойство serverMiddleware удобно, если вы хотите разместить API в том же месте, что и ваше приложение Nuxt. Это также полезная функция, когда вы хотите создать доказательство концепции или когда у вас есть небольшой API.

Как создать API

Первый шаг - создать новую папку внутри корневого каталога проекта. Создайте новую папку следующим образом:

mkdir api

Внутри папки создайте новый файл с именем courseAPI.js. В файле courseAPI.js вы создадите сервер Express.

В этом примере представим, что у вас есть база данных, в которой хранятся курсы веб-разработки. Таким образом, вы создадите конечную точку, которая позволит вам получать все курсы из базы данных.

Откройте файл courseAPI.js и напишите следующий код:

В этом коде происходит несколько вещей. Ты:

  • Импорт пакетов, необходимых для создания сервера API (Express и graphql-request).
  • Создание нового экземпляра Express и использование express.json() промежуточного программного обеспечения.
  • Создание нового экземпляра GraphQLClient, передающего фиктивную конечную точку.
  • Построение /getCourses конечной точки.
  • Выполнение запроса с использованием только что созданного GraphQLClient при передаче запроса allCourses.
  • Возврат курсов из базы данных.
  • Экспорт приложения.

Теперь у вас есть простой экспресс-сервер внутри Nuxt. Следующим шагом будет регистрация serverMiddleware. Перейдите в файл nuxt.config.js и добавьте следующее свойство:

export default {
  serverMiddleware: ['~/server-middleware/courseAPI.js']
}

Теперь, если вы запустите приложение и перейдете к маршруту /getCourses, вы должны увидеть все курсы из базы данных.

Примечание. Если вы хотите добавить конкретный путь или префикс, например /api, вам необходимо использовать форму объекта и указать путь. Приведенный ниже фрагмент кода иллюстрирует форму объекта с определенным путем.

export default {
  serverMiddleware: [
    { path: '/api', handler: '~/server-middleware/courseAPI.js' }
  ]
}

В этом руководстве вы увидите первый вариант без формы объекта. Однако не стесняйтесь использовать тот вариант, который соответствует вашим потребностям.

Как использовать конечную точку API

Теперь, когда у вас есть настраиваемая конечная точка API, вы можете начать ее использовать. В приведенном ниже коде показан один из способов получения данных.

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

Важно отметить, что вы не должны жестко кодировать URL-адрес в реальном приложении. Кроме того, когда вы используете fetch Hook, вам необходимо передать абсолютный URL. Таким образом, выполнение чего-то вроде fetch('/getCourses') приведет к ошибке.

Заключение

В этой статье вы создали простой сервер Express внутри Nuxt. Однако вы можете использовать его и создать более сложный API.

Но вопрос - особенно если это сложный API - будет: «Правильный ли это подход?» Вы хотите, чтобы API был внутри Nuxt?

Есть несколько моментов, о которых стоит подумать, например:

  • Масштабирование API
  • Единственная точка отказа

Спасибо за прочтение.