开发者学堂课程【SpringBoot快速掌握 - 核心技术：【实验】-员工列表-链接高亮&列表完成】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/612/detail/9251
【实验】-员工列表-链接高亮&列表完成
内容介绍
一、设置高亮
二、取出员工数据
一、设置高亮
1、设置 员工管理 高亮
上一节课抽取了公共的页面，但是还有一个小问题。比如点击了“员工管理”这个菜单，虽然进入了页面，但是“员工管理”这个菜单没有高亮。
打开 dashboard.html ，加上 active ，编辑：
</1i>
<1i class="nav-item">
<a class=" nav- link active" href= "#" th:href="@{/emps}">
<svg ……
</svg>
员工管理
</a>
</1i>刷新，就可以看到员工管理变为高亮了。
2、引入片段的时候传入参数
为了层次清晰，将所有可以公共重用抽取的页面都放在 commons 文件
夹下。
点击 templates 文件夹新建 New Directory 文件，名为 commons 。
再将顶边栏、侧边栏专门放在 HTML File 里。
点击 commons 文件夹，新建 HTML File 文件，名为 bar.html 。
再将 dashboard.html 里边的顶部栏抽取过 bar.html 里。
打开 dashboard.html ，找到
<body>
<nav class=”navbar navbar-dark sticky-top bg-dark flex- md-nowrap p-0" th :fragment= "topbar">
……
</1i>
</u1>
</nav>
将这个 <nav> 标签引入到 topbar
打开 bar.thml, 粘贴 <nav> 标签。同样引入 sidebar
< !DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</tit1e>
</head>
<body>
<!--topbar-->
<nav class=”navbar navbar-dark sticky-top bg-dark flex- md-nowrap p-0" th :fragment= "topbar">
……
</1i>
</u1>
</nav>
<!--sidebar-->
<nav class="col-md-2 d-none d-md-block bg-light sidebar
id="sidebar">
……
</1i>
</u1>
</div>
</nav>
</body>
</html>
在 dashboard.html 编辑：
<body>
<!--引入抽取的 topbar-->
<!--模板名:会使用 thymeleaf 的前后缀配置规则进行解析-->
<div th:replace=" commons/bar: :topbar"></div>
<div class=" container-fluid">
<div class="row">
<!--引入侧边栏-->
<div th:replace="commons/bar: : #sidebar"></div>
然后在 bar.html 里还原超链接的值：
href="http://getbootstrap.com/docs/4.0/examp1es/dashboard/#">改为 href="#" th:href= " >"@{/main.html}">
3、设置点击 员工管理 的时候 Dashboard 不高亮
在 bar.html 文件中引入的 sidebar 标签里修改。同样的员工管理处也做一个判断。
……
<a class= "nav-link active
th:class="${activeUri==' main.html' ?'nav-link active': 'nav-link'}"
href="#" th:href= "@{/main. html}">
……
<a class="nav-link active" href="#" th :href= "@{/emps }"
th:class="${activeUri== 'emps' ?'nav-link active': 'nav-link'}">
……
然后在 dashboard.html 页面高亮 main
……
<!--引入 sidebar -->
<div th:replace="commons/bar: :#s idebar(activeUri= ' main .htm1' )"></div>
……
再到 list.html 文件里设置 activeUri
……
<!--引入侧边栏-->
<div th:replace="commons/bar: :#sidebar( activeUri=' emps" )"></div>
……
编译，刷新 localhost:8080/crud/emps 后，看到点击 员工管理 时 Dashboard 不高亮。点击 Dashboard 时 员工管理 不高亮。
二、取出员工数据
在 list.thml 页面，将原来的 <tbody……> 数据删除，重新编辑：
……
<!--引入侧边栏-->
……
<h2><button class="btn btn-sm btn-success" >
员工添加
</button></h2>
……
<thead>
<tr>
<th>#</th>
<th>lastName</th>
<th>email</th>
<th> gender</th>
<th>department</th>
<th>birth</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr th:each= "emp:${emps}">
<td th:text= "${emp. id}"></td>
<td>[[${ emp. lastName}]]</td>
<td th:text="${emp. email}"></td>
<td th:text="${emp. gender}==0?'女':'男'"></td>
<td th:text="${emp. department . departmentName}"></td>
<td th:text="${#dates . format ( emp. birth, ' yyyy-MM-dd HH:mm' )}"></td>
<td>
<button class="btn btn-sm btn-primary" >编辑</button>
<button class="btn btn-sm btn-danger" >删除< /button>
</td>
</tr>
</tbody>
……
Ctrl+F9 编译，刷新 localhost:8080/crud/emps ，显示结果。
