spring中使用的Thymeleaf

KeWS

已于 2023-05-29 14:40:41 修改

阅读量210

点赞数

文章标签： java

于 2023-05-26 21:23:42 首次发布

本文链接：https://blog.csdn.net/Xbu_123/article/details/130894186

版权

Thymeleaf的使用

引入依赖

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

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

使用Model model参数的方法发送

页面引入

<html xmlns:th="http://www.thymeleaf.org">

使用${}进行变量接收

普通使用

文本(th:text)

前端接收

<p th:text="${abc}"></p>

后端发送

model.addAttribute("abc","我们都知道，只要有意义，那么就必须慎重考虑。 从这个角度来看， 既然如何， 经过上述讨论， 帅，发生了会如何，不发生又会如何。 我们都知道，只要有意义，那么就必须慎重考虑。 对我个人而言，帅不仅仅是一个重大的事件，还可能会改变我的人生。");

标签文本(th:utext)

前端接收

<p th:utext="${abcd}"></p>

后端发送

model.addAttribute("abcd","别林斯基曾经提到过，好的书籍是最贵重的珍宝。这启发了我， 在这种困难的抉择下，本人思来想去，寝食难安。 <font style=fontSize:20px;color:#bfa;>美</font>因何而发生？ 一般来说， 在这种困难的抉择下，本人思来想去，寝食难安。 <font style='font-size:20px;color:#bfa;'>美</font>，到底应该如何实现。");

循环输出(th:each)

前端接收

<!--item->每个项，index-》索引（需配合count使用），这两个是接收值。users为后端发送过来的数据名-->
<!--list集合-->
<ul th:each="item,index:${users}">
    <li th:text="${index.count}"></li>
    <li th:text="${item.id}"></li>
    <li th:text="${item.name}"></li>
    <li th:text="${item.address}"></li>
</ul>
<!--map集合-->
<ol>
    <li th:each="item:${map}">
        map的key为<span th:text="${item.key}"></span>
        <br>
        map的value为<span th:text="${item.value}"></span>
    </li>
</ol>

后端发送

// 构建一个list集合
List<User> users = new ArrayList<>();
for (int i = 0; i < 10; i++) {
    User user = new User();
    user.setId(i);
    user.setName("张" + i);
    user.setAddress("深圳" + i + "号线");
    users.add(user);
}
model.addAttribute("users", users);
// 定义一个map
Map<String, String> map = new HashMap<>();
map.put("aa", "11");
map.put("bb", "22");
map.put("cc", "33");
model.addAttribute("map", map);

条件判断()

前端接收

<!--正向条件判断-->
<h1 th:if="${age}>=18">已成年</h1>
<h1 th:if="${age}<=18">未成年</h1>
<!--反向条件判断-->
<h1 th:unless="${age}>=18">已成年</h1>
<h1 th:unless="${age}<=18">未成年</h1>

后端发送

model.addAttribute("age", 16);

链接跳转(th:href)

前端接收

<!--超链接跳转 @:表示在指定路径下的然后username，address为路径参数-->
<a th:href="@{${url}(username='张三',address='李四')}">百度</a>

后端发送

// 同一目录下因此可以直接跳转
model.addAttribute("url","/test/jump");
-----------------------------------------
/**
 * 跳转
 */
@GetMapping("/jump")
public String jump(String username,String address){
    System.out.println(username);
    System.out.println(address);
    return "redirect:http://www.baidu.com";
}

图片路径(th:src)

前端接收

<!--图片路径-->
<img th:src="${imgs}"/>

后端发送

model.addAttribute("imgs","https://img0.baidu.com/it/u=4162443464,2854908495&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500");

内置函数

使用#代表内置函数

日期函数(#dates)

format(date, pattern): 格式化日期对象为指定的模式。
createNow(): 创建表示当前日期和时间的对象。
create(year, month, day): 创建指定年、月、日的日期对象。

前端接收

<!--#dates日期工具对象,format是#dates对象的一个函数，用于格式化日期。HH指24小时制，hh指12小时制-->
<h1 th:text="${#dates.format(dateTest,'yyyy-MM-dd HH:mm:ss')}"></h1>

后端发送

model.addAttribute("dateTest",new Date());

maps函数(#maps.containsKey)

containsKey(map, key): 检查Map中是否包含指定的键。
containsValue(map, value): 检查Map中是否包含指定的值。
size(map): 获取Map的大小。

前端接收

<div th:if="${#maps.containsKey(map,'dd')}">
    map包含dd这个key
</div>
<div th:unless="${#maps.containsKey(map,'dd')}">
    map不含dd这个key
</div>

后端发送

// 定义一个map
Map<String, String> map = new HashMap<>();
map.put("aa", "11");
map.put("bb", "22");
map.put("cc", "33");
model.addAttribute("map", map);

字符串函数(#strings.*)

字符串处理函数（#strings.*）：

replace(str, search, replace): 替换字符串中的部分内容。
substring(str, beginIndex, endIndex): 截取字符串的一部分。
arraySplit(str, delimiter): 将字符串按照指定的分隔符拆分为数组。
startsWith(str, prefix): 检查字符串是否以指定的前缀开始。

前端接收

<!--替换-->
<p th:text="${#strings.replace(abc,'帅','小帅')}"></p>
<!--截取-->
<p th:text="${#strings.substring(abc,0,6)}"></p>
<!--分组-->
<p th:text="${#strings.arraySplit(abc,'帅')[1]}"></p>
<!--前缀查询-->
<p th:if="${#strings.startsWith("字符串","前缀")}"></p>

后端发送

model.addAttribute("abc", "我们都知道，只要有意义，那么就必须慎重考虑。 从这个角度来看， 既然如何， 经过上述讨论， 帅，发生了会如何，不发生又会如何。 我们都知道，只要有意义，那么就必须慎重考虑。 对我个人而言，帅不仅仅是一个重大的事件，还可能会改变我的人生。");

numbers函数(#numbers.sequence)

sequence(start, end, step): 生成一个数字序列，可以用于循环迭代。

前端接收

<!--数字处理fori 1到10每次+1-->
<div th:each="i:${#numbers.sequence(1, 10, 1)}">
    <div th:text="${i}"></div>
</div>

集合函数(#list.和sets.)

contains(list, element): 检查列表中是否包含指定的元素。
size(list): 获取列表的大小。
containsAll(list1, list2): 检查一个列表是否包含另一个列表的所有元素。
distinct(list): 去除列表中的重复元素。

内心丰盈者，独行也如众。

KeWS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
spring中使用的Thymeleaf

spring中使用的Thymeleaf
复制链接

扫一扫

spring中使用的Thymeleaf

Thymeleaf的使用

引入依赖

页面引入

普通使用

文本(th:text)

标签文本(th:utext)

循环输出(th:each)

条件判断()

链接跳转(th:href)

图片路径(th:src)

内置函数

日期函数(#dates)

maps函数(#maps.containsKey)

字符串函数(#strings.*)

numbers函数(#numbers.sequence)

集合函数(#list.和sets.)

“相关推荐”对你有帮助么？