Spring Boot (2): Механизм шаблонов Thymeleaf отображает веб-страницы

Spring Boot

существует«Весенняя загрузка (1): быстрый старт»В этом разделе рассказывается, как использовать Spring Boot для создания проекта и предоставления RESTful API В этом разделе мы продолжаем знакомить вас с тем, как использовать Spring Boot для отображения веб-страниц.

1. Что такое тимьян?

Хотя в настоящее время у нас есть много отличных интерфейсных фреймворков, таких как: Vue, React и т. д., которые очень подходят для сценариев, где интерфейс и сервер разделены, интерфейс можно развернуть независимо как сервис, а интерфейс и сервер полностью физически изолированы, что снижает связанность программ. Тем не менее, Spring Boot официально по-прежнему предоставляет нам механизм шаблонов для некоторых сценариев, не требующих разделения интерфейса и сервера. Thymeleaf — это шаблонизатор нового поколения.В Spring Boot Thymeleaf официально рекомендуется в качестве внешнего шаблонизатора. Открытымstart.spring.io/Как видите, в текущей версии Spring Boot (2.1.8.RELEASE) официально предоставленные механизмы шаблонов следующие:

  • Thymeleaf
  • FreeMarker
  • Mustache
  • Groovy

Spring Boot рекомендует использовать эти механизмы шаблонов и не рекомендует продолжать использовать JSP.

Особенности Thymeleaf заключаются в следующем:

  • Thymeleaf может работать как в сетевой, так и в несетевой среде, то есть он позволяет художникам просматривать статический эффект страницы в браузере, а также позволяет программисту просматривать динамический эффект страницы с данными на сервере. Это связано с тем, что он поддерживает html-прототипы, а затем добавляет дополнительные атрибуты к html-тегам для достижения шаблона + отображения данных. Браузеры игнорируют неопределенные атрибуты тегов при интерпретации html, поэтому шаблоны Thymeleaf могут работать статически; когда данные возвращаются на страницу, теги Thymeleaf динамически заменяют статическое содержимое, заставляя страницу отображаться динамически.
  • Особенности Thymeleaf из коробки. Он предоставляет два диалекта, стандартный и стандартный Spring, и может напрямую применять шаблоны для достижения эффектов выражения JSTL и OGNL, избегая проблем с настройкой шаблонов, изменением Jstl и изменением тегов каждый день. Разработчики также могут расширять и создавать собственные диалекты.
  • Thymeleaf предоставляет стандартные диалекты Spring и дополнительный модуль, идеально интегрированный со SpringMVC, который может быстро реализовать такие функции, как привязка форм, редактор свойств, интернационализация и т. д.

2. Быстрый старт

Здесь мы сначала обычно собираем проект Spring Boot: spring-boot-thymeleaf и вводим соответствующие зависимости Thymeleaf в файл pom.xml следующим образом:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

Конфигурационный файл application.yml проекта выглядит следующим образом:

server:
  port: 8080
spring:
  application:
    name: spring-boot-thymleaf
  thymeleaf:
    # 关闭thymeleaf缓存 开发时使用 否则没有实时画面
    cache: false
    # 检查模板是否存在，然后再呈现
    check-template-location: true
    # Content-Type value.
    servlet:
      content-type: text/html
    # 启用MVC Thymeleaf视图分辨率
    enabled: true
    # Template encoding.
    encoding: UTF-8
    # 关闭严格模式
    mode: LEGACYHTML5
    # Prefix that gets prepended to view names when building a URL.
    prefix: classpath:/templates/
    # Suffix that gets appended to view names when building a URL.
    suffix: .html
  mvc:
    # 指定静态资源处理路径
    static-path-pattern: /static/**
    view:
      suffix: .html

О тимелеафе написаны примечания.Здесь необходимо отметить следующие моменты:

  • spring.thymeleaf.mode: настройка режима анализа текущего шаблона. Значение по умолчанию — HTML. В это время будет включен строгий режим. Весь HTML должен иметь начало и конец. Многие места не соответствуют к нашим обычным привычкам письма. Здесь лучше всего отключить строгую модель.
  • spring.thymeleaf.cache : Вот кэш тимелеафа. Лучше всего закрыть его в обычной практике. В противном случае обновление браузера после изменения страницы будет недействительным. В производственной среде это зависит от конкретного бизнес-сценария.
  • spring.mvc.static-path-pattern : это путь для настройки наших статических ресурсов, обычно по умолчанию используется конфигурация/static/**Путь здесь используется для хранения наших js, css, изображений и других статических ресурсов.

Настройте общие страницы 404 и 500 непосредственно вtemplates\errorПросто создайте соответствующую страницу, здесь вы можете посмотреть исходный код переадресации страницы ошибки Spring Boot.org.springframework.boot.autoconfigure.web.servlet.error.DefaultErrorViewResolver,следующее:

@Override
public ModelAndView resolveErrorView(HttpServletRequest request, HttpStatus status, Map<String, Object> model) {
    ModelAndView modelAndView = resolve(String.valueOf(status.value()), model);
    if (modelAndView == null && SERIES_VIEWS.containsKey(status.series())) {
        modelAndView = resolve(SERIES_VIEWS.get(status.series()), model);
    }
    return modelAndView;
}

private ModelAndView resolve(String viewName, Map<String, Object> model) {
    String errorViewName = "error/" + viewName;
    TemplateAvailabilityProvider provider = this.templateAvailabilityProviders.getProvider(errorViewName,
            this.applicationContext);
    if (provider != null) {
        return new ModelAndView(errorViewName, model);
    }
    return resolveResource(errorViewName, model);
}

Видно, что код ответа будет перенаправлен на соответствующую страницу в соответствии с текущим статусом, а маршрутerror/**. Здесь автор просто создает две страницы ошибок, как показано на рисунке:

Создайте тестовый контроллер следующим образом:

@Controller
public class HelloController {

    @GetMapping("/hello")
    public String hello(HttpServletRequest request) {
        // 构建测试数据
        Map<String, Object> map = new HashMap<>();

        UserModel userModel = new UserModel();
        userModel.setId(1L);
        userModel.setName("Spring Boot");
        userModel.setAge(18);

        map.put("user", userModel);

        List<CourseModel> list = new ArrayList<>();

        for (int i = 0; i < 2; i++) {
            CourseModel courseMode = new CourseModel();
            courseMode.setId((long) i);
            courseMode.setName("Spring Boot：" + i);
            courseMode.setAddress("课程地点：" + i);
            list.add(courseMode);
        }

        map.put("list", list);

        map.put("flag", true);

        request.setAttribute("data", map);
        return "hello";
    }
}

В этом зарегистрированном тестовом классе выполняется инициализация данных и их вывод на страницу.

  • Путь к шаблону по умолчанию Thymeleafsrc/main/resources/templates, вам нужно только написать файл шаблона по этому пути.

Файл шаблона Thymeleaf выглядит следующим образом:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello Spring Boot</title>
    <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}">
</head>
<body>
<div class="container">
    <div>用户信息：</div>
    <table class="table table-dark">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">姓名</th>
            <th scope="col">年龄</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row" th:text="${data.user.id}"></th>
            <td th:text="${data.user.name}"></td>
            <td th:text="${data.user.age}"></td>
        </tr>
        </tbody>
    </table>
    <div>课程信息：</div>
    <table class="table table-dark">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">课程名称</th>
            <th scope="col">课程地点</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="course, iterStat : ${data.list}">
            <th scope="row" th:text="${course.id}"></th>
            <td th:text="${course.name}"></td>
            <td th:text="${course.address}"></td>
        </tr>
        </tbody>
    </table>

    <div th:if="${data.flag == true}">如果 flag 为 true 你将可以看到这行字：）</div>

</div>

</body>
</html>

Вот некоторые часто используемые теги th в Thymeleaf:

ключевые слова Функции кейс
th:id заменить идентификатор <input th:id="'xxx' + ${collect.id}"/>
th:text замена текста <p th:text="${collect.description}">description</p>
th:utext Поддерживает замену текста html <p th:utext="${htmlcontent}">conten</p>
th:object Замена объекта <div th:object="${session.user}">
th:value уступка имущества <input th:value="${user.name}" />
th:with операция присваивания переменной <div th:with="isEven=${prodStat.count}%2==0"></div>
th:style задать стиль th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"
th:onclick событие щелчка th:onclick="'getCollect()'"
th:each уступка имущества tr th:each="user,userStat:${users}">
th:if Анализ условий <a th:if="${userId == collect.userId}" >
th:unless Вопреки суждению <a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
th:href адрес ссылки <a th:href="@{/login}" th:unless=${session.user != null}>Login</a> />
th:switch Использование мультиплексирования с th:case <div th:switch="${user.role}">
th:case th: ветвь переключателя <p th:case="'admin'">User is an administrator</p>
th:fragment Теги макета, определите фрагмент кода для удобства ссылки в другом месте <div th:fragment="alert">
th:include Теги макета, замена содержимого импортированными файлами <head th:include="layout :: htmlhead" th:with="title='xx'"></head> />
th:replace Теги макета, заменяющие весь тег в импортированном файле <div th:replace="fragments/header :: title"></div>
th:selected выбранное поле выбора th:selected="(${xxx.id} == ${configObj.dd})"
th:src Введение адреса класса изображения <img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />
th:inline Определить скрипт js может использовать переменную <script type="text/javascript" th:inline="javascript">
th:action адрес отправки формы <form action="subscribe.html" th:action="@{/subscribe}">
th:remove удалить атрибут <tr th:remove="all">1.all: удалить содержащий тег и все дочерние элементы. 2.body: не содержит маркера для удаления, но удаляет все его дочерние элементы. 3.tag: содержит удаление тега, но не удаляет его дочерние элементы. 4. все, кроме первого: удалить всех дочерних элементов, содержащих метку, кроме первого. 5.none: ничего не делать. Это значение полезно для динамической оценки.
th:attr Установите атрибуты тега, несколько атрибутов могут быть разделены запятыми Напримерth:attr="src=@{/image/aa.jpg},title=#{logo}", этот тег не очень элегантный и обычно используется реже.

3. Тест

Запустите текущий проект и откройте браузер, чтобы получить доступ к пути:http://localhost:8080/hello, результат следующий:

5. Примеры кода

Пример кода — Гитхаб

Пример кода — Gitee

6. Ссылка

«Подробное объяснение использования Thymeleaf»

Категории