Thymeleaf-CFANZ编程社区

文章目录

✈️Thymeleaf介绍
✈️为什么选择thymeleaf

💬举个栗子

✈️Thymeleaf简单表达式
✈️Thymeleaf的常用属性

💬准备
💬th:text、th:utext
💬th:object
💬th:value
💬th:if、th:unless
💬th:switch、th:case
💬th:each
💬th:href

✈️内联表达式
✈️基本对象

💬#ctx：上下文对象
💬请求/会话属性

✈️Thymeleaf介绍

首先，先贴一个官网地址，Thymeleaf官网：https://www.thymeleaf.org/

Thymeleaf_迭代

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>

Thymeleaf_迭代_02

当然我们也可以通过右击鼠标或Ctrl+U查看一下网页源码，可以看到这里是把表达式的值直接放在了标签里面！

Thymeleaf_迭代_03

如果你想把传输到页面的数据通过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，下面看效果：

Thymeleaf_java_04

th:unless

<div th:unless="${true}">不显示</div>

Thymeleaf_迭代_05

💬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>

Thymeleaf_spring_06

将当前迭代的最后一个颜色设置为红色

<!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>

Thymeleaf_spring_07

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>

Thymeleaf_迭代_08

✈️内联表达式

[[…]]相当于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>

Thymeleaf_spring_09

✈️基本对象

💬#ctx：上下文对象

${#ctx.request}
${#ctx.response}
${#ctx.session}
${#ctx.servletContext}

💬请求/会话属性

${session.xxx}                 
${application.xxx}          
${#request.getAttribute('xxx')}