一、前端HTML
1.1、给表格的按钮添加删除时执行的函数
1.2、在执行删除的函数中通过axios请求servlet删除用户
1.3、刷新用户列表
1.4、源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户管理</title>
<!-- 导入bootstrap依赖 -->
<link rel="stylesheet" href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- 导入vue依赖 -->
<script src="assets/vue.min-v2.5.16.js"></script>
<script src="assets/axios.min.js"></script>
<style>
a:link{font-size: 20px; color: rgb(109,109,109);}
a:visited{font-size: 20px; color: rgb(109,109,109);}
a:hover{font-size: 20px; color: white; text-decoration: none;}
</style>
</head>
<body>
<div class="container" id="app">
<!-- bootstrap行-->
<div class="row">
<!-- 显示导航-->
<div class="col-md-3" style="background-color: rgb(0,21,41); height: 800px;">
<!-- bootstrap行 -->
<div class="row">
<div class="col-md-12" style="background-color: rgb(0,40,77); text-align: center; height: 70px; line-height: 70px; font-size: 20px; color: white; font-weight: bold">
<img src="assets/img/logo.png" style="width: 30px; height: 30px; margin-right: 8px"/>
蜗牛CRM管理系统
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center; padding: 20px 0px 20px 0px">
<a href="index.html">进入首页</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center; padding: 20px 0px 20px 0px">
<a href="user_list.html">用户管理</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center; padding: 20px 0px 20px 0px">
<a href="user_add.html">添加用户</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center; padding: 20px 0px 20px 0px">
<a href="#">客户管理</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center; padding: 20px 0px 20px 0px">
<a href="#">添加客户</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center; padding: 20px 0px 20px 0px">
<a href="#">修改密码</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center; padding: 20px 0px 20px 0px">
<a href="login.html">退出登录</a>
</div>
</div>
</div>
<!-- 显示内容 -->
<div class="col-md-9" style="border: 1px solid gray; height: 800px">
<div class="row">
<!-- 显示提示位置 -->
<div class="col-md-12" style="height: 70px; color: rgb(109,109,109); font-size: 18px; line-height: 70px; font-weight: bold; padding-left: 20px">
> 用户管理
</div>
</div>
<!-- 显示内容 -->
<div class="row" style="background-color: rgb(240,242,245); height: 730px; padding: 20px">
<div class="col-md-12" style="background-color: white; height: 730px; border: none; border-radius: 5px;">
<!-- 使用bootstrap表格斑马线样式-->
<table class="table table-striped" style="margin-top: 20px">
<!-- 表格描述 -->
<caption>用户管理-用户列表</caption>
<!--表头-->
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>昵称</th>
<th>性别</th>
<th>生日</th>
<th>手机号</th>
<th>操作</th>
</tr>
</thead>
<!-- 表格内容-->
<tbody>
<tr v-for="u in users">
<td>{{u.id}}</td>
<td>{{u.userName}}</td>
<td>{{u.nickName}}</td>
<td>{{u.sex}}</td>
<td>{{u.birth}}</td>
<td>{{u.phone}}</td>
<td>
<button class="btn btn-link">修改</button>
<button class="btn btn-link" @click="doDelete(u.id)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
users: null
},
created: function () { //页面加载完成之后执行
this.reqeustUserList(); //调用请求用户列表的函数
},
methods: {
/* 删除用户，根据id*/
doDelete(id){
// console.log("要删除的用户id："+id);
// 请求servlet删除用户
axios.get("delete_user?id="+id).then(response => {
if(response.data == '删除成功'){
//刷新用户列表
this.reqeustUserList(); //调用请求用户列表的函数
} else {
alert("删除失败！！！");
}
});
},
reqeustUserList(){ //请求用户列表
//发送请求获取用户列表
axios.get("user_list").then(response => {
this.users = response.data;
});
}
}
});
</script>
</body>
</html>
复制代码二、后端Servlet
2.1、DAO中添加根据id删除用户的方法
public int deleteById(int id) {
String sql = "delete from t_user where id="+id;
return this.excuteUpdate(sql);
}
复制代码2.2、创建UserDeleteServlet
package controller;
import dao.UserDAO;
import dao.impl.UserDAOImpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* 删除用户，根据id
*/
@WebServlet("/delete_user")
public class UserDeleteServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//转码
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
resp.setContentType("application/json;charset=utf8");
//获取打印输出流，向网页输出内容
PrintWriter writer = resp.getWriter();
//获取前台页面传来的值
int id = Integer.parseInt(req.getParameter("id"));
//通过dao删除用户
UserDAO dao = new UserDAOImpl();
int count = dao.deleteById(id);
//向网页输出内容
if(count > 0){
writer.print("删除成功");
} else {
writer.print("删除失败");
}
//释放资源
writer.close();
}
}作者：大坏蛋_
链接：https://juejin.cn/post/7163917259877351431
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
98
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
