當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

Spring Boot系列之Thymeleaf模板布局

發布時間：2023/12/20 javascript 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 Spring Boot系列之Thymeleaf模板布局小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

PS：原文首發于微信公眾號：躬行之(jzman-blog)

前面幾篇文章嘗試了接口開發、Thymeleaf 模板及其常用語法，閱讀本文之前可以閱讀前面幾篇：

Spring Boot系列之開發一個接口
Spring Boot系列之Thymeleaf模板入門
Spring Boot系列之Thymeleaf常用語法

Thymeleaf 模板布局主要是為了更好的對前端頁面進行劃分，主要是通過 Thymeleaf 相關語法來對前端頁面布局，主要內容如下：

引用模板片段

片段表達式語法

參數化模板片段

移除模板片段

模板布局繼承

引用模板片段

使用 th:fragment 可以定義布局片段供其他頁面引用，在 foter.html 中定義模板片段如下：

<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"><title>Footer</title> </head> <body>  <div th:fragment="copy">© 2020 躬行之 </div> </body> </html>

上面定義了一個名為 copy 的片段，可以使用 th:insert 、 th:replace 和 th:include 來移入模板片段，其中 th:include 在 Thymeleaf 3.0 之后就不再推薦使用，在 home.html 中引入模板片段如下：

<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"><title>Template Layout.</title> </head> <body><div th:insert="~{footer::copy}"></div> </body> </html>

運行項目，查看 http://localhost:8080/home,參考如下：

? 2020 躬行之 ? 2020 躬行之

下面來看一下 th:insert 、 th:replace 和 th:include 三個之間的區別，使用三種方式分別引入名稱為 copy 的模板片段如下：

<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"><title>Template Layout.</title> </head> <body><p>---th:insert、th:replace、th:include的區別---</p><div id="insert" th:insert="~{footer::copy}">insert</div><div id="replace" th:replace="~{footer::copy}">replace</div><div id="include" th:include="~{footer::copy}">include</div> </body> </html>

上述代碼中三個 div 分別設置了對應的 id 為 insert、replace 和 include，運行項目之后在瀏覽器查看源代碼如下：

<p>---th:insert、th:replace、th:include的區別---</p> <div id="insert"><div>© 2020 躬行之</div> </div> <div>© 2020 躬行之 </div> <div id="include">© 2020 躬行之 </div>

可知三者區別如下：

th:insert：直接插入模板片段；
th:replace：直接替換當前片段；
th:include：直接插入指定片段的內容到當前片段中。

片段表達式語法

模板主要使用了片段表達式，片段表達式語法如下：

?{templatename::selector}:引入指定模板指定片段名稱的模板片段;
?{templatename}:引入指定模板的所有片段;
?{:: selector}:同 ?{this:: selector},引入當前模板指定名稱的模板片段。

其中 templatename 表示模板名稱，如上文中的 footer,selector 表示片段名稱，如上文中的 copy。

此外 selector 也可以是 ID 選擇器、類選擇器以及標簽，這樣就可以在沒有定義 th:fragment 的情況下使用相關模板片段了，如下：

<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"><title>Footer</title> </head> <body><div id="head"><p>在沒有定義th:fragment的情況下使用片段表達式--id</p></div><div class="head"><p>在沒有定義th:fragment的情況下使用片段表達式--class</p></div><div ><span>在沒有定義th:fragment的情況下使用片段表達式--span</span></div> </body> </html>

可在另一個模板中使用上述相應的代碼片段，如下：

<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"><title>Template Layout.</title> </head> <body><div th:insert="~{footer::#head}"></div><div th:insert="~{footer::.head}"></div><div th:insert="~{footer::span}"></div> </body> </html>

運行項目，結果如下：

在沒有定義th:fragment的情況下使用片段表達式--id 在沒有定義th:fragment的情況下使用片段表達式--class 在沒有定義th:fragment的情況下使用片段表達式--span

參數化模板片段

在使用 th:fragment 定義模板片段的時候可以添加參數，如下：

<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"><title>Footer</title> </head> <body><div th:fragment="frag(name)" th:assert="${!#strings.isEmpty(name)}"><p th:text="公眾號名稱+':'+${name}">Default</p></div> </body> </html>

然后在對應的頁面引用上述片段就可以傳遞對應參數，如下：

<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"><title>Template Layout.</title> </head> <body><div th:insert="~{footer::frag(${gzh})}"></div><div th:insert="~{footer::frag(name=${gzh})}"></div> </body> </html>

上述代碼中參數值 gzh=躬行之，運行項目，結果如下：

公眾號名稱:躬行之公眾號名稱:躬行之

其中可以在模板片段中使用 th:assert 屬性來進行參數驗證，也就是只有 th:assert 里面的表達式的值都為 true 才會繼續執行，否則則會拋出異常。

移除模板片段

移除模板片段使用的是 th:remove 屬性，該屬性可設置的值如下：

all: 移除所在標簽以及所有的子標簽；
body: 不移除所在標簽，只移除對應的子標簽；
tag: 只移除所在標簽，不刪除其子標簽；
all-but-first: 移除所在標簽除第一個之外的所有子標簽；
none : 無任何移除操作。

具體使用方式參考如下：

<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <table><tr><th>NAME</th><th>PRICE</th><th>COMMENT</th></tr><tr th:remove="all"><td>A</td><td>1</td><td>AA</td></tr><tr th:remove="body"><td>B</td><td>2</td><td>BB</td></tr><tr th:remove="tag"><td>C</td><td>3</td><td>CC</td></tr><tr th:remove="all-but-first"><td>D</td><td>4</td><td>DD</td></tr><tr th:remove="none"><td>E</td><td>5</td><td>EE</td></tr> </table> </body> </html>

主要關注 th:remove 屬性設置不同的值運行后的效果，相當于如下頁面：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <table><tr><th>NAME</th><th>PRICE</th><th>COMMENT</th></tr><tr></tr><td>C</td><td>3</td><td>CC</td><tr><td>D</td></tr><tr><td>E</td><td>5</td><td>EE</td></tr> </table> </body> </html>

模板布局繼承

模板布局繼承使用的還是 th:fragment 和 th:replace，下面通過案例演示一下模板布局繼承的寫法，定義要繼承的頁面如下：

<!DOCTYPE html> <html th:fragment="layout (title, content)" xmlns:th="http://www.thymeleaf.org"> <head><title th:replace="${title}">Layout Title</title> </head> <body> <h1>Layout H1</h1> <div th:replace="${content}"><p>Layout content</p> </div> <footer>Layout footer </footer> </body> </html>

繼承上述頁面的文件將會替換上述 title 和 content 的值，繼承上述頁面寫法如下：

<!DOCTYPE html> <html th:replace="~{base :: layout(~{::title}, ~{::section})}" xmlns:th="http://www.thymeleaf.org"> <head><title>Page Title</title> </head> <body> <section><p>Page content</p><div>Included on page</div> </section> </body> </html>

運行后的效果如下：

Layout H1Page contentIncluded on page Layout footer

可關注公眾號【躬行之】交流學習，點擊查看源碼。

總結

以上是生活随笔為你收集整理的Spring Boot系列之Thymeleaf模板布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： guacamole 认识
下一篇： js怎么将json数据展示在html代码