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