(六)展示员工信息——查
1. 实现Customers视图跳转
目标:点击dashboard.html页面中的Customers展示跳转到list.html页面显示所有员工信息
因此,我们首先给dashboard.html页面中Customers部分标签添加href属性,实现点击该标签请求/emps路径跳转到list.html展示所有的员工信息
同样修改list.html对应该的代码为上述代码(还需要修改list.xml,加入th:href是因为前端代码问题)
我们在templates目录下新建一个包emp,用来放所有关于员工信息的页面,我们将list.html页面移入该包中
然后编写请求对应的controller,处理/emps请求,在controller包下,新建一个EmployeeController类
package com.zsr.controller;
import com.zsr.dao.EmployeeDao;
import com.zsr.pojo.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.Collection;
@Controller
public class EmployeeController {
@Autowired
private EmployeeDao employeeDao;
@RequestMapping("/emps")
public String list(Model model) {
Collection<Employee> employees = employeeDao.getAllEmployees();
model.addAttribute(employees);
return "emp/list";//返回到list页面
}
}
然后我们重启主程序进行测试,登录到dashboard页面,再点击Customers,成功跳转到/emps
但是有些问题:
1、我们点击了Customers后,它应该处于高亮状态,但是这里点击后还是普通的样子,高亮还是在Dashboard上
2、list.html和dashboard.html页面的侧边栏和顶部栏是相同的,可以抽取出来
高亮和抽取公共前端代码省略,想看可以看原博客!
显示员工信息
修改
list.html
页面,显示我们自己的数据值
修改完成后,重启主程序,登录完成后查看所有员工信息,成功显示
接下来修改一下性别的显示和date的显示,并添加编辑
和删除
两个标签,为后续做准备
<thead>
<tr>
<th>id</th>
<th>lastName</th>
<th>email</th>
<th>gender</th>
<th>department</th>
<th>date</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr th:each="emp:${emps}">
<td th:text="${emp.getId()}"></td>
<td th:text="${emp.getLastName()}"></td>
<td th:text="${emp.getEmail()}"></td>
<td th:text="${emp.getGender()==0?'女':'男'}"></td>
<td th:text="${emp.getDepartment().getDepartmentName()}"></td>
<td th:text="${#dates.format(emp.getDate(),'yyyy-MM-dd HH:mm:ss')}"></td>
<td>
<a class="btn btn-sm btn-primary">编辑</a>
<a class="btn btn-sm btn-danger">删除</a>
</td>
</tr>
</tbody>
再次重启主程序测试,成功