springboot2.x——thymeleaf引擎模板
springboot2.x——thymeleaf引擎模板
java的引擎模板主要有:thymeleaf、freemarker、volecity等等,有興趣的可以去了解另外兩個模板,此處只說thymeleaf。(三者的優點與缺點:https://blog.csdn.net/ztchun/article/details/76407612)
thymeleaf是什麽?
-
1.Thymeleaf 在有網絡和無網絡的環境下皆可運行,即它可以讓美工在瀏覽器查看頁面的靜態效果,也可以讓程序員在服務器查看帶數據的動態頁面效果。這是由於它支持 html 原型,然後在 html 標簽裏增加額外的屬性來達到模板+數據的展示方式。瀏覽器解釋 html 時會忽略未定義的標簽屬性,所以 thymeleaf 的模板可以靜態地運行;當有數據返回到頁面時,Thymeleaf 標簽會動態地替換掉靜態內容,使頁面動態顯示。
-
2.Thymeleaf 開箱即用的特性。它提供標準和spring標準兩種方言,可以直接套用模板實現JSTL、 OGNL表達式效果,避免每天套模板、該jstl、改標簽的困擾。同時開發人員也可以擴展和創建自定義的方言。
-
3.Thymeleaf 提供spring標準方言和一個與 SpringMVC 完美集成的可選模塊,可以快速的實現表單綁定、屬性編輯器、國際化等功能。
springboot為什麽推薦使用thymeleaf?
- 提供了完美的springmvc支持
- thymeleaf既是原型又是頁面,開發速度更快,符合springboot的理念。
pom.xml引入thymeleaf依賴:
nekohtml依賴:非嚴格的Html嚴格
創建application.properties文件(此處,為了方便閱讀,實際開發會使用yml文件)
yml語法需要註意一點:格式需要對齊,請勿使用tab鍵!!!!
spring: thymeleaf: cache: false # 開發時關閉緩存,不然沒法看到實時頁面 mode: LEGACYHTML5 # 用非嚴格的 HTML encoding: UTF-8 servlet: content-type: text/html server: port: 9090 #更改tomcat端口
一個簡單的測試用例:創建一個javaBean和對應的controller
User.java
1 package com.baiye.springboothello.entity; 2 3 public class User { 4 private Long id; 5 private String userName; 6 private int age; 7 8 9 public User() { 10 11 } 12 13 public User(Long id, String userName, int age) { 14 this.id = id; 15 this.userName = userName; 16 this.age = age; 17 } 18 19 public Long getId() { 20 return id; 21 } 22 23 public void setId(Long id) { 24 this.id = id; 25 } 26 27 public String getUserName() { 28 return userName; 29 } 30 31 public void setUserName(String userName) { 32 this.userName = userName; 33 } 34 35 public int getAge() { 36 return age; 37 } 38 39 public void setAge(int age) { 40 this.age = age; 41 } 42 }
UserController.java
1 package com.baiye.springboothello.controller; 2 3 import com.baiye.springboothello.entity.User; 4 import org.springframework.stereotype.Controller; 5 import org.springframework.ui.Model; 6 import org.springframework.web.bind.annotation.RequestMapping; 7 import org.springframework.web.bind.annotation.RequestMethod; 8 9 import java.util.ArrayList; 10 import java.util.List; 11 12 @Controller 13 public class UserController { 14 @RequestMapping(value = "/getUserInfo",method = RequestMethod.GET) 15 public String getUserInfo(Model model){ 16 User user = new User(100L,"admin",18); 17 User user2 = new User(101L,"李四",19); 18 User user3 = new User(102L,"張三",20); 19 User user4 = new User(103L,"王五",21); 20 List<User> list = new ArrayList<>(); 21 list.add(user2); 22 list.add(user3); 23 list.add(user4); 24 model.addAttribute("user",user); 25 model.addAttribute("list",list); 26 return "userInfo"; 27 } 28 }
對於前端的文件:html、css、js等靜態文件,springboot推薦存存放於resources目錄下的static中,但是這裏我們使用了thymeleaf引擎模板,因此html應該放在resources下另一個目錄中——template下:
userInfo.html
1 <!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Hello Thymeleaf</title> 6 </head> 7 <body> 8 <div> 9 <span>訪問 Model:</span><span th:text="${user.userName}"></span> 10 </div> 11 <div> 12 <span>訪問列表</span> 13 <table> 14 <thead> 15 <tr> 16 <th>編號</th> 17 <th>姓名</th> 18 <th>年齡</th> 19 </tr> 20 </thead> 21 <tbody> 22 <tr th:each="item : ${list}"> 23 <td th:text="${item.id}"></td> 24 <td th:text="${item.userName}"></td> 25 <td th:text="${item.age}"></td> 26 </tr> 27 </tbody> 28 </table> 29 </div> 30 </body> 31 </html>
所有的引擎模板都需要引入,themeleaf不例外,請在頭部引入:<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
themeleaf更多的標簽學習:https://blog.csdn.net/u014042066/article/details/75614906
啟動main函數,註意端口的改變,運行結果如下:
springboot2.x——thymeleaf引擎模板