JavaWeb-综合案例(用户信息)-学习笔记05【分页查询功能】

ゝ一世哀愁。 2022-10-30 01:22 191阅读 0赞

>  *  **[Java后端 学习路线 笔记汇总表【黑马程序员】][Java_ _]**
> 
> 1.  [JavaWeb-综合案例(用户信息)-学习笔记01【列表查询】][JavaWeb-_-_01]
> 2.  [JavaWeb-综合案例(用户信息)-学习笔记02【登录功能】][JavaWeb-_-_02]
> 3.  [JavaWeb-综合案例(用户信息)-学习笔记03【添加删除修改功能】][JavaWeb-_-_03]
> 4.  [JavaWeb-综合案例(用户信息)-学习笔记04【删除选中功能】][JavaWeb-_-_04]
> 5.  [JavaWeb-综合案例(用户信息)-学习笔记05【分页查询功能】][JavaWeb-_-_05]
> 6.  [JavaWeb-综合案例(用户信息)-学习笔记06【复杂条件查询功能】][JavaWeb-_-_06]

**目录**

第4节 分页查询功能

分页查询功能\_分析

Bootstrap官网 分页禁用和激活状态

分页查询功能——分析图

分页查询功能\_代码实现\_具体分析

PageBean.java

分页查询功能——具体分析图

分页查询功能\_代码实现\_后台代码

FindUserByPageServlet.java

UserService.java

UserServiceImpl.java

UserDaoImpl.java

分页查询 实现效果

分页查询功能\_代码实现\_前台代码

list.jsp

--------------------

# 第4节 分页查询功能 #

## 分页查询功能\_分析 ##

> 分页查询的好处：
> 
> 1.  减轻服务器内存的开销；
> 2.  提升用户体验。

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][]

### Bootstrap官网 分页禁用和激活状态 ###

> ![20210216180958664.png][]

### 分页查询功能——分析图 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1][] 分页查询功能

## 分页查询功能\_代码实现\_具体分析 ##

### PageBean.java ###

> ![20210216181946671.png][]

package cn.itcast.domain;
    
    import java.util.List;
    
    /**
     * 分页对象
     */
    public class PageBean<T> {
        private int totalCount; //总记录数
        private int totalPage; //总页码
        private List<T> list; //每页的数据
        private int currentPage; //当前页码
        private int rows; //每页显示的记录数
    
        public int getTotalCount() {
            return totalCount;
        }
    
        public void setTotalCount(int totalCount) {
            this.totalCount = totalCount;
        }
    
        public int getTotalPage() {
            return totalPage;
        }
    
        public void setTotalPage(int totalPage) {
            this.totalPage = totalPage;
        }
    
        public List<T> getList() {
            return list;
        }
    
        public void setList(List<T> list) {
            this.list = list;
        }
    
        public int getCurrentPage() {
            return currentPage;
        }
    
        public void setCurrentPage(int currentPage) {
            this.currentPage = currentPage;
        }
    
        public int getRows() {
            return rows;
        }
    
        public void setRows(int rows) {
            this.rows = rows;
        }
    
        @Override
        public String toString() {
            return "PageBean{" +
                    "totalCount=" + totalCount +
                    ", totalPage=" + totalPage +
                    ", list=" + list +
                    ", currentPage=" + currentPage +
                    ", rows=" + rows +
                    '}';
        }
    }

### 分页查询功能——具体分析图 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2][] 分页查询功能

## 分页查询功能\_代码实现\_后台代码 ##

### FindUserByPageServlet.java ###

package cn.itcast.web.servlet;
    
    import cn.itcast.domain.PageBean;
    import cn.itcast.domain.User;
    import cn.itcast.service.UserService;
    import cn.itcast.service.impl.UserServiceImpl;
    
    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.util.Map;
    
    @WebServlet("/findUserByPageServlet")
    public class FindUserByPageServlet extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            request.setCharacterEncoding("utf-8");
            //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);
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doPost(request, response);
        }
    }

### UserService.java ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3][]

### UserServiceImpl.java ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4][]

### UserDaoImpl.java ###

package cn.itcast.dao.impl;
    
    import cn.itcast.dao.UserDao;
    import cn.itcast.domain.User;
    import cn.itcast.util.JDBCUtils;
    import org.springframework.jdbc.core.BeanPropertyRowMapper;
    import org.springframework.jdbc.core.JdbcTemplate;
    
    import java.util.ArrayList;
    import java.util.List;
    import java.util.Map;
    import java.util.Set;
    
    public class UserDaoImpl implements UserDao {
    
        private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
    
        @Override
        public List<User> findAll() {
            //使用JDBC操作数据库...
            //1.定义sql
            String sql = "select * from user";
            List<User> users = template.query(sql, new BeanPropertyRowMapper<User>(User.class));
            return users;
        }
    
        @Override
        public User findUserByUsernameAndPassword(String username, String password) {
            try {
                String sql = "select * from user where username = ? and password = ?";
                User user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), username, password);
                return user;
            } catch (Exception e) {
                e.printStackTrace();
                return null;
            }
        }
    
        @Override
        public void add(User user) {
            //1.定义sql
            String sql = "insert into user values(null,?,?,?,?,?,?,null,null)";
            //2.执行sql
            template.update(sql, user.getName(), user.getGender(), user.getAge(), user.getAddress(), user.getQq(), user.getEmail());
        }
    
        @Override
        public void delete(int id) {
            //1.定义sql
            String sql = "delete from user where id = ?";
            //2.执行sql
            template.update(sql, id);
        }
    
        @Override
        public User findById(int id) {
            String sql = "select * from user where id = ?";
            return template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), id);
        }
    
        @Override
        public void update(User user) {
            String sql = "update user set name = ?,gender = ? ,age = ? , address = ? , qq = ?, email = ? where id = ?";
            template.update(sql, user.getName(), user.getGender(), user.getAge(), user.getAddress(), user.getQq(), user.getEmail(), user.getId());
        }
    
        @Override
        public int findTotalCount(Map<String, String[]> 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());
        }
    
        @Override
        public List<User> findByPage(int start, int rows, Map<String, String[]> condition) {
            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());
        }
    }

### 分页查询 实现效果 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6][]

## 分页查询功能\_代码实现\_前台代码 ##

> ![20210216184744684.png][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8][]
> 
> ![20210216191901117.png][]

### list.jsp ###

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@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>
            function deleteUser(id) {
                //用户安全提示
                if (confirm("您确定要删除吗？")) {
                    //访问路径
                    location.href = "${pageContext.request.contextPath}/delUserServlet?id=" + id;
                }
            }
            window.onload = function () {
                //给删除选中按钮添加单击事件
                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();
                        }
                    }
                }
                //1.获取第一个cb
                document.getElementById("firstCb").onclick = function () {
                    //2.获取下边列表中所有的cb
                    var cbs = document.getElementsByName("uid");
                    //3.遍历
                    for (var i = 0; i < cbs.length; i++) {
                        //4.设置这些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" action="${pageContext.request.contextPath}/findUserByPageServlet" method="post">
                <div class="form-group">
                    <label for="exampleInputName2">姓名</label>
                    <input type="text" name="name" value="${condition.name[0]}" class="form-control" id="exampleInputName2">
                </div>
                <div class="form-group">
                    <label for="exampleInputName3">籍贯</label>
                    <input type="text" name="address" value="${condition.address[0]}" class="form-control"
                           id="exampleInputName3">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail2">邮箱</label>
                    <input type="text" name="email" value="${condition.email[0]}" 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="delSelected">删除选中</a>
        </div>
        <form id="form" action="${pageContext.request.contextPath}/delSelectedServlet" 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="${pb.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}/findUserServlet?id=${user.id}">修改</a> 
                            <a class="btn btn-default btn-sm" href="javascript:deleteUser(${user.id});">删除</a>
                        </td>
                    </tr>
                </c:forEach>
            </table>
        </form>
        <div>
            <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">
                            <span aria-hidden="true">«</span>
                        </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">
                            <span aria-hidden="true">»</span>
                        </a>
                    </li>
                    <span style="font-size: 25px;margin-left: 5px;">
                        共${pb.totalCount}条记录，共${pb.totalPage}页
                    </span>
                </ul>
            </nav>
        </div>
    </div>
    </body>
    </html>

> 加油~

[Java_ _]: https://blog.csdn.net/weixin_44949135/article/details/113773297
[JavaWeb-_-_01]: https://blog.csdn.net/weixin_44949135/article/details/113823440
[JavaWeb-_-_02]: https://blog.csdn.net/weixin_44949135/article/details/113822709
[JavaWeb-_-_03]: https://blog.csdn.net/weixin_44949135/article/details/113824663
[JavaWeb-_-_04]: https://blog.csdn.net/weixin_44949135/article/details/113826067
[JavaWeb-_-_05]: https://blog.csdn.net/weixin_44949135/article/details/113826657
[JavaWeb-_-_06]: https://blog.csdn.net/weixin_44949135/article/details/113827460
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: /images/20221024/034ba1b7780a47348562087543049de0.png
[20210216180958664.png]: /images/20221024/28c053eeb3854eb4989755e45f84ca6f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/95dd0c4ba394408ba812e7e753fa4f9a.png
[20210216181946671.png]: /images/20221024/3ebd90fb49d94fc790b090e901952727.png?
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2]: /images/20221024/f74f0ad20d964a62a44ed18b86e9a7f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3]: /images/20221024/d9496631a3a14de9b4e6562cdf0f690a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4]: /images/20221024/a19a679df86d4d878bba58e092cc8f09.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5]: /images/20221024/4f80dd861bcd4a5aa839aa31867f1344.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6]: /images/20221024/dbeafdd51be04da2bb56610398adf727.png
[20210216184744684.png]: /images/20221024/f227889b692a4218a495a8adb8e61690.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7]: /images/20221024/b657f4977dbb44e3b617e16404f341e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8]: /images/20221024/5443554a99d44da0ab4b843d4a2b5327.png
[20210216191901117.png]: /images/20221024/40adb84c4e554536a0e5423fe8013a5e.png