thymeleaf学习

最新推荐文章于 2024-03-26 11:53:48 发布

instanceof.

最新推荐文章于 2024-03-26 11:53:48 发布

阅读量240

点赞数

分类专栏： springboot

本文链接：https://blog.csdn.net/qq_44804494/article/details/103814385

版权

springboot 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

thymeleaf学习

理解

Thymeleaf是面向Web和独立环境的现代服务器端Java模板引擎，能够处理HTML，XML，JavaScript，CSS甚至纯文本。类似于jsp。
可以处理六种模板，每种模板称为模板模式：
【有两种标记模板模式（HTML和XML），三个文本模板模式（TEXT，JAVASCRIPT和CSS）和无操作模板模式（RAW）。】

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

pom.xml

这我们在建项目的时候需要在moven中的pom.xml配置中要加 thymeleaf 依赖

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

因为springboot中所有相关配置都是配置好了的，如果你想要改变thymelaf的版本，那么就在pom.xml中加上如下配置
这里举例说明的是修改版本到3.0以上

<properties>
     <thymeleaf.version>3.0.2.RELEASE</thymeleaf.version>
     <thymeleaf-layout-dialect.version>2.0.4</thymeleaf-layout-dialect.version>
</properties>

application.yml

application.yml 设置 thyemleaf，Thymeleaf缓存在开发过程中，是不行的，那么就要在开发的时候把缓存关闭
在 resource/templates下面创建用来存放我们的html页面

# 配置数据源
spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/sbt?useUnicode=true&characterEncoding=utf8
    username: root
    password: 154355

###############################################
# thymeleaf 相关设置
  thymeleaf:
    prefix: classpath:/templates/
    cache: false
    suffix: .html
    encoding: UTF-8
    content-type: text/html
# spring.thymeleaf.mode的默认值是HTML5，其实是一个很严格的检查，
# 改为LEGACYHTML5可以得到一个可能更友好亲切的格式要求。
# LEGACYHTML5需要搭配一个额外的库NekoHTML才可用
#   <dependency>
#     <groupId>net.sourceforge.nekohtml</groupId>
#     <artifactId>nekohtml</artifactId>
#     <version>1.9.15</version>
#   </dependency>

    mode: LEGACYHTML5
    
# 设置端口号    
server:
   port: 8080
   
###############################################

#开MYBATIS日志打印 修改level及包名级别为debug 设置日志保存目录
logging:
  level:
    net.vv2.baby.mapper: DEBUG
  file: var/log/myapp.log

.html

然后再者就是在静态页面中要要引入th标签

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

thymeleaf常用语法

1、th:text ：
设置当前元素的文本内容，相同功能的还有th:utext，两者的区别在于前者不会转义html标签，后者会。优先级不高：order=7
Eg:

	<h3 th:text="${msg}"></h3>

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

	<input type="text" name="content" th:value="${context}">

3、th:insert：
代码块引入，类似的还有th:replace，th:include，三者的区别较大，若使用不恰当会破坏html结构，常用于公共代码块提取的场景。优先级最高：order=1

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

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

<form action="/user/updateUser" method="post"  th:object="${userEnt}" >
		<input type="hidden" name="userId" th:field="*{userId}" >
		<input type="text" name="userName" th:field="*{userName}" >
</form>

等价于：

<form action="/user/updateUser" method="post" >
		<input type="hidden" name="userId" th:value="${userEnt.userId}" >
		<input type="text" name="userName" th:value="${userEnt.userName}" >
</form>

5、th:attr：
修改任意属性，实际开发中用的较少，因为有丰富的其他th属性帮忙，类似的还有th:attrappend，th:attrprepend。优先级一般：order=5
任何属性值，语法格式：th:attr=“属性名=属性值,[属性名=属性值]”
属性值如果是使用表达式的话：通常有URL表达式@{}和变量表达式${}
Eg：

	<form th:attr="action=@{/user/updateUser}" >....< /form>				//也可以直接使用th:action                 
	<img th:attr="src=@{/image/baby.jpg},title=#{logo},alt=#{logo}" />  	//可直接使用th:src  
	<input th:attr="value=#{subscribe.submit}"	/>						    //可直接使用th:value        
	<input type="checkbox" name="active" th:attr="checked=${user.active}"/>

6、 @{…} ：
链接表达式
Eg：

	 <img th:src="@{/image/baby.jpg}" width="300" height="150"/>

类似于th:scr、th:href
Eg：th:href中带参数跳转

	<a  th:href="@{/user/delUser/{userId}(userId=${user.userId})}" >删除</a>

7、${name}：获取变量值
Eg：

	<h1> [ [ ${name} ] ]</h1>
		或者
	<h1 th:text="${name}"></h1>

这里顺便提一哈字符拼接

	<span th:text=" '欢迎：' + ${user.name} + '用户来访!'">
		或者
	<span th:text="|欢迎：, ${user.name} 用户来访!|">

8、th:if 和 th:unless
th:if和th:unless属性进行条件判断，th:unless于th:if恰好相反，只有表达式中的条件不成立，才会显示其内容。优先级较高：order=3

	<h1  th:if="${msg==null}">显示</h1>
	
	<h1  th:unless="${msg ==null}">不显示</h1>

三元判断

	 <h1 th:if=" '2'=='2' ? true :false ">显示</h1> 
 	 <h1 th:if=" '1'=='2' ? true :false ">不显示</h1>
 	 /*
 	 *上面的意思就是：前面的‘2’是否等于后面的“2” 如果为true 则显示数据，反之不显示数据
 	 *下面的意思就是：前面的‘2’是否等于后面的“2” 如果为 true 则输出 ‘正确’ 反之输出 ‘错误’
 	 */
 	 <h1 th:text=" '2'=='2' ? '正确' :'错误' "></h1>
 	 <h1 th:text=" '1'=='2' ? '正确' :'错误' "></h1>

9、th:each循环
遍历循环元素，和th:text或th:value一起使用。优先级很高：order=2
Eg：

	<tr th:each="user:${userList}">
    		<td th:text="${user.userId}"></td>
    		<td th:text="${user.userSex}"></td>
    		<td th:text="${user.userAge}"></td>
	 </tr>

10、th:switch循环
默认default 可以用 * 表示
Eg：

	<div th:switch="1">	
 			<h1 th:case="'1'">1</h1>
 			<h1 th:case="'2'">2</h1>
 			<h1 th:case="*">default </h1>
 	</div>
 	当 th:switch="1"   这里只会显示 “1” ，其他不显示
 	如果 th:switch="6" 这里只会显示 “default ” ，其他不显示

thymeleaf遇到的功能技巧

thymeleaf表单赋值，默认选择单选按钮、下拉菜单
Eg：

<form action="/user/updateUser" method="post"  th:object="${userEnt}" >
		<input type="hidden" name="userId" th:field="*{userId}" >
		<input type="text" name="userName" th:field="*{userName}" >
	男：<input type="radio" name="userSex"  th:value="男" th:field="*{userSex}">
	女：<input type="radio" name="userSex" th:value="女" th:field="*{userSex}" >
	身份：
		<select name="userPd"  >
			<option value="管理员"  th:selected="*{userPd} =='管理员' ? true :false" >管理员</option>
			<option value="普通用户" th:selected="*{userPd}==('普通用户') ? true :false">普通用户</option>
		</select>
		<input type="submit" value="save">
	</form>

a 标签请求并携带多个参数
Eg：

<a th:if="${pageModel.start>0}" 
   th:href="@{/user/selUserAll(start=${pageModel.start-1},content=${pageModel.mapContent.context})}">上一页</a>
   /*
    *当是当前页数是第一页的时候显示下面，反之显示上面
    */
<a th:unless="${pageModel.start>0}">上一页</a>