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 模板引擎支持多种表达式：

1. 变量表达式：${…}
2. 选择变量表达式：*{…}
3. 链接表达式：@{…}
4. 国际化表达式：#{…}
5. 片段引用表达式：~{…}

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 等。
• ………

  处理日期格式 

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

4.2 th 属性 

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

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

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

<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:unless="${stu.age==20}" th:text="${stu.age}"></td>

五、SpringBoot与Thymeleaf整合

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

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

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

##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文件中编写代码 

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文件中编写代码 

@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模板代码

<!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、启动运行