Springboot:员工管理之公共页面提取 高亮显示(十(5))
把顶部和左侧的公共代码分别放到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))的更多相关文章
- Springboot:员工管理之添加员工(十(7))
构建员工添加请求 com\springboot\controller\EmployeeController.java /*调转到员工添加页 携带部门信息 restful风格*/ @GetMapping ...
- thymeleaf 模板使用 提取公共页面
切记!!!thymeleaf模板的使用,姿势很重要!!!姿势不对,可能导致样式.js等的使用受到影响 前台开发中,由于页面目录结构不同,可能导致引入的公共页面中的的跳转路径在部分页面能用,部分页面不能 ...
- 使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享
使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个 员工管理源代码分享 在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery ...
- 使用Jquery+EasyUI项目开发情况的框架是中评---员工管理源代码共享
使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个 员工管理源代码分享 在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery ...
- 11、SpringBoot-CRUD-thymeleaf公共页面元素抽取
thymeleaf公共页面元素抽取 存在一种现象:两个文件的代码只有一部分代码不一样 其余的均相同,此时就可以提取公共的代码去简化开发 .抽取公共片段 <div th:fragment=&quo ...
- 原生Js 两种方法实现页面关键字高亮显示
原生Js 两种方法实现页面关键字高亮显示 上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一 依靠正则表达式修改 1.获取obj的html2.统一替换 ...
- Struts2+Spring+Hibernate实现员工管理增删改查功能(一)之登录功能
昨天的博客中我分享了个人关于ssh实现员工管理的框架整合,今天我在分享管理员登录功能的实现. 转载请注明出处"http://www.cnblogs.com/smfx1314/p/78013 ...
- SpringBoot Web开发(5) 开发页面国际化+登录拦截
SpringBoot Web开发(5) 开发页面国际化+登录拦截 一.页面国际化 页面国际化目的:根据浏览器语言设置的信息对页面信息进行切换,或者用户点击链接自行对页面语言信息进行切换. **效果演示 ...
- 【spring-boot 源码解析】spring-boot 依赖管理
关键词:spring-boot 依赖管理.spring-boot-dependencies.spring-boot-parent 问题 maven 工程,依赖管理是非常基本又非常重要的功能,现在的工程 ...
随机推荐
- OpenCV-Python 轮廓特征 | 二十二
目标 在本文中,我们将学习 如何找到轮廓的不同特征,例如面积,周长,质心,边界框等. 您将看到大量与轮廓有关的功能. 1. 特征矩 特征矩可以帮助您计算一些特征,例如物体的质心,物体的面积等.请查看特 ...
- 在Ubuntu中安装OpenCV-Python | 三
在本教程中,我们将学习在Ubuntu System中设置OpenCV-Python.以下步骤针对Ubuntu 16.04和18.04(均为64位)进行了测试. 可以通过两种方式在Ubuntu中安装Op ...
- 面试刷题26:新冠攻击人类?什么攻击java平台?
可恶的新冠病毒攻击人类,搞得IT就业形势相当不好?好在有钟南山院士带领我们提前开展好了防护工作! java作为基础平台安装在各种移动设备,PC,小型机,分布式服务器集群,各种不同的操作系统上.所以,对 ...
- Thread ---java 内存模型
1,Java 线程之间的通信由Java 内存模型(JMM)控制.JMM决定一个线程对共享变量的写入时,能对另一个线程可见. 从抽象的角度来看,JMM定义了线程和主内存之间的抽象关系: 线程之间的共享变 ...
- random方法
random.randint(1,10) # 产生 1 到 10 的一个整数型随机数 ,包括1和10random.random() # 产生 0 到 1 之间的随机浮点数rand ...
- ICPC训练联盟周赛Preliminaries for Benelux Algorithm Programming Contest 2019
I题 求 a 数组平方的前缀和和求 a 数组后缀和,遍历一遍即可 AC代码 #include<iostream>#include<cmath>using namespace s ...
- A - Jessica's Reading Problem POJ - 3320 尺取
A - Jessica's Reading Problem POJ - 3320 Jessica's a very lovely girl wooed by lots of boys. Recentl ...
- python中装饰器的使用
看个例子: # 定义装饰器函数 def log(func): """ 接受一个函数作为参数,并返回一个函数 :param func: :return: "&qu ...
- PTA数据结构与算法题目集(中文) 7-33
PTA数据结构与算法题目集(中文) 7-33 7-33 地下迷宫探索 (30 分) 地道战是在抗日战争时期,在华北平原上抗日军民利用地道打击日本侵略者的作战方式.地道网是房连房.街连街.村连村的 ...
- ThinkPHP3.1.2 使用cli命令行模式运行
ThinkPHP3.1.2 使用cli命令行模式运行 标签(空格分隔): php 前言 thinkphp3.1.2 需要使用cli方法运行脚本 折腾了一天才搞定 3.1.2的版本真的很古老 解决 增加 ...