把顶部和左侧的公共代码分别放到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. linggle使用技巧

    Linggle 搜索引擎是一个可用于英语写作的语法.句子工具,可帮助学习者分析更准确的英文写作建议,能够根据词性来推测短句和句子,可精准的分享出完整英文句子如何撰写. Linggle 是台湾学术团队研 ...

  2. 使用PyTorch进行情侣幸福度测试指南

    欢迎关注磐创博客资源汇总站: http://docs.panchuang.net/ 欢迎关注PyTorch官方中文教程站: http://pytorch.panchuang.net/ 计算机视觉–图像 ...

  3. 十 | 门控循环神经网络LSTM与GRU（附python演练）

    欢迎大家关注我们的网站和系列教程:http://panchuang.net/ ,学习更多的机器学习.深度学习的知识! 目录: 门控循环神经网络简介 长短期记忆网络(LSTM) 门控制循环单元(GRU) ...

  4. vscode下搭建typescript时提示"无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称"错误的解决方法

    根据网上的教程,安装了node.js后,再安装了typescript,,,这时候编译生成或者在vscode的终端里调用npm或者tsc --version时,总是提示 npm : 无法将"n ...

  5. Web Scraper 性能测试 (-_-)

    刚在研究 Python 爬虫的时候,看到了个小白工具,叫 Web Scraper,于是来测试下好不好用. Web Scraper 是什么? 它是一个谷歌浏览器的插件, 用于批量抓取网页信息, 主要特点 ...

  6. python中的函数及作用域的理解

    内置函数 常用的几个内置函数 function des len 求长度 min 求最小值 max 求最大值 sorted 排序 reversed 反向 sum 求和 进制转换函数 function d ...

  7. iOS 设备尺寸与系统信息

    参考 http://blog.csdn.net/newbieprogrammer/article/details/50569384 http://blog.csdn.net/developer_zha ...

  8. 思考设计SQL优化方案

    一.优化的哲学 注:优化有风险,涉足需谨慎 1.优化可能带来的问题? 优化不总是对一个单纯的环境进行,还很可能是一个复杂的已投产的系统: 优化手段本来就有很大的风险,只不过你没能力意识到和预见到: 任 ...

  9. CentOS7配置环境变量

    执行命令env查看当前环境变量: [duanyongchun@192 3DUnetCNN]$ env 例如扩展环境变量为/tmp/bin: PATH=$PATH:/tmp/bin 查看特定环境变量命令 ...

  10. 解读windows认证

    0x00 前言 dll劫持的近期忙,没时间写,先给大家写个windows认证的水文. 0x01 windows认证协议 windows上的认证大致分为本地认证,ntlm协议,和Kerberos协议. ...