如果你和我一樣赠摇，是一名 Java 道路上的編程男孩固逗，其實(shí)我不太建議你花時(shí)間學(xué) Thymeleaf，當(dāng)然他的思想還是值得借鑒的藕帜。但是他的本質(zhì)在我看來就是 Jsp 技術(shù)的翻版（Jsp 現(xiàn)在用的真的很少很少）烫罩。弄前端完全可以直接上手前端框架 vue。
并竟學(xué)Java在我眼里洽故，目前沒有什么是不要學(xué)的贝攒。兼測試、運(yùn)維时甚、前端啥都要會(huì)點(diǎn)隘弊。另外就目前來說哈踱，學(xué)Java的人數(shù)恐怕仍然后端中最龐大的。
免費(fèi)后臺(tái)模板在文末梨熙，大家有需求可以直接下載开镣。
我想如果不是學(xué)校作業(yè)，也不會(huì)心血來潮寫這篇文章????咽扇。
閱讀本文收獲 ??
- 學(xué)會(huì) Thymeleaf 常用語法??♀?
- 知曉 Thymeleaf 如何與 SpringBoot 集成??♀?
- 使用 Thymeleaf 完成學(xué)校老師作業(yè) ????
- 如果有需求邪财，可以直接下個(gè)模板，結(jié)合SpringBoot 寫個(gè)畢業(yè)設(shè)計(jì)????
一质欲、 Thymeleaf 初介紹 ??
Thymeleaf是適用于 Web 和獨(dú)立環(huán)境的現(xiàn)代服務(wù)器端 Java 模板引擎树埠。
Thymeleaf 的主要目標(biāo)是為您的開發(fā)工作流程帶來優(yōu)雅的自然模板——HTML可以在瀏覽器中正確顯示，也可以作為靜態(tài)原型工作嘶伟，從而加強(qiáng)開發(fā)團(tuán)隊(duì)的協(xié)作弥奸。
憑借 Spring Framework 的模塊、與您最喜歡的工具的大量集成以及插入您自己的功能的能力奋早，Thymeleaf 是現(xiàn)代 HTML5 JVM Web 開發(fā)的理想選擇——盡管它還有更多功能盛霎。 ---官方介紹
二、SpringBoot 整合 Thymeleaf ??
主要針對(duì)我們?cè)陧?xiàng)目中最常見的幾種用法進(jìn)行講解耽装。同時(shí)我們也是在項(xiàng)目中直接講 Thymeleaf 的用法愤炸。
2.1、新建 SpringBoot 項(xiàng)目
這個(gè)就不用說了哈掉奄，我想大家都是會(huì)這個(gè)的吧规个。
2.2、導(dǎo)入依賴
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.5.2</version>
<relativePath/>
</parent>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
</dependencies>
2.3姓建、SpringBoot 靜態(tài)資源存放路徑
首先我們將模板下載下來：
我們點(diǎn)進(jìn) doc 诞仓，將需要的頁面文件復(fù)制到 resources/templates包下，將css速兔、images墅拭、js復(fù)制到 resources/static包下。
2.4涣狗、書寫配置文件
thymeleaf 可以配置的一些屬性谍婉，這只是常見的哈。
spring:
thymeleaf:
enabled: true #開啟thymeleaf視圖解析
encoding: utf-8 #編碼
prefix: classpath:/templates/ #前綴 當(dāng)然默認(rèn)也是這個(gè)镀钓，可以不配置
cache: false #是否使用緩存
mode: HTML #嚴(yán)格的HTML語法模式
suffix: .html #后綴名
2.5穗熬、編寫Controller
我們以 登錄頁面 為例，寫個(gè)Controller 跳轉(zhuǎn)到 login.html丁溅。
@Controller
@RequestMapping
public class LoginController {
/** * 跳轉(zhuǎn)到登錄頁面*/
@GetMapping("/login")
public String login(){
return "login";
}
/** * 模擬登錄請(qǐng)求 */
@PostMapping("/doLogin")
public String doLogin(String username,String password){
if(username!=null&&password!=null){
System.out.println(username+password);
//重定向到 /indedx 請(qǐng)求 也可以重定向頁面
return "redirect:/index";
}
return "login";
}
/** * 跳轉(zhuǎn)到index 頁面*/
@GetMapping("/index")
public String index(){
return "index";
}
}
2.6唤蔗、啟動(dòng)項(xiàng)目&問題處理
啟動(dòng)類沒啥要改的，直接跑。
啟動(dòng)項(xiàng)目后妓柜，訪問 localhost:8080/login 箱季，可能會(huì)出現(xiàn)一個(gè) 缺少css、js的頁面领虹。而不是下面這個(gè)成功的頁面。
原因是在我們使用 Thyemleaf后求豫，在頁面中就不應(yīng)該再使用相對(duì)路徑,如這種： <link rel="stylesheet" type="text/css" th:href="/css/main.css">塌衰。
而是應(yīng)該修改為：<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}"> 。
修改完之后蝠嘉，還應(yīng)在 html 頁面的頭部做一下修改：
<html lang="en" xmlns:th="http://www.thymeleaf.org">
2.7最疆、Thyemleaf 常用
2.7.1、th:href | 鏈接 (URL) 表達(dá)式
其實(shí)我們剛剛已經(jīng)說了這點(diǎn)：
//以前的
<link rel="stylesheet" type="text/css" href="/css/main.css">
//修改后的：
<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
至于這么做的原因是由于Thymeleaf 的語法規(guī)則規(guī)定蚤告。
錯(cuò)誤示例：
<link rel="stylesheet" type="text/css" th:href="@{/static/css/main.css}">
引入的資源路徑千萬不要靜態(tài)資源路徑的集合中路徑的前綴努酸。否則會(huì)導(dǎo)致請(qǐng)求不到資源。
我們?cè)谑褂?Thymeleaf 的 @{} 修飾后杜恰，它會(huì)自己去 static 包下尋找获诈。
注意:在springboot2.0版本以前攔截器會(huì)默認(rèn)對(duì)靜態(tài)資源不攔截，但是springboot 2.0 以后攔截器會(huì)攔截所有心褐，所以需要重寫addInterceptors方法舔涎，不管是自己的靜態(tài)資源還是webjars中的資源，都要放行
當(dāng)然我只是在這提上一嘴逗爹，本文沒寫攔截器相關(guān)知識(shí)亡嫌。
2.7.2、th:text
我們都會(huì)有一個(gè)需要提示信息的時(shí)候掘而，就是簡單展示一段文本挟冠，如：
<p th:text="#{home.welcome}">Welcome to our grocery store!</p>
我們修改一下之前的Controller:
/*** 跳轉(zhuǎn)到登錄頁面 */
@GetMapping("/login")
public String login(Model model){
model.addAttribute("systemName","學(xué)生管理系統(tǒng)");
return "login";
}
另外修改一下登錄頁面：
<div class="logo">
<h1 th:text="${systemName}"></h1>
</div>
2.7.3、th:action
表單提交我想是最常見的啦吧袍睡。
<form class="login-form" method="post" th:action="@{/doLogin}">
</form>
在這里提交的路徑知染，也是需要用 @{} 包裹起來。
后端還是照寫斑胜，沒有變化持舆。
2.7.4、th:each & th:if
循環(huán)伪窖、判斷應(yīng)該是沒有哪里用不到的啦吧逸寓。
寫個(gè)Student 類，稍后會(huì)用到
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Student {
private Long id;
private String name;
private Integer age;
/**
* true 為男
* false 為女
*/
private Boolean gender;
}
寫個(gè)controller
/**
* 添加多個(gè)學(xué)生
*/
@GetMapping("/doEach")
public String doEach(Model model){
List<Student> students = new ArrayList<>();
Student student1 = new Student(1L,"1號(hào)學(xué)生",20,true);
students.add(student1);
Student student2 = new Student(2L,"2號(hào)學(xué)生",21,true);
students.add(student2);
Student student3 = new Student(3L,"3號(hào)學(xué)生",22,false);
students.add(student3);
Student student4 = new Student(4L,"4號(hào)學(xué)生",23,true);
students.add(student4);
model.addAttribute("students",students);
return "each";
}
再寫個(gè) each.html 頁面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>for循環(huán)</title>
</head>
<body>
<table border="1">
<tr>
<th>id</th>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
<tr th:each="student : ${students}" >
<td th:text="${student.id}"></td>
<td th:text="${student.name}"></td>
<td th:text="${student.age}"></td>
<!-- 三元表達(dá)式 -->
<td th:text="${student.gender}?男:女"></td>
<td th:if="${student.gender}">利用if判斷性別 男</td>
<td th:if="${not student.gender}">利用if判斷性別 女</td>
</tr>
</table>
</body>
</html>
成果：
2.8覆山、小結(jié)
我只是簡單的說了一下 Thymeleaf竹伸，它支持的東西還是有不少的，在這沒有一一說明，有需求時(shí)勋篓，可直接查詢 Thymeleaf文檔即可吧享。
三、免費(fèi)后臺(tái)模板 ??
1譬嚣、免費(fèi)的后臺(tái)模板：Vail Admin
2钢颂、聚集多個(gè)免費(fèi)的后臺(tái)模板：免費(fèi)模板
點(diǎn)進(jìn)去直接下載就可以啦。在SpringBoot 項(xiàng)目中直接引用就可以啦拜银。
四殊鞭、自言自語 ??
你好，我是博主
寧在春希望本篇文章能讓你感到有所收獲Ｄ嵬啊２俨印！
祝
我們:待別日相見時(shí)泵督，都已有所成趾盐。歡迎大家一起討論問題??，躺了??
