02

Vue: нано-блоггинг

Фреймфорк Vue.js

Вы создадите мини-платформу для ведения блога, используя Vue 3 Composition API и TypeScript.

Образовательные результаты

  • Использование TypeScript в компонентах, props, событиях и моделях данных.
  • Понимание и применение реактивность с помощью ref и reactive для управления состоянием.
  • Использование вычисляемых свойств для производного состояния.
  • Передача данных между компонентами с помощью props и событий.
  • Структурирование приложения с помощью компонентов, используя Composition API в <script setup>.
  • Выполнение асинхронных операций с json-server для получения, создания, обновления и удаления записей в блоге.
  • Использование оптимистичных обновлений пользовательского интерфейса для повышения воспринимаемой производительности, когда изменения пользовательского интерфейса происходят непосредственно перед подтверждением сервера, с откатом при ошибках.
  • Применение localStorage для автосохранения и восстановления данных.

Порядок выполнения лабораторной работы

Подготовка

  1. Создать ветку blog и переключиться в нее и ее же надо будет отправлять в репозиторий.
  2. Создайте новый проект Vue + TypeScript. Инструкция в документации фреймворка.
  3. Установите в проект json-server. Лучше локально.
  4. Создайте db.json в корне проекта с исходными данными как в примере ниже.
  5. Запустите json-server для имитации REST API на локальном порту.

Пример структуры объекта поста:

{
  id: number,
  title: string,
  content: string,
  author: {
    id: number,
    name: string,
  },
  createdAt: string,
  published: boolean,
}

Функциональность

У приложения одна роль - пользователь. Он может:

  • просматривать все записи и видеть общее количество записей.
  • искать записи по содержимому заголовков.
  • добавить новую запись.
  • удалить существующую запись.
  • редактировать существующую запись.
  • восстановить черновик записи при перезагрузке страницы.
  • сбросить черновик.

Язык интерфейса русский.

Реакции UI

  • Валидируются поля формы на стороне клиента при добавлении и редактировании записей и пользователю показываются сообщения об ошибках при потери фокуса и при отправке формы.
  • Отключена отправка формы во время выполнения запроса.
  • Отображаются состояния отправки формы (загрузка, успешное выполнение, ошибка).
  • Обрабатывается ситуация, когда нет записей или когда фильтры не соответствуют ни одной записи.
  • Отображаются состояния загрузки данных - спиннеры.
  • Интерфейс поддерживает оптимистичное обновление. То есть действие отображается сразу, если происходит ошибка, то происходит возвращение к предыдущему состоянию.

Проблемы с сетью эмулируйте через инструменты разработчика в браузере, выставляя низкую скорость или оффлайн режим. Также можно останавливать процесс json-server.

Автоматическое сохранение и восстановление

  • Автоматическое сохранение состояния формы в localStorage с использованием debounced watch (например, 500 мс).
  • При монтировании компонента формы проверьте наличие черновика; если он обнаружен, запросите восстановление.
  • Очистите черновик при успешной отправке или когда пользователь удалит его.

Возможная структура компонентов

Разделите UI как минимум на эти компоненты:

  • App.vue: корневой компонент, который управляет общим состоянием и приложением.
  • PostList.vue: Отображает список записей, используя вычисленные свойства для фильтрации или сортировки.
  • PostItem.vue: Дочерний компонент для отдельных записей, получающий данные записи через props и выполняющий действия редактирования/удаления.
  • NewPostForm.vue: Компонент формы для создания новых сообщений, отправляющий события родительскому элементу.
  • PostFilters.vue: Поисковый ввод.

Используйте defineProps для пропсов и defineEmits для пользовательских событий в дочерних компонентах.

Завершение работы

  1. Зафиксировать результаты работы с помощью системы контроля версий git в репозиторий на github.
  2. Отправить коммиты на ваш репозиторий в Classroom.
  3. Отправить работу на хостинг.

Требования

  • Пользовательский интерфейс работает мгновенно и с оптимистичными обновлениями.
  • Есть надежная обработка загрузки, ошибок и пустых состояний.
  • Все компоненты используют <script setup>, Composition API.
  • Правильное использованы вычисленные свойства и реактивность.
  • TypeScript не содержит ошибок.
  • Минимальный набор стилей CSS для удобства чтения.
  • Код проекта в репозитория на GitHub с README, объясняющим, как его запустить, включая запуск json-server.
  • Доступность
    • Используйте aria-invalid и aria-describedby.
    • Убедитесь, что кнопки имеют различимый текст и отключены корректно.

Результат выполнения

Страница с работающим нано-блоггингом на хостинге и исходным кодом в репозитории на Classroom.

Источники для занятия

Предыдущая Следующая