SpringBoot简单项目学习笔记04（页面列表选项的高亮设置、员工信息的添加页面设定）

github项目地址：https://github.com/H-Designer/SpringBoot

上一节总结的是：员工列表、多个页面的项目布局的提取（https://www.cnblogs.com/zhaochunhui/p/11332050.html）

这一节要总结的是;页面列表选项的高亮设置、员工信息的添加页面设定

##9.想要在不用的界面中显示不同的列表项的高亮，比如在员工管理界面显示“员工管理”的高亮，在首页就进行“dashboard”的高亮
这样就是在后面的dashboard.html和list.html进模块的调用的时候，进行参数的传递
根据传递的参数的不同，bar.html根据在不同的参数的接收，显示是否要高亮
就比如在dashboard.html中进行模块的引入时候，
<div th:replace="commons/bar::#sidebar(activeuri='main.html')"></div>
在这里面就进行了参数的传递，在引入的模块的名称的同时，也进行参数的传递（activeuri='main.html'）
在list.html进行模块的接收的时候，同时也进行参数的传递
<div th:replace="commons/bar::#sidebar(activeuri='emps')"></div>
在这里面就进行了参数的传递，在引入的模块的名称的同时，也进行参数的传递(activeuri='emps')
在bar.html 界面根绝不同值的获取进行类的不同设置
<!--sidebar的抽取-->
<nav class="col-md-2 d-none d-md-block bg-light sidebar" id="sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active"
th:class="${activeuri=='main.html'?'nav-link active':'nav-link'}"
th:href="@{/main.html}">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
<polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
在这里面，侧边栏的模块提取的时候，在dashboard进行参数的接受，在th:class="${activeuri=='main.html'?'nav-link active':'nav-link'}" 
这个就是根据在后面页面进行模块引入的时候进行参数的传入，然后在这里面进行接受
就比如在list界面中，传入的是main.html在这里面，在dashboard这里就是判断传入的是否是main.html如果是就进行高亮处理
在员工管理的栏块：
<li class="nav-item">
<a class="nav-link active" href="#"
th:class="${activeuri=='emps'?'nav-link active':'nav-link'}"
th:href="@{/emps}">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
员工管理
</a>
</li>
这里接受的activeuri就是判断是不是emp，利用三元表达式，判断传入的如果是emp就进行显示高亮，这样，就在不同的界面传入的参数，进行不同参数的接收，显示不同的高亮效果

##10、员工信息添加页面跳转
<h2><a class="btn btn-ms btn-success" th:href="@{/emp}">添加员工</a></h2>
在list页面进行链接的设置，进行跳转到add页面
@GetMapping("/emp")
a标签就是以get的方式进行提交
public String toAddPage(Model model){
//查出所有的部门在页面进行显示
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("depts",departments);
return "emp/add";
}
这里面，获取到部门的所有信息，因为在前台进行员工信息添加的时候，在选择部门的时候，选择的是已经存在的部门，所以要先将部门的所有信息查询出来，
然后进行存储，存储到model中，然后进行model.addAttribute进行存储，然后在前台界面就可以进行显示部门的信息
在add前台：
<div class="form-group">
<label>department</label>
<!--提交的收拾部门信息的id-->
<select class="form-control">
<option th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}">部门</option>
</select>
</div>
在这里面根据在后台进行addAttribute存储的depts， 在前台进行接收，并且提取显示的是部门的名称，
在信息进行提交的时候提交的信息是部门信息里面的id、所以在value里面存的就是${dept.id}

 

下一节要总结的是：员工信息提交、员工信息修改（https://www.cnblogs.com/zhaochunhui/p/11332064.html）