千峰商城-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>Titletitle>
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>
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>Titletitle>
<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>
<p th:inline="text" class="style1">图书名称:[[${book.bookName}]]p>
body>
html>
JavaScript内联:
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>图书IDth> <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>图书IDth> <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>图书IDth> <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: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 。
html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Titletitle>
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 。
html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Titletitle>
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>Titletitle>
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:replace="header::fragment1">div>
成功出现样式!