具體用法參考代碼中的備注即可
常用方法
后台代碼controller
@Controller @RequestMapping("/fileoperate") public class fileOperateController { /** * 功能：跳轉thymeleaf測試頁面 * 創建人：by tm * 時間：2020-3-13 */ @RequestMapping("/thymeleaftest") public String thymeleaftest(Model model){ model.addAttribute("name","張三"); model.addAttribute("time",new Date()); model.addAttribute("richtext","<font color='red'>富文本</font>"); model.addAttribute("urltest","http://www.baidu.com"); t_user user = new t_user(); user.setName("李四"); user.setTel("11111111"); user.setAge("30"); user.setSex("中"); user.setTesttime(new Date()); user.setTestage(30); model.addAttribute("userObj",user); t_user u1 = new t_user(); u1.setName("姓名1"); u1.setAge("20"); u1.setSex("男"); u1.setTesttime(new Date()); u1.setTestage(20); t_user u2 = new t_user(); u2.setName("姓名2"); u2.setAge("10"); u2.setSex("女"); u2.setTesttime(new Date()); u2.setTestage(10); List<t_user> userList = new ArrayList<>(); userList.add(u1); userList.add(u2); userList.add(user); model.addAttribute("userList",userList); return "thymeleaftest"; } /** * 功能：thymeleaf測試頁面表單提交 * 創建人：by tm * 時間：2020-3-13 */ @PostMapping("postform") public String postform(t_user u){ System.out.println(u.getName()); System.out.println(u.getAge()); return "redirect:/fileoperate/thymeleaftest"; } }
前台代碼html和一個引入的js（test.js）
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"/> <title>Title</title> <!--加載文件 需要1. th:src 2.application.properties文件中寫上 spring.mvc.static-path-pattern=/static/** 配置 3.在statci路徑下創建test.js文件--> <script th:src="@{/static/test.js}"></script> </head> <body> <!--th:text 文本替換--> <h3>th:text 文本替換</h3> <h3 th:text="${name}">11</h3><!--這里就算寫了11也不會顯示,仍會以里面的name值為主--> <!--th:utext 文本替換--> <h3>th:utext 文本替換</h3> <h3 th:text="${richtext}"></h3> <h3 th:utext="${richtext}"></h3><!--utext會自動將html代碼轉化成css--> <!--#dates.format(變量名,'格式') 時間類型轉換 --> <h3>#dates.format(變量名,'格式') 時間類型轉換</h3> <input th:value="${#dates.format(time,'yyyy-MM-dd HH:mm:ss')}"/> <!--URL方式 th:href @{ }--> <a href="http://www.baidu.com">百度</a> <br/> <a th:href="@{http://www.baidu.com}">百度thymeleaf用法1</a><!--要使用@標識符和th:href的方式--> <br/> <a th:href="${urltest}">百度thymeleaf用法2</a><!--將地址填入后台也可以實現--> <br/> <!--對象類型用法--> <h3>對象類型用法</h3> <div> <!--使用th:id來替換id th:name來替換name th:value來替換value--> 用戶姓名：<input th:id="${userObj.name}" th:name="${userObj.name}" th:value="${userObj.name}"/> <br/> 用戶年齡：<input th:value="${userObj.age}"/> <br/> 用戶電話：<input th:value="${userObj.tel}"/> </div> <br/> <!--對象類型用法優化--> <h3>對象類型用法優化</h3> <div th:object="${userObj}"> <!--跟上面的區別為使用*來替代$ 前提是最外層的div要用th:object標簽來聲明一下userObj對象--> 用戶姓名：<input th:id="*{name}" th:name="*{name}" th:value="*{name}"/> <br/> 用戶年齡：<input th:value="*{age}"/> <br/> 用戶電話：<input th:value="*{tel}"/> </div> <!--form表單提交--> <h3>form表單提交</h3> <!--表單提交 通常用th:action里面填上地址 fileoperate是controller類上注釋 postform是表單提交的方法上面注釋值 th:object中是返回對象類型--> <form th:action="@{/fileoperate/postform}" th:object="${userObj}" th:method="post"> <input type="text" th:field="*{name}"/><!--th:field為推薦用法 常和上面的th:object一起用 生成的效果= <input type="text" id="name" name="name" value="李四" />--> <input type="text" th:field="*{age}"/><!--效果等同於 <input type="text" id="age" name="age" value="20" /> --> <input type="submit"/> </form> <br/> <!--th:if用於判斷 常和 eq或者==(等於) gt(>),lt(<),ge(>=),le(<=) ne(!=)一起用--> <h3>th:if判斷</h3> <div th:if="${userObj.age} == 18">值1</div><!--等於--> <div th:if="${userObj.age} eq 18">值2</div><!--等於--> <div th:if="${userObj.age} gt 18">值3</div><!--大於--> <div th:if="${userObj.age} lt 18">值4</div><!--小於--> <div th:if="${userObj.age} ge 18">值5</div><!--大於等於--> <div th:if="${userObj.age} le 18">值6</div><!--小於等於--> <div th:if="${userObj.age} ne 18">值7</div><!--不等於--> <br/> <!--th:unless 效果與th:if相反 --> <h3>th:unless判斷</h3> <div th:unless="${userObj.age} == 18">值1</div><!--等於--> <br/> <!--th:selected的用法--> <h3>th:selected的用法</h3> <select> <option>選擇框</option> <option th:selected="${userObj.name eq '張三'}">張三1</option> <option th:selected="${userObj.name eq '李四'}">李四1</option> <option th:selected="${userObj.name eq '王五'}">王五1</option> </select> <br/> <!--th:each用法--> <h3>th:each用法</h3> <table> <tr> <th>姓名</th> <th>年齡</th> <th>年齡備注</th> <th>性別</th> <th>時間</th> </tr> <tr th:each="person:${userList}"> <td th:text="${person.name}"></td> <td th:text="${person.age}"></td> <td th:text="${person.testage gt 15} ? 你老了:你很年輕">15歲</td> <td th:text="${person.sex}"></td> <td th:text="${#dates.format(userObj.testtime,'yyyy-MM-dd hh:mm:ss')}"></td> </tr> </table> <!--th:switch用法--> <h3>th:switch用法</h3> <div th:switch="${userObj.name}"> <!--<p th:case="'李四'">李四1</p> 李四兩邊的單引號可以省略--> <p th:case="張三">張三</p> <p th:case="#{lisi}">李四2</p><!--使用#其實是引入messages.properties的配置 還需要加上在application.properties文件中加上spring.messages.basename=i18n/messages 但是我這里一直獲取不到 原因未知--> <!-- <p th:case="*">張四</p><!–如果上面的條件都不滿足 最后就取這里的–>--> </div> </body> </html>
test.js
/*這里在html文件中用<script th:src="@{/static/test.js}"></script>引入*/ alert("Thymeleaf測試彈窗");
messages.properties和application.properties
#messages.properties
lisi=李四
#application.properties
#定義i18n的文件路徑 resources文件夾下i18n里的messages.properties文件
spring.messages.basename=i18n/messages
spring.messages.cache-seconds=3600
spring.messages.encoding=UTF-8
效果
參考：
1. https://www.jianshu.com/p/5dea7d70b42f
2. https://www.cnblogs.com/beyrl-blog/p/6633182.html
3. 博客園視頻
持續更新！！！