修改记录功能--jsp,servlet

朱雀 2023-10-04 17:34 47阅读 0赞

>>>接上篇：[https://blog.csdn.net/hgnuxc\_1993/article/details/123108586][https_blog.csdn.net_hgnuxc_1993_article_details_123108586]

## 一.分析 ##

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg5bC955qE5rKJ6buY_size_20_color_FFFFFF_t_70_g_se_x_16][]

**原理分析：**

1.前端jsp页面绑定该条需修改记录的id,id值为$\{user.id\},提交到查询用户的QueryUpdate中处理。

2.在findUserServlet中：

①获取传过来的id

②根据id来查询用户信息

③封装用户信息，并将该对象存到request域中

④跳转update.jsp页面，并把查询的对应的值写入jsp页面,使之显示

⑤在update.jsp中，表单提交已经修改后的用户信息至UpdateUserServlet处理

（注意这里update.jsp页面上，没有输入用户的id信息，需要自己创建一个隐藏的input来传递用户id值）

3.在UpdateUserServlet中：

①设置编码

②获取表单信息，并封装成user对象（注意提交的input中所有name值需要与用户的属性名字对应一致）

③调用service层完成修改

④修改后跳转到UserListServlet中，重新查询用户信息

## 二.list.jsp页面 ##

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <!DOCTYPE html>
    
    <html lang="zh-CN">
    <head>
        
        <meta charset="utf-8">
        
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <title>用户信息管理系统</title>
    
        
        <link href="css/bootstrap.min.css" rel="stylesheet">
        
        <script src="js/jquery-2.1.0.min.js"></script>
        
        <script src="js/bootstrap.min.js"></script>
        <style type="text/css">
            td, th {
                text-align: center;
            }
        </style>
        <script type="text/javascript">
             function deluser(i) {
            	 //用户安全提示
    			if(confirm("您确定需要删除吗?")){
    				location.href="${pageContext.request.contextPath }/delUserServlet?id="+i;
    			}
    		}
             
             window.onload=function(){
            	    //给删除选中按钮添加点击事件
            		 document.getElementById("delselcted").onclick=function(){
            		    if(confirm("您确定删除这些选项吗？")){  //在删除前给删除添加保险
            		    	//判断选项中是否有被选上的，如果没有的话不执行删除，否则没有if会造成空指针异常
            		    	var flag =false;
            		    	var cbs=document.getElementsByName("uid");  //获取所有的选项（包括选的，没有选的）
            		    	for(var i=0;i<cbs.length;i++){
            		    		if(cbs[i].checked){  //一旦有被选的项，就停止循环
            		    			flag=true;
            		    			 break;  
            		    		}
            		    	}
            		    	if(flag){//一旦有被选的项，就提交表单
            		    	   document.getElementById("form").submit();  //一旦删除选中，首先创建一个表单，把所有信息提交给delselectedservlet处理
            		    	}
            		    		
            		       
            		    }
            	     }
            	    
            	   //一键全选，一键全不选
            	   //通过id获取第一个全选项
            	   document.getElementById("firstcb").onclick=function(){
            		   var cbs=document.getElementsByName("uid");
            		   //遍历下面所有的选项
            		   for(var i=0;i<cbs.length;i++){
            			     //设置cbs[i].checked的状态与第一个firstcb.checked相同
            			     cbs[i].checked=this.checked;
            		   }
            	   }; 
             }
        </script>
    </head>
    <body>
    <div class="container">
        <h3 style="text-align: center">用户信息列表</h3>
        <div style="float: left;">
    
            <form class="form-inline">
                <div class="form-group">
                    <label for="exampleInputName2">姓名</label>
                    <input type="text" class="form-control" id="exampleInputName2" >
                </div>
                <div class="form-group">
                    <label for="exampleInputName3">籍贯</label>
                    <input type="text" class="form-control" id="exampleInputName3" >
                </div>
    
                <div class="form-group">
                    <label for="exampleInputEmail2">邮箱</label>
                    <input type="email" class="form-control" id="exampleInputEmail2"  >
                </div>
                <button type="submit" class="btn btn-default">查询</button>
            </form>
        </div>
        <div style="float: right; margin: 5px;">    
           <a class="btn btn-primary" href="${pageContext.request.contextPath }/add.jsp">添加联系人</a>
           <a class="btn btn-primary" href="javascript:void(0);" id="delselcted">删除选中</a>  
        </div>
        <%--下面这个form表单是为了提交所有选择的删除项 至delselectedservlet
        至于delselectedservlet怎么获得那个项被选中，可以首先设置表单提交，然后将input中checkbox栏，设name="id"
        使之该id的value=${user.id},最后通过表单提交给了delselectedservlet
         --%>
        <form action="${pageContext.request.contextPath }/delselectedservlet" id="form" method="post">
            <table border="1" class="table table-bordered table-hover">
    	        <tr class="success">
    	            <th><input type="checkbox" id="firstcb"></th>
    	            <th>编号</th>
    	            <th>姓名</th>
    	            <th>性别</th>
    	            <th>年龄</th>
    	            <th>籍贯</th>
    	            <th>QQ</th>
    	            <th>邮箱</th>
    	            <th>操作</th>
    	        </tr>
    	        
    	        <c:forEach items="${list}" var="user" varStatus="s">
    	               <tr>
    	                    <td><input type="checkbox"  name="uid"  value="${user.id}"></td>
    			            <td>${s.count}</td>
    			            <td>${user.name}</td>
    			            <td>${user.gender }</td>
    			            <td>${user.age }</td>
    			            <td>${user.address }</td>
    			            <td>${user.qq }</td>
    			            <td>${user.email }</td>
    			            <td><a class="btn btn-default btn-sm" href="${pageContext.request.contextPath }/queryupdate?id=${user.id}">修改</a> 
    			                <a class="btn btn-default btn-sm" href="javascript:deluser(${user.id});" >删除</a></td>
    	        		</tr>
    	        </c:forEach>
    	    </table>
        </form>
    	    
        
        <div>
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">«</span>
                        </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">»</span>
                        </a>
                    </li>
                    <span style="font-size: 25px;margin-left: 5px;">
                        共16条记录，共4页
                    </span>
                    
    
                </ul>
            </nav>
        </div>
    </div>
    </body>
    </html>

## 三.编写QueryUpdate类 ##

package web.servlet;
    
    import java.io.IOException;
    
    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 domain.User;
    import service.USerService;
    import service.UserServiceImpl;
    
    @WebServlet("/queryupdate")
    public class QueryUpdate extends HttpServlet{
    
    	/**
    	 * 
    	 */
    	private static final long serialVersionUID = 1L;
    
    	@Override
    	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    		// TODO Auto-generated method stub
    		this.doPost(req, resp);
    	}
    
    	@Override
    	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    		//1.获取id参数
    		String idString=req.getParameter("id");
    		//2.通过id来查询用户的信息
    		USerService uSerService=new UserServiceImpl();
    		User user=uSerService.findUserById(idString);
    		//3.将查询的用户信息，存储到request域中
    		req.setAttribute("user", user);
    	    //4.跳转update.jsp页面
    		req.getRequestDispatcher("/update.jsp").forward(req, resp);
    	}
    	
    	
    	
    
    }

## 四.在service层中的UserService接口，UserServiceImpl实现类分别编写findUserById抽象方法和findUserById具体实现方法。 ##

package service;
    //user的业务接口
    
    import java.util.List;
    
    import domain.User;
    
    public interface USerService {
        //定义业务查询抽象方法
    	public List<User> findAll();
    
    	public void addUser(User user);
    
    
    	public void deluser(String id);
    
    	public User findUserById(String idString);
    
    	public void updateuser(User user);
    
    	public void delselecteduser(String[] ids);
    
    }

package service;
    
    import java.util.List;
    
    import dao.UserDao;
    import dao.UserDaoImpl;
    import domain.User;
    
    public class UserServiceImpl implements USerService{
        UserDao userDao=new UserDaoImpl();
        @Override
    	public List<User> findAll() {
    		//调用dao,操作数据库，查询所有的用户
    		return userDao.findAll();
    	}
        
        public void addUser(User user) {
        	//调用添加用户的方法
        	userDao.addUser(user);
        }
    
    	public void deluser(String id) {
    		//删除用户信息
    		userDao.deluser(Integer.parseInt(id));   //将参数变为整数
    		
    	}
    
    	@Override
    	public User findUserById(String idString) {
    		//通过id来查询需要修改的用户信息	
    		return userDao.findUserById(Integer.parseInt(idString));	
    	}
    
    	@Override
    	public void updateuser(User user) {
    		// 根据update.jsp中的用户信息修改数据库的用户信息
    		userDao.updateuser(user);		
    	}
    
    	@Override
    	public void delselecteduser(String[] ids) {
    		if(ids!=null&&ids.length>0) {  //判断是否有用户被选中，防止空指针异常
    			//根据id数组，删除选中的用户
    			for(String id:ids) {//遍历数组
    				userDao.deluser(Integer.parseInt(id));  //参数转换integer
    			}
    		}	
    	}
        
    
    }

## 五.在Dao层中UserDao接口，UserDaoImpl实现类分别编写抽象方findUserById法和findUserById具体实现方法。 ##

package dao;
    
    import java.util.List;
    
    import domain.User;
    
    public interface UserDao {
         public List<User> findAll();  //抽象方法
    	 public void addUser(User user);
    	public void deluser(int id);  //根据整型的id来删除用户
    	
    	public User findUserById(int parseInt);
    	
    	public void updateuser(User user);
     
    }

package dao;
    
    import java.util.List;
    
    import javax.xml.transform.Templates;
    
    import org.springframework.jdbc.core.BeanPropertyRowMapper;
    import org.springframework.jdbc.core.JdbcTemplate;
    
    import domain.LoginUser;
    import domain.User;
    import utils.JDBCUtils;
    
    public class UserDaoImpl implements UserDao{
        JdbcTemplate jdbcTemplate =new JdbcTemplate(JDBCUtils.getDataSource());
    	public List<User> findAll() {
    		// 操作数据库,查询
    		String sql="select * from user";
    		List<User> users=jdbcTemplate.query(sql,new BeanPropertyRowMapper(User.class));
    		return users;
    	}
    	public LoginUser checkLoginUser( LoginUser loginUser) {
    		//查询登录用户信息
    		String sqlString="select* from loginuser where username=? and password=?";
    		//System.out.println("111"+loginUser);
    		try {
    			LoginUser lu=(LoginUser) jdbcTemplate.queryForObject(sqlString, new BeanPropertyRowMapper<LoginUser>(LoginUser.class)
    					,loginUser.getUserName(),loginUser.getPassword());
    			return lu;
    		} catch (Exception e) {
    			// TODO: handle exception
    			e.printStackTrace();
    			return null;
    		}	
    	}
    	
    	 public void addUser(User user) {
    	    	//调用添加用户的方法，
    		    //使用sql语句
    		    String sql="insert into user values(null,?,?,?,?,?,?)";
    		    jdbcTemplate.update(sql,user.getName(),user.getGender(),user.getAge(),user.getAddress(),
    		    		user.getQq(),user.getEmail());
    	    	
    	    }
    	@Override
    	public void deluser(int id) {
    		 //删除用户信息
    		 String sql="delete from user where id=?";
    		 jdbcTemplate.update(sql,id);
    		
    	}
    	@Override
    	public User findUserById(int parseInt) {
    		//根据id查询用户的信息
    		String sql="select * from user where id=?";
    		User user=jdbcTemplate.queryForObject(sql,new BeanPropertyRowMapper<User>(User.class),parseInt);
    		return user;	
    	}
    	@Override
    	public void updateuser(User user) {
    		// 根据update.jsp中的用户信息修改数据库的用户信息
    		String sql="update user set name=?,gender=?,age=?,address=?,qq=?,email=? where id=?";
    		jdbcTemplate.update(sql,user.getName(),user.getGender(),user.getAge(),user.getAddress(),
    				user.getQq(),user.getEmail(),user.getId());		
    	}
    	
    	
    }

## 六.根据id查询需要修改用户的信息后封装该用户，并存储该用户至request域中，然后跳转到update.jsp页面后，最后在页面上展示这名需要修改的用户信息。 ##

(注意：根据id查询需要修改用户的信息后封装该用户，并存储该用户信息至request域中，然后跳转到update.jsp页面----是在QueryUpdate类完成的)

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg5bC955qE5rKJ6buY_size_17_color_FFFFFF_t_70_g_se_x_16][]

**update.jsp**

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <!DOCTYPE html>
    <html lang="zh-CN">
        <head>
            
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>修改用户</title>
    
            <link href="css/bootstrap.min.css" rel="stylesheet">
            <script src="js/jquery-2.1.0.min.js"></script>
            <script src="js/bootstrap.min.js"></script>
            
            <script language=javascript>
    	       //在添加页面时返回查询用户页面的按钮
    	         window.onload=function(){
    	    	   document.getElementById("return").onclick=function(){
    	    		   location.href="${pageContext.request.contextPath }/userListServlet";
    	    	   }
    	        }
    			//验证只能为数字
    			function checkNumber(obj){
    				var reg = /^[0-9]+$/;
    				if(obj!=""&&!reg.test(obj)){
    					alert('只能输入数字！');
    					return false;
    				}
    			}
    			//验证年龄
    			function checkAge(obj){
    				var reg = /^[0-9]+$/;
    				if((obj!=""&&!reg.test(obj))||(obj>120)){
    					alert('只能输入小于120的数字！');
    					return false;
    				}
    			}
    			//验证邮箱
    			function checkEmail(obj){
    				//对电子邮件的验证
    				var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
    				if(!myreg.test(obj))
    				{
    				    alert('请输入有效的邮箱！');
    				    return false;
    				}
    		    }
           </script>
        </head>
        <body>
            <div class="container" style="width: 400px;">
            <h3 style="text-align: center;">修改联系人</h3>
             <form action="${pageContext.request.contextPath }/updateUserServlet" method="post">
                 <input type="hidden" name="id" value="${user.id }">
    	        <div class="form-group">
    	            <label for="name">姓名：</label>
    	            <input type="text" class="form-control" id="name" name="name" value="${user.name }" readonly="readonly" placeholder="请输入姓名">
    	        </div>
    	
    	        <div class="form-group">
    	            <label>性别：</label>
    	            <c:if test="${user.gender=='男' }">
    	                 <input type="radio" name="gender" value="男" checked="checked"/>男
    	                 <input type="radio" name="gender" value="女" />女
    	            </c:if>
    	           
    	             <c:if test="${user.gender=='女' }">
    	                 <input type="radio" name="gender" value="男" />男
    	                 <input type="radio" name="gender" value="女" checked="checked"/>女
    	            </c:if>
    	        </div>
    	
    	        <div class="form-group">
    	            <label for="age">年龄：</label>
    	            <input type="text" class="form-control" id="age" name="age" value="${user.age }" onkeypress="checkAge(this.value)" placeholder="请输入年龄">
    	        </div>
    	
    	        <div class="form-group">
    	            <label for="address">籍贯：</label>
    	            <select name="address" class="form-control" id="jiguan">
    	               <c:if test="${user.address =='广东' }">
    	                <option value="广东" selected="selected">广东</option>
    	                <option value="广西">广西</option>
    	                <option value="湖南">湖南</option>
    	                <option value="北京">北京</option>
    	                <option value="湖北">湖北</option>
    	                <option value="江西">江西</option>
    	                <option value="辽宁">辽宁</option>
    	                <option value="吉林">吉林</option>
    	                <option value="黑龙江">黑龙江</option>
    	                <option value="河南">河南</option>
    	                <option value="河北">河北</option>
    	                <option value="新疆">新疆</option>
    	                <option value="内蒙古">内蒙古</option>
    	                <option value="西藏">西藏</option>
    	                <option value="浙江">浙江</option>
    	                <option value="江苏">江苏</option>
    	               </c:if>
    	                <c:if test="${user.address =='广西' }">
    	                <option value="广东" >广东</option>
    	                <option value="广西" selected="selected">广西</option>
    	                <option value="湖南">湖南</option>
    	                <option value="北京">北京</option>
    	                <option value="湖北">湖北</option>
    	                <option value="江西">江西</option>
    	                <option value="辽宁">辽宁</option>
    	                <option value="吉林">吉林</option>
    	                <option value="黑龙江">黑龙江</option>
    	                <option value="河南">河南</option>
    	                <option value="河北">河北</option>
    	                <option value="新疆">新疆</option>
    	                <option value="内蒙古">内蒙古</option>
    	                <option value="西藏">西藏</option>
    	                <option value="浙江">浙江</option>
    	                <option value="江苏">江苏</option>
    	               </c:if>
    	               <c:if test="${user.address =='湖北' }">
    	                <option value="广东" >广东</option>
    	                <option value="广西" selected="selected">广西</option>
    	                <option value="湖南">湖南</option>
    	                <option value="北京">北京</option>
    	                <option value="湖北" selected="selected">湖北</option>
    	                <option value="江西">江西</option>
    	                <option value="辽宁">辽宁</option>
    	                <option value="吉林">吉林</option>
    	                <option value="黑龙江">黑龙江</option>
    	                <option value="河南">河南</option>
    	                <option value="河北">河北</option>
    	                <option value="新疆">新疆</option>
    	                <option value="内蒙古">内蒙古</option>
    	                <option value="西藏">西藏</option>
    	                <option value="浙江">浙江</option>
    	                <option value="江苏">江苏</option>
    	               </c:if>
    	               
    	            </select>
    	        </div>
    	
    	        <div class="form-group">
    	            <label for="qq">QQ：</label>
    	            <input type="text" class="form-control" name="qq"  id="qq" value="${user.qq }" onkeyup="checkNumber(this.value)" placeholder="请输入QQ号码"/>
    	        </div>
    	
    	        <div class="form-group">
    	            <label for="email">Email：</label>
    	            <input type="text" class="form-control" name="email"  id="email" value="${user.email }" onblur="checkEmail(this.value)" placeholder="请输入邮箱地址"/>
    	        </div>
    	
    	        <div class="form-group" style="text-align: center">
    	            <input class="btn btn-primary" type="submit" value="提交" />
    	            <input class="btn btn-default" type="reset" value="重置" />
    	            <input class="btn btn-default" type="button" value="返回" id="return" />
    	        </div>
           </form>
        </div>
       </body>
    </html>

## 七.展示需要修改的用户信息后，将修改后的用户信息提交给UpdateUserServlet处理 ##

（注意：展示页面中没有用户id的值，我们需要添加一个隐藏input ,id=$\{user.id\}来传递给UpdateUserServlet,构成一个完整的用户信息）

package web.servlet;
    
    import java.io.IOException;
    import java.lang.reflect.InvocationTargetException;
    import java.util.Map;
    
    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 org.apache.commons.beanutils.BeanUtils;
    
    import domain.User;
    import service.USerService;
    import service.UserServiceImpl;
    @WebServlet("/updateUserServlet")
    public class UpdateUserServlet extends HttpServlet {
    
    	/**
    	 * 
    	 */
    	private static final long serialVersionUID = 1L;
    
    	@Override
    	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    		// TODO Auto-generated method stub
    		this.doPost(req, resp);
    	}
    
    	@Override
    	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    		//1.设置编码
    		req.setCharacterEncoding("utf-8");
    		
    		//2.获取前端的用户信息
    		   User user=new User();
    		   Map<String , String[]> pMap=req.getParameterMap();
    		//3.封装对象
    		    try {
    				BeanUtils.populate(user, pMap);
    			} catch (IllegalAccessException | InvocationTargetException e) {
    				// TODO Auto-generated catch block
    				e.printStackTrace();
    			}
    		 //4.调用service函数
    		    USerService uSerService=new UserServiceImpl();
    		    uSerService.updateuser(user);
    		 //5.跳转所有的查询的updateListServlet中
    		    resp.sendRedirect(req.getContextPath()+"/userListServlet");
    	}
    	
    
    }

## 八.在service层中的UserService接口，UserServiceImpl实现类分别编写updateuser抽象方法和updateuser具体实现方法。 ##

## 九.在Dao层中UserDao接口，UserDaoImpl实现类分别编写updateuser抽象方法和updateuser具体实现方法。 ##

## 十.修改成功后，重新跳转到查询所有用户的页面 ##

resp.sendRedirect(req.getContextPath()+"/userListServlet"); （在步骤7中最后重新跳回到查询所有的servlet）】

## 其他： ##

\*修改某条记录时，客户端需要绑定该记录的id,

\*然后根据该id,查找到该条记录详细信息，

\*封装该记录后存储到request域后

\*跳转显示该条需要修改的信息

\*提交已修改的信息

\*与数据库进行操作，在数据中通过用户id，修改该用户信息

\*重新跳转查询所有的用户信息

[https_blog.csdn.net_hgnuxc_1993_article_details_123108586]: https://blog.csdn.net/hgnuxc_1993/article/details/123108586
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg5bC955qE5rKJ6buY_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/c9cf4f3c08cd49e0846d0654bd9f8a21.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5peg5bC955qE5rKJ6buY,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg5bC955qE5rKJ6buY_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/d3ba904b4230413c94ff37818e6ea4dd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5peg5bC955qE5rKJ6buY,size_17,color_FFFFFF,t_70,g_se,x_16