引用
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>
配置
默认 resources/static 放 css js
默认 resources/templates 放 html
测试过程中关闭缓存
spring:
thymeleaf:
cache: false
基础语法
后台
@Controller
public class WelcomeController {
@GetMapping("/")
public String welcome(ModelMap map) {
map.addAttribute("message", "http://www.ityouknow.com");
map.addAttribute("flag", true);
map.addAttribute("users", getUserList());
map.addAttribute("type", "link");
map.addAttribute("pageId", "springcloud/2017/09/11/");
map.addAttribute("img", "http://www.ityouknow.com/assets/images/neo.jpg");
map.addAttribute("age", 18);
map.addAttribute("sex", "woman");
return "index";
}
private List<User> getUserList(){
List<User> list=new ArrayList<User>();
User user1=new User("大牛",12,"123456");
User user2=new User("小牛",6,"123563");
User user3=new User("纯洁的微笑",66,"666666");
list.add(user1);
list.add(user2);
list.add(user3);
return list;
}
}
前台
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>Hello</title>
</head>
<body>
<p>字符串拼接</p>
<span th:text="|Welcome to our application, ${message}!|"></span>
<p>if</p>
<a th:if="${flag == true}" th:href="@{http://favorites.ren/}">home</a>
<p>for循环</p>
<table>
<tr th:each="user,iterstart : ${users}">
<td th:text="${user.getName()}"></td>
<td th:text="${user.getAge()}"></td>
<td th:text="${user.getEamil()}"></td>
<td th:text="${iterstart.index}"></td>
</tr>
</table>
<p>url处理</p>
<a th:href="@{http://www.ityouknow.com/{type}(type=${type})}">link1</a>
<br/>
<a th:href="@{http://www.ityouknow.com/{pageId}/can-use-springcloud.html(pageId=${pageId})}">view</a>
<br/>
<div th:style="'background:url(' + @{${img}} + ');'">
<br/><br/><br/>
</div>
<p>三目运算符</p>
<input th:value="${age > 30 ? '中年':'年轻'}"/>
<p>switch</p>
<div th:switch="${sex}">
<p th:case="'woman'">她是一个姑娘...</p>
<p th:case="'man'">这是一个爷们!</p>
<!-- *: case的默认的选项 -->
<p th:case="*">未知性别的一个家伙。</p>
</div>
</body>
</html>
高级语法
内联
<div>
<h1>文本内联</h1>
<div th:inline="text" >
<p>Hello, [[${userName}]] !</p>
<br/>
</div>
</div>
// 脚本内联
<script th:inline="javascript">
var name = [[${userName}]] + ', Sebastian';
alert(name);
</script>
基本对象
### 后台
@RequestMapping("/object")
public String object(HttpServletRequest request) {
request.setAttribute("request","i am request");
request.getSession().setAttribute("session","i am session");
return "object";
}
### 前台
<div >
<h1>基本对象</h1>
<p th:text="${#request.getAttribute('request')}">
<br/>
<p th:text="${session.session}"></p>
Established locale country: <span th:text="${#locale.country}">CN</span>.
</div>
内嵌变量
日期
<!--格式化时间-->
<p th:text="${#dates.format(date, 'yyyy-MM-dd HH:mm:ss')}">neo</p>
<!--创建当前时间 精确到天-->
<p th:text="${#dates.createToday()}">neo</p>
<!--创建当前时间 精确到秒-->
<p th:text="${#dates.createNow()}">neo</p>
字符串
<!--判断是否为空-->
<p th:text="${#strings.isEmpty(userName)}">userName</p>
<!--判断 list 是否为空-->
<p th:text="${#strings.listIsEmpty(users)}">userName</p>
<!--输出字符串长度-->
<p th:text="${#strings.length(userName)}">userName</p>
<!--拼接字符串-->
<p th:text="${#strings.concat(userName,userName,userName)}"></p>
<!--创建自定长度的字符串-->
<p th:text="${#strings.randomAlphanumeric(count)}">userName</p>
页面布局
layout/footer.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>footer</title>
</head>
<body>
<footer th:fragment="footer">
<h1>我是 尾部</h1>
</footer>
</body>
</html>
layout.html 访问这个页面，会自动加载对应的 fragement
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<meta charset="UTF-8"></meta>
<title>Layout</title>
</head>
<body>
<div>
<div th:replace="layout/header :: header"></div>
<div th:replace="layout/left :: left"></div>
<div layout:fragment="content"> content</div>
<div th:replace="layout/footer :: footer"></div>
</div>
</body>
</html>
home.html 访问这个页面，会在前两个的基础上，替换 content 内容
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorate="layout">
<head>
<meta charset="UTF-8"></meta>
<title>Home</title>
</head>
<body>
<div layout:fragment="content" >
<h2>个性化的内容</h2>
</div>
</body>
</html>
头部替换
base.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links)">
<title th:replace="${title}">comm title</title>
<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/myapp.css}">
<link rel="shortcut icon" th:href="@{/images/favicon.ico}">
<script type="text/javascript" th:src="@{/js/myapp.js}"></script>
<th:block th:replace="${links}" />
</head>
<body>
</body>
</html>
在 base 的基础上，替换 title 和 link
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="base :: common_header(~{::title},~{::link})">
<title>Fragment - Page</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/cs/fragment.css}">
</head>
<body>
</body>
</html>
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于