本文介绍了Thymeleaf的基础知识，包括它是什么、为什么选择Thymeleaf以及如何使用Thymeleaf。Thymeleaf是一个适用于web和独立环境的Java模板引擎，其特点是动静分离，使得页面静态展示和动态数据渲染得以区分。文章详细讲解了Thymeleaf的配置、文件位置、基本语法，如th:text、th:if、th:each等，并展示了如何在SpringBoot项目中使用Thymeleaf。
1、Thymeleaf是什么?
- Thymeleaf是一个现代的服务器端Java模板引擎，适用于web和独立环境，能够处理HTML, XML, JavaScript, CsS甚至纯文本Thymeleaf的主要目标是提供一种优雅且高可维护性的创建模板的方法。
2、为什么选择Thymeleaf?
-
目前Java比较流行的模板引擎有Thymeleaf和Freemarker，Thymeleaf的话更适合当前的人员分工问题，以前的Jsp页面，必须要动态渲染才能看到真实的效果，写页面的和写后端的分工不太明确
Thymeleaf是动静分离的，页面中的动态标签是需要传递有数据的时候才会渲染，不然就是原本默认的静态的样子
3、使用Thymeleaf
-
导入依赖
因为是基于SpringBoot项目开发的，所以可以直接导入Thymeleaf启动器依赖即可
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>导入了Thymeleaf模板引擎依赖后，SpringBoot就会自动的帮我们导入相对应的依赖
例如：thymeleaf-spring5、thymeleaf-extras-java8time、thymeleaf…等,现在都是基于3.x开发
-
Thymeleaf模板引擎长什么样？放在哪？
SpringBoot对Thymeleaf模板引擎写有自动装配功能，对应有一个自动配置类ThymeleafProperties
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JuMqkmxR-1620520584009)(C:\Users\GX\AppData\Roaming\Typora\typora-user-images\image-20210428111849249.png)]
在这里Thymeleaf规定了文件存放的位置，格式，以及字符编码，可想而知Thymeleaf模板引擎被默认规定放在classpath:/templates/目录下，文件格式后缀为html
-
Thymeleaf文件
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>新建的html文件是没有
xmlns:th="http://www.thymeleaf.org"约束的，我们需要加入这个约束，不然无法使用。 -
Thymeleaf语法
-
th:xxx=""用这个th标签，所有的html元素都可以被thymeleaf替换接管。 -
基本语法：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ee3Iozrp-1620520584011)(C:\Users\GX\AppData\Roaming\Typora\typora-user-images\image-20210501093215601.png)]
-
th:text="" 和 文字操作
-
<h1 th:text="${msg}"></h1>给标签内容赋值，相当于jsp中的
<h1>${msg}</h1> -
拼接字符串
<h1 th:text="'gx1----'+${msg}"></h1> <h1 th:text="|gx2----${msg}|"></h1> -
验证Thymeleaf是动静分离
<title th:text="${title}">默认title</title>直接打开页面显示的是
默认title，如果通过控制器则会显示为传递过来的titlie:传递title@RequestMapping("/test") public String test(Model model){ model.addAttribute("title","传递title"); return "test"; }
-
-
-
Thymeleaf常用方法示例
-
示例准备
1、一个实体类对象UserVo、以及get、set、构造、toString方法
public class UserVo { private String userName;//名字 private Integer age;//年龄 private Boolean sex;//性别 private Boolean isVip;//是否vip private List<String> tags;//个人标签 private Date birthday;//生日 }2、一个控制器方法user()
@RequestMapping("/user") public String user(Model model) throws ParseException { UserVo userVo = new UserVo(); userVo.setUserName("小明"); userVo.setAge(19); userVo.setSex(true); userVo.setIsVip(true); userVo.setTags(Arrays.asList("Java","SpringBoot","Thymeleaf")); //创建一个日期 SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd"); Date d = sdf.parse("1999-12-26"); userVo.setBirthday(d); model.addAttribute("user",userVo); return "user"; }3、一个页面user.html
<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>用户信息</title> <link type="text/css" rel="stylesheet" th:href="@{/user.css}"></head><body> <div class="content"> <h3>用户信息</h3> <div class="cont"> <h4>姓名：</h4> <h4>年龄：</h4> <h4>性别：</h4> <h4>会员：</h4> <h4> <span class="tag">标签：</span> </h4> <h4>生日：</h4> </div> </div></body></html> -
获取对象中的内容 th:text=""
方式一：
<span th:text="${user.getUserName()}"></span><!-- 通过 名称.getxxx() 获取--><span th:text="${user.userName}"></span><!-- 通过 名称.属性名称 获取-->方式二：使用
th:object=""创建一个临时变量，再使用getxxx()和属性名称获取<div th:object="${user}"> <span th:text="*{getAge()}"></span><!--这时要使用*{...}（选择变量表达式）获取--> <span th:text="*{age}"></span></div> -
判断语句 th:if=""
判断该标签是否需要显示，可以配合运算符使用
<span th:if="${user.isVip}">svip</span><span th:if="!${user.isVip}">未充值会员</span> -
选择语句 th:switch=""，与th:case=""配合使用
<div th:switch="${user.sex}"> <span th:case="true">男</span> <span th:case="false">女</span> <span th:case="*">未选择</span><!--相当于default--></div> -
遍历语句 th:each=""，可以迭代循环出数据
<ul> <li th:each="tag:${user.tags}" th:text="${tag}"></li></ul> -
url，th:href=""、th:src=""等配合@{…}使用
<!--css--><link type="text/css" rel="stylesheet" th:href="@{/user.css}"><!--js th:inline="javascript"也可以使用原来的type="text/javascript"代替，但会出现不适用,例如用js获取不到值--><script th:inline="javascript" th:src="@{/js/jquery-3.4.1.js}"></script> -
在js和css中获取数据，语法
/*[[${...}]]*/{}{}为自定义值，例如blue<script th:inline="javascript"> var user = /*[[${user}]]*/{}; console.log(user);</script><style th:inline="css"> h4{ color: /*[[${color}]]*/ blue; }</style> -
碎片（组件）
-
创建一个
component.html页面，可以在里面定义多个碎片，使用th:fragment=""定义<div th:fragment="com1"> 碎片一</div><div th:fragment="com2"> 碎片二</div>使用碎片
th:replace=""：会替换掉当前的标签
th:insert=""：不会替换掉当前标签元素，会在下级加入碎片
<!--replace 碎片1--><div th:replace="~{component::com1}"></div><!--insert 碎片2--><div th:insert="~{component::com2}"></div> -
使用碎片不一定要使用
th:fragment=""，也可以使用id,class等<!--用id,class定义碎片--><div id="com3"> 碎片三</div><div class="com4"> 碎片四</div><!--使用碎片--><!--id 碎片3--><div th:replace="~{component::#com3}"></div><!--class 碎片4--><div th:replace="~{component::.com4}"></div> -
碎片也能进行信息交互，不过直接写会找不到这个信息，使用idea的
alt+enter错误修正<!--/*@thymesVar id="user" type="com.gx.vo.UserVo"*/-->错误修正的注释，type需要自己填<div th:fragment="com5"> 碎片五--- 传的的参数：<!--/*@thymesVar id="user" type="com.gx.vo.UserVo"*/--> <span th:text="${user.userName}"></span></div><!--碎片5--><div th:replace="~{component::.com5}"></div>直接传参数：
<div th:fragment="com6(msg)"> 碎片六--- msg：<span th:text="${msg}"></span></div><!--碎片六--><div th:replace="~{component::com6('传递的msg')}"></div>
-
-
还可以使用
#ctx上下文对象、请求会话对象等${#ctx.request}${#ctx.response}${#ctx.session}${#ctx.servletContext}${session.xxx} ${application.xxx} ${#request.getAttribute('xxx')} -
工具类
在thymeleaf里面是可以直接使用一些Java的函数的，例如日期格式化
<span th:text="${#dates.format(user.birthday,'yyyy-MM-dd')}"></span>
-
扫一扫
528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
