引言：在上篇文章的项目基础上，我们来学习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