Thymeleaf文法詳解

本文主要介紹下Thymeleaf的基本使用的文法。

Thymeleaf文法詳解

1.變量輸出與字元串操作

1.1 基本用法

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf基本使用</title>
</head>
<body>
    <h1>基本使用</h1>
    <h2>th:text使用</h2>
    <span th:text="hello"></span><br>
    <span th:text="${msg}"></span><br>
    <h2>th:value使用</h2>
    <input type="text" th:value="測試值"><br>
    <input type="text" th:value="${msg}"><br>
</body>
</html>

@RequestMapping("/t1")
    public String t1(Model model){
        model.addAttribute("msg","th:text使用");
        return "t1";
    }

1.2 判斷字元串是否為空

Thymeleaf 内置對象

注意文法：

a.調用内置對象一定要用#

b.大部分的内置對象都以 s 結尾 strings、numbers、dates

案例

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf基本使用</title>
</head>
<body>
    <h1>基本使用</h1>
    <h2>string類型處理</h2>
    <span th:text="${#strings.isEmpty(msg)}"></span>
    <hr/>
    <span th:text="${#strings.contains(msg,'9')}"></span>
    <span th:text="${#strings.contains(msg,'t')}"></span>
    <hr/>
    <span th:text="${#strings.startsWith(s1,'a')}"></span>
    <span th:text="${#strings.startsWith(s1,'T')}"></span>
    <hr/>
    <span th:text="${#strings.endsWith(s1,'a')}"></span>
    <span th:text="${#strings.endsWith(s1,'g')}"></span>
    <hr/>
    <span th:text="${#strings.length(s1)}"></span>
    <hr/>
    <span th:text="${#strings.indexOf(s1,'b')}"></span>
    <hr/>
    <span th:text="${#strings.substring(s1,4)}"></span>
    <span th:text="${#strings.substring(s1,4,6)}"></span>
    <hr/>
    <span th:text="${#strings.toUpperCase(s1)}"></span>
    <span th:text="${#strings.toLowerCase(s2)}"></span>
    <hr/>
</body>
</html>

@RequestMapping("/t2")
 public String t2(Model model){
     model.addAttribute("msg","th:text使用");
     model.addAttribute("s1","abcdefg");
     model.addAttribute("s2","AbCdEfG");
     model.addAttribute("s3","abc123");
     return "t2";
 }

2.日期格式化處理

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf基本使用</title>
</head>
<body>
    <h1>基本使用</h1>
    <h2>Date使用</h2>
        <span th:text="${#dates.format(now)}"></span>
    <hr>
    <span th:text="${#dates.format(now,'yyyy-MM-dd')}"></span>
    <hr>
    <span th:text="${#dates.format(now,'yyyy-MM-dd hh:ss:mm')}"></span> <hr>
    <span th:text="${#dates.format(now,'yyyy-MM-dd HH:ss:mm')}"></span> <hr>
    <span th:text="${#dates.year(now)}"></span> <hr>
    <span th:text="${#dates.month(now)}"></span> <hr>
    <span th:text="${#dates.day(now)}"></span> <hr>
    <span th:text="${#dates.dayOfWeek(now)}"></span> <hr>
    <span th:text="${#dates.hour(now)}"></span> <hr>
</body>
</html>

@RequestMapping("/t3")
 public String t3(Model model){
     model.addAttribute("now",new Date());
     return "t3";
 }

3.條件判斷

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf基本使用</title>
</head>
<body>
    <h1>基本使用</h1>
    <h2>if語句</h2>

    <span th:if="${sex} == '男'" >男</span>
    <span th:if="${sex} == '女'" >男</span> <hr>
    <h2>switch語句</h2>

    <span th:switch="${id}">
        <span th:case="1">ID為1</span>
        <span th:case="2">ID為2</span>
        <span th:case="3">ID為3</span>
    </span>
</body>
</html>

@RequestMapping("/t4")
 public String t4(Model model){
     model.addAttribute("sex","男");
     model.addAttribute("id",2);
     return "t4";
 }

4.疊代周遊

循環周遊是我們經常要用到的功能。具體實作如下

@RequestMapping("/t5")
public String t5(Model model){
    List<User> list = new ArrayList<>();
    list.add(new User(1,"張三",18));
    list.add(new User(2,"李四",19));
    list.add(new User(3,"王五",20));
    Map<String, User> map = new HashMap<>();
    map.put("u1", new User(1,"張三",20));
    map.put("u2", new User(2,"李四",22));
    map.put("u3", new User(3,"王五",24));
    model.addAttribute("map", map);
    model.addAttribute("list",list);
    return "t5";
}

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf基本使用</title>
</head>
<body>
    <h1>基本使用</h1>
    <h2>疊代語句</h2>
    <table border="1"  style="border-collapse: collapse">
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr th:each="u : ${list}">
            <td th:text="${u.id}"></td>
            <td th:text="${u.username}"></td>
            <td th:text="${u.userage}"></td>
        </tr>
    </table>
    <hr>
    <h2>狀态變量</h2>
    <table border="1" style="border-collapse: collapse">
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
            <th>Index</th>
            <th>Count</th>
            <th>Size</th>
            <th>Even</th>
            <th>Odd</th>
            <th>First</th>
            <th>lase</th>
        </tr>
        <tr th:each="u,var : ${list}">
            <td th:text="${u.id}"></td>
            <td th:text="${u.username}"></td>
            <td th:text="${u.userage}"></td>
            <td th:text="${var.index}"></td>
            <td th:text="${var.count}"></td>
            <td th:text="${var.size}"></td>
            <td th:text="${var.even}"></td>
            <td th:text="${var.odd}"></td>
            <td th:text="${var.first}"></td>
            <td th:text="${var.last}"></td>
        </tr>
    </table>
    <h2>th:each 疊代 Map</h2>
    <table border="1"  style="border-collapse: collapse">
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr th:each="maps : ${map}">
            <td th:text="${maps.getKey()+':'+maps.getValue().id}"></td>
            <td th:text="${maps.getKey()+':'+maps.getValue().username}"></td>
            <td th:text="${maps.getKey()+':'+maps.getValue().userage}"></td>
        </tr>
    </table>
    <th/>

</body>
</html>

5.域對象操作

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf基本使用</title>
</head>
<body>
    <h1>基本使用</h1>
    <h2>三大作用域取值</h2>

    request：<br>
    <span th:text="${#httpServletRequest.getAttribute('req')}"></span><br>
    <span th:text="${#request.getAttribute('req')}"></span><br>
    <span th:text="${req}"></span><br>
    <hr>
    session:<br>
    <span th:text="${#httpSession.getAttribute('sess')}"></span><br>
    <span th:text="${#session.getAttribute('sess')}"></span><br>
    <hr>
    servletContext:<br>
    <span th:text="${#servletContext.getAttribute('app')}"></span><br>
</body>
</html>

@RequestMapping("/t6")
public String t6(HttpServletRequest request){
   request.setAttribute("req","request  msg");
   request.getSession().setAttribute("sess","session.sess");
   request.getServletContext().setAttribute("app","servletContext msg");
    return "t6";
}

6.URL表達式

URL的常用方式如下:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf基本使用</title>
</head>
<body>
    <h1>基本使用</h1>
    <h2>URL使用</h2>

    <a th:href="@{http://www.baidu.com}">絕對路徑</a><br/>
    <a href="http://www.baidu.com">絕對路徑2</a>
    <hr/>
    <a th:href="@{/show}">相對路徑</a>
    <hr/>
    <a th:href="@{~/project2/resourcename}">相對于伺服器的根</a>
    <hr/>
    <a th:href="@{/show(id=1,name=zhagnsan)}">相對路徑-傳參</a>
    <hr/>
    <a th:href="@{/path/{id}/show(id=1,name=zhagnsan)}">相對路徑-傳參-restful</a>
</body>
</html>

Thymeleaf文法詳解

繼續閱讀

spring boot使用thymeleaf跳轉頁面

Thymeleaf利用layout.html檔案生成頁面布局架構

來自貝佐斯的決策指南(亞馬遜)，如何在一個非初創公司裡保持快速的行動力？

用Thymeleaf替換JSP

Thymeleaf th:action

thymeleaf模闆的應用

解決thymeleaf layout布局不生效

Thymeleaf的内置屬性

用Thymeleaf替換JSP用Thymeleaf替換JSP

Thymeleaf一篇就夠了

thymeleaf 頁面取值常用

thymeleaf下拉框多選回顯下拉框多選

Springboot內建Thymeleaf

如何去掉thymeleaf的嚴格的模闆校驗