Узнайте, как создать собственный 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
- Единственная точка отказа
Спасибо за прочтение.