IDEA2023 SpringBoot整合Thymeleaf（四）

一、Thyeleaf 模板引擎

Thymeleaf是一个流行的模板引擎，是基于HTML的，语法应用在HTML标签中。该模板引擎采用java语言开发。

Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。它与 JSP，Velocity，FreeMaker 等模板引擎类似，也可以轻易地与 Spring MVC 等 Web 框架集成。与其它模板引擎相比，Thymeleaf 最大的特点是，即使不启动 Web 应用，也可以直接在浏览器中打开并正确显示模板页面。

二、Thymeleaf 模板引擎特点

动静结合：Thymeleaf 既可以直接使用浏览器打开，查看页面的静态效果，也可以通过 Web 应用程序进行访问，查看动态页面效果。
开箱即用 ：Thymeleaf 提供了 Spring 标准方言以及一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。
多方言支持 ：它提供了 Thymeleaf 标准和 Spring 标准两种方言，可以直接套用模板实现 JSTL、 OGNL 表达式；必要时，开发人员也可以扩展和创建自定义的方言。
与 SpringBoot 完美整合：SpringBoot 为 Thymeleaf 提供了的默认配置，并且还为 Thymeleaf 设置了视图解析器，因此 Thymeleaf 可以与 Spring Boot 完美整合。

Thymeleaf 官方手册：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

Thymeleaf教程（10分钟入门） - C语言中文网

三、Thymeleaf 语法规则

使用 Thymeleaf 之前，在html根元素添加命名空间声明：

xmlns:th="http://www.thymeleaf.org"

四、Thymeleaf 语法分为两类：

标准表达式语法

th 属性

4.1 标准表达式语法

Thymeleaf 模板引擎支持多种表达式：

变量表达式：${...}

选择变量表达式：*{...}

链接表达式：@{...}

国际化表达式：#{...}

片段引用表达式：~{...}

4.1.1变量表达式

使用 ${} 包裹的表达式被称为变量表达式，该表达式具有以下功能：

获取对象的属性和方法

使用内置的基本对象

使用内置的工具对象

① 获取对象的属性和方法

获取 Student 对象的 phoneNumber属性

${stu.phoneNumber}

② 使用内置的基本对象

使用变量表达式还可以使用内置基本对象，获取内置对象的属性，调用内置对象的方法。 Thymeleaf 中常用的内置基本对象如下：

#ctx ：上下文对象；

#vars ：上下文变量；

#locale：上下文的语言环境；

#request：HttpServletRequest 对象（仅在 Web 应用中可用）；

#response：HttpServletResponse 对象（仅在 Web 应用中可用）；

#session：HttpSession 对象（仅在 Web 应用中可用）；

#servletContext：ServletContext 对象（仅在 Web 应用中可用）。

③ 使用内置的工具对象

除了能使用内置的基本对象外，变量表达式还可以使用一些内置的工具对象。

strings：字符串工具对象，常用方法有：equals、equalsIgnoreCase、length、startsWith，contains 和 containsIgnoreCase 等；

bools：布尔工具对象，常用的方法有：isTrue 和 isFalse 等；

arrays：数组工具对象，常用的方法有：toArray、length、isEmpty、contains 和 containsAll 等；

lists/sets：List/Set 集合工具对象，常用的方法有：toList、size、isEmpty、contains、containsAll 和 sort 等；

dates：日期工具对象，常用的方法有：format、year、month、hour 和 createNow 等。

.........

处理日期格式

html 复制代码

${#dates.format(stu.dateOfBirth,'yyyy-MM-dd')}

4.2 th 属性

|----------|------|
| th:style | 设置样式 |

html 复制代码

    <tr th:style="'text-align:center;background:gray;'">

|---------|-------------|
| th:text | 文本替换，转义特殊字符 |

html 复制代码

        <td th:text="${stu.id}"></td>

|---------|-------------------------|
| th:each | 遍历，支持 Iterable、Map、数组等。 |

html 复制代码

   <tr th:each="stu : ${stus}">
        <td th:text="${stu.id}"></td>
        ....
   </tr>

|-------|-----------------|
| th:if | 根据条件判断是否需要展示此标签 |

html 复制代码

<a th:if="${stu.id>5}" href="http://localhost:8888/stu_edit?id=" th:href="@{'/stu_edit?id='+${stu.id}}" th:text="${stu.id}"></a>

|-----------|-----------------------|
| th:unless | 和 th:if 判断相反，满足条件时不显示 |

html 复制代码

        <td th:unless="${stu.age==20}" th:text="${stu.age}"></td>

五、SpringBoot与Thymeleaf整合

1、在pom.xml文件中，导入thymeleaf 模板引擎的依赖

XML 复制代码

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

2、在application.properties文件中配置thymeleaf

XML 复制代码

##Thymeleaf默认设置
#缓存 默认为true,但在开发阶段为了修改立即生效，需设置为false
spring.thymeleaf.cache=false
#模板使用的字符编码格式
spring.thymeleaf.encoding=UTF-8
#模板类型  默认为HTML，模板是html文件
spring.thymeleaf.mode=HTML
#模板视图前缀 默认设置为 classpath:/templates/
spring.thymeleaf.prefix=classpath:/templates/
#模板视图后缀 默认为 .html
spring.thymeleaf.suffix=.html

3、在Controller文件中编写代码

java 复制代码

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

/**
 * @author : HLX
 * @ClassName :ThymeleafController
 * @date : 2024/11/28 10:52
 * @Version :1.0
 * @Description: TODO
 * @modyified By :
 */
@Controller
public class ThymeleafController {
    @GetMapping("/index")
    public String index(Model model) {
        //保存数据到model中，供前端页面使用
        model.addAttribute("msg", "hello thymeleaf");
        //返回视图名称
        return "index";
    }
}

4、在resources/templates目录下创建index.html，引入命名空间

并在index.html文件中编写 thyeleaf模板代码

5、启动运行

六、SpringBoot与Mysql数据库和Thymeleaf整合

1、在Controller文件中编写代码

java 复制代码

@Controller
public class ThymeleafController {
    @Autowired
    private StudentService studentService;

    @GetMapping("/index")
    public String index(Model model) {
        //保存数据到model中，供前端页面使用
        model.addAttribute("msg", "hello thymeleaf");
        //返回视图名称
        return "index";
    }


 @RequestMapping("/all")
    public String  all(Model model) {
        //获取所有学生信息
       List<Student> lists= studentService.findAll();
        //保存数据到model中，供前端页面使用
        model.addAttribute("stus", lists);
        //返回视图名称
        return "all";
    }

}

2、在all.html页面文件中编写 thyeleaf模板代码

html 复制代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style >
        table {
            width: 100%;
            height: 50%;
            border-collapse: collapse;
            text-align: center;
        }
        td {
            border: 1px solid #000;
        }

    </style>
</head>
<body>
<table>
    <tr th:style="'text-align:center;background:gray;'">
        <td>编号</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>邮箱</td>
        <td>电话</td>
        <td>地址</td>
        <td>生日</td>
        <td>入学</td>
    </tr>
    <tr th:each="stu : ${stus}">
        <a th:if="${stu.id>5}" href="http://localhost:8888/stu_edit?id=" th:href="@{'/stu_edit?id='+${stu.id}}" th:text="${stu.id}"></a>
        <td th:text="${stu.id}"></td>
        <td th:text="${stu.name}"></td>
        <td th:text="${stu.age}"></td>
        <td th:text="${stu.gender}"></td>
        <td th:text="${stu.email}"></td>
        <td th:text="${stu.phoneNumber}"></td>
        <td th:text="${stu.address}"></td>
        <td th:text="${#dates.format(stu.dateOfBirth,'yyyy-MM-dd')}"></td>
        <td th:text="${#dates.format(stu.enrollmentDate,'yyyy-MM-dd')}"></td>
    </tr>
</table>
</body>
</html>

3、启动运行