快捷導(dǎo)航

SpringBoot公共頁(yè)面抽取方法實(shí)現(xiàn)過(guò)程介紹

更新時(shí)間：2022年10月08日 09:30:08 作者：劉婉晴

這篇文章主要介紹了SpringBoot抽取公共頁(yè)面的方法實(shí)現(xiàn)過(guò)程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧

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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: