ThymeLeaf笔记

最新推荐文章于 2023-05-04 22:36:36 发布

Caretaker9

最新推荐文章于 2023-05-04 22:36:36 发布

阅读量153

点赞数

分类专栏：自学 java 代码注解

本文链接：https://blog.csdn.net/aihidao/article/details/104736068

版权

自学同时被 3 个专栏收录

20 篇文章 2 订阅

订阅专栏

java

5 篇文章 0 订阅

订阅专栏

代码注解

5 篇文章 0 订阅

订阅专栏

##简述
目前学了一半，发现他和jsp是功能重叠的，即实现网页展示数据的逻辑。但是却比jsp有优势，目前发现的是

他是静态的，这意味着前端开发可以随时打开thymeleaf的html文件，对页面进行检查。而jsp不能。
他的include功能在静态模式下依然可以使用。
相比来说感觉thymeleaf页面更简介。【这个不是很重要】

反正学了一半感觉thymeleaf更好用，它可以让前端后端用同样的html代码，来进行开发，这样前后端能够更好的协调工作。

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

##正片
###普通数据传入与显示

/
//Controller .java
/

//String
String htmlContent = "<p style='color:red'> 红色文字</p>";
m.addAttribute("htmlContent", htmlContent);

//Object
Product currentProduct =new Product(5,"product e", 200);
m.addAttribute("currentProduct", currentProduct);




//
//Thymeleaf .html
/

//text 显示原始文本
<p th:text="${htmlContent}" ></p>
//输出和html代码，将显示红色字体
<p th:utext="${htmlContent}" ></p>

//访问对象属性
<div class="showing">
    <h2>显示对象以及对象属性</h2>
    <p th:text="${currentProduct}" ></p>
    <p th:text="${currentProduct.name}" ></p>
    <p th:text="${currentProduct.getName()}" ></p>
</div>
//访问对象属性2
<div class="showing" th:object="${currentProduct}">
    <h2>*{}方式显示属性</h2>
    <p th:text="*{name}" ></p>
</div>

###逻辑控制

#####if的使用

/
//Controller .java
/

//td的逻辑控制
boolean testBoolean = true;
m.addAttribute("testBoolean", testBoolean);

//
//Thymeleaf .html
/

//if逻辑控制
<div class="showing">
	<p th:if="${testBoolean}" >如果为true 则显示</p>
	<p th:if="${not testBoolean}" >如果为false 则显示</p>
</div>

#####输出ObjectList

	<table>
		<thead>
			<tr>
				<td>id</td>
				<td>name</td>
				<td>price</td>
			</tr>
		</thead>
		<tbody>
			<tr th:each="p: ${ps}">
				<td th:text="${p.id}">1</td>
				<td th:text="${p.name}">product 1</td>
				<td th:text="${p.price}">500</td>
			</tr>
		</tbody>
	</table>

这里面可以添加遍历状态变量 status ,他的属性有

ndex 属性, 0 开始的索引值
count 属性, 1 开始的索引值
size 属性, 集合内元素的总量
current 属性, 当前的迭代对象
even/odd 属性, boolean 类型的, 用来判断是否是偶数个还是奇数个
first 属性, boolean 类型, 是否是第一个
last 属性, boolean 类型, 是否是最后一个

注意:在使用的时候一定要在each里面声明

<tr th:class="${status.even}?'even':'odd'" th:each="p,status: ${ps}">

#####放入select 里

<select size="10">
	<option th:each="p:${ps}" th:value="${p.id}" th:selected="${p.id==1}" th:text="${p.name}"></option>
</select>

###页面include
#####引入其他页面片段

<!--假设有一个html名字叫做 includeDemo -->
<html xmlns:th="http://www.thymeleaf.org">
<footer th:fragment="footer1"> 
   <p >All Rights Reserved</p>
</footer>
<footer th:fragment="footer2(start,now)"> 
   <p th:text="|${start} - ${now} All Rights Reserved|"></p>
</footer>
</html>

<!--在主html中引入 includeDemo -->
<div class="showing">
	<div th:replace="includeDemo::footer1"></div>
	<div th:replace="includeDemo::footer2(2015,2018)"></div>
</div>

#####引入其他静态资源

<link rel="stylesheet" type="text/css" media="all" href="../../webapp/static/css/style.css" th:href="@{/static/css/style.css}"/>
<script type="text/javascript" src="../../webapp/static/js/thymeleaf.js" th:src="@{/static/js/thymeleaf.js}"></script>

###内置工具的使用
thymeleaf里有很多工具,这里只记录一个,然后如果需要其他的可以参考
假设这里传入一个 new (Java类 Date

<div class="showing date">
	<p th:text="${now}"></p>
	<p th:text="${#dates.format(now)}"></p>
	<p th:text="${#dates.format(now,'yyyy-MM-dd HH:mm:ss')}"></p>
</div>

###关于链接的使用
使用 @{} 进行转为链接参数的话要写在括号里 eg.

<td><a th:href="@{/editCategory(id=${c.id})}">编辑</a></td>

Caretaker9

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ThymeLeaf笔记

##简述目前学了一半，发现他和jsp是功能重叠的，即实现网页展示数据的逻辑。但是却比jsp有优势，目前发现的是他是静态的，这意味着前端开发可以随时打开thymeleaf的html文件，对页面进行检查。而jsp不能。他的include功能在静态模式下依然可以使用。相比来说感觉thymeleaf页面更简介。【这个不是很重要】反正学了一半感觉thymeleaf更好用，它可以让前端后端用同样...
复制链接

扫一扫