javascript
SpringBoot 整合 Thymeleaf 如何使用后台模板快速搭建项目
如果你和我一樣，是一名 Java 道路上的編程男孩，其實我不太建議你花時間學 Thymeleaf，當然他的思想還是值得借鑒的。但是他的本質在我看來就是 Jsp 技術的翻版（Jsp 現在用的真的很少很少）。弄前端完全可以直接上手前端框架 vue。
并竟學Java在我眼里，目前沒有什么是不要學的。兼測試、運維、前端啥都要會點。另外就目前來說，學Java的人數恐怕仍然后端中最龐大的。
免費后臺模板在文末，大家有需求可以直接下載。
我想如果不是學校作業，也不會心血來潮寫這篇文章👩?💻。
閱讀本文收獲 📖
一、 Thymeleaf 初介紹 📓
Thymeleaf 官網
Thymeleaf 官方文檔
Thymeleaf是適用于 Web 和獨立環境的現代服務器端 Java 模板引擎。
Thymeleaf 的主要目標是為您的開發工作流程帶來優雅的自然模板——HTML可以在瀏覽器中正確顯示，也可以作為靜態原型工作，從而加強開發團隊的協作。
憑借 Spring Framework 的模塊、與您最喜歡的工具的大量集成以及插入您自己的功能的能力，Thymeleaf 是現代 HTML5 JVM Web 開發的理想選擇——盡管它還有更多功能。 —官方介紹
二、SpringBoot 整合 Thymeleaf 📚
主要針對我們在項目中最常見的幾種用法進行講解。同時我們也是在項目中直接講 Thymeleaf 的用法。
2.1、新建 SpringBoot 項目
這個就不用說了哈，我想大家都是會這個的吧。
2.2、導入依賴
<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 靜態資源存放路徑
首先我們將模板下載下來：
我們點進 doc ，將需要的頁面文件復制到 resources/templates包下，將css、images、js復制到 resources/static包下。
2.4、書寫配置文件
thymeleaf 可以配置的一些屬性，這只是常見的哈。
spring:thymeleaf:enabled: true #開啟thymeleaf視圖解析encoding: utf-8 #編碼prefix: classpath:/templates/ #前綴 當然默認也是這個，可以不配置cache: false #是否使用緩存mode: HTML #嚴格的HTML語法模式suffix: .html #后綴名2.5、編寫Controller
我們以 登錄頁面 為例，寫個Controller 跳轉到 login.html。
@Controller @RequestMapping public class LoginController {/** * 跳轉到登錄頁面*/@GetMapping("/login")public String login(){return "login";}/** * 模擬登錄請求 */@PostMapping("/doLogin")public String doLogin(String username,String password){if(username!=null&&password!=null){System.out.println(username+password);//重定向到 /indedx 請求 也可以重定向頁面return "redirect:/index";}return "login";}/** * 跳轉到index 頁面*/@GetMapping("/index")public String index(){return "index";}}2.6、啟動項目&問題處理
啟動類沒啥要改的，直接跑。
啟動項目后，訪問 localhost:8080/login ，可能會出現一個 缺少css、js的頁面。而不是下面這個成功的頁面。
原因是在我們使用 Thyemleaf后，在頁面中就不應該再使用相對路徑,如這種： <link rel="stylesheet" type="text/css" th:href="/css/main.css">。
而是應該修改為：<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}"> 。
修改完之后，還應在 html 頁面的頭部做一下修改：
<html lang="en" xmlns:th="http://www.thymeleaf.org">2.7、Thyemleaf 常用
Thymeleaf 官網快速入門介紹
Thymeleaf 官方文檔
2.7.1、th:href | 鏈接 (URL) 表達式
其實我們剛剛已經說了這點：
//以前的 <link rel="stylesheet" type="text/css" href="/css/main.css"> //修改后的： <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">至于這么做的原因是由于Thymeleaf 的語法規則規定。
錯誤示例：
<link rel="stylesheet" type="text/css" th:href="@{/static/css/main.css}">引入的資源路徑千萬不要靜態資源路徑的集合中路徑的前綴。否則會導致請求不到資源。
我們在使用 Thymeleaf 的 @{} 修飾后，它會自己去 static 包下尋找。
注意:在springboot2.0版本以前攔截器會默認對靜態資源不攔截，但是springboot 2.0 以后攔截器會攔截所有，所以需要重寫addInterceptors方法，不管是自己的靜態資源還是webjars中的資源，都要放行
當然我只是在這提上一嘴，本文沒寫攔截器相關知識。
2.7.2、th:text
我們都會有一個需要提示信息的時候，就是簡單展示一段文本，如：
<p th:text="#{home.welcome}">Welcome to our grocery store!</p>我們修改一下之前的Controller:
/*** 跳轉到登錄頁面 */ @GetMapping("/login") public String login(Model model){model.addAttribute("systemName","學生管理系統");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
循環、判斷應該是沒有哪里用不到的啦吧。
寫個Student 類，稍后會用到
@Data @AllArgsConstructor @NoArgsConstructor public class Student {private Long id;private String name;private Integer age;/*** true 為男* false 為女*/private Boolean gender; }寫個controller
/*** 添加多個學生*/ @GetMapping("/doEach") public String doEach(Model model){List<Student> students = new ArrayList<>();Student student1 = new Student(1L,"1號學生",20,true);students.add(student1);Student student2 = new Student(2L,"2號學生",21,true);students.add(student2);Student student3 = new Student(3L,"3號學生",22,false);students.add(student3);Student student4 = new Student(4L,"4號學生",23,true);students.add(student4);model.addAttribute("students",students);return "each"; }再寫個 each.html 頁面
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"><title>for循環</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> <!-- 三元表達式 --><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、小結
我只是簡單的說了一下 Thymeleaf，它支持的東西還是有不少的，在這沒有一一說明，有需求時，可直接查詢 Thymeleaf文檔即可。
三、免費后臺模板 📋
1、免費的后臺模板：Vail Admin
2、聚集多個免費的后臺模板：免費模板
點進去直接下載就可以啦。在SpringBoot 項目中直接引用就可以啦。
四、自言自語 🚀
你好，我是博主寧在春：主頁
希望本篇文章能讓你感到有所收獲！！！
祝 我們:待別日相見時，都已有所成。
歡迎大家一起討論問題😁，躺了🛌
總結
以上是生活随笔為你收集整理的SpringBoot 整合 Thymeleaf 如何使用后台模板快速搭建项目的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JUC系列（十） | ForkJoin框
- 下一篇： 你学废了 Mybatis 动态批量修改吗