Day36——链接高亮以及完成列表展示数据

「爱情、让人受尽委屈。」 2023-02-25 02:18 1阅读 0赞

### 文章目录 ###

*  一. 回顾
 *  二. 效果展示
 *  三. 链接高亮显示
 *  四. 列表展示数据
 *  五. 代码

# 一. 回顾 #

前面学习[Day35——员工列表-公共页抽取][Day35_-]，今天学习链接高亮以及列表展示数据

# 二. 效果展示 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 1]

# 三. 链接高亮显示 #

侧边栏的链接高亮是通过`<a class="active">`设置的，我们可以通过判断`变量==xxx`，从而实现链接动态高亮显示。

**语法：**

1.  在声明公共片段的元素中设置`th:class="${activeUri}=='main.html'?'nav-link active':'na-link'"`(其中activeUri是变量名，’main.html‘是变量的值，nav-link是bootstrap的某个样式，active是高亮样式)
2.  在引入片段中设置`th:replace="commons/bar::topbar(activeUri='main.html')"`

# 四. 列表展示数据 #

语法：`th:each="变量名:${后台传来的变量}"`，th:each在哪个标签就是重复生成哪个标签

<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>

# 五. 代码 #

提取公共代码到commons/bar.html，并定义高亮规则如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 2]

这里贴出关键代码：

<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">
    
    <nav class="col-md-2 d-none d-md-block bg-light sidebar" id="sidebar">
    	 <a class="nav-link active" href="#" th:href="@{/main.html}" th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}">
    	                 
    	     Dashboard <span class="sr-only">(current)</span>
    	 </a>
    	 <a class="nav-link" href="#" th:href="@{/emps}" th:class="${activeUri=='emps'?'nav-link active':'nav-link'}">
                      
         员工管理
         </a>

在dashboard.html中引入公共片段并设置高亮，如下：

<div th:replace="commons/bar::topbar"></div>
      
     <div th:replace="commons/bar::#sidebar(activeUri='main.html')"></div>

在list.html中引入公共片段并设置高亮并列表展示数据，如下：

<div th:replace="commons/bar::topbar"></div>
    
     <div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>
    
    
    <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>

在所有修改过的html页面，按ctrl+F9，无需重启程序，刷新浏览器即可看到效果。

[Day35_-]: https://blog.csdn.net/qq_40634846/article/details/107242487
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70]: /images/20230209/4af5ca987d044ee2b6bf168d8d4479b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 1]: /images/20230209/77df44f9328f41e1b23c208f1340ea06.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 2]: /images/20230209/fc7be05ae9c8444dba3bc0b823248123.png