springBoot整合thymeleaf

快樂的程式碼發表於2020-12-01
Spring Boot

Thymeleaf簡介

Thymeleaf是一個Java模板引擎，支援html、xml、text、javascript、css、raw這幾種模型。
使用Thymeleaf首先需要引入名稱空間

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

SpringBoot並不推薦使用jsp，但是支援一些模板引擎技術，如：Freemarker，Thymeleaf，Mustache

Thymeleaf整合

（1）引入啟動器
（2）SpringBoot會自動為Thymeleaf註冊一個檢視解析器：ThymeleafViewResolver

  • 預設字首：classpath:/templates/
  • 預設字尾：.html
    如果我們返回檢視：users，會指向到 classpath:/templates/users.html；一般我們無需進行修改，預設即可。
    在這裡插入圖片描述

測試.

（3）Controller提供資料
使用ModelMap將資料與頁面合在一起

    @RequestMapping(path="/test01",method = {RequestMethod.GET})
    public String test01(ModelMap modelMap){ //帶資料建議大家使用ModelMap
        //name jack
        modelMap.addAttribute("name","jack");
        return "person-list"; //classpath:/template/person-list.html
    }

（4）編寫html模板
渲染模型中的資料
注意：把html 的名稱空間，改成：xmlns:th="http://www.thymeleaf.org"會有語法提示

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:text="${name}">傑克</div>
</body>
</html>

Person

@Data
public class Person {
    private String username;
    private String password;
}

PersonController


@Controller
public class PersonController {

    @RequestMapping(path="/test01",method = {RequestMethod.GET})
    public String test01(ModelMap modelMap){ //帶資料建議大家使用ModelMap
        //name jack
        modelMap.addAttribute("name","jack");

       //準備三個人的資料放到頁面
        List<Person> list = new ArrayList<>();
        for (int i = 0; i < 3; i++) {
            Person p = new Person();
            p.setUsername("jack"+i);
            p.setPassword("123456");
            list.add(p);
        }
        //新增資料
        modelMap.addAttribute("list",list);
        return "person-list"; //classpath:/template/person-list.html
    }
}

person-list.html

<table>
    <tr>
        <td>賬號</td>
        <td>密碼</td>
    </tr>

    <tr th:each="person: ${list}">
        <td th:text="${person.username}">jack</td>
        <td th:text="${person.password}">123456</td>
    </tr>
</table>

（5）
${} ：這個類似與el表示式，但其實是ognl的語法，比el表示式更加強大
th-指令：th-是利用了Html5中的自定義屬性來實現的。
如果不支援H5，可以用data-th-來代替
th:each：類似於c:foreach 遍歷集合，但是語法更加簡潔
th:text：宣告標籤中的文字
例如1，如果user.id有值，會覆蓋預設的1
如果沒有值，則會顯示td中預設的1。
這正是thymeleaf能夠動靜結合的原因，模板解析失敗不影響頁面的顯示效果，因為會顯示預設值！

相關文章