Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 В этом уроке мы познакомимся с шаблонизаторами.

2 <h2>Зачем нужны шаблонизаторы</h2>

3 Javalin и другие подобные фреймворки позволяют создавать полноценные сайты без дополнительных инструментов. Рабочий сайт должен просто возвращать ответ с HTML-кодом, который браузер отобразит как страницу:

4 Здесь мы видим упрощенный пример, в котором мы возвращаем только заголовок H1.

5 В реальных приложениях возвращаемый HTML состоит из сотен и тысяч строк. Работать с такими объемами стандартным способом очень сложно. Вот лишь некоторые проблемы, с которыми мы столкнемся:

6 <ul><li>Такой код сложно формировать, редактировать и поддерживать</li>

7 <li>В таком коде очень легко допустить ошибку и очень сложно ее обнаружить</li>

8 <li>В таком коде будут возникать проблемы с одинарными или двойными кавычками, придется их экранировать и постоянно следить за этим</li>

9 </ul>Для решения этой проблемы используютсяшаблонизаторы. Это библиотеки, которые позволяют формировать HTML в отдельных файлах с подсветкой и удобной подстановкой данных. Другими словами, мы получаем не HTML внутри кода, а код внутри HTML.

10 В Java-мире есть несколько разных шаблонизаторов. Для этого курса мы выбрали<a>jte</a>(Java Template Engine), потому что он официально поддерживается в Javalin.

11 Посмотрим, как выглядит HTML c jte:

12 <h2>Как начать работать с JTE</h2>

13 Чтобы начать работу с jte, нужно добавить в зависимости две строчки:

14 Пакетjavalin-renderingдобавляет в Javalin поддержку нескольких популярных шаблонизаторов, в том числе jte. В конфигурации приложения нужно указать, что мы хотим использовать jte в качестве шаблонизатора в нашем приложении:

15 Шаблоны JTE с HTML хранятся в директорииsrc/main/jteи имеют расширениеjte. Чтобы попрактиковаться, добавим первый шаблон для главной страницы сайта. Для этого выполним два действия:

16 <ol><li>Создадим шаблонsrc/main/jte/index.jteсо следующим содержимым:

17 </li>

18 <li>Укажем обработчику главной страницы использовать этот шаблон:

19 </li>

20 </ol>Обратите внимание на метод ctx.render() в коде выше. Он выполняет рендеринг указанного шаблона и добавляет результат в HTTP-ответ.

21 Путь до шаблона указывается относительно директорииsrc/main/jte:

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

23 Шаблонизатор не задает правила именования и внутренней структуры шаблонов. Но работать без правил слишком сложно, поэтому со временем мы самостоятельно выработаем правила и будем их придерживаться.

24 В директорииsrc/main/jteпомимо самих шаблонов может быть расположен файл.jteroot. Это просто пустой файл, который указывает JTE, где находится корневая директория с шаблонами. Хотя в Javalin наличие этого файла не является обязательным, так как шаблонизатор уже заранее сконфигурирован фреймворком для поиска шаблонов в директорииsrc/main/jte, мы рекомендуем его создавать. Этот файл помогает IntelliJ IDEA точно определять расположение шаблонов и корректно подсвечивать синтаксис, что в свою очередь упрощает работу с проектом.

25 <h2>Как работает отображение данных</h2>

26 Как правило, HTML внутри шаблонов формируется на основе данных, которые мы хотим вывести. Например, чтобы вывести информацию о курсе на странице/courses/{id}, мы передаем объект этого курса в шаблон и формируем HTML на основе его содержимого.

27 Попробуем проделать этот путь. Создадим класс для курса с тремя полями - идентификатором, названием и описанием:

28 По идее, обработчик маршрута/courses/{id}получает курс из базы данных и передает его в шаблон. Для этого создадим дата-класс:

29 Осталось написать обработчик и посмотреть, как все это работает в связке:

30 Рассмотрим, по какому алгоритму обработчики обычно работают с шаблонами:

31 <ol><li>Сначала они извлекают все необходимые данные</li>

32 <li>Затем они создают объект дата-класса и заполняют его этими данными</li>

33 <li>В итоге они передают этот объект в шаблон в виде Map, созданного при помощи статического метода model(), который предоставляет Javalin</li>

34 </ol>Остался последний шаг - вывести данные курса в шаблоне. Для этого в шаблонах используется специальный синтаксис. Через него мы указываем, какой дата-класс мы используем и под каким именем хотим передать его объект в шаблон. В нашем случае это объект класса CoursePage, переданный под именем page:

35 В первых двух строчках шаблона мы используемдирективы- специальные конструкции, которые начинаются со знака @:

36 <ul><li>Директива @import аналогична импорту в Java</li>

37 <li>Директива @param указывает, какие данные нужно использовать внутри Map, переданного в шаблон. Доступ к данным внутри шаблона идет через это имя</li>

38 </ul>Дальше мы видим подстановку данных внутрь HTML. Этот способ называетсяинтерполяцией. Он работает через указание Java-кода внутри структуры ${}.

39 <h2>Какие управляющие конструкции используются в jte</h2>

40 Кроме обычного вывода значений, в шаблонах часто используются условные конструкции и циклы. С их помощью показываются списки, прячутся или показываются определенные блоки и так далее.

41 Подробнее обо всех этих конструкциях можно прочитать в официальной документации. А здесь мы разберем пример на базе маршрута /courses, по которому выводится список курсов с описанием и ссылками на курсы:

42 <ol><li>Начнем сдата-класса. Кроме курсов, добавим еще и заголовок для разнообразия:

43 </li>

44 <li>Перейдем кобработчику:

45 </li>

46 <li>В конце переходим кшаблону:

47 </li>

48 </ol>Логика вывода здесь такая:

49 <ul><li>Если список курсов пустой, то выводится соответствующее сообщение</li>

50 <li>Если курсы в списке есть, то на основе этого списка формируются HTML-блоки с информацией о курсе и ссылкой на его страницу</li>

51 </ul>Этих конструкций хватит для решения большинства стандартных задач, потому что внутри них можно использовать любой Java-код. Единственное, что нужно не забывать - это импортировать используемые классы через директиву @import.