Spring Boot: оформляем UI с Bootstrap

Spring Boot Web Application (MVC): Делаем наше приложение симпатичнее в визуальном плане: подключим к проекту библиотеку Bootstrap.

Код из видео:

Сайт Bootstrap:

Первым делом перейдем на сайт Bootstrap и откроем руководство быстрого старта:

После этого обернём директиву #nested этого шаблона в стили контейнера со страницы руководства, описывающей систему сеток Bootstrap:

Следом переделаем наше меню навигации по странице руководства, описывающей примеры оформления навигационных панелей:

Для упралением отображения элементов меню в зависимости от того, залогинен ли пользователь и какие у него права, нам необходимо создать шаблон, не содержащий оформления, но определяющий полезные значения: имя пользователя и признак того, что пользователь имеет админские права. Для этого используем директиву Freemarker assign:

Для включения этого шаблона в панель навигации используем директиву include:

При компоновке объектов на странице часто возникает необходимость добавить отступ между элементами. Для этого в Bootstrap присутствует набор стилей с отступами:

Далее мы перерабатываем форму логина с использованием стилей из руководства по оформлению форм:

Переходим к странице добавления и просмотра сообщений, где меняем офрмление формы ввода нового сообщения, сделав форму ввода "схлопываемой" по примеру из документации:

И последним штрихом меняем оформление сообщений в виде карточек, сверстанных в 3 колонки:

➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖

➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖

Поддержать проект:

➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖

Ссылка на плейлист:

[bogdangaiduk]

Очень классные гайды, по ним написал свой первый проект и стал джуном)) Спасибо автору)

[jury]

Просто невероятно!!!
Волшебство!!!
За столь короткий срок, столько полезной, и самое главное, понятной инфы.
Вы - кудесник!!!
Здоровья Вам, успехов, и всего самого наилучшего.

[БогданСайкевич]

Отличный видеокурс! Большое спасибо.
Это пока самый насыщщенный урок. 4 часа разбора на одном дыхании). Все по сути и очень полезно.

[artemy]

Не работал отступ имени пользователя от sign out в правом верхнем углу. Просидел полтора часа, сверяя каждую строчку. По итогу - в новой Bootstap 5.1.1 нужно юзать me-3 вместо mr-3))

[ВикторияК-сц]

Самые качественные видео на эту тему, /и в рунете, и на англ/ Крутой
подход, спасибо автору. Следовал видео и получилось сделать интересный
проект, который любопытно "докручивать" самому. Советы автора помогают
не утонуть в деталях и не потерять мотивацию. Спасибо ребятам в
комментах - если вы напоролись на ошибку, решения находил здесь же.
Успехов! Хватит читать комменты, идите кодить)

[victormog]

Выделенные строки в IntelliJ IDEA удобно перемещать вверх-вниз с помощью

[AnnaSmirnova]

Согласна, что это магия какая-то)))
Спасибо за вашу работу и очень подробные подписи в описании к видео!!!!

[АлександрБондарев-ъф]

Уроки огонь. Немного сбивают нестыковки в монтаже видео, но так даже лучше запоминается. Спасибо за ваш труд

[Eteanor]

Хотелось бы более подробное объяснение происходящего в теге #assign на 6:28. Спасибо за видео 👍

[vladsoldatenko]

Если что - эта простая конструкция скрывает кнопку разлогинивания на панели, если пользователь "неизвестен":

[caffeinejavacode]

для thymeleaf
Добавить
1)
<dependency>


</dependency>
2)
3)
<li class="nav-item active"

[D.P._]

Круто, поражаюсь сколько времени нужно потратить на такую работу. Screencast отличный!

[ЕвгенийДмитриевич-хг]

Все очень хорошо рассказано))) Спасибо большое за ваш труд!

[global_silence]

А можно вообще узнать, что это за константы, типа Session - это какой-то класс в спринге? Где они лежат? Сколько их? Как работают? А то вообще 0 информации.
Просто почему спрашиваю - фримаркер не понимает почему-то вообще обращений к методам, которые boolean возвращают. Failed at: isAdmin = user.isAdmin(). Хотя user.getUsername() спокойно воспринимает. clean проекта не пашет.
В общем проблема с isAdmin() в том, что этот метод пытается вызываться из класса


Попробовал оттуда вызывать другие методы - все работает. В чем прикол и как можно заставить обращаться к моему классу User? В моем классе User переопределен интерфейс UserDetails. Только такой момент - я пишу не через SpringBoot, а также пока юзаю Spring JDBC, поэтому аннотации Entity над классом User у меня нет.


UPD: В общем пока выживаю так. В этом системном классе есть метод getAuthorities. Поэтому в security.ftl сделал так
<#if known>
<#assign
user =
name = user.getUsername()
isAdmin =
>
<#else>
<#assign
name = "unknown"
isAdmin = false
>
</#if>

[romanmotovilov]

Великолепно! И огромное спасибо, что делаете пояснения к своим действиям!!!

[atg]

У тебя какой-то слог, вот говоришь так, что все сразу понятно :D Лайк, для себя сделал с UIkit. Просто блин этот bootstrap используют все, пошел против системы )

[drumcellos]

Добрый день!Такая проблема, когда создаю вью security подсвечивается SPRING_SECURITY_CONTEXT и вылезает такая ошибка Cannot resolve field or property 'SPRING_SECURITY_CONTEXT' of class И когда логинишься на сайте, программа валится что юзер нулл. Кто нибудь сталкивался? Как починить? В комментах так ответа и не нашел

[oleksiiskachkov]

Спасибо за крутые уроки.
И просто для справки: в доке бутстрапа поменяли оформление формы.

[kkrxjdzs]

Огонь, мне нравится. Очень жду стримы!

[AllSpotsChannel]

в messages (main), строка куда писать тэг сделал все по уроку, но кнопка Search все равно осталась внизу и никак не хочет лезть в один ряд со строкой. Уже 5 дней мучаюсь, испробовал все - ничего не помогает. Может кто сталкивался еще с такой проблемой?