目录
1.1.1、通过axios发送请求到Servlet获取用户列表数据
1.1.2、将Servlet响应的数据通过v-for指令显示到table上
2.1.2、在执行删除的函数中通过axios请求servlet删除用户
一、用户管理界面显示用户信息
1.1、前端HTML
1.1.1、通过axios发送请求到Servlet获取用户列表数据
1.1.2、将Servlet响应的数据通过v-for指令显示到table上
1.2后端Servlet
1.2.1、DAO中添加查询全部用户的方法
接口
/** 查询所有用户 */ public List<User> selectAll();方法重写
代码如下:
public List<User> selectAll() { ArrayList<User> list = new ArrayList<User>(); String sql="select * from t_user order by id desc"; ResultSet rs = executeQuery(sql); try { while(rs.next()){ User user = new User(); user.setId(rs.getInt("id")); user.setUserName(rs.getString("user_name")); user.setPasswd(rs.getString("passwd")); user.setNickName(rs.getString("nick_name")); user.setSex(rs.getInt("sex")); user.setPhone(rs.getString("phone")); user.setImg(rs.getString("img")); user.setBirth(rs.getString("birth")); list.add(user); } //释放资源啊 closeAll(); } catch (SQLException throwables) { throwables.printStackTrace(); } return list; }
1.2.2、创建UserListServlet查询全部用户
代码如下:
package controller;
import com.alibaba.fastjson.JSON;
import dao.UserDAO;
import dao.impl.UserDAOImpl;
import entity.User;
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;
import java.util.List;
/**
* 获取用户列表
*/
@WebServlet("/user_list")
public class UserListServlet 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=utf-8");
//获取打印输出流
PrintWriter writer = resp.getWriter();
//接受HTML请求传递的值
UserDAO dao = new UserDAOImpl();
List<User> list = dao.selectAll();
String json = JSON.toJSONString(list);
writer.print(json);
//释放资源
writer.close();
}
}
二、用户管理界面删除功能
2.1、前端HTML
2.1.1、给表格的按钮添加删除时执行的函数
2.1.2、在执行删除的函数中通过axios请求servlet删除用户
方框内代码是尝试找到要删除的id,通过HTML页面的后台控制器显示
2.1.3、刷新用户列表(方便调用)
2.1.4、源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户管理</title>
<!-- 导入Bootstrap依赖-->
<link rel="stylesheet" href="asset/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="asset/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="asset/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- 导入vue依赖-->
<script src="asset/vue.min-v2.5.16.js"></script>
<script src="asset/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);
}
/*鼠标悬浮链接上*/
/*text-decoration: none;不显示下划线*/
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="asset/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="changepassword.html">修改密码</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 表头-->
<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" @click="doUpdate(u.id)">修改</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){
/*尝试能不能找到要删除的id
console.log("要删除的用户id:"+id)
*/
//请求serverlet删除用户
axios.get("delete_user?id="+id).then(response =>{
if (response.data=='删除成功'){
//删除用户列表
this.reqeustUserList();//调用请求用户列表的函数
}else{
alert("删除失败!!!");
}
});
},
doUpdate(id){//点击修改按钮后触发
//跳转到user_update.html页面,并且传递id过去
window.location.href="user_update.html?id="+id;
},
reqeustUserList(){
//发送请求获取用户列表
axios.get("user_list").then(response=>{
this.users = response.data;
});
},
}
});
</script>
</body>
</html>2.2后端Servlet
2.2.1、DAO中添加根据id删除用户的方法
public int deleteById(int id) { String sql = "delete from t_user where id="+id; return this.excuteUpdate(sql); }
2.2.2、创建UserDeleteServlet
package controller; /** * 删除用户,根据id */ 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; @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=utf-8"); //获取打印输出流 PrintWriter writer = resp.getWriter(); //获取前台页面传来的id值 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(); } }
三、用户管理界面修改功能
3.1前端HTML
3.1.1给table中的修改按钮绑定点击事件
3.1.2 新增user_update.html页面
源代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>修改用户</title> <!-- 导入Bootstrap依赖--> <link rel="stylesheet" href="asset/bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script src="asset/jquery-3.5.1/jquery-3.5.1.min.js"></script> <script src="asset/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <!-- 导入vue依赖--> <script src="asset/vue.min-v2.5.16.js"></script> <script src="asset/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); } /*鼠标悬浮链接上*/ /*text-decoration: none;不显示下划线*/ 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="asset/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="changepassword.html">修改密码</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;"> <!-- img-responsive图片自适应, center-block强制居中--> <div class="row"> <div class="col-md-4 col-md-offset-4" style="margin-top: 20px;"> <label>用户名</label> <input type="text" class="form-control" v-model="userName"/> </div> </div> <div class="row"> <div class="col-md-4 col-md-offset-4" style="margin-top: 20px;"> <label>昵称</label> <input type="text" class="form-control" v-model="nickName"/> </div> </div> <div class="row"> <div class="col-md-4 col-md-offset-4" style="margin-top: 20px;"> <label>手机号</label> <input type="text" class="form-control" v-model="phone"/> </div> </div> <div class="row"> <div class="col-md-4 col-md-offset-4" style="margin-top: 20px;"> <label style="margin-right:15px;">性别</label> <label class="radio-inline"> <input type="radio" name="sex" v-model="sex" value="0"/>男 </label> <label class="radio-inline"> <input type="radio" name="sex" v-model="sex" value="1"/>女 </label> </div> </div> <div class="row"> <div class="col-md-4 col-md-offset-4" style="margin-top: 20px;"> <label>生日</label> <input type="text" class="form-control" v-model="birth"/> </div> </div> <div class="row"> <div class="col-md-4 col-md-offset-4" style="margin-top: 20px;text-align: center;"> <button class="btn btn-primary" style="margin-right: 8px"@click="doUpdate">修改</button> <button class="btn btn-default" >重置</button> </div> </div> </div> </div> </div> </div> </div> </body> <script> //创建Vue对象 new Vue({ el:'#app', data:{ userName: null, nickName: null, sex: null, phone: null, birth: null }, methods:{ doUpdate() { var url=window.location.href; var id= url.substring(url.indexOf("=")+1);//+1为再加一位数 var url = "user_update?id="+id+"&user_name="+this.userName+"&nick_name="+this.nickName+"&sex="+this.sex+"&phone="+this.phone+"&birth="+this.birth; axios.get(url).then(response =>{ if (response.data=='修改成功'){ window.location.href='user_list.html'; }else{ alert("修改失败");//弹窗警告 } }); } }, created: function () {//页面加载完成后执行 var url=window.location.href; var id= url.substring(url.indexOf("=")+1);//+1为再加一位数 //console.log(id); 检验是否找到id //通过axios发送请求获取用户信息 axios.get("user_info?id="+id).then(response =>{ //console.log(response.data); this.userName =response.data.userName; this.nickName=response.data.nickName; this.sex=response.data.sex; this.phone=response.data.phone; this.birth=response.data.birth; }); }, }); </script> </html>
3.1.3 在绑定的修改函数中,跳转到user_update.html
跳转页面时将用户id传递到user_update.html中
3.1.4 在user_update.html中通过axios根据id回显用户信息(重点!!!!)
红框中的内容为获取页面传递的参数id
3.1.5在user_update.html中通过axios修改用户信息
3.1.6在按钮控件中加入方法
3.1.7 在vue的methods中写
代码如下:
methods:{ doUpdate() { var url=window.location.href; var id= url.substring(url.indexOf("=")+1);//+1为再加一位数 var url = "user_update?id="+id+"&user_name="+this.userName+"&nick_name="+this.nickName+"&sex="+this.sex+"&phone="+this.phone+"&birth="+this.birth; axios.get(url).then(response =>{ if (response.data=='修改成功'){ window.location.href='user_list.html'; }else{ alert("修改失败");//弹窗警告 } }); } },
讲解:
以上的代码是通过用户管理界面的修改跳转并且数据回显的基础上,即如图所示
之后执行以下代码:
① 获取url网址
②substring从"="号开始截取,后面+1为再加一位,即获取id
③字符串拼接
④axios方法修改
3.2后端serverlet
3.2.1在UserDAO中添加根据id修改用户信息的方法
接口
重写方法
代码如下:
public int updateByid(User user) { String sql="update t_user set user_name='"+user.getUserName()+"',nick_name='"+user.getNickName()+"',phone='"+user.getPhone()+"',birth='"+user.getBirth()+"',sex="+user.getSex()+" where id="+user.getId(); return executeUpdate(sql);
3.2.2添加UserUpdateServlet
代码如下:
package controller; import dao.impl.UserDAOImpl; import entity.User; 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; @WebServlet("/user_update") public class UserUpdateServlet 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=utf-8"); PrintWriter writer = resp.getWriter(); int id =Integer.parseInt(req.getParameter("id")) ; String user_name = req.getParameter("user_name"); String nick_name = req.getParameter("nick_name"); String phone = req.getParameter("phone"); int sex = Integer.parseInt(req.getParameter("sex")); String birth = req.getParameter("birth"); User user = new User(); user.setId(id); user.setUserName(user_name); user.setNickName(nick_name); user.setPhone(phone); user.setSex(sex); user.setBirth(birth); UserDAOImpl dao = new UserDAOImpl(); int count = dao.updateByid(user); if (count>0){ writer.print("修改成功"); }else{ writer.print("修改失败"); } writer.close(); } }
1236
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
