千峰商城-springboot项目实战07-Thymeleaf基本语法
如果要在Thymeleaf模板中获取从控制传递的数据，需使用th标签。
1.在Thymeleaf模板页面引入th标签的命名空间。
test.html:
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> test <hr/> <label th:text="${book.bookName}">图书名称</label> </body> </html>
2.在Thymeleaf模板页面取值。
th:text
在几乎所有的HTML双标签都可以使用 th：text 属性，将接收到的数据显示在标签的内容中。
text.html:
价格：<label th:text="${price}"></label> <br> 字符串：<div th:text="${str}"></div>
<p th:text="${book.bookName}"></p> <!--${book.bookName}:OGNL 对象图导航语言-->
th:inline 内联标签
HTML内联
<p th:inline="text">图书名称：[[${book.bookName}]]</p>
CSS内联：
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" th:inline="css"> .style1{ color:[[${color}]] ; } </style> </head> <body> test <hr/> 价格：<label th:text="${price}"></label> <br> 字符串：<div th:text="${str}"></div> <p th:text="${book.bookName}"></p> <!--${book.bookName}:OGNL 对象图导航语言--> <p th:inline="text" class="style1">图书名称：[[${book.bookName}]]</p> <!--${book.bookName}:OGNL 对象图导航语言--> </body> </html>
JavaScript内联：
<script type="css/javascript" th:inline="javascript"> </script>
th:object 和 *
<div th:object="${book}"> <p th:text="*{bookId}"></p> <p th:text="*{bookName}"></p> <p th:text="*{bookAuthor}"></p> </div>
3.流程控制
th:each 循环
<table style="width: 600px" border="1" cellspacing="0"> <caption>图书信息列表</caption> <thead> <tr> <th>图书ID</th> <th>图书名称</th> <th>作者</th> </tr> </thead> <tbody> <tr th:each="b:${books}"> <td th:text="${b.bookId}"></td> <td th:text="${b.bookName}"></td> <td th:text="${b.bookAuthor}"></td> </tr> </tbody> </table>
th:if 分支
<table style="width: 600px" border="1" cellspacing="0"> <caption>图书信息列表</caption> <thead> <tr> <th>图书ID</th> <th>图书名称</th> <th>作者</th> <th>图书价格</th> <th>购买建议</th> </tr> </thead> <tbody> <tr th:each="b:${books}"> <td th:text="${b.bookId}"></td> <td th:text="${b.bookName}"></td> <td th:text="${b.bookAuthor}"></td> <td th:text="${b.bookPrice}"></td> <td th:if="${b.bookPrice}>40" style="color: red">太贵!!!</td> <td th:if="${b.bookPrice}<=40" style="color: green">推荐购买</td> </tr> </tbody> </table>
th:swich 和 th:case 分支
<table style="width: 600px" border="1" cellspacing="0"> <caption>图书信息列表</caption> <thead> <tr> <th>图书ID</th> <th>图书名称</th> <th>作者</th> <th>图书价格</th> <th>购买建议</th> </tr> </thead> <tbody> <tr th:each="b:${books}"> <td th:text="${b.bookId}"></td> <td th:text="${b.bookName}"></td> <td th:text="${b.bookAuthor}"></td> <td th:text="${b.bookPrice}"></td> <!-- <td th:if="${b.bookPrice}>40" style="color: red">太贵!!!</td>--> <!-- <td th:if="${b.bookPrice}<=40" style="color: green">推荐购买</td>--> <td th:switch="${b.bookPrice}/10"> <label th:case="1">建议购买</label> <label th:case="3">价格合理</label> <label th:case="*">价格不合理</label> </td> </tr> </tbody> </table>
4.Thymeleaf碎片使用
碎片，就是HTML片段，我们可以将多个页面中使用的相同的HTML标签部分单独定义，然后通过 th:include 在HTML网页中引入对应的碎片。
新建一个 header.html 。
<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:fragment="fragment1" style="width: 100%; height: 80px;background: lightgreen; color: white; font-size: 16px;">
java 22:08
</div>
</body>
</html>
新建一个 fooder.html 。
<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:fragment="fragment2" style="width: 100%; height: 30px;background: deepskyblue; color: white; font-size: 25px;font-family: 黑体">
java 2022.4.26!
</div>
</body>
</html>
新建一个 a.html 。
<!DOCTYPE html> <html lang="en" xmlns:th="https://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div th:include="header::fragment1"></div> <div style="width: 100%; height: 500px"> 定义内容 </div> <div th:include="footer::fragment2"></div> </body> </html>
在 PageController.java 中：
@RequestMapping("/a.html")
public String a(){
return "a";
}
输入网址： http://localhost:8081/a.html 进行运行。结果：
发现成功拥有header样式和fooder样式。但是没有格式。
将将a.html的header样式改为：
<!--<div th:include="header::fragment1"></div>--> <div th:replace="header::fragment1"></div>
成功出现样式！
