案例：用户信息列表展示

阳光穿透心脏的1/2处 2024-03-31 16:18 90阅读 0赞

1. 需求：用户信息的增删改查操作
    
    2. 设计：
    	1. 技术选型：Servlet+JSP+MySQL+JDBCTempleat+Duird+BeanUtilS+tomcat
    	2. 数据库设计：
    		create database day17; -- 创建数据库
    		use day17; 			   -- 使用数据库
    		create table user(   -- 创建表
    			id int primary key auto_increment,
    			name varchar(20) not null,
    			gender varchar(5),
    			age int,
    			address varchar(32),
    			qq	varchar(20),
    			email varchar(50)
    		);
    
    3. 开发：
    	1. 环境搭建
    		1. 创建数据库环境
    		2. 创建项目，导入需要的jar包
    
    	2. 编码
    
    4. 测试
    
    5. 部署运维

## **一、学习目标** ##

1.完成登录功能

2.完成增加功能

3.完成删除功能

4.完成修改功能

5.完成选中项删除功能

6.完成分页查询功能

7.完成复杂条件查询功能

####  ####

## **二、学习指南** ##

1.简单增删改查（重要）

2.选中项删除（重要）

3.分页条件查询（重要）

## 三、具体步骤 ##

### 1.列表查询 ###

#### 1.1 **知识概述** ####

列表查询功能的具体执行流程：servlet--------->service---->dao查询数据库

#### 1.2 分析图 ####

![bfffea5d46954870a2754dcc232b4379.png][]

### 2.页面调整 ###

#### 2.1 **知识概述** ####

调整案例所需页面的样式以及内容

### 3.登录功能\_验证码显示 ###

#### 3.1 **知识概述** ####

登录的时候要先校验验证码是否正确，正确再去校验账号密码，密码正确放入session中保存用户信息，需要注意的是用户验证成功后把登录信息存入session中。

#### 3.2 代码实现 ####

request.setCharacterEncoding("utf-8");
 
 //2.获取数据
 //2.1获取用户填写验证码
 String verifycode = request.getParameter("verifycode");
 
 //3.验证码校验
 HttpSession session = request.getSession();
 String checkcode_server = (String) session.getAttribute("CHECKCODE_SERVER");
 session.removeAttribute("CHECKCODE_SERVER");//确保验证码一次性
 if(!checkcode_server.equalsIgnoreCase(verifycode)){
 //验证码不正确
 //提示信息
 request.setAttribute("login_msg","验证码错误！");
 //跳转登录页面
 request.getRequestDispatcher("/login.jsp").forward(request,response);
 
 return;
 }
 
 Map<String, String[]> map = request.getParameterMap();
 //4.封装User对象
 User user = new User();
 try {
 BeanUtils.populate(user,map);
 } catch (IllegalAccessException e) {
 e.printStackTrace();
 } catch (InvocationTargetException e) {
 e.printStackTrace();
 }
 
 
 //5.调用Service查询
 UserService service = new UserServiceImpl();
 User loginUser = service.login(user);
 //6.判断是否登录成功
 if(loginUser != null){
 //登录成功
 //将用户存入session
 session.setAttribute("user",loginUser);
 //跳转页面
 response.sendRedirect(request.getContextPath()+"/index.jsp");
 }else{
 //登录失败
 //提示信息
 request.setAttribute("login_msg","用户名或密码错误！");
 //跳转登录页面
 request.getRequestDispatcher("/login.jsp").forward(request,response);
 
 }

### 4.添加功能 ###

#### 4.1 **知识概述** ####

添加页面，输入数据一定要有属性名称，提交form表单到后台，后台接收数据封装到user中，并编写sql语句

#### 4.2 分析图 ####

![34b96ccf75a148aa9673dfebac3a2bec.bmp][]

#### 4.3 代码实现 ####

//1.设置编码
 request.setCharacterEncoding("utf-8");
 //2.获取参数
 Map<String, String[]> map = request.getParameterMap();
 //3.封装对象
 User user = new User();
 try {
 BeanUtils.populate(user,map);
 } catch (IllegalAccessException e) {
 e.printStackTrace();
 } catch (InvocationTargetException e) {
 e.printStackTrace();
 }
 
 //4.调用Service保存
 UserService service = new UserServiceImpl();
 service.addUser(user);
 
 //5.跳转到userListServlet
 response.sendRedirect(request.getContextPath()+"/userListServlet");

### 5.删除功能 ###

#### 5.1 知识概述 ####

通过id删除数据，编写sql语句。

#### 5.2 分析图 ####

![496f54ddaf6746e29b82119b7f62cd86.bmp][]

#### 5.3 代码实现 ####

//1.获取id
            String id = request.getParameter("id");
            //2.调用service删除
            UserService service = new UserServiceImpl();
            service.deleteUser(id);
    
            //3.跳转到查询所有Servlet
            response.sendRedirect(request.getContextPath()+"/userListServlet");

### 6.修改功能 ###

#### 6.1 知识概述 ####

首先要进行数据回显，然后提交修改后数据到后台，进行保存。

#### 6.2 分析图 ####

![703e96abe45a4af9b858115cbd064189.bmp][]

#### 6.3 代码实现1\_用户信息回显 ####

//1.获取id
            String id = request.getParameter("id");
            //2.调用Service查询
            UserService service = new UserServiceImpl();
            User user = service.findUserById(id);
    
            //3.将user存入request
            request.setAttribute("user",user);
            //4.转发到update.jsp
            request.getRequestDispatcher("/update.jsp").forward(request,response);

#### 6.4 代码实现2\_用户修改 ####

//1.设置编码
 request.setCharacterEncoding("utf-8");
 //2.获取map
 Map<String, String[]> map = request.getParameterMap();
 //3.封装对象
 User user = new User();
 try {
 BeanUtils.populate(user,map);
 } catch (IllegalAccessException e) {
 e.printStackTrace();
 } catch (InvocationTargetException e) {
 e.printStackTrace();
 }
 
 //4.调用Service修改
 UserService service = new UserServiceImpl();
 service.updateUser(user);
 
 //5.跳转到查询所有Servlet
 response.sendRedirect(request.getContextPath()+"/userListServlet");

### 7.删除选中功能 ###

#### 7.1 知识概述 ####

首先要获取选中条目的id，然后根据id进行删除。

#### 7.2 分析图 ####

![276e8e2aa1e74594875e39665112d47b.bmp][]

#### 7.3 代码实现\_获取选中条目id ####

//给删除选中按钮添加单击事件
 document.getElementById("delSelected").onclick = function(){
 if(confirm("您确定要删除选中条目吗？")){
 
 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();
 }
 
 }

#### 7.4 代码实现\_删除选中服务器代码编写 ####

//1.获取所有id
            String[] ids = request.getParameterValues("uid");
            //2.调用service删除
            UserService service = new UserServiceImpl();
            service.delSelectedUser(ids);
    
            //3.跳转查询所有Servlet
            response.sendRedirect(request.getContextPath()+"/userListServlet");

#### 7.5 细节处理 ####

判断前台页面传到后台的数据是否为空。避免出现空指针异常。

### 8.分页查询功能 ###

#### 8.1 知识概述 ####

前台页面需要把当前页与每页显示条数传入后台。

#### 8.2 分析图 ####

![a18792c6138447dab3fc4e6b0dfdcbb1.bmp][]

![c70898c5ce8349329683d765840abb9b.bmp][]

#### 8.3 代码实现\_分析具体步骤 ####

//1.获取参数
 String currentPage = request.getParameter("currentPage");//当前页码
 String rows = request.getParameter("rows");//每页显示条数
 
 if(currentPage == null || "".equals(currentPage)){
 
 currentPage = "1";
 }
 
 
 if(rows == null || "".equals(rows)){
 rows = "5";
 }
 
 //获取条件查询参数
 Map<String, String[]> condition = request.getParameterMap();
 
 
 //2.调用service查询
 UserService service = new UserServiceImpl();
 PageBean<User> pb = service.findUserByPage(currentPage,rows,condition);
 
 System.out.println(pb);
 
 //3.将PageBean存入request
 request.setAttribute("pb",pb);
 request.setAttribute("condition",condition);//将查询条件存入request
 //4.转发到list.jsp
 request.getRequestDispatcher("/list.jsp").forward(request,response);
 }

#### 8.4 代码实现\_后台代码实现 ####

#### 8.5 代码实现\_前台代码实现 ####

<nav aria-label="Page navigation">
 <ul class="pagination">
 <c:if test="${pb.currentPage == 1}">
 <li class="disabled">
 </c:if>
 
 <c:if test="${pb.currentPage != 1}">
 <li>
 </c:if>
 
 
 <a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage - 1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Previous">
 «
 </a>
 </li>
 
 
 <c:forEach begin="1" end="${pb.totalPage}" var="i" >
 
 
 <c:if test="${pb.currentPage == i}">
 <li class="active"><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${i}</a></li>
 </c:if>
 <c:if test="${pb.currentPage != i}">
 <li><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${i}</a></li>
 </c:if>
 
 </c:forEach>
 
 
 <li>
 <a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage + 1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Next">
 »
 </a>
 </li>
 
 共${pb.totalCount}条记录，共${pb.totalPage}页

### 9.复杂条件查询功能 ###

#### 9.1 知识概述 ####

把查询条件发送到后台，后台根据条件进行查询

#### 9.2 分析图 ####

![1321723a04ea4fed9ac4b36980ed4332.bmp][]

#### 9.3 代码实现1\_总记录数统计 ####

//获取条件查询参数
 Map<String, String[]> condition = request.getParameterMap();
 
 
 //2.调用service查询
 UserService service = new UserServiceImpl();
 PageBean<User> pb = service.findUserByPage(currentPage,rows,condition);
 //1.定义模板初始化sql
 String sql = "select count(*) from user where 1 = 1 ";
 StringBuilder sb = new StringBuilder(sql);
 //2.遍历map
 Set<String> keySet = condition.keySet();
 //定义参数的集合
 List<Object> params = new ArrayList<Object>();
 for (String key : keySet) {
 
 //排除分页条件参数
 if("currentPage".equals(key) || "rows".equals(key)){
 continue;
 }
 
 //获取value
 String value = condition.get(key)[0];
 //判断value是否有值
 if(value != null && !"".equals(value)){
 //有值
 sb.append(" and "+key+" like ? ");
 params.add("%"+value+"%");//？条件的值
 }
 }
 System.out.println(sb.toString());
 System.out.println(params);
 
 return template.queryForObject(sb.toString(),Integer.class,params.toArray());

#### 9.4 代码实现2\_每页数据条件查询 ####

String sql = "select * from user where 1 = 1 ";
 
 StringBuilder sb = new StringBuilder(sql);
 //2.遍历map
 Set<String> keySet = condition.keySet();
 //定义参数的集合
 List<Object> params = new ArrayList<Object>();
 for (String key : keySet) {
 
 //排除分页条件参数
 if("currentPage".equals(key) || "rows".equals(key)){
 continue;
 }
 
 //获取value
 String value = condition.get(key)[0];
 //判断value是否有值
 if(value != null && !"".equals(value)){
 //有值
 sb.append(" and "+key+" like ? ");
 params.add("%"+value+"%");//？条件的值
 }
 }
 
 //添加分页查询
 sb.append(" limit ?,? ");
 //添加分页查询参数值
 params.add(start);
 params.add(rows);
 sql = sb.toString();
 System.out.println(sql);
 System.out.println(params);
 
 return template.query(sql,new BeanPropertyRowMapper<User>(User.class),params.toArray());

[bfffea5d46954870a2754dcc232b4379.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/b45f8f0b58e84217a0a89824b126a4df.png
[34b96ccf75a148aa9673dfebac3a2bec.bmp]: https://img-blog.csdnimg.cn/34b96ccf75a148aa9673dfebac3a2bec.bmp
[496f54ddaf6746e29b82119b7f62cd86.bmp]: https://img-blog.csdnimg.cn/496f54ddaf6746e29b82119b7f62cd86.bmp
[703e96abe45a4af9b858115cbd064189.bmp]: https://img-blog.csdnimg.cn/703e96abe45a4af9b858115cbd064189.bmp
[276e8e2aa1e74594875e39665112d47b.bmp]: https://img-blog.csdnimg.cn/276e8e2aa1e74594875e39665112d47b.bmp
[a18792c6138447dab3fc4e6b0dfdcbb1.bmp]: https://img-blog.csdnimg.cn/a18792c6138447dab3fc4e6b0dfdcbb1.bmp
[c70898c5ce8349329683d765840abb9b.bmp]: https://img-blog.csdnimg.cn/c70898c5ce8349329683d765840abb9b.bmp
[1321723a04ea4fed9ac4b36980ed4332.bmp]: https://img-blog.csdnimg.cn/1321723a04ea4fed9ac4b36980ed4332.bmp