Vue.js APP

Цель: изучить работу с компонентами во Vue.js, SFC, передача данных от родительского компонента, дочернему и обратно, этапы жизненного цикла компонента.

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

Установить node.js, если этого не было сделано в прошлом семестре.
Принять задание в Github Classroom https://classroom.github.com/a/B1fj8fjV. Будет просматриваться история коммитов и текст сообщений коммитов на понятность.
Повторить работу с запросами и ответами. Изучить работу с server-sent events. А также использование компонентов во Vue и принципы работы с ними.
Создать новый проект npm init vue@latest.
Ответить на вопросы о создании проекта. В целом можете везде ответить нет.
Выполнить команды npm install, npm run dev для запуска сервера разработки.
Изучить описание API - http://194.67.93.117:80/api/
Продумать и реализовать компоненты для добавления и отображения комментариев.
Собрать проект с помощью команды npm run build и файлы из созданной папки dist перенести на сервер.

Логика работы элементов приложения

Максимальный функционал

Добавление комментария

Есть форма, которая позволяет добавить новый комментарий. Для нового комментария указывается имя, текст ответа и реакция (положительный -1, нейтральный 0 - вариант по умолчанию, негативный 1).
Форма отображается если нажать на кнопку “создать новый комментарий” или “ответить” под другим комментарием. От этого зависит будете ли вы передавать parendId.
Валидация пользовательского ввода, так как поля обязательные для заполнения и блокировка кнопки, на время ожидания ответа от сервера.
При отправке запроса требуется добавить заголовок Username, а в значении передать ваш ник на Github.

Отображение комментариев

На странице есть переключатель, от состояния которого зависит получаете ли вы новые комментарии в реальном времени или нет.
При запуске приложения в браузере вы получаете список комментариев и подписываетесь на обновления с сервера для получение новых комментариев в реальном времени.
Комментарии отрисовываются с учетом их вложенности, так как один комментарий может быть ответом на другой это определяется по полю parentId.
Есть счетчик указывающий общее число комментариев.
На родительском комментарии указывается количество ответов, если ответов нет, то ничего не показывается. 1. Цвет фона родительского комментария зависит от суммы реакций в ответах на него. Если отрицательная сумма, то например красный, если положительная, то зеленый.
Указывается время и дата создания комментариев. Сами комментарии отображаются от старых к новым, то есть сверху старые комментарии.

пример комментариев — Пример отображения комментариев

Что можно упростить

Упрощения сказываются на максимальном бале за практическую часть.

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

Критерии

RWD от 375px до 2560px, mobile-first.
Доступность: цвета, доступ с клавиатуры, предсказуемость, текстовый контент и т.д.
БЭМ
Внешний вид: отступы, выравнивание, пропорции.
SVG для иконок.

Результаты выполнения лабораторной работы:

Статическая веб-страница на хостинге проверенная, со структурой и оформлением, которая соответствует требованиям и сохранена в системе контроля версий.

Источники

Вопросы для защиты

Как создать новое Vue приложение.
Что такое SFC. Из чего состоит.
Как создать и подключить компонент.
Этапы жизненного цикла компонента.
На каком этапе стоит получать данные и почему.
Как передавать информацию между компонентами.
Пользовательские события и их обработка.
Slot и их использование.
Что такое server-sent events.
Использование EventSource.

и остальные из всего курса за текущий семестр.

Распределение баллов

За практику максимум 20 баллов.

За ответы на вопросы максимум 10 баллов.

12

Vue: комментарии