四、Employee List 开发
跳转至Employee List 页面
在templates目录下增加employee文件夹，将list.html页面放入该文件夹下。在controller包中新建EmployeeController，增加list方法来获取Employee列表，然后返回list.html页面
@Controller public class EmployeeController { @Autowired private EmployeeMapper employeeMapper; @GetMapping("/list") public String list(Model model){ Collection<Employee> list = employeeMapper.getAll(); model.addAttribute("list", list); return "employee/list"; } } 复制代码
将dashboard.html页面的Employee List超链接改为/list
<li class="nav-item"> <a class="nav-link" href="#" th:href="@{/list}"> <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> Employee List </a> </li> 复制代码
重新启动应用，登录后点击Employee List
页面跳转到list.html页面，并且无任何错误信息
抽取公共页面
由于list.html和dashboard.html的顶部和侧边栏都是相同的，因此可以将顶部和侧边栏抽取为公共页面
Thymeleaf官网中 8 Template Layout 提到了如何抽取公共页面
首先要在index.html的顶部导航栏设置一个fragment
然后在list.html页面通过th:insert标签来引入前面设置的fragment
重新启动应用
页面顶部导航栏能够正确显示
页面引入方式包括th:insert，共有三种引入方式
- th:insert，将公共片段插入到这个声明引入的元素中
- th:replace，将声明引入的元素替换为公共片段
- th:include，将被引入的片段内容包含到这个标签中
因此需要将insert替换为replace
抽取侧边栏时，给侧边栏设置一个id为selector
引入时通过id选择器引入公共片段
重新启动应用，查看页面顶部导航栏和侧边栏
修改过后，侧边栏能够正常显示
抽取公共片段到单独页面
上面定义的公共片段还是在具体的页面中，可以将公共页面，顶部和侧边栏单独抽取到一个html页面中，降低耦合
新建一个bar.html，将顶部导航栏和侧边栏拷贝到该页面中
在dashboard.html页面和list.html页面引入公共片段
侧边目录高亮
当进入到list.html页面时，左侧的目录并没有高亮显示，想要解决在具体页面高亮对应的目录需要在公共片段进行变量值判断，每个变量引用时都设置一个该片段独有的值。关于变量可以查看thymeleaf官方文档 8.2 Parameterizable fragment signatures
首先在公共片段目录增加变量判断，如果activeUri为list，就高亮，否则不高亮显示
list页面设置的activeUri变量的值为list
dashboard页面设置的activeUri的值为dashboard
重新启动应用
每个页面对应的目录都可以高亮显示
显示员工数据列表
使用for循环取出list列表中的全部属性，员工的gender使用0和1表示，这里可以进行判断，用男和女代替0和1
重启应用，查看员工列表
五、Add Employee
进入Add Employee 页面
Add Hero 增加超链接，跳转至添加页面
拷贝list.html页面并重命名为add.html,从Bootstrap [Components] (getbootstrap.com/docs/4.0/co…) 拷贝第二个表单到add.html页面
在EmployeeController增加视图映射，点击按钮跳转到add.html页面
@GetMapping("/employee") public String employee(Model model){ return "employee/add"; }
