thymeleaf基本语法
程序员文章站
2022-05-01 23:14:20
...
项目加入依赖，然后在html加入
<html lang="en" xmlns:th="http://www.thymeleaf.org">1. 获取后端数据
后台代码：
@RequestMapping("/test")
public String test(Model model) {
model.addAttribute("hello", "helloworld");
Person person = new Person();
person.setUsername("dc");
person.setPassword("123");
person.setGender(true);
person.setBirth(new Date());
model.addAttribute("person", person);
return "test";
}前台代码：
<!--指定id为helloworld，属性相加为字符串拼接-->
<span th:id="${hello}" th:text="${person.birth+person.username+person.password}"></span>
<br>
<!--可以调用java方法-->
<span th:text="${person.username.toUpperCase()}"></span>
<br>
<!--#内为thymeleaf内置对象，格式化输出日期-->
<span th:text="${#calendars.format(person.birth,'yyyy-MM-dd')}"></span>
<br>
<span th:text="${#strings.toUpperCase('eee')}"></span>
<br>
<!--支持两种方式判断-->
<span th:if="${person.gender}==true">man</span>
<span th:if="${person.gender}==false">woman</span>
<span th:if="${person.gender==true}">man</span>
<span th:if="${person.gender==false}">woman</span>
<br>
<span th:text="${person.gender==true}?'man':'woman'"></span>
<br>2.遍历集合
后台代码：
@RequestMapping("/test")
public String test(Model model) {
List<Person> list = new ArrayList<>();
for (int i = 0; i < 10; i++) {
Person person1 = new Person();
person1.setUsername("dc" + i);
person1.setPassword("123" + i);
person1.setBirth(new Date());
person1.setGender(true);
list.add(person1);
}
model.addAttribute("list", list);
return "test";
}前台代码：
<table>
<tr>
<th>索引号</th>
<th>用户名</th>
<th>密码</th>
<th>性别</th>
<th>生日</th>
</tr>
<tr th:if="${#lists.size(list)} eq 0">
<td colspan="3">没有用户信息！</td>
</tr>
<!--iterStat内置取值-->
<!--<tr th:each="p:${list}">-->
<tr th:each="p ,iterStat: ${list}">
<td th:text="${iterStat.index}"></td>
<td th:text="${p.username}"></td>
<td th:text="${p.password}"></td>
<td th:text="${p.gender}? 'man' : 'woman'"></td>
<td th:text="${#calendars.format(p.birth,'yyyy-MM-dd')}"></td>
</tr>
</table>3.引入静态资源及超链接
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" th:src="@{/js/jquery-3.3.1.min.js}"></script>
<link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}">
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<title>Title</title>
</head>
<body class="container">
<a th:href="@{'/user/toUpdate?id='+${user.id}}">修改</a>
<a th:href="@{'/user/delete?id='+${user.id}}">删除</a>
</body>4.if判断及字符拼接
<span th:if="${curPage<totalPages}">
<a th:href="@{'/index?curPage='+${curPage+1}}">尾页</a>
<a th:href="@{'/index?curPage='+${totalPages}}">下一页</a>
</span>5.提交表单
<form role="form" th:action="@{/user/addUser}" th:method="post">
昵称<!--user?.nick的？表示不存在就忽略-->
<input type="text" name="nick" placeholder="请输入昵称" th:value="${user?.nick}">
手机
<input type="text" name="phone" placeholder="请输入手机号" th:value="${user?.phone}">
<button type="submit" class="btn btn-default">提 交</button>
</form>另一种方式
<form action="/users" th:action="@{/users}" method="post" th:object="${userModel.user}">
<input type="hidden" name="id" th:value="*{id}">
名称：<br>
<input type="text" name="name" th:value="*{name}">
<br>
邮箱：<br>
<input type="text" name="email" th:value="*{email}">
<input type="submit" value="提交">
</form>6.其他页面的引入
<!--header::header前面为页面名，后面为fragments名-->
<div th:replace="~{fragments/header::header}"></div>
引入了名为header的页面header.html
<div th:fragment="header">
<a href="/users" th:href="@{~/users}">首页</a>
</div>7.存入session数据
后台代码：
@RequestMapping("/test1")
public String test1(HttpSession session) {
Person person = new Person();
person.setUsername("dc");
person.setPassword("123");
person.setBirth(new Date());
person.setGender(true);
session.setAttribute("user",person);
return "test1";
}前台代码：
<div>
<p>Name: <span th:text="${session.user.username}">Sebastian</span>.</p>
<p>Surname: <span th:text="${session.user.password}">Pepper</span>.</p>
<p>Nationality: <span th:text="${session.user.birth}">Saturn</span>.</p>
</div>
<div th:object="${session.user}">
<p>Name: <span th:text="*{username}">Sebastian</span>.</p>
<p>Surname: <span th:text="*{password}">Pepper</span>.</p>
<p>Nationality: <span th:text="*{birth}">Saturn</span>.</p>
</div>
上一篇： Thymeleaf获取后台List传值
下一篇： thymeleaf