Springboot快速入门（六）——Web开发：增删改查员工
2022-09-30 20:10:08
1. 员工列表展示（查）
界面的导航栏和侧边栏都是公共界面，所以可以一起提取出来做成一个commons页面
抽取公共片段 th:fragment 定义模板名
引入公共片段 th:insert 插入模板名
1.1 员工列表的跳转
将
list.html文件放到emp文件夹下
编写Controller
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public class EmployeeController {
EmployeeDao employeeDao;
/**
* 查询所有员工，返回列表页面
* @param model
* @return
*/
public String list(Model model){
Collection<Employee> employees = employeeDao.getAll();
// 结果返回前端
model.addAttribute("emps",employees);
return "emp/list";
}
}
1.2 提取公共页面并插入
templates目录下新建一个commons包，其中新建commons.html用来放置公共页面代码把
dashboard.html和list.html中顶部导航栏和侧边栏的代码放入commons.html页面；并删除
dashboard.html和list.html中的导航栏和侧边栏代码分别在
dashboard.html和list.html删除的部分插入提取出来的公共部分topbar和sidebar
1 |
|
1 | <body> |
1.3 高亮
页面中，使高亮的代码是
class="nav-link active"属性
dashboard.html页面
1
2<!--侧边栏-->
<div th:replace="~{commons/commons::sidebar(active='main.html')}"></div>list.html页面
1
2<!--侧边栏-->
<div th:replace="~{commons/commons::siderbar(active='list.html')}"></div>commons.html页面，利用三元运算符判断决定是否高亮
1
2
3<a th:class="${active=='main.html'?'nav-link active':'nav-link'}" th:href="@{/index.html}"> 首页
<a th:class="${active=='list.html'?'nav-link active':'nav-link'}" th:href="@{/emps}"> 员工管理
1.4 显示自己的数据值并添加两个按钮
修改list.html页面，显示自己的数据值
修改性别和date的显示，并添加编辑和删除两个标签
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<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>
<!--/*@thymesVar id="emps" type="templates"*/-->
<tr th:each="emp:${emps}">
<!--<td th:text="${emp.getId()}"></td>-->
<td>[[${emp.getId()}]]</td>
<td>[[${emp.getLastName()}]]</td>
<td>[[${emp.getEmail()}]]</td>
<td>[[${emp.getGender()==0?'女':'男'}]]</td>
<td>[[${emp.department.getDepartmentName()}]]</td>
<td>[[${emp.getBirth()}]]</td>
<td>
<a class="btn btn-sm btn-primary">编辑</a>
<a class="btn btn-sm btn-danger">删除</a>
</td>
</tr>
</tbody>
1.5 效果图
2. 增加员工
2.1 修改前端界面
2.1.1 list.html页面
新增添加员工按钮，点击该按钮时发起一个请求
/add
1 | <!--添加员工--> |
2.1.2 add.html页面
复制list.html页面，粘贴到
templates/emp下留下头部、导航栏、侧边栏，只把body中的main部分删除
bootstrap官网文档 ：https://v4.bootcss.com/docs/4.0/components/forms/ 可以去里面找自己喜欢的样式，放到body的侧边栏下
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
36
37
38
39<form>
<div class="form-group">
<label>LastName</label>
<input type="text" class="form-control" placeholder="quary">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control"
placeholder="1524368@qq.com">
</div>
<div class="form-group">
<label>Gender</label><br/>
<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">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label>Birth</label>
<input type="text" class="form-control" placeholder="quary">
</div>
<button type="submit" class="btn btn-primary">添加</button>
</form>修改页面form表单提交地址和方式
1
<form th:action="@{/add}" method="post">
给标签添加
name属性循环遍历
department，特别注意，因部门在前端传入的参数是部门id，所以部门标签处的name属性应为department.id1
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
36
37
38
39<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<!-- 添加成员 -->
<form th:action="@{/add}" method="post">
<div class="form-group">
<label>LastName</label>
<input type="text" name="lastName" class="form-control" placeholder="quary">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control"
placeholder="15243685@qq.com">
</div>
<div class="form-group">
<label>Gender</label><br/>
<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>
<!--注意这里的name是department.id，因为传入的参数为id-->
<select class="form-control" name="department.id">
<option th:each="department:${departments}" th:text="${department.getDepartmentName()}" th:value="${department.getId()}"></option>
</select>
</div>
<div class="form-group">
<label>Birth</label>
<input type="text" name="birth" class="form-control" placeholder="birth:yyyy/MM/dd">
</div>
<button type="submit" class="btn btn-primary">添加</button>
</form>
</main>
2.2 修改后端
EmployeeController.java文件
add方法
处理
添加员工的请求，通过get方式提交请求，在EmployeeController中添加一个add方法用来处理list页面点击提交按钮的操作，返回到add.html添加员工页面。1
2
3
4
5
6
7
8
9
10
DepartmentDao departmentDao;
public String add(Model model){
//查出所有的部门信息
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("departments",departments);
return "emp/add";
}addEmp方法
处理点击
添加按钮的操作1
2
3
4
5
6
7
public String addEmp(Employee employee) {
System.out.println(employee);
// 添加员工
employeeDao.save(employee); //调用底层业务方法保存员工信息
return "redirect:/emps";
}
2.3 结果图
3 修改员工信息
3.1 修改前端界面
3.1.1 list.html页面
点击
编辑标签时，跳转到编辑页面update.html
1 | <a class="btn btn-sm btn-primary" th:href="@{/edit/{id}(id=${emp.getId()})}">编辑</a> |
3.1.2 update.html页面
将add页面复制一份改为update页面，将后台查询的数据回显
1 | <form th:action="@{/edit}" method="post"> |
- 规定一下显示的日期格式
1 | <!--springboot默认的日期格式为yy/MM/dd--> |
- 修改表单提交的地址
1 | <form th:action="@{/updateEmp}" method="post"> |
- 指定修改人的id
1 | <input type="hidden" name="id" th:value="${emp.getId()}"> |
3.2 修改后端
EmployeeController.java文件
toUpdateAll方法
员工的修改页面
1
2
3
4
5
6
7
8
9
10
11
public String toUpdateAll( int id,Model model){
//查询指定的id员工，添加到emp中，用于前端接收
Employee employee=employeeDao.getEmployee(id);
model.addAttribute("emp",employee);
//查出所有的部门信息，添加到department中，用于前端接收
Collection<Department> departments=departmentDao.getDepartments();
model.addAttribute("departments",departments);
//返回编辑员工页面
return "/emp/update";
}updateEmp方法
保存修改的内容，回到列表页面
1
2
3
4
5
6
public String updateEmp(Employee employee){
employeeDao.save(employee);
//回到员工列表页面
return "redirect:/emps";
}
3.3 结果图
3.4 出错
点击修改按钮之后页面跳转之后没有数据
经过往前的排查，最后发现是在创建部门表的时候id不对应！！！本来应该是1001，写成了101。虽然在增加数据的时候没问题，但是在修改数据和删改数据的时候就读取不到正确的数据了！
4 删除数据
4.1 修改前端界面
- list.html页面
点击
删除标签是，发起一个请求，删除指定的用户，再重新返回到list页面显示员工数据
1 | <a class="btn btn-sm btn-danger" th:href="@{/delete/{id}(id=${emp.getId()})}">删除</a> |
4.2 修改后端
EmployeeController.java文件
1 |
|