好好编程-物流项目12【用户管理-分页实现】

简介: 通过前面的介绍我们实现了用户信息的CRUD操作,接下来我们介绍了用户信息的分页查询。

通过前面的介绍我们实现了用户信息的CRUD操作,接下来我们介绍了用户信息的分页查询。


用户信息分页


 我们知道分页目的是分批次的响应用户的请求。分页有前端页面的分页栏后后端的分页获取数据源中的数据两部分组成。


1.分页数据准备


1.1多准备点案例数据


20190321221849818.png


1.2BasePage类


 便于封装分页数据

20190321222044126.png

package com.bobo.dto;
/**
 * 封装分页的基本信息
 * 
 * @author 波波烤鸭
 *
 *         dengpbs@163.com
 */
public class BasePage {
  // 当前页
  protected int pageNum = 1;
  // 每页显示的条数
  protected int pageSize = 5;
  public int getPageNum() {
    return pageNum;
  }
  public void setPageNum(int pageNum) {
    this.pageNum = pageNum;
  }
  public int getPageSize() {
    return pageSize;
  }
  public void setPageSize(int pageSize) {
    this.pageSize = pageSize;
  }
}


UserDto需要基础BasePage类


20190321222139771.png

2.前端分页栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 <div>
        共有${pageModel.total }条记录,共${pageModel.pages }页,每页
      <select name="pageSize" onchange="changePageSize(this.value)" style="width: 50px;">
          <option value="10" ${pageModel.pageSize==10?"selected":"" }>10</option>
          <option value="20"  ${pageModel.pageSize==20?"selected":"" }>20</option>
          <option value="50"  ${pageModel.pageSize==50?"selected":"" }>50</option>
          <option value="100"   ${pageModel.pageSize==100?"selected":"" }>100</option>
      </select>  
        条记录,当前${pageModel.pageNum }/${pageModel.pages }页,
    <a href="javascript:homePage()">首页</a>|
    <a href="javascript:frontPage()">上一页</a>|
    <a href="javascript:nextPage()">下一页</a>|
    <a href="javascript:lastPage()">尾页</a>|
    转到<select name="pageNum" onchange="goPage(this.value)" style="width: 50px;">
       <c:forEach begin="1" end="${pageModel.pages }" var="i">
          <option value=${i }  ${pageModel.pageNum==i?"selected":"" }>${i }</option>
       </c:forEach>
    </select>
   </div>
    <script type="text/javascript">
       function homePage(){
         document.getElementById("pageNum").value=1;
         document.getElementById("pager").submit();//表单提交
       }
       function frontPage(){
         document.getElementById("pageNum").value=${pageModel.pageNum<=1? 1 : pageModel.pageNum-1 };
         document.getElementById("pager").submit();//表单提交
       }
       function nextPage(){
         document.getElementById("pageNum").value=${pageModel.pageNum>=pageModel.pages?pageModel.pages:pageModel.pageNum+1 };
         document.getElementById("pager").submit();//表单提交
       }
       function lastPage(){
         document.getElementById("pageNum").value=${pageModel.pages };
         document.getElementById("pager").submit();//表单提交
       }
       function goPage(cur_page){
         document.getElementById("pageNum").value=cur_page;
         document.getElementById("pager").submit();//表单提交
       }
       function changePageSize(cur_pageSize){
         document.getElementById("pageSize").value=cur_pageSize;
         document.getElementById("pager").submit();//表单提交
       }
    </script>

20190321222347467.png


用户页面引入

<div class="inline pull-right page" style="margin-top: 20px;">
  <form action="/user/queryPage" id="pager">
    <input type="hidden" name="pageSize" id="pageSize" value="${pageModel.pageSize }">
    <input type="hidden" name="pageNum" id="pageNum" value="${pageModel.pageNum }">
  </form>
  <jsp:include page="/pageBar.jsp"></jsp:include>
</div>

201903212247033.png20190321223235615.png




3.后端请求实现


 后端分页我们通过mybatis的分页插件PageHelper来实现,我们需要在mybats的配置文件中添加分页拦截器:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration
    PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
    "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
  <plugins>
    <!-- com.github.pagehelper为PageHelper类所在包名 -->
    <plugin interceptor="com.github.pagehelper.PageHelper">
      <property name="dialect" value="mysql" />
      <!-- 该参数默认为false -->
      <!-- 设置为true时,会将RowBounds第一个参数offset当成pageNum页码使用 -->
      <!-- 和startPage中的pageNum效果一样 -->
      <property name="offsetAsPageNum" value="true" />
      <!-- 该参数默认为false -->
      <!-- 设置为true时,使用RowBounds分页会进行count查询 -->
      <property name="rowBoundsWithCount" value="true" />
      <!-- 设置为true时,如果pageSize=0或者RowBounds.limit = 0就会查询出全部的结果 -->
      <!-- (相当于没有执行分页查询,但是返回结果仍然是Page类型) -->
      <property name="pageSizeZero" value="true" />
      <!-- 3.3.0版本可用 - 分页参数合理化,默认false禁用 -->
      <!-- 启用合理化时,如果pageNum<1会查询第一页,如果pageNum>pages会查询最后一页 -->
      <!-- 禁用合理化时,如果pageNum<1或pageNum>pages会返回空数据 -->
      <property name="reasonable" value="false" />
      <!-- 3.5.0版本可用 - 为了支持startPage(Object params)方法 -->
      <!-- 增加了一个`params`参数来配置参数映射,用于从Map或ServletRequest中取值 -->
      <!-- 可以配置pageNum,pageSize,count,pageSizeZero,reasonable,不配置映射的用默认值 -->
      <!-- 不理解该含义的前提下,不要随便复制该配置 -->
      <property name="params" value="pageNum=start;pageSize=limit;" />
      <!-- always总是返回PageInfo类型,check检查返回类型是否为PageInfo,none返回Page -->
      <property name="returnPageInfo" value="check" />
    </plugin>
  </plugins>
</configuration>


3.1控制器


修改请求地址

2019032122354595.png

@RequestMapping("/queryPage")
public String queryPage(UserDto dto,Model model){
  PageInfo<User> pageModel = userService.queryPage(dto);
  model.addAttribute("pageModel", pageModel);
  return "user/user";
}


3.2service层实现

/**
 * 分页带条件查询用户信息
 * @param dto
 * @return
 */
public PageInfo<User> queryPage(UserDto dto);
@Override
public PageInfo<User> queryPage(UserDto dto) {
  PageHelper.startPage(dto.getPageNum(), dto.getPageSize());
  List<User> list = this.query(dto.getUser());
  PageInfo<User> pageInfo = new PageInfo<User>(list);
  return pageInfo;
}


PageInfo类:

201903212248370.png


4.测试


注意修改user.jsp中获取数据的方式

20190321224939500.png


启动服务,访问

20190321225038539.png

相关文章
预约抢单互助系统开发详细功能/需求方案/步骤功能/逻辑项目/源码案例
The development model of appointment and order grabbing mutual assistance system is a widely used development model on mutual assistance service platforms. It adopts a combination of appointment and order grabbing modes, allowing users to make appointments or actively participate in mutual assistanc
|
7月前
|
小程序 JavaScript Java
宿舍|学生宿舍管理小程序|基于微信小程序的学生宿舍管理系统设计与实现(源码+数据库+文档)
宿舍|学生宿舍管理小程序|基于微信小程序的学生宿舍管理系统设计与实现(源码+数据库+文档)
109 0
|
7月前
|
小程序 Java 数据库
校园失物招领|基于微信小程序校园失物招领的系统设计与实现(源码+数据库+文档)
校园失物招领|基于微信小程序校园失物招领的系统设计与实现(源码+数据库+文档)
129 0
|
7月前
|
新零售 搜索推荐
三三复制公排滑落商城系统开发|详情方案
不能向客户提供高品质的购物体验,不能让顾客感受商品和服务,不能降低物流成本
|
7月前
|
安全 BI 定位技术
同城校园外卖跑腿系统开发规则详细/需求步骤/案例设计/功能逻辑/源码版
同城校园外卖跑腿系统是为满足校园内用户对食品和商品的快速配送需求而设计的一种服务平台。
|
小程序 前端开发 API
🍁商城类小程序实战(一):需求分析及开发前准备
🍁商城类小程序实战(一):需求分析及开发前准备
1415 2
🍁商城类小程序实战(一):需求分析及开发前准备
上门按摩预约系统开发方案项目/案例详细/需求逻辑/流程设计/源码功能
Implement a user authentication mechanism to ensure the authenticity and security of user identities.
|
存储 安全 前端开发
预约上门按摩项目系统开发详细流程/案例介绍/功能逻辑/需求方案/源码模式
确定系统的目标用户,例如个人用户或企业用户。 - 确定系统的核心功能,如用户注册和登录、服务列表和预约管理、支付和评价反馈等。 - 确定技术平台和开发语言,如Web应用还是移动应用,以及开发语言和框架的选择。 - 制定项目计划,并确定开发阶段和时间安排。
|
前端开发
前端代码简洁之路,后台系统之详情页设计
前端业务开发中,为了脱离舒适区,也为了解放重复功能开发的劳动力,会将一些功能进行改造,本期改造千篇一律的详情页。
3999 26
前端代码简洁之路,后台系统之详情页设计
|
消息中间件 安全 JavaScript
真刑啊!几行代码端了整个教务系统
真刑啊!几行代码端了整个教务系统