荐 带你了解Thymeleaf
文章目录
1、简单了解Thymeleaf
Thymeleaf简单的说,是一种模板引擎。模板引擎就是把模板文件和数据渲染成HTML显示的一种工具。具体可以看下图。常见的模板引擎有Thymeleaf、Freemarker等,而Spring官方推荐使用的是Thymeleaf这种模板引擎,因为它的渲染效果更好。
其实Thymeleaf与原来的JSP有许多的共同点,同时也有改进的地方。Thymeleaf也是有它自己一套的标签库,使用这些标签库,可以相对简单的从后端渲染页面内容,返回渲染好的页面,而不用选择ajax传递数据使用js来通过前端渲染页面。相对JSP,它更好的地方在于支持HTML5的一些新属性,同时前后端分离的程度也更高。
2、SpringBoot整合Thymeleaf
2.1、导入依赖
修改pom文件导入依赖
<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-thymeleaf -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
<version>2.3.1.RELEASE</version>
</dependency>
2.2、配置.properties文件
properties文件一定要设置,不然Thymeleaf找不到Templates文件下的HTML页面
#设置thymeleaf目录路径
spring.thymeleaf.prefix=classpath:/templates/
#关闭缓存,使修改后页面实时更新
spring.thymeleaf.cache=false
#查找.html结尾的文件
spring.thymeleaf.suffix=.html
#检查路径是否存在
spring.thymeleaf.check-template=true
#模板编码格式为html
spring.thymeleaf.mode=HTML
2.3、配置语法提示
修改HTML页面的html标签,这样使用Thymeleaf标签时就会有语法提示了
<html lang="en" xmlns:th="http://www.thymeleaf.org">
3、Thymeleaf常用语法
3.1、表达式使用
${}表达式:用的最多的表达式,常用于取值。
如现在,我们编写一个controller,通过model传递数据给模版引擎,在HTML页面上通过${}表达式获取传递的数据,渲染到对应的页面位置上。
controller代码
@Controller
public class IndexController {
@RequestMapping("/index")
Object index(Model model){
model.addAttribute("message","欢迎你!");
return "index";
}
}
HTML页面代码
<p th:text="${message}">thymeleaf</p>
通过key-value的获取方式,我们就可以获取message对应的内容,填充p标签中,并且覆盖掉原来的内容。
@{}表达式:通常用于资源地址的获取。使用@{}表达式编写地址时,可以省略当前项目的名称,模板会自动添加项目名称。避免项目名称改变时,导致获取资源失败。
HTML页面代码
<a th:href="@{http://www.baidu.com}">百度</a>
<a th:href="@{/login}">获取登录数据</a>
~{}表达式:通常用于获取一段公用的代码段,也就是代码复用。
例如我把footer页面的代码替换到index页面的div中。
footer.html页面代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:fragment="weibu">我是尾部</div>
</body>
</html>
index.html页面代码
<div th:replace="~{footer::weibu}">替换</div>
3.2、赋值取值
Thymeleaf赋值主要有两种,一种是获取controller传递的数据,另一种是在标签内部局部赋值。第一种赋值可见上面${}表达式的用法。这里介绍使用th:with标签局部赋值的方法。
<div th:with="jia='广东'">
<p th:text="${jia}"></p>
</div>
Thymeleaf取值一般使用${}表达式取值,通过th:text标签渲染到当前标签的内容处。
<p th:text="${message}">thymeleaf</p>
3.3、th常用标签
th:text----------替换标签内容,html标签转义
th:utext--------替换标签内容,html标签不转义
th:*--------------*可以是标签内任意属性,可以替换该属性的属性值
th:insert--------插入页面内容
th:replace------替换页面内容
th:include------只包含页面文字内容
th:each---------遍历对象
th:if--------------条件判断,为真的时候显示
th:unless-------条件判断,为假的时候显示
th:switch-------多选择语句,条件符合的时候显示,通常和th:case连用
th:case---------多选择语句,表示选项
th:with----------定义局部变量
th:onclick------定义点击事件
3.4、th常用内置对象
#request------HttpServletRequest对象
#response----HttpServletResponse对象
#session------HttpSession对象
#param--------获得请求地址栏参数对象
3.5、th常用工具类
#message--------------------消息工具类
#uris---------------------------地址工具类
#conversions----------------对象转换工具类
#dates-------------------------日期时间工具类
#calendars-------------------日历工具类
#numbers--------------------数字工具类
#strings-----------------------字符串工具类
#objects-----------------------对象工具类
#bools-------------------------布尔工具类
#arrays------------------------数组工具类
#lists---------------------------List工具类
#sets---------------------------Set工具类
#maps-------------------------Map工具类
每个工具类的方法就不一一列举了,有兴趣的朋友可以到官网查询具体api。
本文地址:https://blog.csdn.net/hailongcsdn/article/details/107324515