SpringBoot公共頁面抽取方法實(shí)現(xiàn)過程介紹
1. 需求描述
我們有這樣一個頁面，其具有左側(cè)導(dǎo)航和上側(cè)導(dǎo)航，在切換不同內(nèi)容過程中，左側(cè)導(dǎo)航和上冊導(dǎo)航不變，也就是說我們想將左側(cè)導(dǎo)航和上側(cè)導(dǎo)航這個公共部分抽取出來。
注意：使用 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)識的公共部分 (要加 # 號)：
<div th:replace="common :: #leftmenu"></div>
引入通過 th:fragment="headermenu" 標(biāo)識的公共部分：
<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 中，是每個頁面都要引入的 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，瀏覽器語法檢測處理掉了，但是沒有 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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了java使用jdbc操作數(shù)據(jù)庫示例,需要的朋友可以參考下2014-03-03
SpringBoot集成企業(yè)微信開發(fā)的實(shí)現(xiàn)
本文將詳細(xì)介紹如何使用?Spring?Boot?集成企業(yè)微信開發(fā)，通過企業(yè)微信?API?可以實(shí)現(xiàn)企業(yè)內(nèi)部的一些自動化業(yè)務(wù)流程，提高工作效率，感興趣的可以了解一下2023-07-07
這篇文章主要介紹了Spring注解之@Conditional使用解析,@Conditional注解可以說是SpringBoot的條件注解,表示組件只有在所有指定條件都匹配時才有資格注冊,條件是可以在 bean 定義注冊之前??以編程方式確定的任何狀態(tài),需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Java Map集合的使用及Collection工具類使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-11-11
SpringBoot下如何實(shí)現(xiàn)支付寶接口的使用
這篇文章主要介紹了SpringBoot下如何實(shí)現(xiàn)支付寶接口的使用,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-11-11
Maven+oracle+SSM搭建簡單項(xiàng)目的方法
本篇文章主要介紹了Maven+oracle+SSM搭建簡單項(xiàng)目的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
使用java批量寫入環(huán)境變量的實(shí)現(xiàn)
本文主要介紹了使用java批量寫入環(huán)境變量，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-03-03
Spring框架配置java web實(shí)現(xiàn)實(shí)例化
這篇文章主要介紹了Spring框架配置java web實(shí)現(xiàn)實(shí)例化,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-04-04
冒泡排序也是一種簡單直觀的排序算法,基本思想是多次遍歷要排序的數(shù)組,每次比較相鄰的元素,如果順序不對就交換它們的位置,本篇文章將通過IDE使用 Java 語言實(shí)現(xiàn)一個冒泡排序,需要的朋友可以參考下2024-03-03
這篇文章主要為大家詳細(xì)介紹了Java實(shí)現(xiàn)簡單密碼加密功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03