ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 22.11.2023
Просмотров: 24
Скачиваний: 3
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
3.1.4 Bootstrap
-
Страдая над этой задачей несколько дней, я решил помочь тем, кто будет решать это. Забегая немного вперед хочу сказать что все решаемо, главное не опускайте руки, после решения вы поймете что все было не так страшно.
1) В целом бэкенд у вас уже имеется с прошлой задачки, немного нужно будет подогнать под условие.
2) Bootstrap, сначала нужно его подключить, как это делать разберитесь сами, в комментариях информации достаточно. Компоненты которые вам нужны для того чтобы сверстать страничку: navbar, modal fade, button. Посмотрите примеры, почитайте документацию, поиграйтесь с параметрами, используйте div блоки. Не знаю что еще посоветовать, тут как по мне нужна боевая практика.
3) Разбор довольно частой проблемы. Скорее всего что-то у вас работает из-за невнимательности, смотрите внимательно как вы называете ваши поля класса User, потому что потом, когда вы будете работать с формами, имена в input могут не соответстовать вашим названиям полей, из-за этого многие сталкивались с проблемой того, что из формы вам прилетают null значения в таблицу.
Лично у меня была ошибка, что в колонку First Name, прилетал null, я долго разбирался с этим, оказалось, что у меня не было одного settera в User, так что смотрите за всем очень внимательно. -
Мой первый отзыв на проекте и, как символично, на последней задаче. Следующая не в счёт, её я сдал ранее. Впечатления. Эта задача мне понравилась больше всех, какое-то удовлетворение даже испытал, и сделал я ее за 3 дня - где-то часов 36-40 потрачено. Естественно её шлифовать еще столько же часов можно, но основная идея работает и задача принята без вопросов. Список полезного:
- https://www.youtube.com/watch?v=ccX3ApO4qz8
- Bootstrap 4.6 DOCS
- Индус все рассказывает четко по методам REST == https://youtu.be/tWX6SeHdv40 - учебник https://learn.javascript.ru/ifelse
- канал LetsCode
Из всего вышеперечисленного все понемногу помогло прийти к решению, но самые популярные ресурсы, настольные книги - это Доки Бутстрапа и Учебник по JS. Приведенные видео не дают 100% решения, но помогают понять последовательность реализации. Автора канала LetsCode я называю быстропИсом - реально без тягомотины и пятикратных повторений материала в стиле Алишева показывает как делать. Всем успехов! -
для тех, кто, как я, ноль в вёрстке таблиц, чтоб хоть какое-то понимание тегов было: https://itchief.ru/bootstrap/tables
Справочник тэгов HTML: https://webref.ru/html -
Комментарий ментора: убрать @ManyToMany(fetch = FetchType.EAGER) читать тут --> https://www.baeldung.com/spring-data-jpa-named-entity-graphs пересмотреть Трегулова про типы загрузок данных (eager и lazy) тут --> https://u.to/NvZMHA -
https://bootstrap-4.ru/articles/cheatsheet/ , само задание можно сделать без жаваскрипта, просто создавать отдельное модальное окно для удаления/редактирования каждого пользователя -
Для понимания. Я посмотрел первые 2 ролика. Первой ролик про html (35 минут), второй про css (40 минут). https://www.youtube.com/watch?v=4jYYHaTwWvY&list=PLD5U-C5KK50UPr4dMcaFxotL_H_uIElOn&index=1 -
https://bootstrap-cheatsheet.themeselection.com/ удобная вещь для этой задачи -
Всего-то 114 div и сайтик готов ;) Тут куча видосов в ссылках, я честно не понимаю зачем https://getbootstrap.com/docs/5.0/ - есть вообще все что нужно для создания такой страницы. Копипастим примеры и останется только скомпоновать их. о том как опять же подробно в документации с кучей картинок. Почти не зная css и только немного html написал страницу за 1 день(без скриптов и th). Кроме этого понадобился только JS немного для скриптов заполнения модальных окон и th: естественно.
Хотя... Подозреваю, всеравно большинство побежит тратить время на видосики какого-нибудь Дударя, по устарелому 3 бутстрапу... -
Шаги, на которые разбил решение задачи. Возможно кому-нибудь поможет не потратить время в пустую.
1. Изучал bootstrap и верстал макет для приложения, как на картинках (2 дня) https://bootstrap-4.ru/docs/4.6/getting-started/introduction/
2. Изучал JQuery и писал скрипт, чтобы из таблицы данные перенести в модальные окна по клику на кнопки (2 дня) Изучал по этому простому учебнику http://www.wisdomweb.ru/JQ/jquery-first.php
3. "Натянул" готовый работающий макет на приложение из прошлой задачи с незначительными дороботками и правками (1 день)
Можно было сделать быстрее , если бы не тратил время на просмотр видосов из комментов. Можно было сделать быстрее , если не использовать js, а создавать по два окна на каждого юзера. Но такое решение не масштабируемо, юзеров может быть тысячи. -
Есть такая классная штука как DevTools позволяющая видеть изменения после изменения кода без перезагрузки сервера. Вот инструкция: https://stackoverflow.com/questions/69449905/how-to-enable-spring-boot-live-dev-tools-on-intellij-2021-2-to-rebuild-classes-a -