Узнайте, как использовать объектное моделирование Mongoose с MongoDB Atlas и Nuxt.

Создать приложение Todo с помощью Nuxt и Mongoose невероятно просто! Я годами работал с Firebase, но это оказалось даже проще!

TL;DR

Это приложение подключается к MongoDB Atlas и использует nuxt-mongoose для простой настройки схемы документа для приложения Todo. Создать приложение легко благодаря Mongoose JS.

Настройка приложения Nuxt

📝 Убедитесь, что вы установили Tailwind.

Создание учетной записи Mongo Atlas

Войдите в MongoDB и создайте учетную запись. После регистрации вы сможете получить строку подключения к базе данных в разделе «Connect».

Нажмите «Drivers», чтобы получить строку подключения.

.env

Укажите строку подключения в переменной окружения Nuxt внутри файла .env в корне проекта.

Установка Nuxt Mongoose

Установите Nuxt Mongoose с помощью:

И настройте nuxt.config.ts:

Создание модели Todo

Вы можете прочитать о схеме в официальном руководстве mongoose.

📝 Опция timestamps автоматически настраивает updatedAt и createdAt для каждого документа.

Настройка API-маршрутов Todo

Нам нужно реализовать CRUD для документов Todo.

Создание Todo

Модель позволяет легко использовать команду create() для создания документа. Пакет h3 позволяет нам обрабатывать ошибки с помощью createError() и получать данные с помощью readBody().

Получение Todos

Мы хотим отсортировать данные по убыванию createdAt и использовать lean(), чтобы получить только данные полей, а не метаданные.

Удаление Todo

Мы удаляем по ID.

Обновление Todo

Мы обновляем документ по ID.

📝 returnDocument: ‘after’ — мы хотим получить состояние после внесения изменений.

📝 runValidators: true — обновление должно соответствовать правилам схемы.

Composable для Todo

Мы можем вызывать API-маршруты и соблюдать принцип разделения ответственности, создав Composable для Todo.

Типы для фронтенда

И импортируйте их в composable.

📝 deletingId и togglingId используются так же, как isSubmitting, для проверки процесса выборки.

📝 Вы также можете использовать Nuxt Form Actions, хотя я здесь просто использовал $fetch.

Компоненты Todo

Наш родительский компонент отображает компонент формы Todo и компонент списка Todo после передачи свойств (Prop Drilling).

Родительский компонент

📝 Обычно мне нравится использовать общее состояние с useState, но здесь я счел передачу свойств более чистым решением.

Форма Todo

Здесь отображается форма добавления задачи.

При отправке мы должны сбросить форму и при необходимости показать сообщение.

Список Todo

Каждый раз при обновлении мы выводим список задач.

📝 Обратите внимание на aria-label и title для обеспечения доступности.

📝 deletingId и togglingId используются для обработки изменений состояния.

База данных

Как только вы запустите приложение, вы увидите свои данные в Atlas.

Итоговый обзор

Честно говоря, я думал, что настройка Mongoose будет мучением. Я работал с Firebase с момента Firestore ее выпуска, и думал, что с MongoDB все будет иначе. прошел БОЛЬШОЙ путь, а практически все настраивает за вас.

Единственный минус Mongoose — отсутствие встроенной поддержки аутентификации. Однако существует адаптер better-auth. Вы также не можете делать что-либо на стороне клиента/браузера, как в Firebase или Supabase, но в наши дни меня это устраивает!

Честно говоря, это было весело.

Репозиторий: GitHub