spring boot(四)之thymeleaf使用详解

2023年6月11日上午2:59 • JavaScript

下面我将详细讲解“spring boot(四)之thymeleaf使用详解”的完整攻略。

1. 什么是Thymeleaf

Thymeleaf是一个现代的服务器端Java模板引擎，旨在提供HTML效果的自然模板创建。它旨在生产出可以用浏览器查看的HTML，并且是非常适合web开发人员的，因为Thymeleaf非常适合处理HTML，最小化代码数量并让设计师或开发人员掌握易于理解的模板。

2. Spring Boot 如何集成 Thymeleaf

Spring Boot集成Thymeleaf非常简单，只需要按照以下简单步骤即可：

2.1 添加Thymeleaf依赖项

在POM文件中添加Thymeleaf依赖项：

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

2.2 添加Thymeleaf模板

添加Thymeleaf模板，可以在classpath:/templates/目录下创建html文件或文件夹。

2.3 配置Thymeleaf

在Spring Boot配置文件application.yml中配置Thymeleaf：

spring:
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    encoding: utf-8
    cache: false

2.4 在Controller中使用Thymeleaf

编写Controller，注入模型数据，将接下来要展示用的数据添加到请求属性中，并指定要使用的模板，如下所示：

@Controller
public class UserController {

    @Autowired
    private UserService userService;

    @RequestMapping("/")
    public String index(Model model) {
        List<User> users = userService.getUserList();
        model.addAttribute("users", users);
        return "index";
    }
}

2.5 编写Thymeleaf模板

编写Thymeleaf模板，可以在模板中使用Thymeleaf标记动态展示数据，如下所示：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Spring Boot with Thymeleaf</title>
</head>
<body>
    <h1>User List</h1>
    <table>
        <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="user : ${users}">
            <td th:text="${user.id}"></td>
            <td th:text="${user.name}"></td>
            <td th:text="${user.email}"></td>
        </tr>
        </tbody>
    </table>
</body>
</html>

3. 高级用法

Thymeleaf不仅支持基本的模板语法，还提供了高级功能，例如：

3.1 条件语句

可以使用如下语法进行条件判断：

<div th:if="${flag}">
    Flag is true
</div>

<div th:unless="${flag}">
    Flag is false
</div>

3.2 循环

可以使用如下语法进行循环：

<tr th:each="user : ${users}">
    <td th:text="${user.id}"></td>
    <td th:text="${user.name}"></td>
    <td th:text="${user.email}"></td>
</tr>

3.3 算术

可以使用如下语法进行算术运算：

<div th:text="${num1 + num2}"></div>

3.4 自定义属性

可以使用如下语法定义自定义属性：

<div email="aaa@aaa.com" th:attr="data-email=${email}"></div>

示例1

下面展示一个使用Thymeleaf模板引擎生成实时动态页面的示例代码：

@Controller
public class HelloController {

    @GetMapping("/hello")
    public String hello(@RequestParam(name="name", required=false, defaultValue="World") String name, Model model) {
        model.addAttribute("name", name);
        return "hello";
    }

}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
    <h1>Hello, <span th:text="${name}">Thymeleaf</span>!</h1>
</body>
</html>

在浏览器中输入http://localhost:8080/hello?name=Thymeleaf，即可看到生成的实时动态页面。

示例2

下面展示一个使用Thymeleaf模板引擎生成表格示例代码：

@Controller
public class UserController {

    @Autowired
    private UserService userService;

    @GetMapping("/")
    public String index(Model model) {
        List<User> users = userService.getUserList();
        model.addAttribute("users", users);
        return "index";
    }
}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>User List</title>
</head>
<body>
    <h1>User List</h1>
    <table>
        <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="user : ${users}">
            <td th:text="${user.id}"></td>
            <td th:text="${user.name}"></td>
            <td th:text="${user.email}"></td>
        </tr>
        </tbody>
    </table>
</body>
</html>

在浏览器中输入http://localhost:8080/，即可看到生成的表格页面。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：spring boot(四)之thymeleaf使用详解 - Python技术站