Thymeleaf模板引擎學習
阿新 • • 發佈：2020-07-13
開發傳統Java WEB專案時，我們可以使用JSP頁面模板語言，但是在SpringBoot中已經不推薦使用JSP頁面進行頁面渲染了。從而Thymeleaf提供了一個用於整合Spring MVC的可選模組，在應用開發中，你可以使用Thymeleaf來完全代替JSP，或其他模板引擎，如Velocity、FreeMarker等。它的語法與我們以前使用的EL表示式和JSTL標籤庫十分類似。接下來我們進行學習使用Thymeleaf！
一、新建一個Spring Boot專案新增Thymeleaf依賴：建立Spring Boot可以參考一下這篇博文
1 <dependency> 2 <groupId>org.springframework.boot</groupId> 3<artifactId>spring-boot-starter-thymeleaf</artifactId> 4 </dependency>
二、在SpringBoot的.yml配置檔案中新增以下配置：
1 server: 2 port: 8097 3 spring: 4 thymeleaf: 5 prefix: classpath:/templates/ #獲取頁面路徑 6 mode: HTML5 7 encoding: UTF-8 8 content-type: text/html 9 cache: false
三、新建一個Controller進行請求攔截，最後返回一個頁面：
1 @Controller //此處必須是@Controller註解，@RestController註解不進行解析，則返回頁面返回JSON字串 2 public class ThymeleafController { 3 4 //傳輸簡單文字，Model物件，進行資訊儲存返回到index頁面 5 @RequestMapping("/hello") 6 public String hello(Model model){ 7 model.addAttribute("name","李小龍");8 model.addAttribute("age","15"); 9 model.addAttribute("text","那小子真帥"); 10 return "index"; 11 } 12 13 }
四、在resources/templates/新建一個index.html頁面，程式碼如下：
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <!--Thymeleaf庫--> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Thymeleaf</title> </head> <body> <!--基本欄位顯示--> <p style="color:red">hello world</p> <p th:text="'姓名:'+${name}"></p> <p th:text="'年齡:'+${age}"></p> <p th:text="'介紹:'+${text}"></p> </body>
至此我們啟動專案，訪問:http://localhost:8097/hello檢視以下效果說明：使用Thymeleaf模板進行簡單欄位傳輸並渲染到頁面成功 ！
接下來可以在頁面中進行條件判斷:if、unless、switch,頁面效果大家可以試驗一番。
<!--if判斷true時才顯示--> <div th:if="${age} == 16">... do something ...</div> <!--unless和if判斷條件相反，只有為false時候才會顯示--> <div th:unless="${age} == 16">... something ...</div> <!--switch判斷進行資料匹配判斷--> <span th:switch="${age}"> <p th:case="15">李小龍是15歲</p> <p th:case="16">李小龍是16歲</p> <p th:case="*">沒有匹配成功的資料！</p> </span>
在Thymeleaf模板中傳輸物件：1.Controller層、2.HTML層、
1 //傳輸物件 2 @RequestMapping("/queryuser") 3 public String queryuser(Model model){ 4 User user = new User(); 5 user.setName("李小龍"); 6 user.setAge("16歲"); 7 user.setText("他對我說:那小子真帥"); 8 user.setSuccess("並拍了拍了我的肩膀"); 9 model.addAttribute("myuser",user); 10 return "user"; 11 }
<!--第一種方式是通過屬性獲取--> <div style="border: 1px solid red;width: 200px;height: 160px;text-align: center; "> <p th:text="'尊姓大名:'+${myuser.name}"></p> <p th:text="'芳齡:'+${myuser.age}"></p> <p th:text="'簡介:'+${myuser.text}"></p> <p th:text="'動作:'+${myuser.success}"></p> </div> <!--第一種方式是通過屬性選擇值--> <div style="border: 1px solid blue;width: 200px;height: 160px;text-align: center; "> <div th:object="${myuser}"> <p th:text="'尊姓大名:'+ *{name}"></p> <p th:text="'芳齡:'+ *{age}"></p> <p th:text="'簡介:'+ *{text}"></p> <p th:text="'動作:'+ *{success}"></p> </div> </div>
效果如下:
在Thymeleaf模板中傳輸List、Map集合：1.Controller層、2.HTML層、
1 //傳輸List 2 @RequestMapping("/finAllList") 3 public String finAllList(Model model){ 4 List<User> listuser = new ArrayList<User>(); 5 for (int i=0;i<6;i++){ 6 User user = new User(); 7 user.setName("阿里雲成立第"+i+"年"); 8 user.setAge("阿里雲第"+i+"歲"); 9 user.setText("阿里雲第"+i+"歲時做了"+i+"件事情"); 10 user.setSuccess("並拍了"+i+"次我的肩膀"); 11 listuser.add(user); 12 } 13 model.addAttribute("ListUser",listuser); 14 return "userarry"; 15 } 16 17 18 //傳輸Map 19 @RequestMapping("/finAllMap") 20 public String finAllMap(Model model){ 21 Map<String,User> mapuser = new HashMap<String, User>(); 22 for (int i=0;i<6;i++){ 23 User user = new User(); 24 user.setName("阿里雲成立第"+i+"年"); 25 user.setAge("阿里雲第"+i+"歲"); 26 user.setText("阿里雲第"+i+"歲時做了"+i+"件事情"); 27 user.setSuccess("並拍了"+i+"次我的肩膀"); 28 mapuser.put("mapuser"+i,user); 29 } 30 model.addAttribute("Mapuser",mapuser); 31 return "userarry"; 32 }
<!-- 對list集合不為空判斷--> <table th:if="${not #lists.isEmpty(ListUser)}"> <tr><td>List序號</td><td>姓名</td><td>年齡</td><td>事件</td><td>動作</td><td>偶數</td><td>奇數</td></tr> <tr th:each="user,memberStat:${ListUser}"> <td th:text="${memberStat.index + 1}"></td> <td th:text="${user.name}"></td> <td th:text="${user.age}"></td> <td th:text="${user.text}"></td> <td th:text="${user.success}"></td> <td th:text="${memberStat.even}"></td> <td th:text="${memberStat.odd}"></td> </tr> </table> <!--對Map集合不為空判斷--> <table th:if="${not #maps.isEmpty(Mapuser)}"> <tr><td>Map集合序號</td><td>key</td><td>姓名</td><td>年齡</td><td>事件</td><td>動作</td><td>偶數</td><td>奇數</td></tr> <tr th:each="mapuser,memberStat:${Mapuser}"> <td th:text="${memberStat.index + 1}"></td> <td th:text="${mapuser.key}"/> <td th:text="${mapuser.value.name}"></td> <td th:text="${mapuser.value.age}"></td> <td th:text="${mapuser.value.text}"></td> <td th:text="${mapuser.value.success}"></td> <td th:text="${memberStat.even}"></td> <td th:text="${memberStat.odd}"></td> </tr> </table>
效果如下:
個人總結：
在此個人只是做了一個小例子，各大網友可自行擴充套件功能業務，學習是永無止境的！
參考博文：