SpringBoot公共页面抽取方法实现过程介绍

更新时间：2022年10月08日 09:30:08 作者：刘婉晴

这篇文章主要介绍了SpringBoot抽取公共页面的方法实现过程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧

1. 需求描述

我们有这样一个页面，其具有左侧导航和上侧导航，在切换不同内容过程中，左侧导航和上册导航不变，也就是说我们想将左侧导航和上侧导航这个公共部分抽取出来。

注意：使用 thymeleft 必须引入 <html lang="en" xmlns:th="http://www.thymeleaf.org">

2. 使用 thymeleaf 抽取公共页面方法

利用 thymeleaf 的 insert、replace 及 include 方法。

首先创建一公共页面 html，叫做 common.html，把公共的内容放进去。并通过 id="leftmenu" 或 th:fragment="headermenu" 标注需要抽取的内容。

方法一 id="leftmenu"：

<!-- left side start-->
<div id="leftmenu" class="left-side sticky-left-side"> 内容 </div>
<!-- left side end-->

方法二th:fragment="headermenu"：

<!-- header section start-->
<div th:fragment="headermenu" class="header-section">内容 </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抽取公共页面的区别

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>

结果引入部分无大标签 header（检查页面源代码功能），但是 div 还在：

2. 使用 replace:

<div th:replace="common :: commonheader"> </div>

结果引入部分含大标签 header，浏览器语法检测处理掉了，但是没有 div（检查页面源代码功能）：

2. 使用 insert:

<div th:insert="common :: commonheader"> </div>

结果引入部分含大标签 header，也含 div（检查页面源代码功能）：

到此这篇关于SpringBoot公共页面抽取方法实现过程介绍的文章就介绍到这了,更多相关SpringBoot公共页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Java小项目之迷宫游戏的实现方法
这篇文章主要给大家介绍了关于Java小项目之迷宫的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
MyBatis-Plus条件构造器Wrapper应用实例
QueryWrapper是用于查询的Wrapper条件构造器,可以通过它来构建SELECT语句中的WHERE条件,这篇文章主要介绍了MyBatis-Plus数据表操作条件构造器Wrapper,需要的朋友可以参考下
2023-09-09
springboot引用kettle实现对接oracle数据的示例代码
这篇文章主要介绍了springboot引用kettle实现对接oracle数据,其实kettle集成到springboot里面没有多少代码，这个功能最主要的还是ktr文件的编写，只要ktr编写好了，放到指定文件夹下，写个定时任务就完事了，需要的朋友可以参考下
2022-12-12
通过netty把百度地图API获取的地理位置从Android端发送到Java服务器端的操作方法
这篇文章主要介绍了通过netty把百度地图API获取的地理位置从Android端发送到Java服务器端,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-10-10
java多线程之Future和FutureTask使用实例
这篇文章主要介绍了java多线程之Future和FutureTask使用实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
Java之通过OutputStream写入文件与文件复制问题
这篇文章主要介绍了Java之通过OutputStream写入文件与文件复制问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
Java实现文件上传至服务器的方法
这篇文章主要为大家详细介绍了Java实现文件上传至服务器的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-01-01
MyBatis动态SQL特性详解
动态SQL可以省略很多拼接SQL的步骤,使用类似于JSTL方式,下面这篇文章主要给大家介绍了关于Mybatis动态SQL特性的相关资料,文字通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11
spring-boot-maven-plugin 配置有啥用
这篇文章主要介绍了spring-boot-maven-plugin 配置是干啥的，这个是SpringBoot的Maven插件，主要用来打包的，通常打包成jar或者war文件，本文通过示例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-08-08
java 利用反射获取内部类静态成员变量的值操作
这篇文章主要介绍了java 利用反射获取内部类静态成员变量的值操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-12-12