Thymeleaf模板

最新推荐文章于 2024-04-16 17:14:06 发布

长舒36

最新推荐文章于 2024-04-16 17:14:06 发布

阅读量1.2k

点赞数 1

文章标签： java spring 前端

本文链接：https://blog.csdn.net/qq_71314862/article/details/130237446

版权

1：什么是Thymeleaf

Thymeleaf是一款服务器端Java模板引擎，适用于构建基于MVC架构的Web应用程序。它采用自然模板语法，可直观地呈现模板内容，并且还支持HTML5标签。Thymeleaf能够与Spring框架完美集成，具有很好的扩展性和灵活性，同时也提供了许多额外的功能，如国际化处理、片段布局等，使得开发者可以更加便捷地进行Web开发。

特点：动静结合：Thymeleaf既可以直接使用浏览器打开，查看页面的静态效果，也可以通过Web应用程序进行访问，查看动态也买你效果

开箱即用：可以快速的实现表单绑定、属性编辑器、国际化等功能。

多方言支持：它提供了两种Thymeleaf标准和Spring标准两种方言。

与spring boot完美整合：spring boot为Thymeleaf提供了默认的配置，并且还为Thymeleaf设置了视图解析器，因此Thymeleaf可以与Spring boot完美整合

二：入门案例

导入依赖：

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

编写控制器

@Controller
public class GreetingController {
    @GetMapping("/home")
    public String home(Model model) {
        model.addAttribute("name", "Thymeleaf");
        model.addAttribute("message", "Welcome to the world of Thymeleaf!");
        return "home";
    }
}

@RestController 是一个包含@Controller 和@ResponseBody 注解的组合注解。它用于声明一个控制器类，其中的所有方法都会自动返回 JSON、XML 或其他格式的数据，而不是渲染视图。

相反，如果你需要渲染 HTML 视图或者传递模型数据到 Thymeleaf 模板中，就应该将控制器声明为@Controller 类型，并在方法中使用@GetMapping、@PostMapping 等注解来处理请求

编写Thymaleaf模板

注意：默认在templates目录下

在src/main/resources/templates/目录下创建一个名为home.html的文件，内容如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Home</title>
</head>
<body>
  <h1 th:text="'Hello, '+${name}+'!'"></h1>
  <p th:text="${message}"></p>
</body>
</html>

注意："

http://www.thymeleaf.org”：这段代码就是引入了th模板

这个模板使用 Thymeleaf 引擎的语法，包含了一个标题和一个段落。其中，

th:text 属性表示要显示的文本内容，

${name} 和

${message} 分别代表控制器中传递的两个属性。

输出：

三：配置文件中的常用设置

#开发阶段，关闭缓存机制，让修改立即生效
spring.thymeleaf.cache=false
#编码格式
spring.thymeleaf.encoding=UTF-8
#模板的类型（默认是HTML）
spring.thymeleaf.mode=HTML
#模板的类路径classpath:/templates
spring.thymeleaf.prefix=classpath:/templates/
#后缀
spring.thymeleaf.suffix=.html

四：模板语法

变量表达式

变量表达式是最常用的一种表达式，它主要可以获取变量的值，它的底层使用了OGNL表达式

语法：${...}

作用：在获取在controller中传递的变量；

Hello World

消息表达式

主要是用于读取属性文件（.properties）中的值，它常常用于国际化，一般情况下我们用不到

语法：#{...}

首先需要在系统中配置资源文件，例如在 messages.properties 文件中设置 hello.world=你好，世界！ 的键值对。

在 HTML 页面中，可以使用 #{...} 消息表达式调用这个资源文件中的文本。例如：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>消息表达式</title>
</head>
<body>
    <h1 th:text="#{hello.world}"></h1>
</body>
</html>

当页面被渲染时，Thymeleaf 会自动查找并读取资源文件中的文本，将其作为标签的文本内容输出到页面上。

选择表达式

选择表达式是一种 Thymeleaf 表达式，使用 *{...} 语法，用于在相对路径下获取特定对象的属性值。它通常用于处理表格、列表等数据结构中的动态展示

语法：*{...}

获取当前元素对象的属性值：例如在一个由 User 对象组成的列表中，可以使用 *{name} 获取当前元素对象的 name 属性值。

<tr th:each="user : ${users}">
    <td th:text="*{name}">...</td>
    <td th:text="*{age}">...</td>
    ...
</tr>

例如，在 Springboot 的控制器中，可以将一个由 User 对象组成的列表添加到模型中，并将其命名为 users。

@RequestMapping("/users")
public String getUsers(Model model) {
    List<User> userList = userService.getAllUsers();
    model.addAttribute("users", userList);
    return "userList";
}

这段代码中，Model 实例代表了一个模型对象，通过 addAttribute 方法将 userList 添加到模型中，并使用 users 作为属性名。

在 Thymeleaf 模板中，可以使用 ${users} 获取这个属性值，并将其渲染到页面中。例如，在一个简单的用户列表页面中，可以使用 ${users} 渲染出一个由 User 对象组成的表格。

<table>
    <tr th:each="user : ${users}">
        <td th:text="${user.name}">...</td>
        <td th:text="${user.age}">...</td>
        ...
    </tr>
</table>

在这个例子中，${users} 获取了控制器中添加到模型的 users 属性的值，然后使用 th:each 进行遍历并渲染到页面中。在遍历过程中，${user} 获取了每个 User 对象，并将其属性值渲染到表格中。

总之，${...} 表达式用于在模板中获取模型中的属性值，可以轻松地将控制器中的数据渲染到视图中。

链接表达式

链接表达式在 Thymeleaf 中使用 @{...} 语法，用于创建 URL 链接或资源引用，可以动态地生成 URL 链接或引用外部资源，比如 CSS、JavaScript、图片等。

链接表达式可以接受相对路径或绝对路径作为参数，并支持使用 Spring MVC 的 URL 路径匹配和 URL 参数绑定功能。

语法：@{...}

示例：

生成一个相对路径的 URL 链接：

<a th:href="@{/home}">Home</a>

这个链接表达式生成了一个指向 /home 相对路径的 URL 链接，当用户点击该链接时，将会访问相应的页面。

生成一个带参数的 URL 链接：

<a th:href="@{/user/details(id=${userId})}">User Details</a>

这个链接表达式中，通过 ${...} 语法来绑定了 URL 中的参数，${userId} 变量的值将会被动态地填充到 URL 中，生成一个带参数的 URL 链接

各种条件判断

1：th:if:如果表达式为真，则渲染标签内容。例如

18}">Hello

如果age大于18，则会显示“Hello”；否则该代码不会输出任何内容

2：th:unless:与th:if相反，如果表达式为假，则渲染标签内容。例如

18}">Hello

如果age小于18，则会显示“Hello”；否则该代码不会输出任何内容

3：th:switch和th:case:类似于Java中switch-case语句，根据一个条件值匹配不同的分支进行渲染，例如：

<div th:switch="${dayOfWeek}">

 星期一

 星期二

 星期三

 星期四

 星期五

 星期六

 星期日

 无效日期 </div>

//controller

model.addAttribute("dayOfWeek", "Monday"); //显示星期一

如果dayOfweek为Monday，则会显示“星期一”，如果为其他没有的值或者没有值，则会匹配th:case="*",显示无效日期；

4：th:unless-eval:与th:if相反，扩展了表达式的语法，允许通过字符串表达式指定条件。例如：

没有包含字符串www

如果“Hello word”不包含"www",则会输出“没有包含字符串www”.

此外，还有很多其他的条件判断语法，如

th:classappend、

th:selected、

th:checked等，可以根据需要进行查看。

循环遍历list与map

ArrayList<String> list = new ArrayList<>();
list.add("java");
list.add("HTML");
list.add("Spring");
list.add("SpringBoot");
list.add("微服务");

HashMap<String, Object> map = new HashMap<>();
map.put("id",1001);
map.put("name","Jack");
map.put("sex","男");
map.put("loves",list);

model.addAttribute("list",list);
model.addAttribute("map",map);
return "link";

<br>
<span th:each="str:${list}">
    <span th:text="${str}"></span>
</span>
<br>
<span th:each="str1:${map}">
    <span th:text="${str1}"></span>
    <span th:text="${str1.key}"></span>
    <span th:text="${str1.value}"></span>
</span>

内置工具

#dates:处理日期类，如日期、时间进行格式化和计算等

#numbers:处理数字相关的操作方法，如格式化、四舍五入、比较等

#string:提供了字符串相关的操作方法，如判断是否为空、拼接字符串、替换字符等

#list：提供了列表相关的操作方法，如获取列表大小、过滤列表、排序列表等

#sets:集合相关的操作方法，如获取集合大小、判断集合是否包含指定元素、求两个集合的交集等

#maps：提供map相关的操作方法，如获取Map的键集合、求Map的值集合、判断Map是否为空等

长舒36

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Thymeleaf模板

Thymeleaf是一款服务器端Java模板引擎，适用于构建基于MVC架构的Web应用程序。它采用自然模板语法，可直观地呈现模板内容，并且还支持HTML5标签。Thymeleaf能够与Spring框架完美集成，具有很好的扩展性和灵活性，同时也提供了许多额外的功能，如国际化处理、片段布局等，使得开发者可以更加便捷地进行Web开发
复制链接

扫一扫