Thymeleaf常用语法

最新推荐文章于 2024-04-24 22:52:03 发布

岚清

最新推荐文章于 2024-04-24 22:52:03 发布

阅读量494

点赞数

文章标签： java 开发语言后端 html5 前端

本文链接：https://blog.csdn.net/LPClan/article/details/121768083

版权

引言：在上篇文章的项目基础上，我们来学习Thymeleaf常用语法

(1)文本输出

后台代码：

 model.addAttribute("hello","<span style=\"color: red\">你好</span>");

前端html页面：普通文本输出

<div th:text="${hello}"></div>

上面的输出会将数据全部以文本输出，无法显示html标签效果，输出结果如下：
在这里插入图片描述
使用：th:utext 输出文本可以识别html标签：

<div th:utext="${hello}"></div>

输出结果如下：
在这里插入图片描述

(2)集合遍历th:each

对象遍历，功能类似jstl中的c:forEach标签。创建com.company.thymeleaf.model.User,代码如下：

public class User {
	private Integer id;
	private String name;
	private String address;
	//..get..set
}

Controller添加数据

/***
* 访问/test/hello 跳转到demo页面
* @param model
* @return
*/
@RequestMapping("/hello")
public String hello(Model model){
	model.addAttribute("hello","hello welcome");
	//集合数据
	List<User> users = new ArrayList<User>();
	users.add(new User(1,"张三","深圳"));
	users.add(new User(2,"李四","北京"));
	users.add(new User(3,"王五","武汉"));
	model.addAttribute("users",users);
	return "demo";
}

页面输出

<table>
	<tr>
		<td>下标</td>
		<td>编号</td>
		<td>姓名</td>
		<td>住址</td>
	</tr>
	 <!--注意这里的遍历出来的对象名,还有对象状态本质都是变量,随便写变量名即可,不一定要叫userState,叫us也行等↓-->
	<tr th:each="user,userStat:${users}">
		<td>
		下标:<span th:text="${userStat.index}"></span>,
		</td>
		<td th:text="${user.id}"></td>
		<td th:text="${user.name}"></td>
		<td th:text="${user.address}"></td>
	</tr>
</table>

测试效果
在这里插入图片描述
注意：遍历数组跟遍历集合套路类似,这里不再累述

(3)Map输出

后台添加Map:

//Map定义
Map<String,Object> dataMap = new HashMap<String,Object>();
dataMap.put("No","123");
dataMap.put("address","深圳");
model.addAttribute("dataMap",dataMap);

html页面输出

<div th:each="map,mapStat:${dataMap}">
	<div th:text="${map}"></div>
	key:<span th:text="${mapStat.current.key}"></span><br/>
	value:<span th:text="${mapStat.current.value}"></span><br/>
</div>

测试效果
在这里插入图片描述
另外：

<!--判断map集合是否包含键,如果包含返回true,如果不包含返回false-->
<div th:text="${#maps.containsKey(dataMap,'No')}"></div>

(4)Date输出

后台添加日期：

//日期
model.addAttribute("now",new Date());

html页面输出

<div>
	<span th:text="${#dates.format(now,'yyyy-MM-dd hh:ss:mm')}"></span>
</div>

测试效果
在这里插入图片描述

(5)th:if条件

后台添加年龄:

//if条件
model.addAttribute("age",22);

页面输出

<div>
	<span th:if="${(age>=18)}">靓仔18/span>
</div>

测试效果
在这里插入图片描述

(6)字符处理

在后台存储一个name数据：

//字符判断和处理
model.addAttribute("name","spec_tiango");

判断是否以指定字符开头:

<!--判断是否以指定字符开头:哪里string,不会点哪里按提示来即可↓-->
<div th:if="${#strings.startsWith(name,'spec_')}">
    是就做其他事情
</div>

替换字符中指定字符:

<!--替换字符中指定字符:-->
<div th:text="${#strings.replace(name,'spec_','')}"></div>

(7)递增输出,用数字对象的序列方法按照提示来即可,比如遍历输出文本1-10的数据

输出1-10的数据,如果选择#numbers.sequence(1,10)两个参数的步长默认是1或者-1,比如做页码显示

在这里插入图片描述

<!--递增输出,用数字对象的序列方法按照提示来即可,比如遍历each输出文本1-10的数据↓-->
<div th:each="num:${#numbers.sequence(1,10,1)}">
    <div th:text="${num}"></div>
</div>

(8)图片标签img的使用,注意双引号""如果里面有特殊字符,可以在""里面用''单引号围起来

<!--img显示图片,th:src告诉我图片地址,跟以前类似,注意有特殊字符,""里面加''↓-->
<img th:src="'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'">

在这里插入图片描述

(9)th:action 定义后台控制器路径，类似标签的action属性。

例如：

<form th:action="@{/test/hello}" >
	<input th:type="text" th:name="id">
	<button>提交</button>
</form>

(10)th:fragment 定义一个模块可以定义一个独立的模块，创建一个footer.html代码如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=charset=utf-8">
	<title>fragment</title>
</head>
<body>
	<div id="C" th:fragment="copy" >
	关于我们<br/>
	</div>
</body>

(11)th:include 可以直接引入th:fragment,在demo1.html中引入如下代码

<div id="A" th:include="footer::copy"></div>

(12)点击a标签超链接跳转到后台,调用后台方法

超链接使用th:href语法是th:href="@{url(name=xx,age=xx)}"，案例如下：

首先,在后台添加一个/test/add的跳转地址方法,提供url地址

/**
 * 接收前端数据,给前端点击超链接来调用,但是我后台要传递这个方法的url地址到域对象给前端
 * @return
 */
@RequestMapping("/add")
public String add(String name,String address) {
    System.out.println(name+"  住址是 "+address);
    return "redirect:http://www.baidu.com";
}

在后台添加一个方法来提供url地址

//添加一个方法地址给前端调用
model.addAttribute("url", "/test/add");

a标签href跳转：后台把一个url地址带个你,你前端如何配置跳转或者说调用,注意是@{}里面套${}了,参数赋值用()

<!--后台把一个url地址带个你,你前端如何用a标签跳转或者说调用,注意是@{}里面套${}了,参数赋值用()↓-->
<a th:href="@{${url}(name='fbb',address='深圳')}">点我跳转到后台方法</a>

在项目中,主要用来点击前端的超链接a把参数传递到浏览器的地址值,来实现url地址的拼接

结语：

以上就是Thymeleaf常用语法啦，如果想学习跟多Thymeleaf语法-- - -点击传送门：https://fanlychie.github.io/post/thymeleaf.html

岚清

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Thymeleaf常用语法

引言：在上篇文章的项目基础上，我们来学习Thymeleaf常用语法 (1)文本输出后台代码： model.addAttribute("hello","<span style=\"color: red\">你好</span>");前端html页面：普通文本输出<div th:text="${hello}"></div>上面的输出会将数据全部以文本输出，无法显示html标签效果，输出结果如下：使用：th:utext 输出文本可以识别html标
复制链接

扫一扫