制作CRM管理系统03(用户管理)
2024-05-21 23:46:18
目录
一、用户管理界面显示用户信息
1.1、前端HTML
1.1.1、通过axios发送请求到Servlet获取用户列表数据
1.1.2、将Servlet响应的数据通过v-for指令显示到table上
1.2后端Servlet
1.2.1、DAO中添加查询全部用户的方法
1.2.2、创建UserListServlet查询全部用户
二、用户管理界面删除功能
2.1、前端HTML
2.1.1、给表格的按钮添加删除时执行的函数
2.1.2、在执行删除的函数中通过axios请求servlet删除用户
2.1.3、刷新用户列表(方便调用)
2.1.4、源代码
2.2后端Servlet
2.2.1、DAO中添加根据id删除用户的方法
2.2.2、创建UserDeleteServlet
三、用户管理界面修改功能
3.1前端HTML
3.2后端serverlet
3.2.1在UserDAO中添加根据id修改用户信息的方法
3.2.2添加UserUpdateServlet
一、用户管理界面显示用户信息
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 {@Overrideprotected 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){/*尝试能不能找到要删除的idconsole.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 {@Overrideprotected 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 {@Overrideprotected 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();} }
制作CRM管理系统03(用户管理)相关推荐
- 制作CRM管理系统05(客户管理)
目录 一.后台servlet开发 1.1.在CustomDAO中添加查询所有客户的方法 1.2.添加CustomAddServlet 二.前端html开发 2.1.在created方法中通过axios ...
- 制作CRM管理系统04(客户增加)
一.后端servlet开发 1.1.创建Custom实体类 package entity;public class Custom {private int id;private String name ...
- 【学生管理系统】用户管理之用户登录
目录 2. 用户管理 2.1 环境搭建 2.1.1 前端环境 2.1.2 后端环境(9000) 2.2 用户登录 2.2.1 需求 2.2.2 后端实现 2.2.3 前端实现 2.3 首页 2.3.1 ...
- 服务器多账户管理系统,统一用户管理解决方案
一.方案概述 日常工作中,使用人员在使用各应用系统时都要做登录操作,需要记住每个系统的登录口令:对于系统管理员,人员的新增.调离或退休都需要到各个系统中都要进行重新配置.若操行不及时或遗漏,就会带来系 ...
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理（1）...
应用程序的基本框架已经搭建好了,现在要做的是完成一个个的功能模块.先从简单做起,完成用户管理模块,该模块主要功能是使用一个Grid显示用户信息,并使用RowEditing进行用户的编辑.添加操作.Gr ...
- 权限管理系统之用户管理
4.1 用户管理 用户是登录系统的楔子. 用户管理主要是针对平台的使用者进行管理.包括: ① 用户信息(帐号.密码.姓名等个人基本信息和状态.职位.职务等平台信息) ② 用户组设置.组织归属 ③ 角色 ...
- 若依权限管理系统（用户管理）
一.用户管理 权限管理子系统中最直接的权限控制对象是用户,我们要控制用户对资源的访问权限 核心业务分析 这里的用户为系统管理员添加的用户,是系统管理员,管理员在添加这个账户,会为账户设置一些基础信息, ...
- mysql 用户管理系统_mysql 用户管理
MySQL账户管理 在我们之前登录MySQL的时候我们都是直接使用的root用户,root用户属于数据库系统中的超级管理员,有权限对mysql进行任何想要做的操作. 如果在生产环境下操作数据库时也是全 ...
- 企业办公oa系统医药OA办公后台管理会议管理用户管理物料管理活动管理/Axure医药内部管理平台/web端后台管理系统原型/医药OA系统/权限管理
作品介绍:企业办公oa系统&医药OA办公后台管理&会议管理&用户管理&物料管理&活动管理/Axure医药内部管理平台/web端后台管理系统原型/医药OA系统/权 ...
最新文章
- 小马智行最新RoboTaxi来了！彭军：对方向有着前所未有的笃定
- Spring Boot 应用系列 5 -- Spring Boot 2 整合logback
- 拿到BAT等大厂offer以后，我发现了关于秋招的一些真相
- mysql binlog过期策略_MySQL binlog日志优化方案
- android super this区别
- 【JEECG_3.7.1】列表多表头的设计
- 探寻 Redis 内存诡异增长的元凶
- PHP header发送各种类型文件及设置文件下载名
- 全国政协常委胡晓炼：要重视数字货币与数字鸿沟问题
- 调用OpenCVSharp进行拍照
- 软件案例分析-音乐软件界的卧龙凤雏-酷狗音乐与网易云音乐
- 表格票据识别人工智能OCR
- 台式计算机开机不自检不起动,台式机开机不自检怎么办
- 详细完整MySQL8.0.23安装教程
- IP地址分为几类？各如何表示？IP地址的主要特点是什么？
- 地理坐标系：WGS84和BD09互转
- 国际商业分析师CBAP认证与PMI-PBA认证的区别——上海信息化培训中心
- 137.Python修炼之路【142-前端-JQuery-jqueryUI】2018.08.04
- STM32CubeIDE+FREERTOS踩坑记录
- CSS系列之连续的字母或数字在Html盒子中不会自动换行，直接溢出