Thymeleaf的使用

头像头饰
zZ_jie
     天津
    阅读 5 分钟
    3

    前言

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

    image.pngimage.png

    什么是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(我是离线数据)。

    image.png

    简单实用

    引入

    在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文件中添加配置

    如图：
    image.png

    配置内容如下：
    image.png

    默认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 下寻找模版。如图：

    image.png

    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，会得到如下效果：

    image.png

    遇到的问题

    @Controller 和 @RestController

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

    image.png

    使用@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

    springbootspring-mvcthymeleafjavahtml
    zZ_jie
    436 声望9 粉丝

    虚心接受问题，砥砺前行。

    « 上一篇
    状态码 406， Not Acceptable, (Spring Boot)
    下一篇 »
    浅谈Java中的锁

    引用和评论

    推荐阅读
    头像
    理解 Reference 和 Instance

    zZ_jie赞 1

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    在Java程序中监听mysql的binlog

    huan1993赞 13阅读 5.1k

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

    程序员小富赞 10阅读 4.5k评论 1

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    头像
    Spring 实现 3 种异步流式接口，干掉接口超时烦恼

    程序员小富赞 6阅读 2.3k

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

    注销赞 5阅读 7.8k

    0 条评论
    得票最新