SpringBoot公共頁面抽取方法實(shí)現(xiàn)過程介紹
1. 需求描述
我們有這樣一個(gè)頁面,其具有左側(cè)導(dǎo)航和上側(cè)導(dǎo)航,在切換不同內(nèi)容過程中,左側(cè)導(dǎo)航和上冊(cè)導(dǎo)航不變,也就是說我們想將左側(cè)導(dǎo)航和上側(cè)導(dǎo)航這個(gè)公共部分抽取出來。
注意:使用 thymeleft 必須引入 <html lang="en" xmlns:th="http://www.thymeleaf.org">
2. 使用 thymeleaf 抽取公共頁面方法
利用 thymeleaf 的 insert、replace 及 include 方法。
首先創(chuàng)建一公共頁面 html,叫做 common.html,把公共的內(nèi)容放進(jìn)去。并通過 id="leftmenu"
或 th:fragment="headermenu"
標(biāo)注需要抽取的內(nèi)容。
方法一 id="leftmenu"
:
<!-- left side start--> <div id="leftmenu" class="left-side sticky-left-side"> 內(nèi)容 </div> <!-- left side end-->
方法二th:fragment="headermenu"
:
<!-- header section start--> <div th:fragment="headermenu" class="header-section">內(nèi)容 </div> <!-- header section end-->
在需要引入的位置,通過insert、replace 及 include 方法引入 引入 id="leftmenu"
標(biāo)識(shí)的公共部分 (要加 #
號(hào)):
<div th:replace="common :: #leftmenu"></div>
引入通過 th:fragment="headermenu"
標(biāo)識(shí)的公共部分:
<div th:replace="common :: commonheader"> </div>
3. insert與replace及include抽取公共頁面的區(qū)別
- insert: 保留原來大標(biāo)簽,也保留引入部分的標(biāo)簽
- replace: 保留原來的大標(biāo)簽,不保留引入部分的標(biāo)簽
- include: 不保留原來的大標(biāo)簽,保留引入部分的標(biāo)簽
以插入下列 commonheader 為例:
commonheader 在 common.html 的 header 中,是每個(gè)頁面都要引入的 css 及 js 文件
<head th:fragment="commonheader"> <!--common--> <link href="css/style.css" rel="external nofollow" th:href="@{/css/style.css}" rel="external nofollow" rel="stylesheet"> <link href="css/style-responsive.css" rel="external nofollow" th:href="@{/css/style-responsive.css}" rel="external nofollow" rel="stylesheet"> <script src="js/html5shiv.js" th:src="@{/js/html5shiv.js}"></script> <script src="js/respond.min.js"th:src="@{/js/respond.min.js}" ></script> </head>
1. 使用 include
:
<div th:include="common :: commonheader"> </div>
結(jié)果引入部分無大標(biāo)簽 header(檢查頁面源代碼功能),但是 div 還在:
2. 使用 replace
:
<div th:replace="common :: commonheader"> </div>
結(jié)果引入部分含大標(biāo)簽 header,瀏覽器語法檢測(cè)處理掉了,但是沒有 div(檢查頁面源代碼功能):
2. 使用 insert
:
<div th:insert="common :: commonheader"> </div>
結(jié)果引入部分含大標(biāo)簽 header,也含 div(檢查頁面源代碼功能):
到此這篇關(guān)于SpringBoot公共頁面抽取方法實(shí)現(xiàn)過程介紹的文章就介紹到這了,更多相關(guān)SpringBoot公共頁面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
idea maven pom不自動(dòng)更新的解決方法
這篇文章主要介紹了idea maven pom不自動(dòng)更新的解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08Java實(shí)現(xiàn)聯(lián)系人管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了Java實(shí)現(xiàn)聯(lián)系人管理系統(tǒng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02最新SpringCloud?Stream消息驅(qū)動(dòng)講解
SpringCloud Stream 是一個(gè)構(gòu)建消息驅(qū)動(dòng)微服務(wù)的框架,通過 SpringCloud Stream 連接消息中間件,以實(shí)現(xiàn)消息事件驅(qū)動(dòng),這篇文章主要介紹了SpringCloud?Stream消息驅(qū)動(dòng),需要的朋友可以參考下2022-11-11Java實(shí)現(xiàn)對(duì)華北、華南、華東和華中四個(gè)區(qū)域的劃分
在Java中,通過定義枚舉類、編寫主程序和進(jìn)行測(cè)試,本文詳細(xì)介紹了如何劃分華北、華南、華東和華中四個(gè)區(qū)域,首先定義枚舉類標(biāo)識(shí)區(qū)域,然后通過主程序接收用戶輸入并返回相應(yīng)區(qū)域,最后通過測(cè)試用例確保正確性,文章還介紹了甘特圖和餅狀圖的使用2024-09-09SpringBoot2.x漏洞將logback1.2.x 升級(jí)至1.3.x
安全部門在代碼漏洞掃描中發(fā)現(xiàn)logback 1.2.x版本存在CVE漏洞,建議升級(jí)至1.3.x版本,本文就來介紹了logback1.2.x 升級(jí)至1.3.x,具有一定的參考價(jià)值,感興趣的可以了解一下2024-09-09