Thymeleaf常用语法

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

(1)文本输出
后台代码:
 model.addAttribute("hello","你好");

前端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>

测试效果
Thymeleaf常用语法_第1张图片
注意:遍历数组跟遍历集合套路类似,这里不再累述

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

测试效果
Thymeleaf常用语法_第2张图片
另外:

<!--判断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'">

Thymeleaf常用语法_第3张图片

(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

你可能感兴趣的:(java,开发语言,后端,html5,前端)