修改pom檔案，引入對應座標

    <dependencies>
        <!--web專案啟動座標-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--thymeleaf座標-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>
 

在src/main/檔案下建立templates檔案下存放模板檔案

• templates：該目錄是安全的，意味著該目錄下的內容是不允許外界直接訪問的，springboot規定所有的模板檔案必須放在該資料夾下。

Thymeleaf特點

• thymeleaf是通過特定的語法對html頁面進行渲染

Thymeleaf語法

• 變數輸出與字串操作
  • th:text：在頁面中輸出某個值

  • <span th:text="Hello"></span>
    <hr/>
    <span th:text="${msg}"></span>

  • th:value：可以將一個值放到input標籤的value屬性中

  • <input type="text" name="username" th:value="${msg}">

  • ${#string.isEmpty(key)}：判斷字串是否為空
  • 呼叫Thmeleaf內建物件時應注意語法
    • 呼叫內建物件一定要用#
    • 大部分內建物件都以s結尾strings、numbers、dates

  • //為空返回true，不為空返回false
    <span th:text="${#strings.isEmpty(msg)}"></span>

  • ${#strings.contains(k1,k2)}：判斷字串k1中是否包含字串k2

  • //false
    <span th:text="${#strings.contains('The','9')}"></span>
    //true
    <span th:text="${#strings.contains('The','T')}"></span>

  • $(#strings.startsWith(k1,k2))：判斷字串k1是否以字串k2開頭

  • <!--false-->
    <span th:text="${#strings.startsWith('The','9')}"></span>
    <!--true-->
    <span th:text="${#strings.startsWith('The','T')}"></span>

  • $(#strings.endsWith(k1,k2))：判斷字串k1是否以字串k2結尾

  • <!--fasle-->
    <span th:text="${#strings.endsWith('The','9')}"></span>
    <!--true-->
    <span th:text="${#strings.endsWith('The','例')}"></span>

  • $(#strings.length(k1))：判斷字串k1的長度

  • <!--2-->
    <span th:text="${#strings.length('張三')}"></span>

  • $(#strings.indexOf(k1,k2))：判斷字元k2在字串k1中第一次出現的的位置，沒找到返回-1

  • <!--4-->
    <span th:text="${#strings.indexOf('zhangsan','g')}"></span>

  • $(#strings.substring(k1,n1,n2))：擷取字串k1位於[n1,n2)的子串

  • <!--zha-->
    <span th:text="${#strings.substring('zhangsan',0,3)}"></span>

  • $(#strings.toUpperCase(k1))：將字串轉化為大寫

  • <!--ZHANG-->
    <span th:text="${#strings.toUpperCase('zhang')}"></span>

  • $(#strings.toLowerCase(k1))：將字串轉化為小寫

  • <!--zhang-->
    <span th:text="${#strings.toLowerCase('ZHANG')}"></span>

• 日期格式化處理
  • ${#dates.format(key)}：格式化日期key，預設的以瀏覽器語言為格式化標準

  • <span th:text="${#dates.format(date)}"></span>
    <!--按照自定義格式做日期轉換-->
    <span th:text="${#dates.format(date,'yyy/MM/dd')}"></span>

  • <!--取年-->
    <span th:text="${#dates.year(date)}"></span>
    <!--取月-->
    <span th:text="${#dates.month(date)}"></span>
    <!--取日-->
    <span th:text="${#dates.day(date)}"></span>

• 條件判斷
  • th:if="key"：key為真返回true，否則返回false

  • //頁面顯示：性別：男
    <span th:if="'男'=='男'">性別:男</span>
    <span th:if="'女'=='女'">性別:女</span>

  • th:switch="key"：多條件判斷

  • <!--多條件判斷-->
    //id的值為2，頁面顯示：ID:2
    <div 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 th:case="4">ID:4</span>
    </div>

• 迭代遍歷
  • th:each="u : ${list}"

  • <table border="1">
        <tr>
            <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>last</th>
        </tr>
        <!--迭代集合list,把迭代到的每一個元素賦值給u,var標識被迭代元素的狀態-->
        <tr th:each="u,var : ${list}">
            <td th:text="${u.name}"></td>
            <td th:text="${u.age}"></td>
            <!--當前元素索引:從0開始-->
            <td th:text="${var.index}"></td>
            <!--計數器:從1開始-->
            <td th:text="${var.count}"></td>
            <!--被迭代集合的元素個數-->
            <td th:text="${var.size}"></td>
            <!--當前行數是不是有偶數，從0開始-->
            <td th:text="${var.even}"></td>
            <!--當前行數是不是奇數，從0開始-->
            <td th:text="${var.odd}"></td>
            <!--是否是第一個元素-->
            <td th:text="${var.first}"></td>
            <!--是否是最後一個元素-->
            <td th:text="${var.last}"></td>
        </tr>
    </table>

  • 遍歷map

  • <table border="1">
        <tr>
            <th>name</th>
            <th>age</th>
        </tr>
        <tr th:each="maps : ${map}">
            <!--直接輸出的話,顯示的是當前元素value物件的地址-->
            <!--<td th:text="${maps}"></td>-->
            <td th:each="entry:${maps}" th:text="${entry.value.name}"></td>
            <td th:each="entry:${maps}" th:text="${entry.value.age}"></td>
        </tr>
    </table>

• 域操作物件
  • HttpServletRequest
  • HttpSession
  • ServletContext

  • <!--取request-->
    request:<span th:text="${#httpServletRequest.getAttribute('req')}"></span><br>
    <!--取session-->
    session:<span th:text="${session.sess}"></span><br>
    <!--取servletcontext-->
    application:<span th:text="${application.app}"></span>

• URL表示式