thymeleaf参考手册

一 . thymeleaf认识

参考网址：https://blog.csdn.net/zrk1000/article/details/72667478

1.1 介绍
Thymeleaf是面向Web和独立环境的现代服务器端Java模板引擎，能够处理HTML，XML，JavaScript，CSS甚至纯文本。

Thymeleaf的主要目标是提供一个优雅和高度可维护的创建模板的方式。为了实现这一点，它建立在自然模板的概念上，将其逻辑注入到模板文件中，不会影响模板被用作设计原型。这改善了设计的沟通，弥合了设计和开发团队之间的差距。

Thymeleaf也从一开始就设计了Web标准 – 特别是HTML5 – 允许您创建完全验证的模板，如果这是您需要的。

1.2Themeleaf可处理的模板

可让您处理六种模板，每种模板称为模板模式：【有两种标记模板模式（`HTML`和`XML`），三个文本模板模式（`TEXT`，`JAVASCRIPT`和`CSS`）和无操作模板模式（`RAW`）。】

HTML
XML
TEXT
JAVASCRIPT
CSS
RAW

1.3 其他

完全替代 JSP技术 thymeleaf解析原理： thymeleaf在指定的模式下处理文件之前会首先将文件转换为格式良好的XML文件，而此XML文件仍然是完全有效的HTML5；解析xml方式为SAX，Html页面要求严格格式，一定要有封闭标签：/> 或

二 .简单构建maven项目展示th:标签

1.建立项目

在这里插入图片描述
1.1 导入依赖

<repositories>
		<repository>
			<id>sn</id>
			<name>sn</name>
			<url>https://oss.sonatype.org/content/repositories/releases/</url>
		</repository>
	</repositories>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>1.5.17.RELEASE</version>
	</parent>
	<dependencies>
	<!--spirngboot集成thymeleaf -->
		<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>
	<!-- 指定html的格式 -->
		<dependency>
			<groupId>nekohtml</groupId>
			<artifactId>nekohtml</artifactId>
			<version>1.9.6.2</version>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<version>1.16.18</version>
			<scope>provided</scope>
		</dependency>
	</dependencies>

1.2 添加配置文件 application.properties

# 禁止缓存
spring.thymeleaf.cache=false
# 指定html模板的路径
spring.thymeleaf.prefix=classpath:/static/
server.port=8888 
# 指定html的格式
spring.thymeleaf.mode=LEGACYHTML5

1.3 建立Main方法
在这里插入图片描述

@SpringBootApplication
public class ThyMain {
	public static void main(String[] args) {
		SpringApplication.run(ThyMain.class, args);
	}
}

1.4 我的控制层的方法
在这里插入图片描述

2 . 创建一个html

在这里插入图片描述

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

</body>
</html>

注意注意、这里会碰到你的第一个坑： xmlns:th=“http://www.thymeleaf.org”
加上这一句，会让html 中的标签必须严格规范，标签必须闭合，即<div />技术或者</div>类似结束

不过在上面构建项目的时候已经加了指定了html格式的依赖和配置，所以这里即时不关闭，也可以

2.2. th:标签

网址：https://blog.csdn.net/zrk1000/article/details/72667478

2.3 . 表达式语法

th:text 与 th:utext

<!-- th：text 会进行转译 -->
<!-- th:utext  不会进行转译 -->
<div th:text="并不欢迎">欢迎光临</div>
<div th:utext="'<font color=yellow>并不欢迎</font>'">欢迎光临</div>

注意,这里有个坑：'<font color=yellow>并不欢迎</font>'这里一定要加单引号

*{} ：选择变量表达式

在控制层的方法里面添加数据

Map<String, String> map = new HashMap<String, String>();
map.put("name", "张三");
map.put("id", "1");
model.addAttribute("map",map);

html代码

<tr th:object="${map}">
    	<td th:text="*{name}"></td>
    	<td th:text="*{id}"></td>
</tr>

访问浏览器,查看效果

张三	1

@{}: 链接 URL 表达式

html代码

<a href="module.html" th:href="@{https://www.baidu.com}">这里可能有个百度</a>

<a href="https://www.baidu.com" th:href="@{module.html}">view</a>

变量,字符连接,算数运算,真假运算,比较运算,条件运算
字符连接:+ 、|…|
算数运算：+, -, *, /, %
真假运算：and , or、! , not
比较运算：>, <, >=, <= (gt, lt, ge, le)、== , != ( eq , ne )
th:each 循环

在控制层的方法里面添加数据

Map<String, String> map = new HashMap<String, String>();
map.put("name", "张三");
map.put("id", "1");
Map<String, String> map1 = new HashMap<String, String>();
map.put("id", "2");
map1.put("name", "李四");
Set<Map<String, String>> set = new HashSet();
set.add(map);
set.add(map1);
model.addAttribute("set",set);

html代码

<!-- th:style="${index.odd}?'color:red':'color:yellow'"  : 设置斑马线 -->
 <tr th:each="value , index: ${set}" th:style="${index.odd}?'color:red':'color:yellow'">
   	<td th:text="${value}">Onions</td>
    	<td th:text="${index}">Onions</td>
</tr>

访问浏览器,查看效果

{name=李四, id=2}	{index = 0, count = 1, size = 2, current = {name=李四, id=2}}
{name=张三, id=1}	{index = 1, count = 2, size = 2, current = {name=张三, id=1}}

判断

html代码

<!-- switch -->
	<tr th:switch="${map.name}">
	    <td th:case="'张三'">Onions</td>
	    <td th:case="'李四'">Onions</td>
	</tr>

<!-- if语句 -->
	<tr th:if="${map.name}=='张三'">
	    <td >张三</td>
	    <td >进来了</td>
	</tr>
	<tr th:if="${map.name}!='张三'">
	    <td >李四</td>
	    <td >进来了</td>
	</tr>

访问浏览器,查看效果

Onions
张三	进来了

不同的作用域中

在控制层的方法里面添加数据

request.getSession().setAttribute("hello", "hello");

html代码

<div th:text="${session.hello}"></div>

结果

hello

调用方法
html代码

<div th:text="${set.size()}"></div>
<div th:text="${set.toString()}"></div>

结果

2
[{name=李四, id=2}, {name=张三, id=1}]

模板
增加一个html.文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<font th:fragment="copy" size="60px">我是一个小模块，我被包含了</font>
</body>
</html>

然后在idx.html中添加

<!-- 模板布局 -->
<!--  th:include:指html文件名 -->
<div th:include="module :: copy" style="font-size:50px"></div>

结果

我是一个小模块，我被包含了

其他的看网址：https://blog.csdn.net/zrk1000/article/details/72667478

原文链接：https://blog.csdn.net/wufewu/article/details/84872539

标签云

近期文章

分类

thymeleaf参考手册

相关文章