項目加入依賴，然後在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>