JavaWeb学习-案例练习-图书管理前台-9-分页功能实现

青旅半醒 2021-12-12 00:59 461阅读 0赞

前面一篇完成了多条件的查询，这篇开始学习分页，很多网页是默认显示20条数据，想看更多数据，就通过点击下一页的方式实现。这篇就来模拟这个分页实现过程。

**1.项目环境准备**

之前我们实现的都是图书管理后台功能，现在分页，我们在前端页面，所以我把素材中product\_list.jsp和ad文件夹拷贝到Eclipse中的WebContent的目录下。product\_list.jsp就是我们要实现分页的前端页面。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70][]

上图是项目工程结构，全部代码放在了github上。

[https://github.com/Anthonyliu86/BookManagement\_JavawebDemo][https_github.com_Anthonyliu86_BookManagement_JavawebDemo]

**2.分页思路分析**

当前product\_list的效果是这样，布局是采用表格布局，一行显示四本书，也就是一个tr里面有4个td。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 1][]

为了我们简单，这里我们只用一行，每行显示4本书，想看第五本书，必须点击下一页菜单。所以，我们在product\_list.jsp中这个表格，只留下一个tr，第一行也只留下一个td，也就是一本书，最后效果是这样的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 2][]

下图是所有层交互的思路。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 3][]

**3.分页代码实现过程**

在点击下一页之后，这个动作需要跳转到一个servlet，我们先来创建这个servlet，叫pageServlet。

**3.1创建一个PageServlet.java**

当前这个servlet代码是空，这个文件主要写设置每页显示个数，和当前页id获取，然后返回一个页面对象。所以，我们先创建一个关于页面的Bean类。

**3.2创建PageBean.java**

在domian包下创建一个PageBean.java文件，写入下面代码。

package com.anthony.domain;
    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;
    	}
    	public int getTotalPage() {
    		return totalPage;
    	}
    	public void setTotalPage(int totalPage) {
    		this.totalPage = totalPage;
    	}
    	public List<Book> getBooks() {
    		return books;
    	}
    	public void setBooks(List<Book> books) {
    		this.books = books;
    	}
    	
    	
    }

**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的方法

public PageBean findBooksPage(int currentPage, int pageSize);

具体方法实现，添加到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>

浏览器打开[http://localhost:8080/BookManagement/pageServlet][http_localhost_8080_BookManagement_pageServlet] 效果是这样的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 4][]

**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>

分页效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 5][]

**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>

到这来，分页功能全部实现。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70]: /images/20211211/3b34ad9cd62141f4a162e01d203f13bd.png
[https_github.com_Anthonyliu86_BookManagement_JavawebDemo]: https://github.com/Anthonyliu86/BookManagement_JavawebDemo
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 1]: /images/20211211/d5ae5cfc5bb64c1d9be2d75d4d142547.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 2]: /images/20211211/c07fa67548df4f7dbceb1eee34282654.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 3]: /images/20211211/316b04456e654f8f897789653fb2320e.png
[http_localhost_8080_BookManagement_pageServlet]: http://localhost:8080/BookManagement/pageServlet
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 4]: /images/20211211/0eb281b165f342cdb3d9136ef2e61539.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 5]: /images/20211211/c00973ed4a044b4285b5b5ca1124f98b.png