Spring Boot 集成 Thymeleaf 模板引擎

小猪橘橘

于 2023-07-24 20:07:09 发布

阅读量65

点赞数

分类专栏： Spring Boot 文章标签： spring boot 后端 java

本文链接：https://blog.csdn.net/qq_54556370/article/details/131903965

版权

Spring Boot 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

认识Thymeleaf

Thymeleaf 是适用于 Web 和独立环境的现代服务器端 Java 模板引擎，其主要目标是为开发工作流程带来优雅的自然模板，既可以在浏览器中正确显示的 HTML，也可以用作静态原型，从而在开发团队中实现更强大的协作。

与传统的 JSP 不同，Thymeleaf可以使用浏览器直接打开，因为可以忽略掉拓展属性，相当于打开原生页面，给前端人员也带来一定的便利。

在本地环境或者有网络的环境下，Thymeleaf 均可运行。由于 thymeleaf 支持 html 原型，也支持在 html标签里增加额外的属性来达到【模板+数据】的展示方式，所以美工可以直接在浏览器中查看页面效果，当服务启动后，也可以让后台开发人员查看带数据的动态页面效果。

<div class="ui right aligned basic segment">
<div class="ui orange basic label" th:text="${blog.flag}">静态原创信息</div>
</div>
<h2 class="ui center aligned header" th:text="${blog.title}">这是静态标题</h2>

例如：在静态页面时会展示静态信息，当服务启动后，动态获取数据库中的数据后，就可以展示动态数据，th:text 标签是用来动态替换文本的。该例子说明浏览器解释 html 时会忽略 html 中未定义的标签属性，比如 th:text，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示数据。

Thymeleaf的使用

1.导入依赖

在 Spring Boot 中使用 thymeleaf 模板需要引入依赖，可以在创建项目工程时勾选 Thymeleaf，也可以创建之后再手动导入。

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

在 html 页面上如果要使用 thymeleaf 模板，需要在页面标签中引入 th 命名空间:

<html xmlns:th="http://www.thymeleaf.org">

2 Thymeleaf 配置

需要注意的是，Thymeleaf 默认是开启页面缓存的，所以在开发的时候，需要关闭这个页面缓存。如果有缓存，就会导致页面没法及时看到更新后的效果。比如修改了一个文件，已经 update 到 tomcat 了，但刷新页面还是之前的页面，就是因为缓存引起的

spring:
    thymeleaf:
        cache: false #关闭缓存

访问静态页面

Spring Boot中会自动识别模板目录 templates/下的文件。例如在 templates/目录下新建一个 error 文件夹，专门放置错误的 html 页面，然后分别打印些信息。例如404.html 和 500.html。

html页面：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>这是 404 页面</body>
</html>

controller

@Controller
@RequestMapping("/thymeleaf")
public class ThymeleafController {
@RequestMapping("/test404")
public String test404() {
    return "index";
}
@RequestMapping("/test500")
public String test500() {
    int i = 1 / 0;
    return "index";
}
}

当在浏览器中输入 localhost:8080/thymeleaf/test400 时，如果故意输入错误，就会找不到对应的方法，就会跳转到404.html 显示。当在浏览器中输入localhost:8088/thymeleaf/test505时，会抛出异常，然后会自动跳转到 500.html 显示。

注意：在 Controlle 层上都是使用的@RestController 注解，自动会把返回的数据转成 json 格式。但是在使用模板引擎时Controller 层就不能用@RestController 注解了，因为在使用 thymeleaf 模板时，返回的是视图文件名，比如上面的 Controller 中是返回到 index.html 页面，如果使用@RestController 的话，会把 index 当作 String 解析了，直接返回到页面了，而不是去找 index.html 页面，所以在使用模板时要用@Controller 注解。

Thymeleaf 中处理对象

@GetMapping("/getBlogger")
    public String getBlogger(Model model) {
        Blogger blogger = new Blogger(1L, "小明", "123456");
        model.addAttribute("blogger", blogger);
        return "blogger";
    }

先初始化一个 Blogger 对象，然后将该对象放到 Model 中，然后返回到 blogger.html 页面去渲染。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博主信息</title>
</head>
<body>
<form action="" th:object="${blogger}" >
    用户编号：<input name="id" th:value="${blogger.id}"/><br>
    用户姓名：<input type="text" name="username" th:value="${blogger.getName()}" /><br>
    登陆密码：<input type="text" name="password" th:value="*{pass}" />
</form>
</body>
</html>

Thymeleaf 中处理 List

@GetMapping("/getList")
    public String getList(Model model) {
        Blogger blogger1 = new Blogger(1L, "小明, "123456");
        Blogger blogger2 = new Blogger(2L, "小红", "123456");
        List<Blogger> list = new ArrayList<>();
        list.add(blogger1);
        list.add(blogger2);
        model.addAttribute("list", list);
        return "list";
    }

处理 List 和处理对象差不多，但是需要在 thymeleaf 中进行遍历。

写一个 list.html 来获取该 list 信息，然后在 list.html 中遍历这个 list:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博主信息</title>
</head>
<body>
<form action="" th:each="blogger : ${list}" >
    用户编号：<input name="id" th:value="${blogger.id}"/><br>
    用户姓名：<input type="text" name="password" th:value="${blogger.name}"/><br>
    登录密码：<input type="text" name="username" th:value="${blogger.getPass()}"/>
</form>
</body>
</html>

和处理单个对象信息差不多，Thymeleaf 使用 th:each 进行遍历，表单里面可以直接使用 ${对象.属性名}来获取list 中对象的属性值，也可以使用$ {对象.get 方法}来获取，这点和处理对象信息是一样的，但是不能使用*{属性名}来获取对象中的属性，thymeleaf 模板获取不到。