springboot的Web开发学习笔记1.2—thymeleaf

最新推荐文章于 2022-07-10 18:14:39 发布

这是一个小号_

最新推荐文章于 2022-07-10 18:14:39 发布

阅读量609

点赞数

本文链接：https://blog.csdn.net/kcp28/article/details/84791247

版权

SpringBoot建议使用HTML来完成动态页面。SpringBoot官方推荐使用Thymeleaf模板引擎来完成动态页面。

Thymeleaf 可以支持纯HTML浏览器展现，它可以完全替代 JSP 。

一. Thymeleaf的使用

1.项目中引入Thymeleaf相关依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2.在ThymeleafProperties类中设置了Thymeleaf的默认设置，但项目中可以在application.properties中修改Thymeleaf的默认设置：

spring.thymeleaf.mode=HTML5
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
#开发时关闭缓存,不然没法看到实时页面
spring.thymeleaf.cache=false

3.在html文件中，以如下的方式改写html标签：

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

二.thymeleaf的语法

1.thymeleaf代码大多写在html的标签中，以 "th:" 开头，可以当成标签属性来渲染标签。下面是一些以th:开头的thymeleaf语法。

1)显示文本

th:text ——显示文本，即要在浏览器上显示的文字信息。

字符串操作

thymeleaf支持用 ‘ + ’进行字符串拼接：

<span th:text="'hello '+${user.name}+'!'">

或

<span th:text="|hello,${user.name}!|"

当标签的值中同时含有字符串和对象时,要用|.....|，注意|......|中这能有${...},不能含其他常量、条件表达式等。

2)访问对象

request域对象：${对象名}、${对象名.属性}

session域对象：${session.对象名}、${session.对象名.属性}

常与th:text一起用，用来在页面显示对象信息。

<p th:text="${music.id}"></p>
<!--music为对象名，id为对象的属性-->

上述代码中，p标签的内容就是music.id

当对象中不含属性，或不需要访问属性值时，可不加".属性"，即${对象名}即可。

3）引用URL

@{URL}

常与th:href一起用。

th:href——和html的href属性作用相似，用来引入URL，常用在a标签。如：

<a th:href="@{http://www.baidu.com}">百度</a>

当路径中包含对象时，要在路径两段加 " |...| ",如：

<a th:href="@{|/musicList/${music.name}|}"

如果url需要传参可以这样写：

th:href="@{/product/comments(prodId=${prod.id})}"

4）运算符

在表达式中，可以运用各类算数运算符（+、-、*、/、% 等）以及逻辑运算符（>、<、<=、>=、==、!= 等）注意 > 、 < 要用转义字符（ > > 、< < 、 >= ≥ 、 <= ≤ ）。

5）条件判断

进行条件判断时，常需要和上述运算符一起使用。

th:if——条件判断，当if的条件成立时显示标签的内容。

th:unless——条件判断，只有unless的条件不成立时显示标签内容。

<!--当条件成立时执行-->
<span th:text="1" th:if="${user != null}">

<!--当条件不成立时执行-->
<span th:text="2" th:unless="${user != null}">

注意：thymeleaf中没有else!!!

th:switch&th:case——多路选择结构，*表示默认default，放最后。

<div th:switch="${role}">
    <p th:case="'admin'">Administrator</p>
    <p th:case="'user'">User</p>
    <p th:case="*">Other</p><!--*表示默认default-->
</div>

6)循环

th:each:用于迭代循环，迭代循环对象是集合（List、Map）或数组等，语法如下：

th:each="obj,iterStat:${objList}"

obj为迭代的当前对象，objList是要迭代的集合或数组

iterStat称作状态变量，含有以下属性：

index:当前迭代对象的下标（从0开始）

count:当前迭代对象是第几个（从1开始）

size:迭代集合的大小

current：当前迭代变量

even/odd:布尔值，当前循环是否是偶数/奇数(从0开始)

first：布尔值，当前循环是否是第一个

last:布尔值，当前循环是否是最后一个

7）内置对象

Thylemeaf提供了许多内置对象，可以通过#直接访问：

#dates:日期格式化内置对象，具体方法参照java.util.Date

#calendars:具体方法参照java.util.Calendar

#numbers:数字格式化

#strings：字符串格式化，具体方法参照java.lang.String

#objects:具体参照java.lang.Object

#bools:判断boolean类型的工具

#arrays:数组操作的工具

#lists：具体方法参照java.util.List

#sets:操作Set,具体方法参照java.util.Set

#maps:操作Map,具体方法参照java.util.Map

#aggregates:操作数组或集合的工具

#message:操作消息的工具

8）定义、引用片段

th:fragment:定义要被引用的片段

th:insert、th:replace:引用片段（th:include也可以，但Thymeleaf3.0不推荐使用）

<!--定义引用片段-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <body>

    <div th:fragment="copy">
      &copy; 2011 The Good Thymes Virtual Grocery
    </div>
 
  </body>
</html>

<!--引用片段-->
<body>
  ...

  <div th:insert="~{footer :: copy}"></div>

<!--不加~{}也行，上述代码等价于
    <div th:insert="footer :: copy"></div>
-->
  
</body>

>具体语法：

~{templatename::selector} 引入指定模板的指定部分
~{templatename} 引入整个模板文件
~{::selector}或~{this::selector} 相同模板的指定部分

不用th:fragment定义被引用片段也是可以的：

<!--给被引用片段加id-->
<div id="copy-section">
  &copy; 2011 The Good Thymes Virtual Grocery
</div>


<!--引用片段-->
<body>
  ...
                          <!--被引用片段的id-->
  <div th:insert="~{footer :: #copy-section}"></div>
</body>

th:insert、th:replace、th:include的区别：

<!--定义被引入模板-->
<footer th:fragment="copy">
  &copy; 2011 The Good Thymes Virtual Grocery
</footer>

<!--引入-->
<body>
  ...

  <div th:insert="footer :: copy"></div>

  <div th:replace="footer :: copy"></div>

  <div th:include="footer :: copy"></div>
</body>

<!--引入结果-->
<body>
  ...

<!--th:insert引入结果-->
  <div>
    <footer>
      &copy; 2011 The Good Thymes Virtual Grocery
    </footer>
  </div>

<!--th:replace引入结果-->
  <footer>
    &copy; 2011 The Good Thymes Virtual Grocery
  </footer>

<!--th:include引入结果-->
  <div>
    &copy; 2011 The Good Thymes Virtual Grocery
  </div>
  
</body>

9)其他

th:with 定义变量

th:src 相当于src属性

th:style 相当于style属性，用于定义css样式

th:value 相当于value属性

th:hidden 相当于hidden属性，用于标签显示和隐藏，th:hidden="true"隐藏、th:hidden=“false”显示

th:onlick 相等于onlick，定义点击事件

更多Thymeleaf语法等信息参见Thymeleaf官方文档

附：上述Thymeleaf语法的一个综合应用：

<tbody class="text-center">
	<tr>
        <td id="currentPage" th:text="${dataList.number}+1" th:hidden="true"></td>
		<td id="totalPage" th:text="${dataList.totalPages}" th:hidden="true"></td>                
        </tr>
	<tr th:each="music,list:${musics}">
		<td th:text="${list.count}" class="musicIndex">序号</td>
		<td th:text=${music.id}>编号</td>
		<td th:text="${music.musicName}">名称</td>
								 	
		<td th:text="${music.style}">风格</td>
		<td th:if="${#strings.length(music.singer) le 4 }" th:text="${music.singer}">歌手</td>
		<td th:if="${#strings.length(music.singer) gt 4 }" th:text="${#strings.substring(music.singer,0,4)+'…'}">歌手</td>
		<td th:text="${music.clickNum}" th:style="'color:'+(${music.clickNum}>=100?'red':'blue')">点击量</td>
		<!-- th:style="'color:'+(${book.price}>=100?'red':'blue')" style="color:red" th:text="${book.price}" -->
		<td><a th:href="@{|/music/delete/${music.id}|}" class="btn btn-primary">删除 </a></td>
	</tr>
</tbody>

这是一个小号_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
springboot的Web开发学习笔记1.2—thymeleaf

SpringBoot建议使用HTML来完成动态页面。SpringBoot官方推荐使用Thymeleaf模板引擎来完成动态页面。Thymeleaf 可以支持纯HTML浏览器展现，它可以完全替代 JSP 。一. Thymeleaf的使用1.项目中引入Thymeleaf相关依赖：<dependency> <groupId>org.springframe...
复制链接

扫一扫