Thymeleaf模板引擎的使用

  • 1.添加依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
  • 2.引入标签库

<html xmlsns:th="http://www.thymeleaf.org">
  • 3.标签库的使用

Thymeleaf模板默认将JS脚本、CSS样式、图片等静态文件放置在src/main/resources/static目录下。
将视图页面放在src/main/resources/templates目录下。

  • 3.1.常见使用
  • 1)引入URL
		<link rel="stylesheet" th:href="@{css/bootstrap.min.css}" />
		<a th:href="@{http://www.baidu.com/}">百度</a>
  • 2)引入图片
		<img  th:src="'images/'+${aBook.picture}" />
  • 3)输出内容
<div th:object = "${session.user}">
<!--fistName为user对象的属性-->
		name:<span th:text=" * {firstName}" ></span><br>
		surname:<span th:text=" * {lastName}" ></span><br>
		nationality:<span th:text=" * {nationnality}" ></span><br>
</div>
  • 4)基本表达式
		<p th:text="#{test.myText}" />
		<!--加粗-->
		<p th:utext="#{test.myText}" />
  • 5)支持+、-、*、/、%等算术运算和>,<,>=,<=,==,!=等各种逻辑运算
   	<tr th:class="( ${row}=='even)?'even':'odd'" >...</tr>
   	<!--加粗-->
   	<p th:utext="#{test.myText}" />
  • 6)条件判断if和unless以及switch
   	 <!--if和unless-->
   	<a href="success.xhtml": th:if="${user!=null}" >成功</a>
   	<a href="success.xhtml": th:unless="${user==null}" >成功</a>
   	<!--switch-->
   	<div th:switch = "${user.role}">
   			<p th:case=" 'admin'" >User is an administrator</p>
   			<p th:case=" 'teacher'" >User is a teacher</p>
   			<p th:case=" '*'" >User is a student</p>
   	</div>
  • 7)循环
<!--1)基本循环-->
<div class="col-md-4 col-sm-6" th:each = "book:${books}">
   	<a href="" >
   		<img th:src="'images/' + ${book.picture}" alt="图书封面" style="height:180px;width:40%;"/>
   	</a>
   	<div class="caption">
   	<h4 th:text=" ${book.bname}" ></h4>
   	<p th:text="${book.author}" ></p>
   	<p th:text="${book.isbn}" ></p>
   	<p th:text="${book.price}" ></p>
   	<p th:text="${book.publishing}" ></p>
   	</div>
</div>
<!--1)循环状态的使用
th: each ="obj, iterStat: ${objList}"
在th: each 标签中可以使用循环状态变量,该变量有如下属性。
index: 当前迭代对象的index(从0开始计数)
count: 当前迭代对象的index(从1开始计数)
size: 迭代对象的大小
current: 当前迭代变量
even/odd: 布尔值,当前循环是否是偶数/奇数(从0开始计数)
first: 布尔值,当前循环是否是第一个
last: 布尔值,当前循环是否是最后一个
实例如下
-->
<div class="col-md-4 col-sm-6" th:each = "book,bookStat:${books}">
   	<a href="" >
   		<img th:src="'images/' + ${book.picture}" alt="图书封面" style="height:180px;width:40%;"/>
   	</a>
   	<div class="caption">
   	<!--1)循环状态bookStat-->
   	<h3 th:text=" ${bookStat.count}" ></h3>
   	<h4 th:text=" ${book.bname}" ></h4>
   	<p th:text="${book.author}" ></p>
   	<p th:text="${book.isbn}" ></p>
   	<p th:text="${book.price}" ></p>
   	<p th:text="${book.publishing}" ></p>
   	</div>
</div>
  • 3.2.内置对象的使用

常见的内置对象如下

  • #dates: 日期格式化的内置对象,为java.util.Date类的方法
  • #calendars: 类似于#dates,为java.util.Calendar类的方法
  • #numbers: 数字格式化的内置对象
  • #strings: 字符串格式化的内置对象
  • #objects: 参照java.lang.Object
  • #bools: 判断boolean的内置对象
  • #arrays: 数组操作的内置对象
  • #lists: 列表操作的内置对象,参照java.util.List
  • #sets: Set操作的的内置对象,参照java.util.Set
  • #maps: Map操作的内置对象,参照java.util.Map
  • #aggregates: 创建数组或集合的聚合的内置对象。
  • #messages: 在变量表达式内部获取外部消息的内置对象。
    假如有如下控制器方法:
    在这里插入图片描述
    html代码如下:
<! DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Insert title here</title>
</head>
<body>
	格式化控制器传递过来的系统时间 
	<span th:text="${#dates.format(nowTime,'yyyy/MM/dd')}"></span><br>
	创建一个日期对象
	<span th:text="${#dates.create(2019,6,13)}"></span><br>
	格式化控制器传递过来的系统日历
	<span th:text="${#calendars.format(nowCalendar,'yyyy-MM-dd')}"></span><br>
	格式化控制器传递过来的BigDecimal对象myMoney:
	<span th:text="${#numbers.formatInteger(myMoney,3)}"></span><br>
	计算控制器传递过来的字符串str的长度:
	<span th:text="${#strings.length(str)}"></span><br>
	返回对象,当控制器传递过来的BigDecimal对象myMoney为空时,返回默认值9999:
	<span th:text="${#objects.nullSafe(myMoney,9999)}"></span><br>
	判断boolean数据是否是false:
	<span th:text="${#bools.isFalse(bool)}"></span><br>
	判断数组mya中是否包含元素5:
	<span th:text="${#arrays.contains(mya,5)}"></span><br>
	排序列表myList1的数据:
	<span th:text="${#lists.sort(myList1)}"></span><br>
	判断集合mySet中是否包含元素set2:
	<span th:text="${#sets.contains(mySet,'set2')}"></span><br>
	判断集合myMap中是否包含key1关键字:
	<span th:text="${#maps.contains(myMap,'key1')}"></span><br>
	将数组mya中的元素求和:
	<span th:text="${#aggregates.sum(mya)}"></span><br>
	将数组mya中的元素求平均:
	<span th:text="${#aggregates.avg(mya)}"></span><br>
	如果未找到消息,则返回默认消息(如“??msgKey_zh_CN??”);
	<span th:text="${#messages.msg(msgKey)}"></span><br>
</body>
</html>
  • 3.3.常用属性
  • 1 th: action类似表单的action
  • 2 th: each类似<c: foreach>
  • 3 th: field常用于表单参数绑定,通常与th: object一起使用
  • 4 th: href超链接使用
  • 5 th: id类似于html中的id
  • 6 th: if用于条件判断
  • 7 th: fragment声明定义该属性的div为模板片段,常用于头文件、页尾文件的引入。
  • 8 th: object用于表单数据对象绑定
  • 9 th: src类似于<script>标签的src属性
  • 10 th: text文本显示
  • 11 th: value用于标签赋值
  • 12 th: style用于修改style标签
  • 13 th: onclick用于修改单击事件
    th: fragment用例如下:
<! DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Insert title here</title>
</head>
<body>
	<!-- 声明片段content-->
	<div th:fragment="content">
	主体内容
	</div>
	<!-- 声明片段copy-->
	<div th:fragment="copy">
	©清华大学出版社
	</div>
</body>
</html>
<!-- 另一个页面-->
<! DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Insert title here</title>
</head>
<body>
测试SpringBoot的Thymeleaf支持<br>
	引入主体内容模板片段:
	<div th:include="footer::content"></div>
	引入版权所有模板片段:
	<div th:replace="footer::copy"></div>
</body>
</html>
  • 8
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值