很多時候犯錯都是在不知情的情況下發生的
目錄
thymeleaf的定義
spring boot整合
thymeleaf語法參考文件
thymeleaf筆記thymeleaf比jsp好在哪
thymeleaf簡單檔案
thymeleaf配置 application.properties
thymeleaf url
thymeleaf表示式
themeleaf包含 footer
themeleaf條件 if
themeleaf 遍歷
thymeleaf內建工具
thymeleaf分頁
thymeleaf的定義
Thymeleaf是一種用於Web和獨立環境的現代伺服器端的Java模板引擎。主要目標是將優雅的自然模板帶到開發工作流程中，並將HTML在瀏覽器中正確顯示
spring boot整合
- 新建spring boot的web專案
新增依賴
<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-thymeleaf --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> <version>1.5.2.RELEASE</version> </dependency>
在spring boot是1.5.X時，thymeleaf依賴要用1.5.x版本，親測用2版本會找不到網頁。
- 將html網頁放在templates資料夾下。
- controller即可跳轉到html頁面，頁面路徑為以templates為基礎的相對路徑。
thymeleaf語法參考文件
thymeleaf筆記
thymeleaf比jsp好在哪
jsp要在伺服器啟動後轉化為html頁面。不啟動伺服器無法執行出結果。
thymeleaf伺服器不啟動他就已經是html。
thymeleaf簡單檔案
<html xmlns:th="http://www.thymeleaf.org"> <head>#內容與html無異 <p th:text="$name">name</p> #伺服器端未啟動 顯示name 啟動顯示伺服器端傳來的name值 #字串拼接 <p th:text="|Hello! ${name}|"></p>
thymeleaf配置 application.properties
#thymeleaf 配置
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
#快取設定為false, 這樣修改之後馬上生效，便於除錯
spring.thymeleaf.cache=false
#上下文 注意這裡使得所有頁面網址字首都變為下述地址
server.context-path=/thymeleaf
thymeleaf url
引入css檔案
<link rel="stylesheet" type="text/css" media="all" href="../webapp/static/css/style.css" th:href="@{/static/css/style.css}"/>
引入js檔案
<script type="text/javascript" src="../webapp/static/js/thymeleaf.js" th:src="@{/static/js/thymeleaf.js}"></script>
啟動伺服器後 th:src會代替src th:href會代替href
thymeleaf表示式
controller中新增屬性
String htmlContent = "<p style='color:red'> 紅色文字</p>";
m.addAttribute("htmlContent", htmlContent);
Product currentProduct =new Product(5,"product e", 200);
m.addAttribute("currentProduct", currentProduct);
轉義與非轉義
<p th:text="${htmlContent}" ></p>
<p th:utext="${htmlContent}" ></p>
效果
image.png
獲取物件
方式1
<p th:text="${currentProduct}" ></p>
<p th:text="${currentProduct.name}" ></p>
<p th:text="${currentProduct.getName()}" ></p>
方式2
<div class="showing" th:object="${currentProduct}">
<h2>*{}方式顯示屬性</h2>
<p th:text="*{name}" ></p>
</div>
效果
image.png
此外還有算數運算
<p th:text="${currentProduct.price+999}" ></p>
themeleaf包含 footer
<html xmlns:th="http://www.thymeleaf.org">
<footer th:fragment="footer1">
<p >All Rights Reserved</p>
</footer>
<footer th:fragment="footer2(start,now)">
<p th:text="|${start} - ${now} All Rights Reserved|"></p>
</footer>
</html>
使用時按照
<div th:replace="include::footer1" ></div>
<div th:replace="include::footer2(2015,2018)" ></div>
themeleaf條件if
<p th:if="${testBoolean}" >如果testBoolean 是 true ，本句話就會顯示</p>
<p th:if="${not testBoolean}" >取反 ，所以如果testBoolean 是 true ，本句話就不會顯示</p>
<p th:text="${testBoolean}?'當testBoolean為真的時候，顯示本句話，這是用三相表示式做的':''" ></p>
不只是布林值的 true 和 false, th:if 表示式返回其他值時也會被認為是 true 或 false，規則如下:
boolean 型別並且值是 true, 返回 true
數值型別並且值不是 0, 返回 true
字元型別(Char)並且值不是 0, 返回 true
String 型別並且值不是 "false", "off", "no", 返回 true
不是 boolean, 數值, 字元, String 的其他型別, 返回 true
值是 null, 返回 false
themeleaf 遍歷
controller中
List<Product> ps = new ArrayList<>();
ps.add(new Product(1,"product a", 50));
ps.add(new Product(2,"product b", 100));
ps.add(new Product(3,"product c", 150));
m.addAttribute("ps", ps);
html中
<table>
<thead>
<tr>
<th>id</th>
<th>產品名稱</th>
<th>價格</th>
</tr>
</thead>
<tbody>
<tr th:each="p: ${ps}">
<td th:text="${p.id}"></td>
<td th:text="${p.name}"></td>
<td th:text="${p.price}"></td>
</tr>
</tbody>
</table>
select與thymeleaf遍歷結合
<div class="showing">
<h2>遍歷 select </h2>
<select size="3">
<option th:each="p:${ps}" th:value="${p.id}" th:selected="${p.id==currentProduct.id}" th:text="${p.name}" ></option>
</select>
</div>
image.png
thymeleaf內建工具
#dates工具
now變數是controller中宣告的Date now = new Date();
<div class="showing date">
<h2>格式化日期</h2>
直接輸出日期 ${now}:
<p th:text="${now}"></p>
預設格式化 ${#dates.format(now)}:
<p th:text="${#dates.format(now)}"></p>
自定義格式化 ${#dates.format(now,'yyyy-MM-dd HH:mm:ss')}:
<p th:text="${#dates.format(now,'yyyy-MM-dd HH:mm:ss')}"></p>
</div>
image.png
其他工具如
Execution Info
Messages
URIs/URLs
Conversions
Dates
Calendars
Numbers
Strings
Objects
Booleans
Arrays
Lists
Sets
Maps
Aggregates
IDs
thymeleaf分頁
與資料庫連線時的分頁
pom加入
<!-- pageHelper -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.1.6</version>
</dependency>
controller中示例
@RequestMapping("/listCategory")
public String listCategory(Model m,@RequestParam(value = "start", defaultValue = "0") int start,@RequestParam(value = "size", defaultValue = "5") int size) throws Exception {
PageHelper.startPage(start,size,"id desc");
List<Category> cs=categoryMapper.findAll();
PageInfo<Category> page = new PageInfo<>(cs);
m.addAttribute("page", page);
return "listCategory";
}
配置PageHelper
package com.how2java.springboot.config;
import java.util.Properties;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import com.github.pagehelper.PageHelper;
@Configuration
public class PageHelperConfig {
@Bean
public PageHelper pageHelper() {
PageHelper pageHelper = new PageHelper();
Properties p = new Properties();
p.setProperty("offsetAsPageNum", "true");
p.setProperty("rowBoundsWithCount", "true");
p.setProperty("reasonable", "true");
pageHelper.setProperties(p);
return pageHelper;
}
}
html頁面
<table align='center' border='1' cellspacing='0'>
<tr>
<td>id</td>
<td>name</td>
<td>編輯</td>
<td>刪除</td>
</tr>
<tr th:each="c:${page.list}">
<td th:text="${c.id}"></td>
<td th:text="${c.name}"></td>
<td><a th:href="@{/editCategory(id=${c.id})}">編輯</a></td>
<td><a th:href="@{/deleteCategory(id=${c.id})}">刪除</a></td>
</tr>
</table>
<br/>
<div>
<a th:href="@{/listCategory(start=0)}">[首 頁]</a>
<a th:href="@{/listCategory(start=${page.pageNum-1})}">[上一頁]</a>
<a th:href="@{/listCategory(start=${page.pageNum+1})}">[下一頁]</a>
<a th:href="@{/listCategory(start=${page.pages})}">[末 頁]</a>
</div>
效果
image.png
小禮物走一走，來簡書關注我
作者：cccccttttyyy
連結：https://www.jianshu.com/p/00c7edc2120b
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。