thymeleaf常用標籤的使用方法
阿新 • • 發佈：2018-12-20
一 點睛
- 基本使用方式
- 物件引用方式
- 時間型別轉換
- text與utext
- URL
- 引入靜態資原始檔js/css
- 條件判斷th:if
- th:unless與th:if
- 迴圈th:each
- th:switch與th:case
二 配置檔案application.properties
############################################################ # # 配置i18n 資原始檔，供thymeleaf 讀取 # ############################################################ spring.messages.basename=i18n/messages spring.messages.cache-seconds=3600 spring.messages.encoding=UTF-8 # 設定靜態檔案路徑，js，css等 spring.mvc.static-path-pattern=/static/**
三 il8n配置檔案
############################################################
#
# 使用者自定義許可權
#
############################################################
# 普通管理員
roles.manager=manager
roles.superadmin=superadmin四 靜態資原始檔test.js
alert("hello js");五 模板頁面
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8" /> <title></title> <!--引入靜態資源--> <!-- <script th:src="@{/static/js/test.js}"></script> --> </head> <body> <div> 使用者姓名：<input th:id="${user.name}" th:name="${user.name}" th:value="${user.name}"/> <br/> 使用者年齡：<input th:value="${user.age}"/> <br/> 使用者生日：<input th:value="${user.birthday}"/> <br/> 使用者生日：<input th:value="${#dates.format(user.birthday, 'yyyy-MM-dd')}"/> <br/> </div> <br/> <div th:object="${user}"> 使用者姓名：<input th:id="*{name}" th:name="*{name}" th:value="*{name}"/> <br/> 使用者年齡：<input th:value="*{age}"/> <br/> 使用者生日：<input th:value="*{#dates.format(birthday, 'yyyy-MM-dd hh:mm:ss')}"/> <br/> </div> <br/> text 與 utext ：<br/> <span th:text="${user.desc}">abc</span> <br/> <span th:utext="${user.desc}">abc</span> <br/> <br/> URL:<br/> <a href="" th:href="@{http://www.imooc.com}">網站地址</a> <br/> <br/> <form th:action="@{/th/postform}" th:object="${user}" method="post" th:method="post"> <input type="text" th:field="*{name}"/> <input type="text" th:field="*{age}"/> <input type="submit"/> </form> <br/> <br/> <div th:if="${user.age} == 18">十八歲的天空</div> <div th:if="${user.age} gt 18">你老了</div> <div th:if="${user.age} lt 18">你很年輕</div> <div th:if="${user.age} ge 18">大於等於</div> <div th:if="${user.age} le 18">小於等於</div> <br/> <br/> <select> <option >選擇框</option> <option th:selected="${user.name eq 'superadmin'}">superadmin</option> <option th:selected="${user.name eq 'imooc'}">imooc</option> <option th:selected="${user.name eq 'LeeCX'}">LeeCX</option> </select> <br/> <br/> <table> <tr> <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.age gt 18} ? 你老了 : 你很年輕">18歲</td> <td th:text="${#dates.format(user.birthday, 'yyyy-MM-dd hh:mm:ss')}"></td> </tr> </table> <br/> <br/> <div th:switch="${user.name}"> <p th:case="'cakin'">cakin</p> <p th:case="#{roles.manager}">普通管理員</p> <p th:case="#{roles.superadmin}">超級管理員</p> <p th:case="*">其他使用者</p> </div> <br/> </body> </html>
六 控制器
package com.imooc.controller; import java.util.ArrayList; import java.util.Date; import java.util.List; import org.springframework.stereotype.Controller; import org.springframework.ui.ModelMap; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestMapping; import com.imooc.pojo.User; @Controller @RequestMapping("th") public class ThymeleafController { @RequestMapping("test") public String test(ModelMap map) { User u = new User(); u.setName("superadmin"); u.setAge(10); u.setPassword("123465"); u.setBirthday(new Date()); u.setDesc("<font color='green'><b>hello imooc</b></font>"); map.addAttribute("user", u); User u1 = new User(); u1.setAge(19); u1.setName("cakin"); u1.setPassword("123456"); u1.setBirthday(new Date()); User u2 = new User(); u2.setAge(18); u2.setName("go"); u2.setPassword("123456"); u2.setBirthday(new Date()); List<User> userList = new ArrayList<>(); userList.add(u); userList.add(u1); userList.add(u2); map.addAttribute("userList", userList); return "thymeleaf/test"; } @PostMapping("postform") public String postform(User u) { System.out.println("姓名：" + u.getName()); System.out.println("年齡：" + u.getAge()); return "redirect:/th/test"; } }
七 測試結果
