[分页查询]SpringBoot整合PageHelper分页插件实现简单的分页查询(含前端及后端代码)

电玩女神 2021-12-15 20:55 494阅读 0赞

### SpringBoot整合PageHelper分页插件实现简单的分页查询(含前端及后端) ###

使用技术

整体思路

后端部分

前端部分

结果展示

### 使用技术 ###

IDE:idea  
框架:springboot/mybatis  
分页插件:PageHelper  
视图层:JSP/jstl  
架构:MVC

### 整体思路 ###

1 前端页面发送请求,携带请求参数:跳转页码和每页显示的条目数  
2 Controller接收请求调用service层  
3 service层调用Mapper层查询获得集合列表,将集合列表封装在PageResult对象中  
4 Controller层将PageResult对象存放在Model中返回给相应的页面  
5 页面取出PageResult对象中的数据展示在页面上

### 后端部分 ###

首先创建一个springboot项目,添加分页插件依赖:

<dependency>
    			<groupId>com.github.pagehelper</groupId>
    			<artifactId>pagehelper-spring-boot-starter</artifactId>
    			<version>1.1.1</version>
    		</dependency>

在application.properties中配置分页插件(这部分配置可以省略):

#pagehelper分页插件配置
    pagehelper.helperDialect=mysql
    pagehelper.reasonable=true
    pagehelper.supportMethodsArguments=true
    pagehelper.params=count=countSql

创建PageResult的javaBean封装分页查询结果:

public class PageResult<T> implements Serializable{ 
    	
    
    	private List<T> rows;	//每页的数据
    	private Long total;		//总共有多少记录数
    	private Integer currentPage;	//当前页数(从1开始)
    	private Integer pages;		//总共页数
    
    	public Integer getPages() { 
    		return pages;
    	}
    
    	public void setPages(Integer pages) { 
    		this.pages = pages;
    	}
    
    	public Integer getCurrentPage() { 
    		return currentPage;
    	}
    
    	public void setCurrentPage(Integer currentPage) { 
    		this.currentPage = currentPage;
    	}
    
    	public List<T> getRows() { 
    		return rows;
    	}
    	public void setRows(List<T> rows) { 
    		this.rows = rows;
    	}
    	public Long getTotal() { 
    		return total;
    	}
    	public void setTotal(Long total) { 
    		this.total = total;
    	}
    	
    	
    }

查询集合的mapper层:

@Mapper
    public interface CustomerMapper { 
        @Select("select * from customer")
        List<Customer> selAllCusomer();
    }

业务层,实现分页查询和对查询结果做封装

@Service
    public class CustomerServiceImpl implements CustomerService { 
    
        @SuppressWarnings("SpringJavaInjectionPointsAutowiringInspection")
        @Autowired
        CustomerMapper customerMapper;
    
        //执行分页查询
        @Override
        public PageResult<Customer> selAllCustomer(Integer page, Integer rows) { 
            Page ps = PageHelper.startPage(page, rows);
    
            List<Customer> list = customerMapper.selAllCusomer();
            System.out.println(list);
            PageResult<Customer> result = new PageResult<Customer>();
            result.setRows(list);
            result.setTotal(ps.getTotal());
            result.setPages(ps.getPages());
            result.setCurrentPage(page);
            return result;
        }
    }

连接业务层和视图层的Controller

@Controller
    public class CustomerController { 
        @Autowired
        CustomerService customerService;
    
        @RequestMapping("/showAllCustomer")
        public String itemList(@RequestParam(defaultValue="1")Integer page,
                                             @RequestParam(defaultValue="10")Integer rows, Model model){ 
            System.out.println("CustomerController.itemList");
            PageResult<Customer> pageResult = customerService.selAllCustomer(page, rows);
            model.addAttribute("page", pageResult);
            return "CSInf";
        }
    }

### 前端部分 ###

页面主要分为两个部分

1 将分页查询的每页内容展示出来  
2 在最下方增加分页查询的页码

<%@ 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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
        <meta http-equiv="Content-Language" content="zh-cn">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="description" content="顾客信息表">
        <title>所有顾客信息表</title>
        <LINK href="../../css/main.css" rel=stylesheet>
        <link rel="stylesheet" type="text/css" href="../../css/test3.css">
        <script language="JavaScript" src="../../js/main.js"></script>
        <script src="../../js/jquery-1.12.3.min.js"></script>
    
    </head>
    <body onLoad="MM_preloadImages('images/index_on.gif','images/reg_on.gif','images/order_on.gif','../images/top/topxmas/jp_on.gif','../images/top/topxmas/download_on.gif','../images/top/topxmas/bbs_on.gif','../images/top/topxmas/designwz_on.gif')" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
    <div class="">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <table width="100" border="0" cellspacing="0" cellpadding="0" align="center">
                </table>
                </td>
            </tr>
        </table>
        <table cellspacing="1" cellpadding="3" align="center" border="0" width="98%">
        </table>
        
        <br>
        <br>
        <table cellspacing=1 cellpadding=3 align=center class=tableBorder2>
            <tr>
                <td height=25 valign=middle bgcolor="#E4F3FF" align="center">
                    <a href="AFirstLog">返回首页</a>
                </td>
                <td height=25 valign=middle bgcolor="#E4F3FF" align="center">
                    <b>顾客信息如下！</b>
                </td>
            </tr>
        </table>
        <br>
        <form method="post" name="reg" action="OutStock.jsp">
            <table cellpadding="3" cellspacing="1" align="center" class="tableborder3" id="table1">
                <tr>
                    <td valign="middle" colspan="2" align="center" height="25" color="#9999FF">
                        <font><b></b></font></td>
                </tr>
                <tr>
                    <td width="10%" class="tablebody1" align="center"><b>客户编号</b>
                    </td>
                    <td width="10%" class="tablebody1" align="center"><b>用户名</b><br>
                    </td>
                    <td width="10%" class="tablebody1" align="center"><b>密码</b>
                    </td>
                    <td width="10%" class="tablebody1" align="center"><b>姓名 </b>
                    </td>
                    <td width="10%" class="tablebody1" align="center"><b>性别 </b>
                    </td>
                    <td width="10%" class="tablebody1" align="center"><b>年龄</b>
                    </td>
                    <td width="10%" class="tablebody1" align="center"><b>联系方式</b>
                    </td>
                    <td width="10%" class="tablebody1" align="center"><b>Email地址</b>
                    </td>
                    <td width="10%" class="tablebody1" align="center"><b>联系地址</b>
                    </td>
                    <td width="10%" class="tablebody1" align="center"><b>信息修改</b>
                    </td>
                </tr>
    
                <c:forEach items="${page.rows}" var="customer" begin="0" varStatus="stusts">
                    <tr>
                        <td width="10%" class="tablebody1" align="center">${customer.id}
                        </td>
                        <td width="10%" class="tablebody1" align="center">${customer.account}
                        </td>
                        <td width="10%" class="tablebody1" align="center">${customer.password}
                        </td>
                        <td width="10%" class="tablebody1" align="center">${customer.name}
                        </td>
                        <td width="10%" class="tablebody1" align="center">${customer.sex}
                        </td>
                        <td width="10%" class="tablebody1" align="center">${customer.age}
                        </td>
                        <td width="10%" class="tablebody1" align="center">${customer.phone}
                        </td>
                        <td width="10%" class="tablebody1" align="center">${customer.email}
                        </td>
                        <td width="10%" class="tablebody1" align="center">${customer.address}
                        </td>
                        <td width="15%" class="tablebody1" align="center">
                            <a href="ACInf?account=${customer.account}">修改</a>
                        </td>
                    </tr>
                </c:forEach>
            </table>
    
        </form>
    
        <div style="text-align: center;font-size: 15px;" id="p">
            <a href="/showAllCustomer?page=1">首页</a>
            <c:choose>
                <c:when test="${page.currentPage > 1 }">
                    <a href="/showAllCustomer?page=${page.currentPage-1 }">上一页</a>
                </c:when>
                <c:otherwise>
                    <a href="#">上一页</a>
                </c:otherwise>
            </c:choose>
            <c:forEach var="p" begin="1" end="${page.pages }">
                <c:choose>
                    <c:when test="${page.currentPage==p}">
                        <a href="/showAllCustomer?page=${p}" style="text-decoration: underline">${p}</a>
                    </c:when>
                    <c:otherwise>
                        <a href="/showAllCustomer?page=${p}">${p}</a>
                    </c:otherwise>
                </c:choose>
            </c:forEach>
            <c:choose>
                <c:when test="${page.currentPage < page.total }">
                    <a href="/showAllCustomer?page=${page.currentPage+1 }">下一页</a>
                </c:when>
                <c:otherwise>
                    <a href="#">下一页</a>
                </c:otherwise>
            </c:choose>
            <a href="/showAllCustomer?page=${page.pages}">末页</a>
        </div>
    
    </body>
    </html>

### 结果展示 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTUxOTk0NDM_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTUxOTk0NDM_size_16_color_FFFFFF_t_70]: /images/20211215/4c9492efc7814643b42b8dfbe976295f.png