文章目录
✈️Thymeleaf介绍
首先,先贴一个官网地址,Thymeleaf官网:https://www.thymeleaf.org/
Thymeleaf 是什么?
官网:Thymeleaf is a modern server-side Java template engine for both web and standalone environments.
翻译:Thymeleaf 是一个现代的服务器端Java模板引擎,适用于web和独立环境。
HTML templates written in Thymeleaf still look and work like HTML, letting the actual templates that are run in yourapplication keep working as useful design artifacts.
用Thymeleaf编写的HTML模板的外观和工作方式仍然类似HTML,让运行在您的应用程序中的实际模板继续作为有用的设计工件工作。
Thymeleaf 是一个 XML/XHTML/HTML5 模板引擎,可用于 Web 与非 Web 环境中的应用开发。它是一个开源的 Java 库,基于 Apache License 2.0 许可,由 Daniel Fernández 创建。
Thymeleaf 提供了一个用于整合 Spring MVC 的可选模块,在应用开发中,你可以使用 Thymeleaf 来完全代替 JSP,或其他模板引擎,如 Velocity、FreeMarker 等。Thymeleaf 的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式,因此也可以用作静态建模。你可以使用它创建经过验证的 XML 与 HTML 模板。相对于编写逻辑或代码,开发者只需将标签属性添加到模板中即可。
✈️为什么选择thymeleaf
- 静态html嵌入标签属性,浏览器可以直接打开模板文件
- 非常适合前后端的独立开发
- SpringBoot官方推荐的模板
💬举个栗子
th:text="${msg}"
是一个动态标签,当传递了msg这个数据,页面就会渲染这个标签,如果没有传递这个参数,就会显示原本的网页结构。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p th:text="${msg}"></p>
</body>
</html>
✈️Thymeleaf简单表达式
- 变量表达式::${…}
- 选择变量表达式:*{…}
- 消息表达式:#{…}
- 链接表达式:@{…}
- 片段表达式:~{…}
✈️Thymeleaf的常用属性
属性 | 作用 |
---|---|
th:text | 文本的显示,其值会替换html中指定标签的值 |
th:utext | 支持html的文本显示 |
th:value | 给属性赋值 |
th:object | 用于设置选定对象 |
th:if | 条件判断,可以和th:unless 配合使用 |
th:switch | 选择判断,需要配合th:case 使用 |
th:each | 循环迭代 |
th:href | 设置链接地址 |
接下来分别详细介绍一下这几种属性的使用方式;
💬准备
创建一个springboot项目,然后添加依赖文件
pom.xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
在使用 Thymeleaf 之前,首先要在页面的 html 标签中声明名称空间。
xmlns:th="http://www.thymeleaf.org"
💬th:text、th:utext
th:text
创建一个控制器方法,将信息传输给页面
@Controller
public class ThymeleafController {
@GetMapping("/index")
public String index(Model model){
model.addAttribute("msg","Hello Thymeleaf!!!");
return "index";
}
}
创建一个html页面用来接收显示信息
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p th:text="${msg}"></p>
</body>
</html>
当然我们也可以通过右击鼠标或Ctrl+U
查看一下网页源码,可以看到这里是把表达式的值直接放在了标签里面!
如果你想把传输到页面的数据通过html标签的方式加粗或着其他操作,就需要使用th:utext
来显示文本!!!
格式如下:
model.addAttribute("msg","<b>欢迎访问Thymeleaf</b>");
th:utext
<p th:utext="${msg}"></p>
扩展:拼接字符串
<!--方式一:-->
<p th:text="${msg}+官网"></p>
<!--方式二:-->
<p th:text="|${msg}官网|"></p>
💬th:object
创建一个对象
@Data
public class People {
private String name;
private Integer age;
private Integer sex;
private Boolean isVip;
private Date createTime;
private List<String> tags;
}
新建一个方法,将people对象传给页面
@Controller
public class ThymeleafController {
@GetMapping("/index")
public String index(Model model){
People people = new People();
people.setName("Thymeleaf");
people.setAge(20);
people.setSex(1); // 1表示男 2表示女
people.setIsVip(true);
people.setCreateTime(new Date());
people.setTags(Arrays.asList("Java","Go","Vue"));
model.addAttribute("people",people);
return "index";
}
}
现在,如果让你把people对象的所有信息显示到页面上你会怎么做?
我们刚才学习了th:text
,所以你可能会像下面这样的方式来显示!
<p th:text="${people.name}"></p>
<p th:text="${people.age}"></p>
<p th:text="${people.sex}"></p>
<p th:text="${people.isVip}"></p>
<p th:text="${people.createTime}"></p>
<p th:text="${people.tags}"></p>
这么写有问题吗?No problem!但这不是最好的方式,下面再来看一种新的方式,它的格式是这样的:
th:object
<div th:object="${people}">
<p th:text="*{name}"></p>
<p th:text="*{age}"></p>
<p th:text="*{sex}"></p>
<p th:text="*{isVip}"></p>
<p th:text="*{createTime}"></p>
<p th:text="*{tags}"></p>
</div>
这种方式用到了thymeleaf为我们提供的th:object
属性以及变量表达式*{...}
💬th:value
比如设置文本框的内容为people的name
<input type="text" th:value="${people.name}">
💬th:if、th:unless
- th:if:控制标签是否显示,if表达式的值为 true 则显示,否则不显示;
- th:unless:与th:if相反,表达式为fakse时显示,反之,不显示。
th:if
<div th:if="${true}">显示</div>
<!--th:if="${false}" 此时就不会生成这个div标签-->
举个栗子: 判断people是否为会员,是,就在页面显示VIP,不是则不显示。
<div th:if="${people.isVip}">VIP</div>
我们在这里传参时people.setIsVip(true);
传的参数为true,下面看效果:
th:unless
<div th:unless="${true}">不显示</div>
💬th:switch、th:case
people的sex为1则显示男,2 则显示女,*则显示保密。使用方式如下:
<div th:switch="${people.sex}">
<p th:case="1">男</p>
<p th:case="2">女</p>
<p th:case="*">保密</p>
</div>
注意
:* 要放在最后,切记!切记!切记!
💬th:each
th:each
通过循环迭代显示people的tags信息
<ul>
<li th:each="tag:${people.tags}" th:text="${tag}"></li>
</ul>
将当前迭代的最后一个颜色设置为红色
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<ul>
<li th:each="tag,iterStat:${people.tags}"
th:text="${tag}"
th:classappend="${iterStat.last}?active">
</li>
</ul>
</body>
</html>
th:each属性状态变量iterStat
状态变量iterStat包含以下数据:
- index属性,当前迭代索引,从0开始
- count属性,当前迭代索引,从1开始
- size属性,迭代变量中的元素总数
- current属性,每次迭代的iter变量。
- even/odd布尔属性,当前迭代是偶数还是奇数
- first属性,当前迭代是否是第一个,布尔值。
- last布尔属性,当前迭代是否是最后一个,布尔值。
💬th:href
index.css
.app{
height: 100px;
width:100px;
background-color: aqua;
}
通过外链的方式连接index.css文件
<link rel="stylesheet" th:href="@{index.css}">
<a th:href="@{https://www.baidu.com/}">百度一下</a>
✈️内联表达式
[[…]]相当于th:text,即会将HTML代码转义
[(…)]相当于th:utext,不会转义HTML代码
<div>[[${people.age}]]</div>
<div>[(${msg})]</div>
在JavaScript中使用内联表达式
<script th:inline="javascript">
const people= /*[[${people}]]*/{};
console.log(people)
</script>
✈️基本对象
💬#ctx:上下文对象
${#ctx.request}
${#ctx.response}
${#ctx.session}
${#ctx.servletContext}
💬请求/会话属性
${session.xxx}
${application.xxx}
${#request.getAttribute('xxx')}