SpringBoot系列（六）整合thymeleaf詳解版

全棧學習筆記發表於2020-04-18
Spring Boot

SpringBoot系列（六）整合thymeleaf詳解版

1. thymeleaf簡介

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

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

 3. Thymeleaf擁有適用於Spring Framework的模組，與您喜歡的工具的大量整合以及插入您自己的功能的能力，對於現代HTML5 JVM Web開發而言，Thymeleaf是理想的選擇-儘管它還有很多工作要做。

2. thymeleaf特點

 1. thymeleaf在有網路無網路的環境下都可以執行，所以可以直接在瀏覽器開啟檢視靜態頁面效果。它支援HTML原型，可以在HTML標籤裡面新增其他屬性來實現資料渲染。

 2. thymeleaf具有開箱即用的特性，Thymeleaf是Spring boot推薦使用的模版引擎，直接以html顯示，前後端可以很好的分離。

3. thymeleaf在SpringBoot的應用

 1. 國際化，渲染不同國家的語言

 2. 共同頁面顯示，比如統一異常頁面處理，共同的頁面處理

4. SpringBoot引入Thymeleaf

 新建一個Springboot web專案，然後新增以下依賴。

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

 然後在配置檔案裡面新增如下依賴。

spring:
  thymeleaf:
    cache: false 
    prefix: classpath:/templates/
    encoding: UTF-8 #編碼
    suffix: .html #模板字尾
    mode: HTML #模板

配置說明：

 cache這一行是將頁面的快取關閉，不然我們改變頁面之後可能不能及時看到更改的內容，預設是true。

 prefix是配置thymeleaf模板所在的位置。

 encoding 是配置thymeleaf文件的編碼，後面的就不說了

5. controller配置

 上面我們配置好了環境之後就可以建立一個controller資料夾，然後寫一個controller，來測試我們的thymeleaf是否成功引入。順便建立一個物件。
程式碼：

@Controller
public class ThymeleafController {

    @GetMapping("/getStudents")
    public ModelAndView getStudent(){
        List<Student> students = new LinkedList<>();
        Student student = new Student();
        student.setId(1);
        student.setName("全棧學習筆記");
        student.setAge(21);
        Student student1 = new Student();
        student1.setId(2);
        student1.setName("張三");
        student1.setAge(22);
        students.add(student);
        students.add(student1);
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.addObject("students",students);
        modelAndView.setViewName("students");
        return modelAndView;
    }
}

 程式碼解釋 ：我們建立一個list，然後在list裡面新增資料，一遍一次將資料傳到頁面使用。然後我們建立一個ModelAndView的物件，將list放入這個modeAndView物件中，第一個引數是需要放到model中的屬性名稱相當於是一個鍵，第二個是值，是一個物件。然後利用setViewName方法，設定要跳轉的頁面或者說是將資料傳到對應的頁面。

 最外層我們使用了一個 @Controller，這個註解是用來返回一個頁面或者檢視層的。

 當然，返回ModelAndView物件只是一種方法，還有其他的方法，比如說下面這樣

@RequestMapping("/getString")
public String getString(HttpServletRequest request){
    String name = "全棧學習筆記";
    request.setAttribute("name",name);
    return "index.html";
}

利用http的request傳值。
然後還有這樣

@RequestMapping("/getModel")
public String getModel(Model model){
    model.addAttribute("key","這是一個鍵");
    return "index.html";
}

 去掉末尾的.html也可以，因為我們在配置檔案裡面設定了檔案的格式為HTML檔案。return的字串都是對應的HTML檔案的名稱。

 實體類程式碼如下：

/**
 * (Student)實體類
 *
 * @author 全棧學習筆記
 * @since 2020-04-14 11:39:10
 */
public class Student  {
    private static final long serialVersionUID = -91969758749726312L;
    /**
    * 唯一標識id
    */
    private Integer id;
    /**
    * 姓名
    */
    private String name;
    /**
    * 年齡
    */
    private Integer age;
    //省略get，set方法，自己加上
}

6. 頁面編寫

 寫好程式碼就等頁面了，在templates資料夾下面建立一個students.html檔案，編寫如下程式碼

<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <tr>
        <td>ID</td>
        <td>姓名</td>
        <td>年齡</td>
    </tr>
    <tr th:each="student:${students}">
        <td th:text="${student.id}"></td>
        <td th:text="${student.name}"></td>
        <td th:text="${student.age}"></td>
    </tr>
</table>
</body>
</html>

 這裡有一個很重要的事情就是，我們使用thymeleaf模板之前必須先引入thymeleaf，如下。

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

 這個很關鍵，不然你就用不了這個thymeleaf語法規則。

 程式碼說明：你可以看到th:each 這個語法，是用來遍歷的，類似於for迴圈，然後我們通過th:text 這個語法來渲染文字。然後還有一些其他的語法，比如說遍歷物件

<div th:object="${student}">
    <p th:text="id"></p>
    <p th:text="name"></p>
    <p th:text="age"></p>
</div>

 其他多餘的語法規則這裡就不一一講解了。
常用的語法：

<!-- 邏輯判斷 -->
th:if
th:else
<!-- 分支控制 -->
th:switch
th:case

<!--迴圈 -->
th:each
<!-- 運算 -->
<p th:text="${age}%2 == 0"></p>
<!-- 賦制value -->
th:value
<!-- 連結 -->
th:href

本期講解就到這裡，如果你覺得本文對你有用，可以點個贊，點個關注哦！下一期更精彩！wx search 全棧學習筆記！點個關注不迷路。

相關文章