Thymeleaf的使用

前言

由于钉钉机器人发送Markdown消息手机部不支持table格式显示（pc端支持table格式显示），打算使用thymeleaf显示信息。因为thymeleaf是 Spring boot推荐的引擎模版，站在巨人的肩膀上！如果您有更好的推荐，先谢谢您！

什么是thymeleaf

在官网中有这么一条介绍：

Thymeleaf is a modern server-side Java template engine for both web and standalone environments.

直译过来是：Thymeleaf是一个现代的服务器端Java模板引擎，适用于web和独立环境

模版引擎

Web 开发中的模板引擎是一种工具，用于将动态数据与预定义的 HTML 或其他页面模板结合，生成最终的网页内容。这些模板引擎允许开发者在服务器端或客户端创建动态网页，而不用手动拼接 HTML 字符串。

比如，我们收到的录取通知书，就是一个固定的模板，只有姓名、学院、专业是动态的，其余的都是静态的。

动静分离

图中红线箭头是动态访问，步骤如下：

访问相应的地址：/dispatch/index
Model 是 Spring MVC 中的一个接口，用来在控制器中处理数据，并将数据传递给视图层，
将名为 "name"、"age" 的属性分别设置为 "张三"、“20”。
把数据传入给，“index.html” 模版中。
网络访问的时候，会去寻找th:text标签进行替换。
最终显示：张三、20

绿色箭头是静态访问：步骤如下：

在resources目录下启动了http-server。
在浏览器中访问（.../temolates/index.html），看到th:text标签 “我”不认识，但是不影响我显示。
最终显示：李四(我是离线数据)、8(我是离线数据)。

简单实用

引入

在pom.xml中添加以下依赖：

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

在application文件中添加配置

如图：

配置内容如下：

默认thymeleaf.cache是为true的。表示会启用模板缓存，为了在开发中出现一些没必要的麻烦，设置为：false，禁用缓存，在每次启动请求时，都会重新解析和加载模板。

创建对象

为了更好的显示，创建一个对象

public class Student {
    String name;
    List<String> courses;

    public Student(String name, List<String> courses) {
        this.name = name;
        this.courses = courses;
    }

    public List<String> getCourses() {
        return courses;
    }

    public void setCourses(List<String> courses) {
        this.courses = courses;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

创建Controller

@Controller: 标识这个类是一个控制器（Controller）。
@RequestMapping("dispatch"): 一个类级别的注解，指定该控制器处理的基础 URL。
@GetMapping("students")：处理GET请求，并映射到 /dispatch/students URL。
Model 对象用于在控制器和视图之间传递数据。


@Controller
@RequestMapping("dispatch")
public class DispatchController {
    @GetMapping("students")
    public String getStudents(Model model) {
        List<Student> students = new ArrayList<>();
        students.add(new Student("张三", Arrays.asList("数学", "英语", "物理")));
        students.add(new Student("李四", Arrays.asList("化学", "生物", "历史")));
        students.add(new Student("王五", Arrays.asList("地理", "政治", "语文")));

        // 将数据添加到模型中
        model.addAttribute("students", students);
        return "students";
    }
}

创建模版

需要在resources文件下创建templates文件夹，在templates文件夹中创建模版，因为项目启动的时候会先默认的在resources -〉templates 下寻找模版。如图：

students.html 模版

xmlns:th="http://www.thymeleaf.org" 必须携带。它告诉浏览器和 Thymeleaf 模板引擎，任何带有 th: 前缀的属性（如 th:text、th:each 等）都是 Thymeleaf 特定的属性，而不是标准的 HTML 属性。

th:each，用于循环遍历集合或数组。
th:text，用来动态设置元素文本内容的属性。
${...} 变量表达式，用于动态获取和显示控制器传递到视图中的变量。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>学生列表</title>
</head>
<body>
<h1>学生列表</h1>
<table border="1">
    <thead>
    <tr>
        <th>姓名</th>
        <th>课程</th>
    </tr>
    </thead>
    <tbody>
<tr th:each="student : ${students}">
    <td th:text="${student.name}"></td>
    <td>
        <ul>
            <li th:each="course : ${student.courses}" th:text="${course}"></li>
        </ul>
    </td>
</tr>
    </tbody>
</table>
</body>
</html>

最终效果

当后台启动后：访问：http://localhost:8080/dispatch/students，会得到如下效果：

遇到的问题

@Controller 和 @RestController

使用@RestController 作为控制器，当访问 http://localhost:8080/dispatch/students，返回的事一个字符串，而不是我对应的模板。

使用@Controller，才是返回的模板信息。

Controller

用于定义一个普通的 Spring MVC 控制器。这个控制器通常用于返回视图（HTML 页面），比如我们前面的模板。

@RestController

是 @Controller 和 @ResponseBody 的组合注解。用于定义一个 RESTful 控制器，返回的结果直接是数据（通常是 JSON 或 XML），而不是视图模板。

所以：

返回 HTML 页面或视图的 Web 应用程序，使用 @Controller
返回 JSON 或 XML 数据的 RESTful API，使用 @RestController

总结

由于当前功能只需要这些知识内容。目前先学到这，等后面在需要，继续学习。
上面只是Thymelea的冰山一角，如果你想学习更多内容，请前往官网。

参考

https://www.thymeleaf.org/
https://developer.aliyun.com/article/769977#comment

Thymeleaf的使用

前言

什么是thymeleaf

模版引擎

动静分离

简单实用

引入

在application文件中添加配置

创建对象

创建Controller

创建模版

students.html 模版

最终效果

遇到的问题

@Controller 和 @RestController

Controller

@RestController

总结

参考

zZ_jie

引用和评论

SpringBoot实践设计模式———装饰者模式

腾讯新闻中心首页改版啦

前端开发工具

在Java程序中监听mysql的binlog

Jerry和您聊聊Chrome开发者工具

Bitmap 和布隆过滤器傻傻分不清？你这不应该啊

面向企业级前端应用的开发框架 UI5 的发展简史介绍

Thymeleaf的使用

前言

什么是thymeleaf

模版引擎

动静分离

简单实用

引入

在application文件中添加配置

创建对象

创建Controller

创建模版

students.html 模版

最终效果

遇到的问题

@Controller 和 @RestController

Controller

@RestController

总结

参考

zZ_jie

引用和评论

SpringBoot实践设计模式———装饰者模式

腾讯新闻中心首页改版啦

前端开发工具

在Java程序中监听mysql的binlog

Jerry和您聊聊Chrome开发者工具

Bitmap 和 布隆过滤器傻傻分不清？你这不应该啊

面向企业级前端应用的开发框架 UI5 的发展简史介绍

Bitmap 和布隆过滤器傻傻分不清？你这不应该啊