詳解SpringBoot+Thymeleaf 基于HTML5的現(xiàn)代模板引擎
序言:
Thymeleaf 是Java服務(wù)端的模板引擎,與傳統(tǒng)的JSP不同,前者可以使用瀏覽器直接打開,因?yàn)榭梢院雎缘敉卣箤傩?,相?dāng)于打開原生頁(yè)面,給前端人員也帶來(lái)一定的便利。如果你已經(jīng)厭倦了JSP+JSTL的組合,Thymeleaf或許是個(gè)不錯(cuò)的選擇!本工程傳送門:SpringBoot-Web-Thymeleaf
開始使用
1.引入依賴
SpringBoot默認(rèn)提供了Thymeleaf的Starter,只需簡(jiǎn)單引入依賴即可。
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
目前默認(rèn)版本是2.1,如果想升級(jí)版本到3.0,可以這樣修改。
<properties> <thymeleaf.version>3.0.7.RELEASE</thymeleaf.version> <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version> </properties>
為了方便開發(fā),項(xiàng)目案例采用了熱部署工具dev-tools ,這樣我們?cè)谛薷捻?yè)面之后,IDEA會(huì)自動(dòng)加載,從而達(dá)到實(shí)現(xiàn)熱更新的效果。
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> </dependency>
注:由于IDEA默認(rèn)關(guān)閉了熱部署,需要做一些設(shè)置才能使其生效。解決方法:首先按住Ctrl+Shift+Alt+/ 然后進(jìn)入 Registry ,然后勾選compiler.automake.allow.when.app.running 即可。另外,Build->Compiler 也要勾選上Build Project automatically .
2. 添加相關(guān)配置
Thymeleaf默認(rèn)開啟了頁(yè)面緩存,在開發(fā)的時(shí)候,應(yīng)該關(guān)閉緩存。此外,通常我們還會(huì)指定頁(yè)面的存放路徑。(默認(rèn)是classpath:/templates/)
application.yml 配置如下: spring: thymeleaf: cache: false #關(guān)閉緩存 prefix: classpath:/views/ #添加路徑前綴
3.編寫HTML
編寫Thymeleaf和書寫HTML5頁(yè)面沒有什么不同,最大的轉(zhuǎn)變就是使用拓展屬性(th:xx)去跟服務(wù)端進(jìn)行數(shù)據(jù)交互,保留原始頁(yè)面風(fēng)格,也是Thymeleaf的推崇的風(fēng)格。例如下面這個(gè)簡(jiǎn)單的案例,啟動(dòng)項(xiàng)目,我們發(fā)現(xiàn)頁(yè)面跳轉(zhuǎn)的是簡(jiǎn)書的連接,這一點(diǎn)也驗(yàn)證了Thymeleaf覆蓋原生頁(yè)面數(shù)據(jù)的極佳能力。
頁(yè)面代碼:
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>Thymeleaf</title> </head> <body> <h2>歡迎使用Thymeleaf!!</h2> <a rel="external nofollow" th:href="${info}" rel="external nofollow" >戳我有驚喜</a> </body> </html>
后端代碼:
@Controller public class UserController { @GetMapping("/") public String index(Model model) { model.addAttribute("info", "user/list"); return "index"; } @GetMapping("/user") public String hehe(Model model) { model.addAttribute("user", new User(UUID.randomUUID().toString(), "yizhiwazi", "20170928")); return "user"; } @GetMapping("/user/list") public String userlist(Model model) { List<User> userList = new ArrayList<>(); userList.add(new User(UUID.randomUUID().toString(), "yizhiwazi", "20170928")); userList.add(new User(UUID.randomUUID().toString(), "kumamon", "123456")); userList.add(new User(UUID.randomUUID().toString(), "admin", "admin")); model.addAttribute("userList", userList); return "userList"; } }
現(xiàn)在我們嘗試回填一個(gè)表單,展示單個(gè)用戶信息。
<!-- 使用th:object 搭配*{} 可以省略對(duì)象名 --> <form action="/" th:object="${user}" > <input type="hidden" name="userId" th:value="*{userId}" /> <input type="text" name="username" th:value="*{username}" /> <input type="text" name="password" th:value="*{password}" /> </form>
接下來(lái),我們進(jìn)入一個(gè)更復(fù)雜的案例,例如展示一個(gè)用戶列表信息,不需要編寫新的標(biāo)簽,就可以完成對(duì)批量用戶的遍歷。
<h2>用戶列表</h2> <!--說(shuō)明: th:each="obj,stat:${objects}" 分別代表單個(gè)實(shí)例,狀態(tài)(可省略),待遍歷對(duì)象--> <div th:each="user:${userList}"> <input type="hidden" name="userId" th:value="${user.userId}"/> 用戶姓名:<input type="text" name="password" th:value="${user.username}"/> 登錄密碼:<input type="text" name="username" th:value="${user.password}"/> </div>
好了,Thymeleaf簡(jiǎn)單介紹到這里,更多詳細(xì)說(shuō)明,可閱讀Thymeleaf 官方指南 3.0
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- springboot學(xué)習(xí)之Thymeleaf模板引擎及原理介紹
- springboot?使用clickhouse實(shí)時(shí)大數(shù)據(jù)分析引擎(使用方式)
- SpringBoot整合Drools規(guī)則引擎動(dòng)態(tài)生成業(yè)務(wù)規(guī)則的實(shí)現(xiàn)
- springboot2.5.2與 flowable6.6.0整合流程引擎應(yīng)用分析
- SpringBoot使用Thymeleaf模板引擎訪問靜態(tài)html的過程
- SpringBoot2整合Drools規(guī)則引擎及案例詳解
- 詳解Elastic Search搜索引擎在SpringBoot中的實(shí)踐
- springboot?整合表達(dá)式計(jì)算引擎?Aviator?使用示例詳解
相關(guān)文章
詳解手把手Maven搭建SpringMVC+Spring+MyBatis框架(超級(jí)詳細(xì)版)
本篇文章主要介紹了手把手Maven搭建SpringMVC+Spring+MyBatis框架(超級(jí)詳細(xì)版),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12基于hibernate實(shí)現(xiàn)的分頁(yè)技術(shù)實(shí)例分析
這篇文章主要介紹了基于hibernate實(shí)現(xiàn)的分頁(yè)技術(shù),結(jié)合實(shí)例形式分析了Hibernate分頁(yè)技術(shù)的原理,實(shí)現(xiàn)步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-03-03java?http請(qǐng)求設(shè)置代理Proxy的兩種常見方法
代理是一種常見的設(shè)計(jì)模式,其目的就是為其他對(duì)象提供一個(gè)代理以控制對(duì)某個(gè)對(duì)象的訪問,這篇文章主要給大家介紹了關(guān)于java?http請(qǐng)求設(shè)置代理Proxy的兩種常見方法,需要的朋友可以參考下2023-11-11Java 數(shù)據(jù)庫(kù)連接(JDBC)的相關(guān)總結(jié)
這篇文章主要介紹了Java 數(shù)據(jù)庫(kù)連接(JDBC)的相關(guān)總結(jié),幫助大家更好的理解和學(xué)習(xí)使用Java,感興趣的朋友可以了解下2021-03-03教你創(chuàng)建springcloud微服務(wù)的基礎(chǔ)子服務(wù)的超詳細(xì)過程
這篇文章主要介紹了創(chuàng)建springcloud微服務(wù)的基礎(chǔ)子服務(wù),主要是創(chuàng)建兩個(gè)springboot服務(wù),在教程中增加springcloud相關(guān)組件,本文分步驟給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04Mybatis學(xué)習(xí)總結(jié)之mybatis使用建議
這篇文章主要介紹了Mybatis學(xué)習(xí)總結(jié)之mybatis使用建議的相關(guān)資料,非常具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05springboot中縮短一個(gè)url鏈接的實(shí)現(xiàn)
縮短 URL 是現(xiàn)代應(yīng)用程序中常見的需求,通常用于減少長(zhǎng) URL 的長(zhǎng)度,使其更易于分享,URL 縮短服務(wù)的核心思路是將長(zhǎng) URL 映射到一個(gè)唯一的短代碼,本文主要介紹了springboot中縮短一個(gè)url鏈接的實(shí)現(xiàn),感興趣的可以了解一下2024-09-09SpringDataJpa如何使用union多表分頁(yè)條件查詢
這篇文章主要介紹了SpringDataJpa如何使用union多表分頁(yè)條件查詢,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-02-02