半颗白菜

文档

前端

Thymeleaf

Thymeleaf是一个流行的Java服务器端模板引擎，可用于构建Web应用程序。它的设计理念是将模板和Java代码分离，使得开发人员能够更轻松地开发和维护Web应用程序。Thymeleaf的模板语法是HTML5兼容的，使得开发人员可以直接在模板中使用标准的HTML标签和属性。同时，它还支持常用的表达式语言，如Spring EL、OGNL、MVEL等。

以下是Thymeleaf的一些主要特点：

自然的模板语法：模板语法清晰简洁，类似于自然语言，易于阅读和编写。
支持多种模板类型：支持HTML，还支持XML、JavaScript、CSS等多种模板类型。
强大的表达式语言：支持多种表达式语言，如Spring EL、OGNL、MVEL等，使得模板中的表达式更加强大和灵活。
可扩展性：支持自定义标签和属性，使得开发人员能够扩展和定制模板语法，满足不同的需求。
与Spring框架集成：是Spring框架的一部分，与Spring MVC、Spring Boot等框架集成得非常紧密，可以更方便地使用Spring的功能。

在spingboot项目中使用thymeleaf

添加依赖

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

application.properties文件中配置相关属性

# 模板文件的前缀和后缀
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
# 开发模式下，关闭模板缓存
spring.thymeleaf.cache=false

创建模板文件

在src/main/resources/templates目录下创建模板文件，例如index.html。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf Example</title>
</head>
<body>
    <h1 th:text="${message}"></h1>
</body>
</html>

在Controller中使用Thymeleaf：在Controller中处理请求，将数据传递给模板，例如：

@Controller
public class HomeController {

    @GetMapping("/")
    public String index(Model model) {
        model.addAttribute("message", "Hello, Thymeleaf!");
        return "index";
    }
}

访问 http://localhost:8080 可以看到 Hello, Thymeleaf!

常用的Thymeleaf语法

变量表达式：使用${}语法可以输出变量的值，例如：
```
<h1 th:text="${title}">Default Title</h1>
```

选择器表达式：使用*{}语法可以选择一个对象的属性，例如：

<div th:object="${user}">
    <p>Name: <span th:text="*{name}"></span></p>
    <p>Email: <span th:text="*{email}"></span></p>
</div>

事件表达式：使用@{}语法可以生成URL或表单action，例如：

<a th:href="@{/user/{id}(id=${userId})}">User Profile</a>
<form th:action="@{/submitForm}" method="post">

迭代器表达式：使用th:each指令可以遍历集合，例如：

<ul>
    <li th:each="item : ${items}" th:text="${item}"></li>
</ul>

条件表达式：使用th:if、th:unless、th:switch等指令可以进行条件判断，例如：

<p th:if="${isAuthenticated}">Welcome, ${username}!</p>
<p th:unless="${isAuthenticated}">Please login to access this page.</p>
<div th:switch="${dayOfWeek}">
    <p th:case="'MONDAY'">Today is Monday.</p>
    <p th:case="'TUESDAY'">Today is Tuesday.</p>
    <p th:case="'WEDNESDAY'">Today is Wednesday.</p>
    <p th:case="*">Today is some other day.</p>
</div>

属性操作：使用th:attr指令可以设置HTML属性，例如：

<input th:attr="data-id=${userId}" type="hidden" name="id" value="${userId}" />
<a th:attrappend="href=${'#' + section}">Go to Section</a>

片段替换：使用th:replace、th:insert、th:include等指令可以在页面中插入片段，例如：

<div th:replace="fragments/header :: logo"></div>
<div th:insert="fragments/sidebar :: menu"></div>
<div th:include="fragments/footer :: copyright"></div>

Css实现水平垂直居中的实现方案 Vue.js基础