SpringBoot系列（六）集成thymeleaf詳解版

時間 2020-04-23

標籤 springboot 系列集成 thymeleaf 詳解欄目 Spring 简体版

原文原文鏈接

SpringBoot系列（六）集成thymeleaf詳解版

1. thymeleaf簡介

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

2. Thymeleaf的主要目標是爲您的開發工做流程帶來優雅的天然模板 -HTML能夠在瀏覽器中正確顯示，也能夠做爲靜態原型工做，從而能夠在開發團隊中增強協做。java

3. Thymeleaf擁有適用於Spring Framework的模塊，與您喜歡的工具的大量集成以及插入您本身的功能的能力，對於現代HTML5 JVM Web開發而言，Thymeleaf是理想的選擇-儘管它還有不少工做要作。web

2. thymeleaf特色

1. thymeleaf在有網絡無網絡的環境下均可以運行，因此能夠直接在瀏覽器打開查看靜態頁面效果。它支持HTML原型，能夠在HTML標籤裏面添加其餘屬性來實現數據渲染。spring

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

3. thymeleaf在SpringBoot的應用

1. 國際化，渲染不一樣國家的語言瀏覽器

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

4. SpringBoot引入Thymeleaf

新建一個Springboot web項目，而後添加如下依賴。springboot

<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 全棧學習筆記！點個關注不迷路。