SpringBoot 整合 Thymeleaf & 如何使用後臺模板快速搭建專案

語言: CN / TW / HK
時間 2021-10-19 16:15:12
"http://www.thymeleaf.org">

highlight: a11y-dark theme: v-green

本文已參與「掘力星計劃」，贏取創作大禮包，挑戰創作激勵金。

如果你和我一樣，是一名 Java 道路上的程式設計男孩，其實我不太建議你花時間學 Thymeleaf，當然他的思想還是值得借鑑的。但是他的本質在我看來就是 Jsp 技術的翻版（Jsp 現在用的真的很少很少）。弄前端完全可以直接上手前端框架 vue。

並竟學Java在我眼裡，目前沒有什麼是不要學的。兼測試、運維、前端啥都要會點。另外就目前來說，學Java的人數恐怕仍然後端中最龐大的。

免費後臺模板在文末，大家有需求可以直接下載。

p244489528

我想如果不是學校作業，也不會心血來潮寫這篇文章👩‍💻。

閱讀本文收穫 📖

  1. 學會 Thymeleaf 常用語法🏄‍♀️
  2. 知曉 Thymeleaf 如何與 SpringBoot 整合🤹‍♀️
  3. 使用 Thymeleaf 完成學校老師作業 👨‍🔬
  4. 如果有需求，可以直接下個模板，結合SpringBoot 寫個畢業設計👨‍💻

一、 Thymeleaf 初介紹 📓

Thymeleaf 官網

Thymeleaf 官方文件

Thymeleaf是適用於 Web 和獨立環境的現代伺服器端 Java 模板引擎。

Thymeleaf 的主要目標是為您的開發工作流程帶來優雅的自然模板——HTML可以在瀏覽器中正確顯示，也可以作為靜態原型工作，從而加強開發團隊的協作。

憑藉 Spring Framework 的模組、與您最喜歡的工具的大量整合以及插入您自己的功能的能力，Thymeleaf 是現代 HTML5 JVM Web 開發的理想選擇——儘管它還有更多功能。 ---官方介紹

二、SpringBoot 整合 Thymeleaf 📚

主要針對我們在專案中最常見的幾種用法進行講解。同時我們也是在專案中直接講 Thymeleaf 的用法。

2.1、新建 SpringBoot 專案

這個就不用說了哈，我想大家都是會這個的吧。

2.2、匯入依賴

xml <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 靜態資源存放路徑

首先我們將模板下載下來：

image-20211019081512286

image-20211019081735052

我們點進 doc ，將需要的頁面檔案複製到 resources/templates包下，將css、images、js複製到 resources/static包下。

image-20211019081820677

2.4、書寫配置檔案

thymeleaf 可以配置的一些屬性，這只是常見的哈。

yml spring: thymeleaf: enabled: true #開啟thymeleaf檢視解析 encoding: utf-8 #編碼 prefix: classpath:/templates/ #字首 當然預設也是這個，可以不配置 cache: false #是否使用快取 mode: HTML #嚴格的HTML語法模式 suffix: .html #字尾名

2.5、編寫Controller

我們以 登入頁面 為例，寫個Controller 跳轉到 login.html。

```java @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的頁面。而不是下面這個成功的頁面。

image-20211019083757427

原因是在我們使用 Thyemleaf後，在頁面中就不應該再使用相對路徑,如這種： <link rel="stylesheet" type="text/css" th:href="/css/main.css">。

而是應該修改為：<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}"> 。

修改完之後，還應在 html 頁面的頭部做一下修改：

image-20211019084131276

html <html lang="en" xmlns:th="http://www.thymeleaf.org">

2.7、Thyemleaf 常用

Thymeleaf 官網快速入門介紹

Thymeleaf 官方文件

2.7.1、th:href | 連結 (URL) 表示式

其實我們剛剛已經說了這點：

html //以前的 <link rel="stylesheet" type="text/css" href="/css/main.css"> //修改後的： <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">

至於這麼做的原因是由於Thymeleaf 的語法規則規定。

錯誤示例：

html <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

我們都會有一個需要提示資訊的時候，就是簡單展示一段文字，如：

```html

Welcome to our grocery store!

```

我們修改一下之前的Controller:

java /*** 跳轉到登入頁面 */ @GetMapping("/login") public String login(Model model){ model.addAttribute("systemName","學生管理系統"); return "login"; }

另外修改一下登入頁面：

```html

```

image-20211019090641923

2.7.3、th:action

表單提交我想是最常見的啦吧。

```html

```

在這裡提交的路徑，也是需要用 @{} 包裹起來。

後端還是照寫，沒有變化。

2.7.4、th:each & th:if

迴圈、判斷應該是沒有哪裡用不到的啦吧。

寫個Student 類，稍後會用到

```java @Data @AllArgsConstructor @NoArgsConstructor public class Student { private Long id; private String name; private Integer age; /* * true 為男 * false 為女 / private Boolean gender; }

```

寫個controller

java /** * 新增多個學生 */ @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 頁面

```html

for迴圈

id 姓名 年齡 性別
利用if判斷性別 男 利用if判斷性別 女

```

成果：

image-20211019092923128

2.8、小結

我只是簡單的說了一下 Thymeleaf，它支援的東西還是有不少的，在這沒有一一說明，有需求時，可直接查詢 Thymeleaf文件即可。

三、免費後臺模板 📋

1、免費的後臺模板：Vail Admin

2、聚集多個免費的後臺模板：免費模板

點進去直接下載就可以啦。在SpringBoot 專案中直接引用就可以啦。

image-20211018214021827

四、自言自語 🚀

你好，我是博主寧在春：主頁

希望本篇文章能讓你感到有所收穫！！！

祝 我們:待別日相見時，都已有所成。

歡迎大家一起討論問題😁，躺了🛌

image-20211014091239193

走過路過，不要錯過，在文章下評論有一定機率獲得來掘金醬的禮品哦。

評論越走心越有可能拿獎哦！！！

詳情👉掘力星計劃

「」
「」