Spring boot 整合 thymeleaf

2023-02-21 / Java SpringBoot Thymeleaf

1. thymeleaf简介

Thymeleaf是一个流行的模板引擎，该模板引擎采用Java语言开发，模板引擎是一个技术名词，是跨领域跨平台的概念，在Java语言体系下有模板引擎，在其他语言下也有模板引擎，除了thymeleaf之外还有Velocity、FreeMarker等模板引擎，功能类似。

Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。使用thymeleaf创建的html模板可以在浏览器里面直接打开（展示静态数据），这有利于前后端分离。需要注意的是thymeleaf不是spring旗下的。

2.1需要添加的依赖

在pom.xml中添加以下依赖，也可以使用idea在创建spring boot 项目的时候勾选thymeleaf

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

2.2 Spring Boot关于Thymeleaf的相关配置

基本的配置

# thymeleaf模板配置
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
# 热部署文件，页面不存在缓存，及时更新
spring.thymeleaf.cahe=false

3、简单的使用Thymeleaf

创建 Java Bean

用户实体存储数据，实现内容就是在控制层进行封装数据通过SpringMVC的ModelAndView进行视图转发至Thymeleaf 引擎模板位置；

/**
 * @author 小生
 */

@Data
public class User {
    private Long id;
    private String name;
    private Integer age;
}

创建 Controller

处理请求然后封装数据，视图，渲染

/**
 * @author 小生
 */
@Controller
public class UserController {

    @GetMapping("/user")
    public String getUsers(Model model) {
        ArrayList<User> userList = new ArrayList<>();
        for (int i = 1; i <= 5; i++) {
            User user = new User();
            user.setId(Long.valueOf(i));
            user.setAge(18);
            user.setName("小生");
            userList.add(user);
        }

        model.addAttribute("users", userList);
        return "user";
    }

}

创建 html 页面

user.html 文件位置在resource/templates/ 下

<!DOCTYPE html>
<!-- 将默认的头 <html lang="en"> 引入thymeleaf -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学习Thymeleaf</title>
</head>
<body>
<table border="1px">
    <tr>
        <th>id</th>
        <th>name</th>
        <th>age</th>
    </tr>
    <tr th:each="user: ${users}">
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
        <td th:text="${user.age}"></td>
    </tr>
</table>
</body>
</html>

启动工程之后输入Controller拦截的地址查看效果展示

标题：Spring boot 整合 thymeleaf
作者：xiaoxin-liang
地址：http://xiaoxin.live/articles/2023/02/21/1676965070071.html