thymeleaf的介绍与简单使用

最新推荐文章于 2023-06-27 16:22:01 发布

叶遮沉阳

最新推荐文章于 2023-06-27 16:22:01 发布

阅读量168

点赞数

分类专栏：后端

本文链接：https://blog.csdn.net/u014248473/article/details/88220322

版权

后端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

一、thymeleaf介绍

thymeleaf是一个HTML模板引擎；
浏览器会忽视thymeleaf未定义的标签，不会报错，不影响静态内容的展示；
thymeleaf通过定义的标签动态替换HTML静态内容，实现动态显示。

二、thymeleaf的使用

在SpringBoot项目的pom文件中引入：

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

thymeleaf模板文件在SpringBoot项目默认位置：src/main/resources/templates
简单示例：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>ThymeLeaf入门</title>
    <meta http-equiv="Content-type" content="text/html" charset="UTF-8" />
</head>
<body>
    <p th:text="'hello,' + ${name} + '!'">将要被替换的内容！</p>
</body>
</html>

html头部需引入：xmlns:th=“http://www.thymeleaf.org”
替换<p>标签内的文本内容：th:text="‘hello,’ + ${name} + ‘!’"
使用${name}获取后台传递的内容，后台代码如下：

@RequestMapping("index")
public String index(Map<String,Object> map){
    map.put("name","SpringBoot ThymeLeaf");
    return "index";
}

三、thymeleaf常用标签

替换文本

<p th:text="'hello,' + ${name} + '!'">将要被替换的内容！</p>


th:text标签用来替换文本内容。当后台不传name时，将会显示：hello null!

条件判断

后台：
map.put("type","spring");

页面：
<p th:if="${type =='spring'}">Spring</p>
<p th:if="${type =='thymeleaf'}">thymeleaf</p>

在页面上只会显示Spring，不会显示thymeleaf。
也就是说，在一个HTML标签加上条件判断，如果不满足条件，这个标签里面的内容都不会显示。
所以，可以用来动态控制页面内容的显示与隐藏。

循环迭代

后台：
Student student1 = new Student(1L,"张三","11");
Student student2 = new Student(2L,"李四","12");
Student student3 = new Student(2L,"王五","13");
List<Student> stuList = new ArrayList<>();
stuList.add(student1);
stuList.add(student2);
stuList.add(student3);
map.put("stuList", stuList);

页面：
<table>
    <tr>
        <th>ID</th>
        <th>NAME</th>
        <th>AGE</th>
    </tr>
    <tr th:each="stu : ${stuList}">
        <td th:text="${stu.id}">1</td>
        <td th:text="${stu.name}">海</td>
        <td th:text="${stu.age}">18</td>
    </tr>
</table>

显示结果：
ID	NAME	AGE
1	张三	11
2	李四	12
2	王五	13

附上Student的构造类：
public Student(Long id, String name, String age) {
    this.id = id;
    this.name = name;
    this.age = age;
}