1. Введение
В этом кратком руководстве мы узнаем, как использовать CSS и JavaScript в наших шаблонах Thymeleaf .
Во-первых, мы рассмотрим ожидаемую структуру папок, чтобы знать, куда поместить наши файлы. После этого мы увидим, что нам нужно сделать, чтобы получить доступ к этим файлам из шаблона Thymeleaf.
Мы начнем с добавления стилей CSS на нашу страницу, а затем перейдем к добавлению некоторых функций JavaScript.
2. Настройка
Чтобы использовать Thymeleaf в нашем приложении, давайте добавим Spring Boot Starter для Thymeleaf в нашу конфигурацию Maven:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
<version>2.2.6.RELEASE</version>
</dependency>
3. Основной пример
3.1. Структура каталогов
Напомним, Thymeleaf — это библиотека шаблонов, которую можно легко интегрировать с приложениями Spring Boot. По умолчанию Thymeleaf ожидает, что мы поместим эти шаблоны в папку src/main/resources/templates . Мы можем создавать подпапки, поэтому в этом примере мы будем использовать подпапку с именем cssandjs .
Для файлов CSS и JavaScript каталог по умолчанию — src/main/resources/static . Давайте создадим папки static/styles/cssandjs и static/js/cssandjs для наших файлов CSS и JS соответственно.
3.2. Добавление CSS
Давайте создадим простой файл CSS с именем main.css в нашей папке static/styles/cssandjs и определим базовые стили:
h2 {
font-family: sans-serif;
font-size: 1.5em;
text-transform: uppercase;
}
strong {
font-weight: 700;
background-color: yellow;
}
p {
font-family: sans-serif;
}
Затем давайте создадим шаблон Thymeleaf с именем styledPage.html в нашей папке templates/cssandjs , чтобы использовать эти стили:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Add CSS and JS to Thymeleaf</title>
<link th:href="@{/styles/cssandjs/main.css}" rel="stylesheet" />
</head>
<body>
<h2>Carefully Styled Heading</h2>
<p>
This is text on which we want to apply <strong>very special</strong> styling.
</p>
</body>
</html>
Мы загружаем таблицу стилей, используя тег ссылки со специальным атрибутом Thymeleaf th:href . Если мы использовали ожидаемую структуру каталогов, нам нужно только указать путь ниже src/main/resources/static . В данном случае это /styles/cssandjs/main.css . Синтаксис @{/styles/cssandjs/main.css} — это способ Thymeleaf связывания URL-адресов.
Если мы запустим наше приложение, мы увидим, что наши стили были применены:
3.3. Использование JavaScript
Далее мы узнаем, как добавить файл JavaScript на нашу страницу Thymeleaf.
Давайте начнем с добавления JavaScript в файл в src/main/resources/static/js/cssandjs/actions.js :
function showAlert() {
alert("The button was clicked!");
}
Затем мы возвращаемся к нашему шаблону Thymeleaf и добавляем тег <script> , который указывает на наш файл JavaScript:
<script type="text/javascript" th:src="@{/js/cssandjs/actions.js}"></script>
Теперь мы вызываем наш метод из нашего шаблона:
<button type="button" th:onclick="showAlert()">Show Alert</button>
Когда мы запустим наше приложение и нажмем кнопку « Показать предупреждение» , мы увидим окно предупреждения.
Прежде чем мы закончим, давайте немного поработаем над этим примером, изучив, как использовать данные из нашего контроллера Spring в нашем JavaScript.
Давайте начнем с изменения нашего контроллера, чтобы предоставить имя нашей странице:
@GetMapping("/styled-page")
public String getStyledPage(Model model) {
model.addAttribute("name", "ForEach Reader");
return "cssandjs/styledPage";
}
Далее давайте добавим в наш файл action.js функцию, которая будет использовать это имя в предупреждении:
function showName(name) {
alert("Here's the name: " + name);
}
Наконец, чтобы вызвать нашу функцию с данными из нашего контроллера, нам нужно использовать встраивание скрипта . Итак, давайте поместим значение имени в локальную переменную JavaScript:
<script th:inline="javascript">
var nameJs = /*[[${name}]]*/;
</script>
Сделав это, мы создали локальную переменную JavaScript, содержащую значение модели имени из нашего элемента управления, которое мы затем можем использовать в нашем JavaScript на остальной части страницы.
Теперь, когда мы это сделали, мы можем вызвать нашу функцию JavaScript, используя переменную nameJs :
<button type="button" th:onclick="showName(nameJs);">Show Name</button>
4. Вывод
В этом коротком руководстве мы узнали, как применять стили CSS и внешние функции JavaScript к нашим страницам Thymeleaf. Мы начали с рекомендуемой структуры каталогов и дошли до вызова JavaScript с данными, предоставленными в нашем классе контроллера Spring.
Как всегда, код доступен на GitHub .