Thymeleaf学习笔记

繁星依月

已于 2024-01-29 23:07:35 修改

阅读量476

点赞数 7

分类专栏：开发技术学习笔记文章标签：学习笔记 Thymeleaf

于 2024-01-20 21:50:46 首次发布

本文链接：https://blog.csdn.net/Ding_Yifan/article/details/135722541

版权

开发技术学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了Thymeleaf模板引擎的基本使用，包括动态标签的渲染、SpringMVC整合、基础配置、数据绑定、遍历和条件语句等，帮助读者快速上手Thymeleaf并理解其实现原理。

摘要由CSDN通过智能技术生成

Thymeleaf学习笔记

模板引擎Thymeleaf快速入门

一、Thymeleaf前言

Thymeleaf是动静分离的，页面中的动态标签是需要传递参数的时候才会渲染，不然就是原本默认的静态的样子。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title th:text="${title}">默认的标题</title>
        // 这里的标签（标题）是一个动态的标签，当传递了title数据，页面就会渲染这个标签；不然按默认显示
	</head>
	<body>
	</body>
</html>

二、Thymeleaf基础使用

在application.yml文件中

sever:
	port:0001
spring:
	thymeleaf:
		cache:false
		// 开发过程中关闭，上线时打开

thymeleaf模板

<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
    
</html>

单例：前端（index.html）

<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
	<title th:text="${title}">默认的title</title>
    <meta th:content="${description}" name="description" content="默认的description">
    <meta th:content="${keywords}" name="keywords" content="默认的keywords">
</head>
</html>

单例：后端（IndexController.java）. 控制器（spring MVC）

@Controller
public class IndexController{
    @GetMapping("/index")
    public Stirng index(Model model){
        				// model 用来给页面追加数据
        model.addAttribute("title","传递的title");
        				// 参数 + 参数值
        model.addAttribute("description","传递的description");
        model.addAttribute("keywords","传递的keywords");
        return "index";
    }
}

补充*1：如果我想在传递的值上加上一定的字符串，应该怎么做呢？

	<title th:text="'某某字符串-' + ${title}">默认的title</title>
or
	<title th:text="|某某字符串 - ${title}|">默认的title</title>

三、Thymeleaf常用方法

给页面看的对象

UserVO.java

@Data
public class UserVO{
    private String username;
    private Integer age;
    private Integer sex;
    private Boolean isVIP;
    private Date createTime;
    private List<String> tags;
}

IndexController.java

@Controller
public class IndexController{
    @GetMapping("/index")
    public Stirng index(Model model){
        				// model 用来给页面追加数据
        model.addAttribute("title","传递的title");
        				// 参数 + 参数值
        return "index";
    }
    
    @GetMapping("/basicTrain")
    public Stirng basicTrain(Model model){
        UserVO userVO = new UserVO();
        
        userVO.setUsername("lookroot");
        userVO.setAge(22);
        userVO.setIsVIP(true);
        userVO.setCreateTime(new Date());
        userVO.setSex(1);
        userVO.setTags(Arrays.asList("PHP","Node","Java"));
        
        model.addAttribute("user",userVO());
        
        return "basic";
    }
    
}

basic.html

<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
</head>
    
<body>
    <div>
       	<p th:text="${user.username}"></p>
    	<p th:text="${user.age}"></p> 
    </div>
    
    <div th:object="${user}">
        <p th:text="*{username}"></p>
    	<p th:text="*{age}"></p>
    </div>
    
	<!--th:if-->
    <!--通过布尔值决定元素是否要渲染出来-->
    <p th:if="${user.isVIP}">会员</p>
    <p th:if="${!user.isVIP}">会员</p>
    
    <!--th:each-->
    <!--迭代数据-->
    <ul>
        <li th:each="tag:${user.tags}" th:text="${user.tag}"></li> <!--开始循环-->
    </ul>
    
    <!--th:switch-->
    <!--选择语句-->
    <div th:switch="${user.sex}">
        <p th:case="1">男</p>
        <p th:case="2">女</p>
        <p th:case="*">默认</p> <!--defalut-->
    </div>
    
</body>

</html>

附：Cez的Thymeleaf笔记

Thymeleaf模板引擎

使用thymeleaf，只需要导入对应的依赖，将html放在templates目录下

ThymeleafProperties源码：

public class ThymeleafProperties {
    private static final Charset DEFAULT_ENCODING;
    public static final String DEFAULT_PREFIX = "classpath:/templates/";
    public static final String DEFAULT_SUFFIX = ".html";

<!--引入thymeleaf依赖-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

在HTML中导入约束

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

所有的HTML元素都可以被thymeleaf接管 th:元素名

Thymeleaf遍历

//在控制器中
Model model 
houses={......};
model.addAttribute("house",houses);

<tr th:each="house : ${houses}">
    <td th:text="${house.getHouse_id()}"></td>
    <td th:text="${house.getHouse_address()}"></td>
    <td th:text="${house.getHouse_host_name()}"></td>
    <td th:text="${house.getHouse_price()}"></td>
</tr>