springboot thymeleaf使用

news/2024/5/9 5:50:21/文章来源:https://blog.csdn.net/weixin_60934893/article/details/128060061

导入依赖

<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>3.0.11.RELEASE</version>
</dependency>
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring5</artifactId>
<version>3.0.11.RELEASE</version>
</dependency>

yml配置

  thymeleaf:mode: HTML   #thymeleaf 的模板模型cache: false  #不适用缓存encoding: UTF-8  #编码prefix: classpath:/templates/  #前缀suffix: .html         #后面

html

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

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>Hello</h1><table cellspacing="0" border="1"><tr><th>ID</th><th>NAME</th><th>AGE</th><th>GENDER</th><th>OPERA</th></tr><tr th:each="user:${users}"><td th:text="${user.id}"></td><td th:text="${user.name}"></td><td th:text="${user.age}"></td><td th:text="${user.gender}"></td><td><button>删除</button><button>编辑</button></td></tr></table></body>
</html>

Thymeleaf模板

4.1 th属性

4.1.1 常用th属性解读

html有的属性，Thymeleaf基本都有，而常用的属性大概有七八个。其中th属性执行的优先级从1~8，数字越低优先

级越高。

一、th:text ：设置当前元素的文本内容，相同功能的还有th:utext，两者的区别在于前者不会转义html标签，后者

会。优先级不高：order=7

二、th:value：设置当前元素的value值，类似修改指定属性的还有th:src，th:href。优先级不高：order=6

三、th:each：遍历循环元素，和th:text或th:value一起使用。注意该属性修饰的标签位置，详细往后看。优先级很

高：order=2

四、th:if：条件判断，类似的还有th:unless，th:switch，th:case。优先级较高：order=3

五、th:insert：代码块引入，类似的还有th:replace，th:include，三者的区别较大，若使用不恰当会破坏html结

构，常用于公共代码块提取的场景。优先级最高：order=1

六、th:fragment：定义代码块，方便被th:insert引用。优先级最低：order=8

七、th:object：声明变量，一般和*{}一起配合使用，达到偷懒的效果。优先级一般：order=4

八、th:attr：修改任意属性，实际开发中用的较少，因为有丰富的其他th属性帮忙，类似的还有th:attrappend，

th:attrprepend。优先级一般：order=5

4.1.2 常用th属性使用

使用Thymeleaf属性需要注意点以下五点：

一、若要使用Thymeleaf语法，首先要声明名称空间：

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

二、设置文本内容 th:text，设置input的值 th:value，循环输出 th:each，条件判断 th:if，插入代码块 th:insert，定

义代码块 th:fragment，声明变量 th:object

三、th:each 的用法需要格外注意，打个比方：如果你要循环一个div中的p标签，则th:each属性必须放在p标签上。

若你将th:each属性放在div上，则循环的是将整个div。

四、变量表达式中提供了很多的内置方法，该内置方法是用#开头，请不要与#{}消息表达式弄混。

五、th:insert，th:replace，th:include 三种插入代码块的效果相似，但区别很大。

pom.xml 引入Thymeleaf的依赖，并确定其版本