展示员工列表

控制层

  • 创建EmployeeController控制器·
1
2
3
4
5
6
7
8
9
10
11
@Controller
public class EmployeeController {
@Autowired
EmployeeDao employeeDao;
@RequestMapping("/emps")
public String list(Model model){
Collection<Employee> employees = employeeDao.getAll();
model.addAttribute("emps",employees);
return "emp/list";
}
}
  • 修改前端页面进行跳转
1
2
3
4
5
<li class="nav-item">
<a class="nav-link" th:href="@{/emps}">
员工管理
</a>
</li>

公共部分

  • 比如侧边栏和头部导航栏是公共的,可以把公共部分抽取出来。比如dashboard.html的导航栏进行抽取,成为一个组件,就可以在其他页面使用
1
2
3
4
<!--头部-->
<nav th:fragment="header"></nav>
<!--侧边栏-->
<nav th:fragment="sidebar"></nav>
  • list.html中使用抽取出来的组件{页面路径::设置的参数值}
1
2
<div th:insert="~{dashboard::header}"></div>
<div th:insert="~{dashboard::sidebar}"></div>
  • 也可以把侧边栏和头部导航栏抽取到一个commons.html里,比如在templates下创建·commons文件夹存放commons.html
1
2
3
4
5
6
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--头部-->
<nav th:fragment="header"></nav>
<!--侧边栏-->
<nav th:fragment="sidebar"></nav>
</html>
  • 可以试一下th:replace使用
1
2
<div th:replace="~{commons/commons::header}"></div>
<div th:replace="~{commons/commons::sidebar}"></div>

URL传参

  • 当选择员工管理时需把员工管理那一项高亮显示,这里使用到了URL传参
  • 比如在list.html的公共部分,传递一个参数键值对active='list.html'
1
<div th:replace="~{commons/commons::sidebar(active='list.html')}"></div>
  • 在公共部分commons.html中进行接收并判断
1
2
3
4
5
<li class="nav-item">
<a th:class="${active=='list.html'?'nav-link active':'nav-link'}" th:href="@{/emps}">
员工管理
</a>
</li>

遍历数据

  • 使用th:each="别名:${数据对象}"进行数据遍历
  • 取值可以通过行内[[${value}]],缺点是没有提示。可以通过th:text="${value}",会有提示
  • 使用thymeleaf的工具类进行日期格式转换${#dates.format(date,'yyyy-MM-dd HH:mm:ss')}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<table class="table table-striped table-sm">
<thead>
<tr>
<th>id</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.getId()}"></td>
<td>[[${emp.getLastName}]]</td>
<td th:text="${emp.getEmail()}"></td>
<td th:text="${emp.getGender()==0?'女':'男'}"></td>
<td th:text="${emp.department.getDepartmentName()}"></td>
<td th:text="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm:ss')}"></td>
<td>
<button class="btn btn-sm btn-info">编辑</button>
<button class="btn btn-sm btn-danger">删除</button>
</td>
</tr>
</tbody>
</table>

增加员工实现

获取部门信息

  • 增加添加按钮跳转到添加页面
  • 输入员工信息提交表单,跳转到员工管理页面
  • 使用Restful风格GET请求跳转到添加页面,POST请求提交表单。同一个请求不同的请求方法实现不同的业务
1
<h2><a th:href="@{/emp}" class="btn btn-success">添加员工</a></h2>
  • 首先要获取部门信息并展示

1
2
3
4
5
6
7
8
9
@Autowired
DepartmentDao departmentDao;
@GetMapping("/emp")
public String toAddpage(Model model){
// 查出所有部门的信息
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("departments",departments);
return "emp/add";
}
  • 前端页面接收
1
2
3
4
5
<!--value传的是id,name也要一一对应,传的是特殊类型,不能传对象只能转组件-->
<select class="form-control" name="department.id">
<!--text只是显示,提交的是value-->
<option th:each="dept:${departments}" th:text="${dept.getDepartmentName()}" th:value="${dept.getId()}"></option>
</select>

添加实现

  • 编写控制器处理POST表单提交请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@Autowired
DepartmentDao departmentDao;
//跳转到员工管理页面
@RequestMapping("/emps")
public String list(Model model){
Collection<Employee> employees = employeeDao.getAll();
model.addAttribute("emps",employees);
return "emp/list";
}
@PostMapping("/emp")
public String addEmp(Employee employee,Model model){
// 添加员工
System.out.println("save=>"+employee);
employeeDao.save(employee);
return "redirect:/emps"; //跳转到员工列表并刷新
}
  • 前端页面,注意name值要和实体类一一对应
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<form th:action="@{/emp}" method="post">
<div class="form-group">
<label>LastName</label>
<input type="text" class="form-control" placeholder="LastName" name="lastName">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" placeholder="Email" name="email">
</div>
<div class="form-group">
<label>Gender</label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender"value="1">
<label class="form-check-label"></label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender"value="0">
<label class="form-check-label"></label>
</div>
</div>
<div class="form-group">
<label>department</label>
<select class="form-control" name="department.id">
<!--text只是显示,提交的是value-->
<option th:each="dept:${departments}" th:text="${dept.getDepartmentName()}" th:value="${dept.getId()}"></option>
</select>
</div>
<div class="form-group">
<label>Birth</label>
<input type="text" class="form-control" placeholder="Birth" name="birth">
</div>
<button class="btn btn-primary" type="submit">提交表单</button>
</form>

时间格式

  • 当我们输入1999/11/12时,是没有问题的。但是输入1999-11-12却出现了错误
  • 这是因为SpringBoot有一个默认的格式dd/MM/yyyy,所以需要自定义格式。自定义后/格式就无法使用
1
spring.mvc.format.date=yyyy-MM-dd

修改员工信息

控制器

  • 通过按钮绑定每一个员工ID,访问编辑页面的时候带员工ID参数
  • 通过Restful分隔实现
1
2
3
4
5
6
7
8
9
10
11
12
<tr th:each="emp:${emps}">
<td th:text="${emp.getId()}"></td>
<td>[[${emp.getLastName}]]</td>
<td th:text="${emp.getEmail()}"></td>
<td th:text="${emp.getGender()==0?'女':'男'}"></td>
<td th:text="${emp.department.getDepartmentName()}"></td>
<td th:text="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm:ss')}"></td>
<td>
<a class="btn btn-sm btn-info" th:href="@{/emp/}+${emp.getId()}">编辑</a>
<a class="btn btn-sm btn-danger">删除</a>
</td>
</tr>
  • 编写控制器处理请求
1
2
3
4
5
6
7
8
9
10
11
//编辑页面
@GetMapping("/emp/{id}")
public String toUpdateEmp(@PathVariable("id") Integer id,Model model){
//查出原来数据
Employee employee = employeeDao.getEmployeeByID(id);
model.addAttribute("emp",employee);
// 查出部门信息
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("departments",departments);
return "emp/update";
}

编辑实现

  • emp文件下新建update.html页面,传入后端的数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<form th:action="@{/emp}" method="post">
<!--隐藏域 用于隐藏保存主键ID-->
<input type="hidden" name="id" th:value="${emp.getId()}">
<div class="form-group">
<label>LastName</label>
<input th:value="${emp.getLastName()}" type="text" class="form-control" placeholder="LastName" name="lastName">
</div>
<div class="form-group">
<label>Email</label>
<input th:value="${emp.getEmail()}" type="email" class="form-control" placeholder="Email" name="email">
</div>
<div class="form-group">
<label>Gender</label>
<div class="form-check form-check-inline">
<input th:checked="${emp.getGender()==1}" class="form-check-input" type="radio" name="gender"value="1">
<label class="form-check-label"></label>
</div>
<div class="form-check form-check-inline">
<input th:checked="${emp.getGender()==0}" class="form-check-input" type="radio" name="gender"value="0">
<label class="form-check-label"></label>
</div>
</div>
<div class="form-group">
<label>department</label>
<select class="form-control" name="department.id">
<!--text只是显示,提交的是value-->
<option th:selected="${dept.getId()==emp.getDepartment().getId()}" th:each="dept:${departments}" th:text="${dept.getDepartmentName()}" th:value="${dept.getId()}"></option>
</select>
</div>
<div class="form-group">
<label>Birth</label>
<input th:value="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm')}" type="text" class="form-control" placeholder="Birth" name="birth">
</div>
<button class="btn btn-primary" type="submit">提交表单</button>
</form>
  • 填写表单后需要控制器处理请求
1
2
3
4
5
6
//员工信息修改
@PostMapping("/updateEmp")
public String updateEmp(Employee employee){
employeeDao.save((employee));
return "redirect:/emps";
}

删除及404操作

删除员工信息

  • 首先删除按钮绑定员工ID,传递参数给后端
1
<a th:href="@{/delemp/}+${emp.getId()}">删除</a>
  • 后端接收员工ID进行删除,删除后跳到员工列表
1
2
3
4
5
6
//删除员工
@GetMapping("/emp/{id}")
public String delEmp(@PathVariable("id") Integer id,Model model){
employeeDao.delete(id);
return "redirect:/emps";
}

注销操作

  • 前端页面提交注销请求
1
<a class="nav-link" th:href="@{/user/loginout}">注销</a>
  • 后端移除用户Session,并跳转到登录页面
1
2
3
4
5
6
//用户注销
@RequestMapping("/user/loginout")
public String loginout(HttpSession session){
session.invalidate();
return "redirect:/index.html";
}

404页面

  • templates文件夹下新建一个error文件夹,新建一个404.html
  • 当发现错误时会自动跳转到404页面