thymeleaf使用

最新推荐文章于 2024-04-21 17:11:08 发布

原创最新推荐文章于 2024-04-21 17:11:08 发布 · 403 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#springboot #thymeleaf

thymeleaf 专栏收录该内容

1 篇文章

订阅专栏

基于maven管理springboot项目配置
在pom.xml文件添加thymeleaf的依赖

<!-- 模板引擎 Thymeleaf 依赖 -->
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

启用thymeleaf模版引擎
application.properties文件中加入配置：

#thymeleaf配置
#指定国际化文件
#spring.messages.basename=templates/home
# Enable template caching.
spring.thymeleaf.cache=true
# Check that the template exists before rendering it.
spring.thymeleaf.check-template=true
# Check that the templates location exists.
spring.thymeleaf.check-template-location=true
# Enable Thymeleaf view resolution for Web frameworks.
spring.thymeleaf.enabled=true
# Template files encoding.
spring.thymeleaf.encoding=UTF-8
# Comma-separated list of view names that should be excluded from resolution.
#spring.thymeleaf.excluded-view-names=
# Template mode to be applied to templates. See also StandardTemplateModeHandlers.
spring.thymeleaf.mode=HTML
# Prefix that gets prepended to view names when building a URL.
spring.thymeleaf.prefix=classpath:/templates/
# Maximum size of data buffers used for writing to the response, in bytes.
#spring.thymeleaf.reactive.max-chunk-size=
# Media types supported by the view technology.
#spring.thymeleaf.reactive.media-types=
# Content-Type value written to HTTP responses.
spring.thymeleaf.servlet.content-type=text/html
# Suffix that gets appended to view names when building a URL.
spring.thymeleaf.suffix=.html
# Order of the template resolver in the chain.
# spring.thymeleaf.template-resolver-order=
# Comma-separated list of view names that can be resolved.
# spring.thymeleaf.view-names=

页面引入thymeleaf

thymeleaf命名空间

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

thymeleaf标签使用的两种形式

1.无需引入th命名空间，html5支持的自定义属性
data-th-text形式 :<div data-th-text="${title}"></div>  
2.需引入命名空间  
th:text形式 :<div data-th-text="${title}"></div>

thymeleaf语法

th:text 文本显示

<div th:text="${title}">hello world</div>

可以在标签中使用运算符+, -, *, /, %：

运算符：<div th:text="'1 + 1 =' + ${number} * 2 "></div>

thymeleaf表达式

${} 变量表达式：引用页面中的变量，同EL表达式中的$ {}作用一样；

<div th:text="${title}"></div>

#{} 消息表达式（文字国际化表达式）：用来引用国际化资源文件中的文字信息；
如home.properties:

home.welcome=this messages is from home.properties!

home_zh_CN.properties:

home.welcome=来自于home.properties消息

Note：配置国际化资源文件时，一定要建立默认的XX.properties文件，再建立各个区域下的XX_zh_CN.properties文件；

使用消息表达式引用文字：

<div th:text="#{home.welcome}"></div>

使用消息表达式时，经常出现的错误??home.welcome_zh_CN??
网上提供的解决方案：
第一种：在thymeleaf页面中引入：

<link rel="stylesheet" type="text/css" media="all" href="../../css/gtvg.css" th:href="@{/css/gtvg.css}" />

引入css文件夹下的gtvg.css，不过发现没有这个文件，尝试这种解决方式发现没有效果
第二种：
在application.properties文件中加入一条配置：
#指定国际化文件位置
spring.messages.basename=templates/home
亲测有效，加入配置运行成功；

*{} 选择表达式 :选择上文中对象的属性

<div th:object="${user}">
	<span th:text="*{name}">
	</span>
</div>

@{} 链接表达式:链接的书写

链接表达式:
1. 相对当前路径
<a th:href="@{../static/js/test.js}"></a> => http://localhost:8080/static/js/test.js
2. 相对服务器
<a th:href="@{~/static/js/test.js}"></a> => http://localhost:8080/static/js/test.js
3. 相对协议路径
<a th:href="@{//static/js/test.js}"></a> => static/js/test.js
4. 绝对路径
<a th:href="@{http://localhost:8080/static/js/test.js}"></a> => http://localhost:8080/static/js/test.js

分段表达式
footer.html

<!-- footer页面中定义碎片footer_fragment -->
<span th:fragment="footer_fragment">
    &copy;2019 sdongwan
</span>

其他页面引用footer页面中的碎片

th:insert方式

<div th:insert="~{footer::footer_fragment}">
	测试insert碎片
</div>

效果等同于：

<div>
	<span th:fragment="footer_fragment">
			&copy;2019 sdongwan
	</span>
</div>

th:replace方式

<!-- 其他页面引用footer页面中的碎片-->
<div th:replace="~{footer::footer_fragment}">
	测试replace碎片
</div>

效果等同于：

<span th:fragment="footer_fragment">
		&copy;2019 sdongwan
</span>

th:include方式

<div th:include="~{footer::footer_fragment}">
	测试include碎片
</div>

效果等同于：

<div>
	&copy;2019 sdongwan
</div>

note:注意一下三者的区别；

条件判断

if 判断

<div th:if="${user.name} == 'sdongwan'">
	user.name =sdongwan
</div>
<div th:unless="${user.name} == 'sdongwan'">
	user.name != sdongwan
</div>

等同于java里面：

if () {
	...
} else {
	...
}

note:if满足了，对应条件下的unless下的标签不会显示

2.switch判断

<div th:switch="${user.gender}">
	<div th:case="'girl'">user is a girl</div>
	<div th:case="'boy'">user is a boy</div>
	<div th:case="'*'">user's gender is unknown</div>
</div>

note:前面的case执行了，后面的case就不会显示出来

比较判断
大于(> or gt),
小于(< or lt),
大于等于(>= or ge) ,
小于等于(<= or le),
等于(== or eq) ,
不等于(!= or ne)

<div th:if="${user.name} eq 'sdongwan'">
	user.name = sdongwan
</div>

note：比较表达式建议使用gt,lt…这种写法,使用>,<…在html中容易与标签混淆；

迭代器

<div th:each="user : ${userList}" th:text="${user.name}">
</div>

效果：

<div>name0</div>
<div>name1</div>
<div>name2</div>

类似于java中for each循环：

for(User user : userList) {

}

th:attr 设置属性值

<a th:attr="href=@{~/static/js/test.js}">
		设置任意属性(内置属性和自定义属性)值
</a>

html标签内置的属性可以直接使用下面这种写法：

<a th:href="@{~/static/js/test.js}">
	设置内置属性值
</a>

thymeleaf 内置表达式

<div th:text="${#ctx.#locale}"></div>
<div th:text="${#ctx.#request}"></div>
<div th:text="${#ctx.#response}"></div>
<div th:text="${#session}"></div>
<div th:text="${#dates.createNow()}"></div>

thymeleaf 3.0 官方使用手册：usingthymeleaf