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-08
最近分享的一些源碼、框架設(shè)計(jì)的東西。我發(fā)現(xiàn)大家熱情不是特別高，想想大多數(shù)應(yīng)該還是正兒八經(jīng)寫代碼的居多；這次就分享一點(diǎn)接地氣的： SpringBoot 使用中的一些小技巧 ,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了Spring循環(huán)依賴實(shí)現(xiàn)過程，Spring的解決循環(huán)依賴是有前置條件的，要解決循環(huán)依賴我們首先要了解Spring Bean對(duì)象的創(chuàng)建過程和依賴注入的方式2023-04-04
Java實(shí)現(xiàn)聯(lián)系人管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了Java實(shí)現(xiàn)聯(lián)系人管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了Java IO流相關(guān)知識(shí)代碼解析，具有一定借鑒價(jià)值，需要的朋友可以參考下。2017-12-12
這篇文章主要介紹了Eclipse最新版使用過程中遇到的問題總結(jié)的相關(guān)資料,本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
最新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-11
這篇文章主要介紹了Java OSS批量下載并壓縮為ZIP代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
Java實(shí)現(xiàn)對(duì)華北、華南、華東和華中四個(gè)區(qū)域的劃分
在Java中,通過定義枚舉類、編寫主程序和進(jìn)行測(cè)試,本文詳細(xì)介紹了如何劃分華北、華南、華東和華中四個(gè)區(qū)域,首先定義枚舉類標(biāo)識(shí)區(qū)域,然后通過主程序接收用戶輸入并返回相應(yīng)區(qū)域,最后通過測(cè)試用例確保正確性,文章還介紹了甘特圖和餅狀圖的使用2024-09-09
SpringBoot2.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