需求:用户信息删除操作
具体步骤:
1. userlist.html 页面内容如下
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Dashboard Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link th:href="@{/assets/css/bootstrap.min.css}" rel="stylesheet">
<!-- Custom styles for this template -->
<script src="assets/js/jquery-3.4.0.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</head>
<body>
<!--在原来的位置引用公共的头部元素,原来的 <nav元素就是在这里的
commonsHead:模板名,根据Spring Boot配置的Thymeleaf映射查找
head:是模板中公用的代码片段-->
<div ></div>
<div class="container-fluid">
<div class="row">
<!-- 在原来的左侧菜单位置引用抽取好的公共左侧菜单代码
1、这是使用的 id选择器 进行的引用
2、引用公共代码的片段的同时传递参数值过去-->
<div></div>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<h2><a th:href="@{/userCRUD}" class="btn btn-primary">用户添加</a></h2>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>#</th>
<th>用户名</th>
<th>邮箱</th>
<th>性別</th>
<th>生日</th>
<th>所属部门</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- th:each 表示遍历,userList是后台的参数名;循环时每次的变量名为 user
如同 JSTL 一样,当userList为null 或者大小为0 时,不会报错-->
<tr th:each="user:${userList}">
<!-- th:text 为标签赋值-->
<td th:text="${user.uId}"></td>
<!-- 这是行内写法,写成: <td th:text="${user.uName}"></td> 也是可以的-->
<td>[[${user.uName}]]</td>
<td th:text="${user.email}"></td>
<!-- 三元运算符,User的gender为0则表示女生,1表示南山-->
<td th:text="${user.gender}==0?'女':'男'"></td>
<!-- 这是 Thymeleaf 的日期格式化,如同JSTL的日期格式类似;可以官方文档-->
<td th:text="${#dates.format(user.birth, 'yyyy-MM-dd')}"></td>
<!-- 这是级联获取属性值,因为User中关联了 Department 对象-->
<td th:text="${user.department.depName}"></td>
<td>
<a class="btn btn-sm btn-primary" th:href="@{/userCRUD/}+${user.uId}">修改</a>
<button th:attr="del_uri=@{/userCRUD/}+${user.uId}" class="btn btn-sm btn-danger deleteBtn">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</main>
</div>
</div>
<form id="deleteEmpForm" method="post">
<input type="hidden" name="_method" value="delete"/>
</form>
<script>
$(".deleteBtn").click(function(){
alert("abc");
//删除当前员工的
$("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit();
alert("abc");
//return false;
});
</script>
</body>
</html>
(1)首先,为了在js中对删除这个按钮做操作,我们在class中加一个属性值,我这里起名叫:deleteBtn
<button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除</button>
(2)click一个事件function,返回一个fasle是为了取消这个按钮的默认行为。click事件触发form表单的deleteEmpForm
<form id="deleteEmpForm" method="post">
<input type="hidden" name="_method" value="delete"/>
</form>
<script>
$(".deleteBtn").click(function(){
alert("abc");
//删除当前员工的
$("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit();
alert("abc");
//return false;
});
</script>
</body>
</html>
2. 在UserController类里添加deleteEmployee函数
/**员工删除
*
*/
@DeleteMapping("userCRUD/{userId}")
public String deleteEmployee(@PathVariable("userId") Integer id){
userDaoImpl.delUserById(id);
return "redirect:/userlist";
}
/**
* 跳转到用户列表页面
*
* @param model 用户设值返回页面
* @return
*/
@GetMapping("userlist")
public String findAllUsers(Model model) {
List<User> userList = userDaoImpl.getAll();
model.addAttribute("userList", userList);
/** 往前端 Thymeleaf 模板引擎时,开头不要加 "/" ,因为它默认配置的前缀就是:
* spring.thymeleaf.prefix=classpath:/templates/
*/
System.out.println("findAllUsers");
return "userList";
}
3.UserDaoImpl类里添加 delUserById
/**
* 根据用户id删除用户
*
* @param user
*/
public void delUserById(Integer userId) {
if (userId != null) {
for (int i = 0; i < userList.size(); i++) {
if (userList.get(i).getUId().equals(userId)) {
userList.remove(i);
break;
}
}
}
}