## 前言 修改application，這樣在訪問頁面時需要加上該前綴. 訪問路徑變成 [http://127.0.0.1:8899/kimgao/template/thymeleaf](http://127.0.0.1:8899/kimgao/template/thymeleaf) ~~~ server: port: 8899 # web應用服務端口 servlet: context-path: /kimgao ~~~  修改一下TemplateController，添加user信息 ~~~ Map<String,String> user = new HashMap<>(); user.put("id","1"); user.put("username","kim"); user.put("password","123456"); model.addAttribute("user",user); ~~~  ## 一、基礎語法 ### 變量表達式`${}` 使用方法：直接使用`th:xx = "${}"`獲取對象屬性 。例如： ~~~ <form id="userForm"> <input id="id" name="id" th:value="${user.id}"/> <input id="username" name="username" th:value="${user.username}"/> <input id="password" name="password" th:value="${user.password}"/> </form> <div th:text="hello"></div> <div th:text="${articles[0].author}"></div> ~~~ ### 選擇變量表達式`*{}` 使用方法：首先通過`th:object`獲取對象，然后使用`th:xx = "*{}"`獲取對象屬性。(可讀性較差) ~~~ <form id="userForm" th:object="${user}"> <input id="id" name="id" th:value="*{id}"/> <input id="username" name="username" th:value="*{username}"/> <input id="password" name="password" th:value="*{password}"/> </form> ~~~ ### 鏈接表達式`@{}` 使用方法：通過鏈接表達式`@{}`直接拿到應用路徑，然后拼接靜態資源路徑。例如： ~~~ <script th:src="@{/webjars/jquery/jquery.js}"></script> <link th:href="@{/webjars/bootstrap/css/bootstrap.css}" rel="stylesheet" type="text/css"> ~~~ 這樣無論application如何修改都不需要修改html   ### 其它表達式 在基礎語法中，默認支持字符串連接、數學運算、布爾邏輯和三目運算等。例如： ~~~ <input name="name" th:value="${'I am '+(user.name!=null?user.name:'NoBody')}"/> ~~~ ## 二、迭代循環 想要遍歷`List`集合很簡單，配合`th:each`即可快速完成迭代。例如遍歷用戶列表： ~~~ <div th:each="article:${articles}" > 作者：<input th:value="${article.author}"/> 標題：<input th:value="${article.title}"/> 內容：<input th:value="${article.content}"/> </div> ~~~ 在集合的迭代過程還可以獲取狀態變量，只需在變量后面指定狀態變量名即可，狀態變量可用于獲取集合的下標/序號、總數、是否為單數/偶數行、是否為第一個/最后一個。例如： ~~~ <div th:each="article,stat:${articles}" th:class="${stat.even}?'even':'odd'"> 下標：<input th:value="${stat.index}"/> 序號：<input th:value="${stat.count}"/> 作者：<input th:value="${article.author}"/> 標題：<input th:value="${article.title}"/> 內容：<input th:value="${article.content}"/> </div> ~~~ ~~~ <table class=""> <tr> <td>下標</td> <td>序號</td> <td>作者</td> <td>教程名稱</td> <td>內容</td> </tr> <!-- 用thymeleaf語法遍歷articles列表--> <tr th:each="item,stat : ${articles}" th:style="${stat.even}?'background-color:blue':'background-color:red'"> <td th:text="${stat.index}"></td> <td th:text="${stat.count}"></td> <td th:text="${item.author}"></td> <td th:text="${item.title}"></td> <td th:text="${item.content}"></td> </tr> </table> ~~~ 可實現表格隔行變色  **二.迭代下標變量用法：** 狀態變量定義在一個th:每個屬性和包含以下數據: 1. 當前迭代索引,從0開始。這是索引屬性。index 2. 當前迭代索引,從1開始。這是統計屬性。count 3. 元素的總量迭代變量。這是大小屬性。　size 4. iter變量為每個迭代。這是目前的財產。　current 5. 是否當前迭代是奇數還是偶數。這些even/odd的布爾屬性。 6. 是否第一個當前迭代。這是first布爾屬性。 7. 是否最后一個當前迭代。這是last布爾屬性。 ## 三、條件判斷 條件判斷通常用于動態頁面的初始化，例如： ~~~ <div th:if="${articles}"> <div>的確存在..</div> </div> ~~~ 如果想取反則使用unless 例如： ~~~ <div th:unless="${articles}"> <div>不存在..</div> </div> ~~~ 舉例：設置stat.index等于0的時候顯示  可以看到在第一行的時候顯示了，第二行沒有顯示。