thymeleaf体验
Thymeleaf快速入門
SpringBoot并不推薦使用jsp，但是支持一些模板引擎技術：
以前大家用的比較多的是Freemarker，但是我們今天的主角是Thymeleaf！
為什么是Thymeleaf？
簡單說， Thymeleaf 是一個跟 Velocity、FreeMarker 類似的模板引擎，它可以完全替代 JSP 。相較于其他的模板引擎，它有如下四個極吸引人的特點：
-
動靜結合：Thymeleaf 在有網絡和無網絡的環境下皆可運行，即它可以讓美工在瀏覽器查看頁面的靜態效果，也可以讓程序員在服務器查看帶數據的動態頁面效果。這是由于它支持 html 原型，然后在 html 標簽里增加額外的屬性來達到模板+數據的展示方式。瀏覽器解釋 html 時會忽略未定義的標簽屬性，所以 thymeleaf 的模板可以靜態地運行；當有數據返回到頁面時，Thymeleaf 標簽會動態地替換掉靜態內容，使頁面動態顯示。
-
開箱即用：它提供標準和spring標準兩種方言，可以直接套用模板實現JSTL、 OGNL表達式效果，避免每天套模板、改jstl、改標簽的困擾。同時開發人員也可以擴展和創建自定義的方言。
-
多方言支持：Thymeleaf 提供spring標準方言和一個與 SpringMVC 完美集成的可選模塊，可以快速的實現表單綁定、屬性編輯器、國際化等功能。
-
與SpringBoot完美整合，SpringBoot提供了Thymeleaf的默認配置，并且為Thymeleaf設置了視圖解析器，我們可以像以前操作jsp一樣來操作Thymeleaf。代碼幾乎沒有任何區別，就是在模板語法上有區別。
接下來，我們就通過入門案例來體會Thymeleaf的魅力：
?
提供數據
編寫一個controller方法，返回一些用戶數據，放入模型中，將來在頁面渲染
@GetMapping("/all") public String all(ModelMap model) {// 查詢用戶List<User> users = this.userService.queryAll();// 放入模型model.addAttribute("users", users);// 返回模板名稱（就是classpath:/templates/目錄下的html文件名）return "users"; }引入啟動器
直接引入啟動器：
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>SpringBoot會自動為Thymeleaf注冊一個視圖解析器：
與解析JSP的InternalViewResolver類似，Thymeleaf也會根據前綴和后綴來確定模板文件的位置：
-
默認前綴：classpath:/templates/
-
默認后綴：.html
所以如果我們返回視圖：users，會指向到 classpath:/templates/users.html
一般我們無需進行修改，默認即可。
靜態頁面
根據上面的文檔介紹，模板默認放在classpath下的templates文件夾，我們新建一個html文件放入其中：
編寫html模板，渲染模型中的數據：
注意，把html 的名稱空間，改成：xmlns:th="http://www.thymeleaf.org" 會有語法提示
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"><title>首頁</title><style type="text/css">table {border-collapse: collapse; font-size: 14px; width: 80%; margin: auto}table, th, td {border: 1px solid darkslategray;padding: 10px}</style> </head> <body> <div style="text-align: center"><span style="color: darkslategray; font-size: 30px">歡迎光臨！</span><hr/><table class="list"><tr><th>id</th><th>姓名</th><th>用戶名</th><th>年齡</th><th>性別</th><th>生日</th></tr><tr th:each="user : ${users}"><td th:text="${user.id}">1</td><td th:text="${user.name}">張三</td><td th:text="${user.userName}">zhangsan</td><td th:text="${user.age}">20</td><td th:text="${user.sex}">男</td><td th:text="${user.birthday}">1980-02-30</td></tr></table> </div> </body> </html>?
我們看到這里使用了以下語法：
-
${} ：這個類似與el表達式，但其實是ognl的語法，比el表達式更加強大
-
th-指令：th-是利用了Html5中的自定義屬性來實現的。如果不支持H5，可以用data-th-來代替
-
th:each：類似于c:foreach 遍歷集合，但是語法更加簡潔
-
th:text：聲明標簽中的文本
-
例如<td th-text='${user.id}'>1</td>，如果user.id有值，會覆蓋默認的1
-
如果沒有值，則會顯示td中默認的1。這正是thymeleaf能夠動靜結合的原因，模板解析失敗不影響頁面的顯示效果，因為會顯示默認值！
-
-
模板緩存
Thymeleaf會在第一次對模板解析之后進行緩存，極大的提高了并發處理能力。但是這給我們開發帶來了不便，修改頁面后并不會立刻看到效果，我們開發階段可以關掉緩存使用：
# 開發階段關閉thymeleaf的模板緩存 spring.thymeleaf.cache=false注意：
在Idea中，我們需要在修改頁面后按快捷鍵：`Ctrl + Shift + F9` 對項目進行rebuild才可以。eclipse中沒有測試過。我們可以修改頁面，測試一下。
總結
以上是生活随笔為你收集整理的thymeleaf体验的全部內容，希望文章能夠幫你解決所遇到的問題。
