Thymeleaf入门

1. Thymeleaf概述

Thymeleaf是一个和Velocity、FreeMarker 类似的模板引擎,它在有网络和无网络的环境下皆可运行。因为它支持html原型,在html的标签里增加了额外的属性来达到模板+数据的展示方式。浏览器解释html时会忽略未定义的标签属性,所以thymeleaf的模板可以静态地运行。当有数据返回到页面时,Thymeleaf标签会动态地替换掉静态内容,使页面动态显示。

它与SpringBoot完美结合,SpringBoot提供了Thymeleaf的默认配置,并且为Thymeleaf设置了视图解析器。它可以快速实现表单绑定、属性编辑器、国际化等功能

Thymeleaf官方文档:Tutorial: Using Thymeleafhttps://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

2.在SpringBoot中的配置

2.1引入依赖

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

2.2 配置thymeleaf视图解析器

SpringBoot自动为Thymealf注册了一个视图解析器ThymealfViewResolver,并且配置了模板(HTML)的位置,与JSP类似的前缀+视图名+后缀的风格。我们可以进到它的配置文件(ThymeleafProperties)里去看:

 也可以在application.properties中自定义配置:

#页面修改后立即生效,关闭缓存,立即刷新
spring.thymeleaf.cache=false
#Content-Type 的值(默认值: text/html )
spring.thymeleaf.content-type=text/html
# 模板编码
spring.thymeleaf.encoding=UTF-8
# 在构建 URL 时添加到视图名称前的前缀(默认值: classpath:/templates/ )
spring.thymeleaf.prefix=classpath:/templates/
# 在构建 URL 时添加到视图名称后的后缀(默认值: .html )
spring.thymeleaf.suffix=.html

3.基本使用方法

3.1要在html页面中使用thymeleaf的标签,必须引入名称空间。

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

3.2表达式的使用

  • 简单的表达:
    • 变量表达式:${...}
    • 选择变量表达式:*{...}
    • 消息表达式:#{...}
    • 链接 URL 表达式:@{...}
    • 片段表达式:~{...}
  • 字面量
    • 文本字面量:'one text''Another one!',...
    • 数字文字:0343.012.3,...
    • 布尔文字:true,false
    • 空文字:null
    • 文字标记:onesometextmain,…
  • 文字操作:
    • 字符串连接:+
    • 字面替换:|The name is ${name}|
  • 算术运算:
    • 二元运算符:+-*/,%
    • 减号(一元运算符):-
  • 布尔运算:
    • 二元运算符:and,or
    • 布尔否定(一元运算符)!:,not
  • 比较和平等:
    • 比较器:><>=<=gtltgele)
    • 等式运算符:==!=eqne)
  • 条件运算符:
    • 如果-那么:(if) ? (then)
    • 如果-那么-否则:(if) ? (then) : (else)
    • 默认:(value) ?: (defaultvalue)
  • 特殊代币:
    • 无操作:_

在html页面中,要使用thymealf的标签,只需在原标签名前加th:即可,如th:srcth:hrefth:text
${},变量表达式,它可以获取到Controller层存入Model的值

// html页面中获取并显示
<span th:text="${name}">九月</span>
<span th:text="${user.age}">18</span>

*{},选择变量表达式,可以省略对象名,直接获取属性值

<div th:object="${user}">
	<p th:text="*{name}">九月</p>
	<p th:text="*P{age}">18</p>
</div>

3.3URL的使用

①绝对网址,绝对URL用于创建到其他服务器的链接,需要指定协议名称http或者https,如:

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

②上下文相关URL,即与项目根相关联的URL,这里假设我们的war包为app.war,且没有在tomcat的server.xml配置项目的路径(Context),则在Tomcat启动之后,就会在webapps文件下产生一个app文件夹,此时app就是上下文路径(Context)

<!-- 在页面这样写 -->
<a th:href="@{/blog/search}">跳转</a>
<!-- Thymeleaf解析之后是这样的 -->
<a href="/app/blog/search">跳转</a>

③服务器相关URL,它与上下文路径很相似,它主要用于一个Tomcat下运行有多个项目的情况。比如说我们当前项目为app,如果tomcat还运行着一个otherApp,我们就可以通过该方法访问otherApp的请求路径。

<!-- 在页面这样写 -->
<a th:href="@{~/otherApp/blog/search}">跳转</a>
<!-- Thymeleaf解析之后是这样的 -->
<a href="/otherApp/blog/search">跳转</a>

④有时候我们需要页面带参数传递到后端,则可以使用下面这个方法

<!-- 在页面这样写 -->
<a th:href="@{/blog/search(id=3,blogName='Java')}" >跳转</a>
<!-- Thymeleaf解析之后是这样的,这里忽略项目路径 -->
<a href="/blog/search?id=3&blogName=Java" >跳转</a>

<!-- 还可以这样写,实现restful风格的效果 -->
<a th:href="/blog/{id}/search(id=3&blogName=Java)">跳转</a>
<!-- Thymeleaf解析之后是这样的,这里忽略项目路径 -->
<a href="/blog/3/search?blogName=java">跳转</a>

3.4基本属性

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值