• 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html
  • 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html

Javaweb网上商城项目实战(18)带分页查看分类下的商品信息

项目实战 Geekerstar 11个月前 (05-26) 446次浏览 已收录 0个评论 扫描二维码
文章目录[隐藏]

原理分析

分析SQL语句实现

#查看类别cid为1的商品的信息带有分页
SELECT * FROM product WHERE cid =  1 LIMIT ? ,?
#统计类别为1的商品的数量
SELECT COUNT(*) FROM product WHERE cid =  1

具体实现

在header.jsp中修改ajax链接

<script>
$(function(){
	//向服务端CategoryServlet__>gteAllCats发起ajax请求,服务端经过处理,
	//将所有分类信息以JSON格式的数据返回,获取到返回的所有分类绑定在页面的显示分类区域
	var url="/store_v1/CategoryServlet";
	var obj={"method":"findAllCats"};
	$.post(url,obj,function(data){
		//alert(data);
	
		//获取到服务端响应会的数据,经过观察data中存放的是一个JSON格式数组,遍历数组,动态的显示分类区域代码	
		$.each(data,function(i,obj){
			var li="<li><a href='/store_v1/ProductServlet?method=findProductsByCidWithPage&num=1&cid="+obj.cid+"'>"+obj.cname+"</a></li>";
			$("#myUL").append(li);
		});
		
	},"json");
	
	
});
</script>

可以看到此时鼠标移动到分类按钮上地址栏已经发生了相应的改变

引入PageModel分页模块

引用分页的工具PageModel放到domain包下,作为一个模型。
PageModel.java

package com.geekerstar.store.domain;

import java.util.List;

/**
 * 存放分页相关的数据
 *
 */
public class PageModel {
	//基本属性
	private int currentPageNum;//当前页数,由用户指定				*
	private int pageSize = 5 ;//每页显示的条数,固定的				*
	private int totalRecords;//总记录条数,数据库查出来的			    *
	private int totalPageNum;//总页数,计算出来的					*
	private int startIndex;//每页开始记录的索引,计算出来的			    *
	private int prePageNum;//上一页							    *
	private int nextPageNum;//下一页							    *
	
	private List records;//已经分好页的结果集,该list中只有10条记录
	
	
	
	//扩展属性
	//一共每页显示9个页码按钮
	private int startPage;//开始页码
	private int endPage;//结束页码
	
	//完善属性
	private String url;
	
	


	//要想使用我的分页,必须给我两个参数。一个是要看哪一页,另一个是总记录条数
	public PageModel(int currentPageNum,int totalRecords,int pageSize){
		this.currentPageNum = currentPageNum;
		this.totalRecords = totalRecords;
		this.pageSize=pageSize;
		
		//计算查询记录的开始索引
		startIndex = (currentPageNum-1)*pageSize;
		//计算总页数
		totalPageNum = totalRecords%pageSize==0?(totalRecords/pageSize):(totalRecords/pageSize+1);
		
		
		startPage = currentPageNum - 4; //5
		endPage = currentPageNum + 4;  //13
		//看看总页数够不够9页
		if(totalPageNum>9){
			//超过了9页
			if(startPage < 1){
				startPage = 1;
				endPage = startPage+8;
			}
			if(endPage>totalPageNum){
				endPage = totalPageNum;
				startPage = endPage-8;
			}
		}else{
			//不够9页
			startPage = 1;
			endPage = totalPageNum;
		}
	}

	public String getUrl() {
		return url;
	}

	public void setUrl(String url) {
		this.url = url;
	}
	
	public int getStartPage() {
		return startPage;
	}

	public void setStartPage(int startPage) {
		this.startPage = startPage;
	}

	public int getEndPage() {
		return endPage;
	}

	public void setEndPage(int endPage) {
		this.endPage = endPage;
	}

	public int getPrePageNum() {
		prePageNum = currentPageNum-1;
		if(prePageNum<1){
			prePageNum = 1;
		}
		return prePageNum;
	}

	public int getNextPageNum() {
		nextPageNum = currentPageNum+1;
		if(nextPageNum>totalPageNum){
			nextPageNum = totalPageNum;
		}
		return nextPageNum;
	}

	
	
	
	public int getCurrentPageNum() {
		return currentPageNum;
	}


	public void setCurrentPageNum(int currentPageNum) {
		this.currentPageNum = currentPageNum;
	}


	public int getPageSize() {
		return pageSize;
	}


	public void setPageSize(int pageSize) {
		this.pageSize = pageSize;
	}


	public int getTotalRecords() {
		return totalRecords;
	}


	public void setTotalRecords(int totalRecords) {
		this.totalRecords = totalRecords;
	}


	public int getTotalPageNum() {
		return totalPageNum;
	}


	public void setTotalPageNum(int totalPageNum) {
		this.totalPageNum = totalPageNum;
	}


	public int getStartIndex() {
		return startIndex;
	}


	public void setStartIndex(int startIndex) {
		this.startIndex = startIndex;
	}


	


	public void setPrePageNum(int prePageNum) {
		this.prePageNum = prePageNum;
	}


	

	public void setNextPageNum(int nextPageNum) {
		this.nextPageNum = nextPageNum;
	}


	public List getRecords() {	
		return records;
	}


	public void setRecords(List records) {
		this.records = records;
	}
}

在ProductServlet中增加findProductsByCidWithPage方法

主要实现以下功能:

获取cid,num

调用业务层功能:以分页形式查询当前类别下商品信息

返回PageModel对象(1_当前页商品信息2_分页3_url)

将PageModel对象放入request

转发到/jsp/product_list.jsp

// findProductsByCidWithPage
public String findProductsByCidWithPage(HttpServletRequest request, HttpServletResponse response) throws Exception {

	// 获取cid,num
	String cid = request.getParameter("cid");
	int curNum = Integer.parseInt(request.getParameter("num"));
	// 调用业务层功能:以分页形式查询当前类别下商品信息
	// 返回PageModel对象(1_当前页商品信息2_分页3_url)
	ProductService ProductService = new ProductServiceImp();
	PageModel pm = ProductService.findProductsByCidWithPage(cid, curNum);
	// 将PageModel对象放入request
	request.setAttribute("page", pm);
	// 转发到/jsp/product_list.jsp
	return "/jsp/product_list.jsp";
}

依次实现findProductsByCidWithPage

在ProductService中添加

PageModel findProductsByCidWithPage(String cid, int curNum)throws Exception;

在ProductServiceImp中添加

@Override
public PageModel findProductsByCidWithPage(String cid, int curNum) throws Exception {
	//1_创建PageModel对象 目的:计算分页参数
	//统计当前分类下商品个数  select count(*) from product where cid=?
	int totalRecords=ProductDao.findTotalRecords(cid);
	PageModel pm=new PageModel(curNum,totalRecords,12);
	//2_关联集合 select * from product where cid =? limit ? ,?
	List list=ProductDao.findProductsByCidWithPage(cid,pm.getStartIndex(),pm.getPageSize());
	pm.setList(list);
	//3_关联url
	pm.setUrl("ProductServlet?method=findProductsByCidWithPage&cid="+cid);
	return pm;
}
这里注意一下:将PageModel中的records改为list

在ProductDao中添加

int findTotalRecords(String cid)throws Exception;

List findProductsByCidWithPage(String cid, int startIndex, int pageSize)throws Exception;

在ProductDaoImp中添加

@Override
public List findProductsByCidWithPage(String cid, int startIndex, int pageSize) throws Exception {
	String sql="select * from product where cid=? limit ? , ?";
	QueryRunner qr=new QueryRunner(JDBCUtils.getDataSource());
	return qr.query(sql, new BeanListHandler<Product>(Product.class),cid,startIndex,pageSize);
}

@Override
public int findTotalRecords(String cid) throws Exception {
	String sql="select count(*) from product where cid =?";
	QueryRunner qr=new QueryRunner(JDBCUtils.getDataSource());
	Long num=(Long)qr.query(sql, new ScalarHandler(),cid);
	return num.intValue();
}

商品列表页面修改

接下来我们要获取当前类别下的当前页中的分类数据和分页参数

同样的,和上一节一样,我们把col-md-2类重复的去掉,只剩下一个,并编写循环遍历。顺便把下面的分页模块也去掉

并引入分页的公共模块

<%@include file="/jsp/pageFile.jsp" %>

公共模块代码如下,这个可以在我们提供的源码资料包中找到

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
	<%--分页显示的开始 --%>
    	<div style="text-align:center">
    		共${page.totalPageNum}页/第${page.currentPageNum}页
    		
    		
    		<!-- <a href="/store_v1/ProductServlet?method=findProductsByCidWithPage&cid=1&num=1">首页</a> -->
    		
    		<a href="${pageContext.request.contextPath}/${page.url}&num=1">首页</a>
    		<a href="${pageContext.request.contextPath}/${page.url}&num=${page.prePageNum}">上一页</a>
    		<%--显示的页码,使用forEach遍历显示的页面 --%>
    		<c:forEach begin="${page.startPage}" end="${page.endPage}" var="pagenum">
    			<a href="${pageContext.request.contextPath}/${page.url}&num=${pagenum}">${pagenum}</a>
    		</c:forEach>
    		
    		<a href="${pageContext.request.contextPath}/${page.url}&num=${page.nextPageNum}">下一页</a>
    		<a href="${pageContext.request.contextPath}/${page.url}&num=${page.totalPageNum}">末页</a>
    		<input type="text" id="pagenum" name="pagenum" size="1"/><input type="button" value="前往" onclick="jump()" />
    		<script type="text/javascript">
    			function jump(){
    				var totalpage = ${page.totalPageNum};
    				var pagenum = document.getElementById("pagenum").value;
    				//判断输入的是一个数字
    				var reg =/^[1-9][0-9]{0,1}$/;
    				if(!reg.test(pagenum)){
    					//不是一个有效数字
    					alert("请输入符合规定的数字");
    					return ;
    				}
    				//判断输入的数字不能大于总页数
    				if(parseInt(pagenum)>parseInt(totalpage)){
    					//超过了总页数
    					alert("不能大于总页数");
    					return;
    				}
    				//转向分页显示的Servlet
    				window.location.href="${pageContext.request.contextPath}/${page.url}&num="+pagenum;
    			}
    		</script>
    	</div>
    	<%--分页显示的结束--%>

这里就有一个情况了,如果我们商品分类列表里没有东西,那么不应该输出商品列表,因此我们就需要对输出商品这段代码处理一下,写一个判断,这部分完整的代码如下所示:

<c:if test="${empty page.list}">
	<div class="row" style="width: 1210px; margin: 0 auto;">
		<div class="col-md-12">
			<h1>暂无商品信息</h1>
		</div>
	</div>
</c:if>

<c:if test="${not empty page.list}">
	<div class="row" style="width: 1210px; margin: 0 auto;">
		<div class="col-md-12">
			<ol class="breadcrumb">
				<li><a href="#">首页</a></li>
			</ol>
		</div>
		<c:forEach items="${page.list}" var="p">
			<div class="col-md-2">
				<a
					href="${pageContext.request.contextPath}/ProductServlet?method=findProductByPid&pid=${p.pid}">
					<img src="${pageContext.request.contextPath}/${p.pimage}"
					width="170" height="170" style="display: inline-block;">
				</a>
				<p>
					<a
						href="${pageContext.request.contextPath}/ProductServlet?method=findProductByPid&pid=${p.pid}"
						style='color: green'>${p.pname}</a>
				</p>
				<p>
					<font color="#FF0000">商城价:¥${p.shop_price}</font>
				</p>
			</div>
		</c:forEach>
	</div>
	<%@ include file="/jsp/pageFile.jsp"%>
</c:if>

效果演示

运行项目,可以看到,当我们点击分类的时候,会出现分类信息展示以及分页,当该分类下没有商品时,会出现暂无商品信息,但是前端页面还是有少许问题,不过功能上我们已经大体实现了带分页查看分类下的商品信息。

源码下载

下载地址

导航目录

查看导航
丨极客文库, 版权所有丨如未注明 , 均为原创丨
本网站采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行授权
转载请注明原文链接:Javaweb网上商城项目实战(18)带分页查看分类下的商品信息
喜欢 (0)
[247507792@qq.com]
分享 (0)
Geekerstar
关于作者:
本站技术支持

您必须 登录 才能发表评论!

  • 精品技术教程
  • 编程资源分享
  • 问答交流社区
  • 极客文库知识库

客服QQ


QQ:2248886839


工作时间:09:00-23:00