«Добавьте CSS и JS в Thymeleaf» - Spring на русском

«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 в наших шаблонах/ 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:

Затем мы вернемся к нашему шаблону Thymeleaf и добавим \u003cscript\u003e tag, который указывает на наш файл JavaScript:

Теперь мы вызываем наш метод из нашего шаблона:

function showAlert() {
    alert("The button was clicked!");
}

Когда мы запускаем наше приложение и нажимаем кнопку Show Alert, мы видим окно предупреждения.

<script type="text/javascript" th:src="@{/js/cssandjs/actions.js}"></script>

Прежде чем мы закончим, давайте немного поработаем над этим примером, изучив, как использовать данные из нашего контроллера Spring в нашем JavaScript.

<button type="button" th:onclick="showAlert()">Show Alert</button>

Давайте начнем с изменения нашего контроллера, чтобы предоставить имя нашей странице:

Затем давайте добавим функцию в наш файл action.js, чтобы использовать это имя в предупреждении:

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

@GetMapping("/styled-page")
public String getStyledPage(Model model) {
    model.addAttribute("name", "Baeldung Reader");
    return "cssandjs/styledPage";
}

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

function showName(name) {
    alert("Here's the name: " + name);
}

Теперь, когда мы это сделали, мы можем вызвать нашу функцию JavaScript, используя переменную nameJs:

<script th:inline="javascript">
    var nameJs = /*[[${name}]]*/;
</script>

4. Заключение

В этом коротком руководстве мы узнали, как применять стили CSS и внешние функции JavaScript. на наши страницы Thymeleaf. Мы начали с рекомендуемой структуры каталогов и дошли до вызова JavaScript с данными, предоставленными в нашем классе контроллера Spring.

<button type="button" th:onclick="showName(nameJs);">Show Name</button>

Как всегда, код доступен на GitHub.

As always, the code is available over on GitHub.

«Добавьте CSS и JS в Thymeleaf»