Springboot：thymeleaf模板（八）
存放位置：resources\templates
访问方式：通过Controller请求访问，不可直接访问（相当于web项目的WEB-INF目录）
环境依赖：
<!--thymeleaf模板支持-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
命名空间：
<html lang="en" xmlns:th="http://www.thymeleaf.org">
相关配置：
#thymeleaf 配置
spring:
thymeleaf:
cache: false #开发时关闭缓存,不然没法看到实时页面
prefix: classpath:/templates/ #文件存放路径
suffix: .html #文件后缀
encoding: utf-8
mode: HTML5
servlet:
content-type: text/html
mvc:
static-path-pattern: /** #静态资源加载路径
相关参考：
https://www.cnblogs.com/itdragon/archive/2018/04/13/8724291.html
1、th:text：文本显示标签
controller设置变量值：
model.addAttribute("msg1","<h1>我是h1变量</h1>");
thymeleaf标签取值：
<!--th:text: 文本显示常量-->
<span th:text="'我是thymeleaf常量'"></span> <br /><br />
<!--th:text: 可以直接写运算表达式-->
<span th:text="1+2"></span> <br /><br />
<!--th:text: 文本显示controller中的变量-->
<span th:text="${msg1}"></span> <br /><br />
<!--th:utext: 文本显示controller中的变量(转义)-->
<span th:utext="${msg1}"></span> <br /><br />
打印结果：
2、th:value：value显示标签
controller设置变量值：
model.addAttribute("msg","我是thymeleaf变量");
thymeleaf标签取值：
<!--th:value: value显示controller中的变量-->
<input type="text" th:value="${msg}"> <br /><br />
打印结果：
3、对象取值
controller设置变量值：
/*java bean*/
User user = new User("king",33);
/*map*/
Map<String,Object> mp = new HashMap<>();
mp.put("mpkey","mapValue");
model.addAttribute("user",user);
model.addAttribute("mp",mp);
thymeleaf标签取值：
<!--对象取值方式1 ${对象.属性}-->
<div>
<p th:text="${user.name}"></p>
<p th:text="${user.age}"></p>
</div>
<!--对象取值方式2 th:object-->
<div th:object="${user}">
<p th:text="*{name}"></p>
<p th:text="*{age}"></p>
</div>
<!--map取值-->
<p th:text="${mp.get('mpkey')}"></p>
打印结果：
4、IF 判断
controller设置变量值：
/*List集合*/
List<User> lists = new ArrayList<>();
for (int i = 1; i <=4 ; i++) {
User u = new User("king"+i,i);
lists.add(u);
}
model.addAttribute("lists",lists);
model.addAttribute("gender","男");
thymeleaf标签取值：
<!--IF判断-->
<!--判断list集合为空-->
<div th:if="${#lists.isEmpty(lists)}" th:text="'list集合为空'"></div>
<!--判断list集合非空-->
<div th:if="${not #lists.isEmpty(lists)}" th:text="'list集合非空'"></div>
<!--判断变量等于一个值-->
<div th:if="${gender == '男'}" th:text="'我是男孩'"></div>
打印结果：
5、each循环
controller设置变量值：
/*List集合*/
List<User> lists = new ArrayList<>();
for (int i = 1; i <=4 ; i++) {
User u = new User("king"+i,i);
lists.add(u);
}
model.addAttribute("lists",lists);
thymeleaf标签取值：
<!--list迭代-->
<table border="1">
<tr >
<td th:text="下标" ></td>
<td th:text="name值"></td>
<td th:text="age值"></td>
<td th:text="总数"></td>
</tr>
<tr th:each="user,status: ${lists}">
<td th:text="${status.index}" ></td> <!--获取下标-->
<td th:text="${user.name}"></td>
<td th:text="${user.age}"></td>
<td th:text="${status.count}"></td> <!--获取数量-->
</tr>
</table>
打印结果：
6、switch case
controller设置变量值：
model.addAttribute("gender","男");
thymeleaf标签取值：
<!--switch迭代-->
<div th:switch="${gender}">
<p th:case="'男'">我是男孩</p>
<p th:case="'女'">我是女孩</p>
<p th:case="'*'">未知性别</p>
</div>
打印结果：
7、时间格式化
controller设置变量值：
model.addAttribute("nowDate",new Date());
thymeleaf标签取值：
<!--时间格式化-->
<p th:text="${#dates.format(nowDate,'yyyy-MM-dd HH:mm:ss')}"></p>
打印结果：
8、session
controller设置变量值：
session.setAttribute("userId","10010");
thymeleaf标签取值：
<!--从session获取值-->
<p th:text="${session.userId}"></p>
打印结果：
9、request
controller设置变量值：
request.setAttribute("rmsg","我是request");
thymeleaf标签取值：
<!--从request获取值-->
<p th:text="${#request.getAttribute('rmsg')}"></p>
打印结果：
10、代码块
语法推荐：~{templatename::fragmentname}
templatename：模版名，Thymeleaf会根据模版名解析完整路径：/resources/templates/templatename.html，要注意文件的路径。
fragmentname：片段名，Thymeleaf通过th:fragment声明定义代码块，即：th:fragment="fragmentname"
代码块表达式的使用
代码块表达式需要配合th属性（th:insert，th:replace，th:include）一起使用。
th:insert：将代码块片段整个插入到使用了th:insert的HTML标签中，
th:replace：将代码块片段整个替换使用了th:replace的HTML标签中，
th:include：将代码块片段包含的内容插入到使用了th:include的HTML标签中，
示例：
1：在templates下创建头部公共代码块header.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<header th:fragment="head">
<p>我是头部</p>
</header>
</html>
2：在templates下创建底部公共代码块header.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--fragment可以传参数-->
<footer th:fragment="foot(value1,value2)">
<p th:text="${value1} + '--' + ${value2} + ' 我是底部'"></p>
</footer>
</html>
3：在templates下创建主页面main.html，引入头部和底部
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--引入头部-->
<div th:replace="header::head"></div>
<p th:text="'我是主内容'"></p>
<!--引入底部-->
<div th:replace="footer::foot('2019年','2020年')"></div>
</body>
</html>
4：运行效果
11、链接表达式
无参：@{/xxx}
有参：@{/xxx(k1=v1,k2=v2)} 对应url结构：xxx?k1=v1&k2=v2
引入本地资源：@{/项目本地的资源路径}
引入外部资源：@{/webjars/资源在jar包中的路径}
资源路径：
示例：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 加载css样式 -->
<link th:href="@{/asserts/css/bootstrap.min.css}" rel="stylesheet">
<!-- 加载js样式 -->
<script type="text/javascript" th:src="@{asserts/js/bootstrap.min.js}"></script>
</head>
<body>
<!--图片-->
<img th:src="@{asserts/img/bootstrap-solid.svg}" alt="" width="72" height="72">
<!--超链接-->
<a th:href="@{/login.html(l='zh_CN')}" >中文</a>
<a th:href="@{/login.html(l='en_CN')}" >英文</a>
<!--form表单-->
<form th:action="@{/form.html}" th:method="post">
<input type="text" name="username">
<input type="submit" value="提交">
</form>
</body>
</html>
@RequestMapping("/login.html")
public String login(String l){
System.out.println(l);
return "main";
}
@RequestMapping("/form.html")
public String loginForm(String username){
System.out.println(username);
return "main";
}
