spring boot使用thymeleaf模板的方法详解

下面为您提供《Spring Boot使用Thymeleaf模板的方法详解》的完整攻略。

1. Thymeleaf简介

Thymeleaf是一种现代的服务器端Java模板引擎，可以构建HTML、XML、JavaScript、CSS或文本输出。它旨在与Spring框架完全集成，但可以用于处理任何Web和非Web应用程序开发的模板需要。

2. Spring Boot中如何使用Thymeleaf模板

2.1 引入Thymeleaf依赖

在Spring Boot中使用Thymeleaf必须要引入相关的依赖。可以在项目的pom.xml中加入如下代码：

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

2.2 配置Thymeleaf视图解析器

在Spring Boot的配置文件application.properties中加入如下代码：

spring.thymeleaf.enabled=true
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.mode=HTML5
spring.thymeleaf.cache=false

其中，prefix表示Thymeleaf模板文件存放的位置，suffix表示模板文件的后缀名，encoding表示编码格式，mode表示HTML模式，cache表示是否缓存模板。

2.3 创建Thymeleaf模板文件

在classpath:/templates/目录下创建一个名为“index.html”的Thymeleaf模板文件。代码如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Spring Boot Thymeleaf</title>
</head>
<body>
    <h1>Hello, Thymeleaf!</h1>
    <p th:text="'Current time: ' + ${#dates.format(now(),'yyyy-MM-dd HH:mm:ss')}" />
</body>
</html>

2.4 创建Controller处理请求

创建一个Controller，用于处理请求并返回Thymeleaf模板页面。代码如下：

@Controller
public class ThymeleafController {

    @GetMapping("/thymeleaf")
    public String thymeleaf(Model model) {
        model.addAttribute("now", new Date());
        return "index";
    }
}

在以上代码中，@GetMapping注解表示处理GET请求，thymeleaf方法内的model对象用于向Thymeleaf模板传递数据，return "index"表示返回名为“index”的Thymeleaf模板。

2.5 启动应用程序并测试

在浏览器中输入http://localhost:8080/thymeleaf地址，应该可以看到类似如下的页面：

Hello, Thymeleaf!
Current time: 2022-07-29 14:15:36

以上就是使用Thymeleaf模板的Spring Boot应用程序的完整流程。

3. Thymeleaf中的常用语法

Thymeleaf中的语法十分灵活，以下是几种常见的语法：

3.1 基本语法

<span th:text="${user.name}">Username</span>

在以上代码中，${user.name}是一个表达式，表示从model中获取user对象的name属性。

3.2 条件判断

<div th:if="${user.isAdmin}">
    <span>Welcome, Admin!</span>
</div>

在以上代码中，${user.isAdmin}是一个表达式，表示user对象是否是管理员，如果是，则显示欢迎语句。

3.3 循环遍历

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

在以上代码中，${items}是一个表达式，表示要遍历的列表，具体的每个元素都用item表示。

4. 示例说明

下面通过两个示例来讲解如何使用Thymeleaf模板：

4.1 示例一：展示学生列表

创建一个名为“students.html”的Thymeleaf模板文件，用于展示学生列表。代码如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Student List</title>
</head>
<body>
    <h1>Student List</h1>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>
                <th>Gender</th>
                <th>Address</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="student : ${students}">
                <td th:text="${student.id}">0</td>
                <td th:text="${student.name}">Name</td>
                <td th:text="${student.age}">0</td>
                <td th:text="${student.gender}">Male</td>
                <td th:text="${student.address}">Address</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

创建一个名为“Student”的Java Bean，代码如下：

public class Student {
    private Long id;
    private String name;
    private Integer age;
    private String gender;
    private String address;
    // getter and setter
}

创建一个Controller，代码如下：

@Controller
public class StudentController {
    @GetMapping("/students")
    public String students(Model model) {
        List<Student> students = new ArrayList<>();
        students.add(new Student(1L, "Tom", 18, "Male", "Beijing"));
        students.add(new Student(2L, "Jerry", 20, "Female", "Shanghai"));
        students.add(new Student(3L, "Mike", 22, "Male", "Guangzhou"));
        model.addAttribute("students", students);
        return "students";
    }
}

在以上代码中，students方法向模型中添加了一个名为“students”的属性，值为Student对象列表。返回值为名为“students”的Thymeleaf模板。

启动应用程序，访问http://localhost:8080/students，应该可以看到如下页面：

Student List

ID  Name    Age Gender  Address
1   Tom 18  Male    Beijing
2   Jerry   20  Female  Shanghai
3   Mike    22  Male    Guangzhou

4.2 示例二：表单提交

创建一个名为“form.html”的Thymeleaf模板文件，用于展示并处理表单提交。代码如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Form Submission</title>
</head>
<body>
    <h1>Form Submission</h1>
    <form method="post" th:object="${user}">
        <div>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" th:value="*{name}" />
        </div>
        <div>
            <label for="age">Age:</label>
            <input type="text" id="age" name="age" th:value="*{age}" />
        </div>
        <div>
            <button type="submit">Submit</button>
        </div>
    </form>
</body>
</html>

创建一个名为“User”的Java Bean，代码如下：

public class User {
    private String name;
    private Integer age;
    // getter and setter
}

创建一个Controller，用于展示和处理表单提交，代码如下：

@Controller
public class UserController {
    @GetMapping("/form")
    public String form(Model model) {
        model.addAttribute("user", new User());
        return "form";
    }

    @PostMapping("/form")
    public String submit(@ModelAttribute User user, Model model) {
        model.addAttribute("user", user);
        return "result";
    }
}

在以上代码中，form方法向模型中添加了一个名为“user”的属性，值为一个新的空User对象。返回值为名为“form”的Thymeleaf模板。

submit方法使用@ModelAttribute注解来直接绑定表单提交的数据到User对象中，然后将User对象添加到模型中，返回名为“result”的Thymeleaf模板。

创建一个名为“result.html”的Thymeleaf模板文件，展示表单提交结果，代码如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Form Submission Result</title>
</head>
<body>
    <h1>Form Submission Result</h1>
    <ul>
        <li>Name: <span th:text="${user.name}">-</span></li>
        <li>Age: <span th:text="${user.age}">-</span></li>
    </ul>
    <a href="/form">Back to Form</a>
</body>
</html>

启动应用程序，访问http://localhost:8080/form，应该可以看到一个表单页面，输入一些信息，然后点击Submit按钮即可。

提交成功后，应该可以看到内容为刚才提交的用户信息的页面。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：spring boot使用thymeleaf模板的方法详解 - Python技术站