把顶部和左侧的公共代码分别放到header.html和left.html中

顶部代码：resources\templates\header.html

主内容展示：

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!--th:fragment="head" -->

<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="head">

    ..........内容略.........

</nav>

</html

左侧代码：resources\templates\left.html

主内容展示：

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!--接收页面传递过来的参数 th:fragment="left(pageActive)" -->

<nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="left(pageActive)">

    <div class="sidebar-sticky">

        <ul class="nav flex-column">

	         ..........其他内容略.........

	         <!--三元运算符 判断是否要高亮-->

            <li class="nav-item">

	            <a th:class="${pageActive=='list'?'nav-link active':'nav-link'}" th:href="@{/employee}">

                    员工管理

                </a>

            </li>

        </ul>

    </div>

</nav>

</html>

在dashboard.html和list.html页面分别引入顶部和左侧页面：

list.html

主内容展示：



<!--引入头部公共代码-->

	<div th:replace="header::head"></div>

		<div class="container-fluid">

			<div class="row">

				<!--引入左侧公共代码 传参list给左侧页面 用于判断高亮样式-->

				<div th:replace="left::left('list')"></div>

				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">

					<div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">

dashboard.html

<div th:replace="header::head"></div>

	<div class="container-fluid">

		<div class="row">

			<!--引入左侧公共代码 传参main给左侧页面 用于判断高亮样式-->

			<div th:replace="left::left('main')"></div>

			<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">

				<div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">

Springboot：员工管理之公共页面提取 高亮显示（十（5））的更多相关文章

  1. Springboot：员工管理之添加员工（十（7））

    构建员工添加请求 com\springboot\controller\EmployeeController.java /*调转到员工添加页 携带部门信息 restful风格*/ @GetMapping ...

  2. thymeleaf 模板使用 提取公共页面

    切记!!!thymeleaf模板的使用,姿势很重要!!!姿势不对,可能导致样式.js等的使用受到影响 前台开发中,由于页面目录结构不同,可能导致引入的公共页面中的的跳转路径在部分页面能用,部分页面不能 ...

  3. 使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享

    使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个 员工管理源代码分享 在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery ...

  4. 使用Jquery+EasyUI项目开发情况的框架是中评---员工管理源代码共享

    使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个 员工管理源代码分享 在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery ...

  5. 11、SpringBoot-CRUD-thymeleaf公共页面元素抽取

    thymeleaf公共页面元素抽取 存在一种现象:两个文件的代码只有一部分代码不一样 其余的均相同,此时就可以提取公共的代码去简化开发 .抽取公共片段 <div th:fragment=&quo ...

  6. 原生Js 两种方法实现页面关键字高亮显示

    原生Js 两种方法实现页面关键字高亮显示 上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一 依靠正则表达式修改 1.获取obj的html2.统一替换 ...

  7. Struts2+Spring+Hibernate实现员工管理增删改查功能（一）之登录功能

    昨天的博客中我分享了个人关于ssh实现员工管理的框架整合,今天我在分享管理员登录功能的实现.  转载请注明出处"http://www.cnblogs.com/smfx1314/p/78013 ...

  8. SpringBoot Web开发(5) 开发页面国际化+登录拦截

    SpringBoot Web开发(5) 开发页面国际化+登录拦截 一.页面国际化 页面国际化目的:根据浏览器语言设置的信息对页面信息进行切换,或者用户点击链接自行对页面语言信息进行切换. **效果演示 ...

  9. 【spring-boot 源码解析】spring-boot 依赖管理

    关键词:spring-boot 依赖管理.spring-boot-dependencies.spring-boot-parent 问题 maven 工程,依赖管理是非常基本又非常重要的功能,现在的工程 ...

随机推荐

  1. 医学图像 | 使用深度学习实现乳腺癌分类（附python演练）

    乳腺癌是全球第二常见的女性癌症.2012年,它占所有新癌症病例的12%,占所有女性癌症病例的25%. 当乳腺细胞生长失控时,乳腺癌就开始了.这些细胞通常形成一个肿瘤,通常可以在x光片上直接看到或感觉到 ...

  2. 粒子群优化算法(PSO)之基于离散化的特征选择(FS)（四）

    作者:Geppetto 前面我们介绍了特征选择(Feature Selection,FS)与离散化数据的重要性,介绍了PSO在FS中的重要性和一些常用的方法.FS与离散化的背景,介绍了EPSO与PPS ...

  3. Pandas 精简实例入门

    目录 0. 案例引入 1. Pandas 主要数据结构 1.1 DataFrame 1.1.1 设置索引 1.1.2 重设索引 1.1.3 以某列为索引 1.2 MultiIndex 1.3 Seri ...

  4. 字节码类库之Javassist

    Javassist优势 – 比反射开销小,性能高.–javassist性能高于反射,低于ASM运行时操作字节码可以让我们实现如下功能:– 动态生成 新的类– 动态改变某个类的结构 ( 添加 / 删除 ...

  5. ubuntu查看并杀死自己之前运行的进程解决办法RuntimeError: CUDA error: out of memory

    问题描述:在跑深度学习算法的时候,发现服务器上只有自己在使用GPU,但使用GPU总是会报RuntimeError: CUDA error: out of memory,这是因为自己之前运行的进程还存在 ...

  6. Django]models中定义的choices 字典在页面中显示值

    在django的models.py 中,我们定义了一些choices的元组,类似一些字典值,一般都是下拉框或者单多选框,例如 0对应男 1对应女等 class Area(models.Model): ...

  7. CTR学习笔记&代码实现2-深度ctr模型 MLP->Wide&Deep

    背景 这一篇我们从基础的深度ctr模型谈起.我很喜欢Wide&Deep的框架感觉之后很多改进都可以纳入这个框架中.Wide负责样本中出现的频繁项挖掘,Deep负责样本中未出现的特征泛化.而后续 ...

  8. nginx 安装教程

    Nginx 安装教程 本教程在CentOS6.7中安装nginx 1.8.0,Nginx中加入了taobao的concat模块,nginx-upload-module模块,pcre 以及nginx-u ...

  9. Redis 设计与实现笔记 - SDS

    Redis 中的字符串没有使用 C语言中的字符指针(char *),而是使用了自定义的结构 sds. 文件: sds.h sds.c 结构: struct sdshdr { int len; // 填 ...

  10. Linux服务器 上传/下载 文档/目录

    1.从服务器上下载文件 scp username@servername:/path/filename /var/www/local_dir(本地目录) 例如scp root@192.168.0.101 ...