Фреймворк Vue.JS

Цель: изучить основы работы с фреймворком Vue.JS и создать на нем одностраничное приложение.

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

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

Подготовка

Изучите основные составляющие фреймворка Vue.JS: SFC, composition API (ref, reactive, shallowRef, computed и др.), передача данных от родительского компонента дочернему (props) и обратно (emit), этапы жизненного цикла компонента (setup, onMounted и др.), маршрутизация (routing), слоты (slots), телепорт.

Примите новое задание на github classroom.

Установите все зависимости в проект и ознакомьтесь с основными командами по работе с ним: запуск, сборка, форматирование, статическая проверка кода, тестирование.

Основная задача

На основе наработок из 4-й работы по 3D-принтерам, создайте одностраничное приложение (SPA) с маршрутизацией на 4 страницы. Сохраните разделение ответственности между интерфейсом и логикой работы ваших объектов. Сами классы, возможно, придется дополнить полями или методами, возможно понадобятся дополнительные классы. Проверьте модификаторы доступов к полям и методам, чтобы ваш код был максимально ограничивающий и защищающий от лишних изменений.

К логике работы принтера необходимо добавить некоторые изменения:

При добавлении модели из очереди на печать, проверяйте сразу хватит ли пластика, если его не хватает, то не дайте отправить модель на печать.
Чтобы проверить как идет работа с ошибками в вашем приложении, добавьте механику “броска кубика”. На каждом шаге печати с помощью генератора псевдослучайных чисел, проверяйте не произошла ли какая проблема, если произошла, то второй проверкой задайте причину поломки: обрыв нити пластика, перегрев принтера, отклеилась модель от основания (используйте ваши классы ошибок).

Данные должны храниться в db.json от json-sever, чтобы при перезагрузке ничего не терялось. Подумайте какие взаимодействия вам понадобятся и посмотрите внимательнее на возможности инструмента в нулевой версии, возможно вы найдете более простой способ.

Что должно произойти, если сервер JSON недоступен или запрос не выполняется? Подумайте и учтите это в вашей реализации.

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

Все страницы должны содержать “шапку” и “подвал”. В шапке навигация по страницам, в подвале ФИО и группа.

Главная страница

Отображает списки:

созданных моделей,
пластиков,
принтеров.

На главной странице вы можете в принтер установить пластик и сформировать очередь на печать из созданных моделей.

По интерфейсу должно быть понятно, какие пластики куда установлены, какие модели в какой последовательности в каком принтере будут печататься модели, какие модели еще не поставлены в очередь. И также у принтеров обновляется информация о % готовности модели и в случае возникновения проблем печать останавливается и показывается сообщение об ошибке.

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

Страница принтеров

Отображает список всех принтеров, если список пуст - вывести сообщение об этом. Позволяет:

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

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

Страница пластиков

Отображает список всех пластиков с отображением оставшейся длины, если список пуст - вывести сообщение об этом. Позволяет:

добавить новый пластик,
удалить имеющийся из списка.

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

К пластикам добавьте ограничение на выбор цветов на один из 5 заранее определенных.

Страница моделей

Отображает три списка моделей: созданные, в печати, готовые. Модели в печати и готовые обозначаются в интерфейсе тем цветом пластика, который использовался в момент печати.

На странице можно:

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

Требования к интерфейсу

Для стилизации можете использовать сторонние библиотеки/фреймворки, можете писать стили самостоятельно в компонентах (CSS, SCSS). Предпочтительнее вариант самостоятельной работы и посмотрите на директиву css @container для отзывчивости.

Интерфейс должен быть аккуратным:

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

Github

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

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

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

Источники

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

Объект Proxy и его использование в JS.
Как создать новое Vue приложение.
Что такое SFC. Из чего состоит.
Основные директивы vue для использования в шаблоне компонента.
Функции ref и reactive
Как создать и подключить компонент.
Этапы жизненного цикла компонента.
На каком этапе стоит получать данные и почему.
Как передавать информацию между компонентами.
Пользовательские события и их обработка.
Slot и их использование.

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

07

Vue.JS