JavaWeb学习-案例练习-图书管理后台- 9 -分 页操作
- 经验分享
- 时间:2019-07-05 22:49
- 2488人已阅读
🔔🔔好消息!好消息!🔔🔔
如果您需要注册ChatGPT,想要升级ChatGPT4。凯哥可以代注册ChatGPT账号,代升级ChatGPT4
有需要的朋友👉:微信号
前面一篇完成了多条件的查询,这篇开始学习分页,很多网页是默认显示20条数据,想看更多数据,就通过点击下一页的方式实现。这篇就来模拟这个分页实现过程。
1. 项目环境准备
之前我们实现的都是图书管理后台功能,现在分页,我们在前端页面,所以我把素材中product_list.jsp和ad文件夹拷贝到Eclipse中的WebContent的目录下。product_list.jsp就是我们要实现分页的前端页面。
上图是项目工程结构,全部代码放在了github上。
https://github.com/Anthonyliu86/BookManagement_JavawebDemo
2. 分页思路分析
当前product_list的效果是这样,布局是采用表格布局,一行显示四本书,也就是一个tr里面有4个td。
为了我们简单,这里我们只用一行,每行显示4本书,想看第五本书,必须点击下一页菜单。所以,我们在product_list.jsp中这个表格,只留下一个tr,第一行也只留下一个td,也就是一本书,最后效果是这样的
下图是所有层交互的思路。
3. 分页代码实现过程
在点击下一页之后,这个动作需要跳转到一个servlet,我们先来创建这个servlet,叫pageServlet。
3.1 创建一个PageServlet.java
当前这个servlet代码是空,这个文件主要写设置每页显示个数,和当前页id获取,然后返回一个页面对象。所以,我们先创建一个关于页面的Bean类。
3.2 创建PageBean.java
在domian包下创建一个PageBean.java文件,写入下面代码。
import java.util.List; public class PageBean { private int pageSize; private int currentPage; private int count; private int totalPage; private List<Book> books; public int getPageSize() { return pageSize; } public void setPageSize(int pageSize) { this.pageSize = pageSize; } public int getCurrentPage() { return currentPage; } public void setCurrentPage(int currentPage) { this.currentPage = currentPage; } public int getCount() { return count; } public void setCount(int count) { this.count = count; }
3.3 Dao层代码
在BookDao这个接口中新增两个方法,一个是求总记录数,第二个是查找分页数据
/** * 得到总记录数 * @return * @throws SQLException */ public int count() throws SQLException; /** * 查找分页数据 * @param currentPage * @param pageSize * @return * @throws SQLException */ public List<Book> findBooks(int currentPage, int pageSize)throws SQLException;
然后在BookDaoImpl.java添加这两个方法的具体实现代码。
public int count() throws SQLException { QueryRunner qr = new QueryRunner(C3P0Utils.getDataSource()); long l = (Long)qr.query("select count(*) from book", new ScalarHandler(1)); return (int)l; } public List<Book> findBooks(int currentPage, int pageSize) throws SQLException { QueryRunner qr = new QueryRunner(C3P0Utils.getDataSource()); return qr.query("select * from book limit ?,?", new BeanListHandler<Book>(Book.class),(currentPage-1)*pageSize, pageSize); }
3.4 Service层
BookService接口添加根据currentPage和pageSize两个参数,得到PageBean的方法。
/** * 得到总记录数 * @return * @throws SQLException */ public int count() throws SQLException; /** * 查找分页数据 * @param currentPage * @param pageSize * @return * @throws SQLException */ public List<Book> findBooks(int currentPage, int pageSize)throws SQLException;
具体方法实现,添加到BookServiceImpl.java中
public PageBean findBooksPage(int currentPage, int pageSize) { try { int count = bd.count(); int totalPage = (int)Math.ceil(count*1.0/pageSize); List<Book> books = bd.findBooks(currentPage, pageSize); //封装成一个PageBean对象 PageBean pb = new PageBean(); pb.setBooks(books); pb.setCount(count); pb.setCurrentPage(currentPage); pb.setTotalPage(totalPage); pb.setPageSize(pageSize); return pb; } catch (SQLException e) { e.printStackTrace(); } return null; }
3.5 Servlet代码
回到PageServlet.java中,看看这个servlet如何写。
package com.anthony.web.servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.anthony.domain.PageBean; import com.anthony.service.BookService; import com.anthony.service.BookServiceImpl; public class PageServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //初始化每页显示记录数 int pageSize = 4; int currentPage = 1; //表示当前页 String currPage = request.getParameter("currentPage"); if(currPage != null) { //第一次访问页面currPage可能为null currentPage = Integer.parseInt(currPage); } //调用业务层方法 BookService bs = new BookServiceImpl(); //分页查询,并返回PageBean对象 PageBean pb = bs.findBooksPage(currentPage, pageSize); //请求跳转 request.setAttribute("pb", pb); request.getRequestDispatcher("/product_list.jsp").forward(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
3.6 Product_list.jsp修改
3.6.1 添加JSTL约束
在product_list.jsp顶部添加JSTL约束。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
3.6.2 解析PageBean对象到jsp中
<%@ page language="java" import="java.util.*" 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> <title>bookStore列表</title> <%--导入css --%> <link rel="stylesheet" href="css/main.css" type="text/css" /> </head> <body class="main"> <jsp:include page="head.jsp" /> <jsp:include page="menu_search.jsp" /> <div id="divpagecontent"> <table width="100%" border="0" cellspacing="0"> <tr> <td> <div style="text-align:right; margin:5px 10px 5px 0px"> <a href="index.jsp">首页</a> > 计算机 > 图书列表 </div> <table cellspacing="0" class="listcontent"> <tr> <td> <h1>商品目录</h1> <hr /> <h1>计算机</h1> 共100种商品 <hr /> <div style="margin-top:20px; margin-bottom:5px"> <img src="images/productlist.gif" width="100%" height="38" /> </div> <table cellspacing="0" class="booklist"> <tr> <c:forEach items="${pb.books}" var="b"> <td> <div class="divbookpic"> <p> <a href="#"><img src="" width="115" height="129" border="0" /> </a> </p> </div> <div class="divlisttitle"> <a href="#">书名:${b.name}<br />售价:${b.price} </a> </div></td> <td> </c:forEach> </table> <div class="pagination"> <ul> <li class="disablepage"><<上一页</li> <li>第1页/共5页</li> <li class="nextPage"><a href="#"><<下一页</a></li> </ul> </div></td> </tr> </table> </td> </tr> </table> </div> <jsp:include page="foot.jsp" /> </body> </html>
浏览器打开https://localhost:8080/BookManagement/pageServlet 效果是这样的
3.6.3 实现上一页和下一页功能
现在我们就差上一页和下一页这个功能没有实现。
下面代码主要看 上一页 和下一页中代码。
<%@ page language="java" import="java.util.*" 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> <title>bookStore列表</title> <%--导入css --%> <link rel="stylesheet" href="css/main.css" type="text/css" /> </head> <body class="main"> <jsp:include page="head.jsp" /> <jsp:include page="menu_search.jsp" /> <div id="divpagecontent"> <table width="100%" border="0" cellspacing="0"> <tr> <td> <div style="text-align:right; margin:5px 10px 5px 0px"> <a href="index.jsp">首页</a> > 计算机 > 图书列表 </div> <table cellspacing="0" class="listcontent"> <tr> <td> <h1>商品目录</h1> <hr /> <h1>计算机</h1> 共100种商品 <hr /> <div style="margin-top:20px; margin-bottom:5px"> <img src="images/productlist.gif" width="100%" height="38" /> </div> <table cellspacing="0" class="booklist"> <tr> <c:forEach items="${pb.books}" var="b"> <td> <div class="divbookpic"> <p> <a href="#"><img src="" width="115" height="129" border="0" /> </a> </p> </div> <div class="divlisttitle"> <a href="#">书名:${b.name}<br />售价:${b.price} </a> </div> </td> </c:forEach> </table> <div class="pagination"> <ul> <li class="disablepage"><a href="${pageContext.request.contextPath }/pageServlet?currentPage=${pb.currentPage-1}"><<上一页</a></li> <li>第${pb.currentPage}页/共${pb.totalPage}页</li> <li class="nextPage"><a href="${pageContext.request.contextPath }/pageServlet?currentPage=${pb.currentPage+1}"><<下一页</a></li> </ul> </div> </td> </tr> </table> </td> </tr> </table> </div> <jsp:include page="foot.jsp" /> </body> </html>
效果如下
当前还是有一个问题,上一页和下一页都可以一直点击下去,没有做边界处理。
3.6.4 上一页和下一页边界处理
因为需要对上一页和下一页的边界判断,例如上一页边界情况,如果当前currentPage等于1,那么就上一页不能再减1。同样,当前currentPage等于totalPage,那么不能加1. 这种if判断,我们可以用三元运算符来一行代码搞定。
如果currentPage=1, 前端点击上一页,永远传递currentPage=1, 如果currentPage=totalPage,那么传递就是currentPage=totalPage,也就是最后一页。
<div class="pagination"> <ul> <li class="disablepage"><a href="${pageContext.request.contextPath }/pageServlet?currentPage=${pb.currentPage==1? pb.currentPage:pb.currentPage-1}"><<上一页</a></li> <li>第${pb.currentPage}页/共${pb.totalPage}页</li> <li class="nextPage"><a href="${pageContext.request.contextPath }/pageServlet?currentPage=${pb.currentPage==pb.totalPage? pb.currentPage:pb.currentPage+1}"><<下一页</a></li> </ul> </div>
到这里,分页操作完成。
上一篇: JVM学习系列学习七