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