Java Web 网络商城案例演示十二（查询类别下的商品信息）
程序员文章站
2024-01-15 22:52:04
...
Java Web 网络商城案例演示十二（查询类别下的商品信息）
任务：
1、带有分页的查看分类下的商品信息
2、购物模块——抽取模型
3、购物模块——添加商品到购物车
4、购物模块——移除购物项
4、购物模块——清空购物车
一、带有分页的查看分类下的商品信息
1、分析SQL语句的实现
-- 查询分类类别product 下对应的cid 为 1的商品 的数据并限制其查询开始的索引和条数
SELECT * FROM product where cid = 1 LIMIT 0,5;
SELECT * FROM product where cid = 1 LIMIT 5,5;
SELECT * FROM product where cid = 1 LIMIT ？,？;
-- 统计cid对应的有多少条数据
SELECT COUNT(*) FROM product where cid = 1;
2、原理
3、步骤实现
1、准备工作：
修改/jsp/header.jsp下的js里面的链接。
将当前页和对应商品的cid（商品id） 传入到对应的servlet
var li = "<li><a href='/store_v5/ProductServlet?method=findProductsByCidWithPage&num=1&cid="+obj.cid+" '>"+obj.cname+"</a></li>";
2、在productServlet当中创建findProductByCidWithPage方法
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 ProductServiceImpl();
PageModel pm = productService.findProductsByCidWithPage(cid,curNum);
//将pageModel对象放入到request当中
request.setAttribute("page", pm);
//转发到/jsp/product_list.jsp当中
return "/jsp/product_list.jsp";
}
ScalarHandler： 将单个值封装
3、在ProductService当中创建对应的方法及其内容
创建PageModel对象目的：计算分页参数
统计当前分类下商品的个数 select count(*) from product where cid=?
关联集合 select * from product where cid = ? LIMIT ?,?
关联url
返回所有的分页数据以及对应的页码对象
@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("");
//返回所有的分页数据（对应商品信息）以及对应的页码的对象
return null;
}
4、依次在ProductDaoImpl当中实现两个方法
findTotalRecords返回的是对应cid数据的个数
findProductsByCidWithPage方法返回的是List对应cid的商品，cid是在category上获取的，到product上查找随意cid 的商品
@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);//ScalarHandler： 将单个值封装
return num.intValue();
}
@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);
}
4、写一个公共的分页代码，获取request当中传递过来的PageModel对象，并从其中获取对应的值
<%@ 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_v5/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>
<%--分页显示的结束--%>
product_list.jsp当中获取值并显示
<%@ 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>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>商品列表</title>
<link rel="stylesheet"
href="${pageContext.request.contextPath}/css/bootstrap.min.css"
type="text/css" />
<script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"
type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"
type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->
<link rel="stylesheet"
href="${pageContext.request.contextPath}/css/style.css" type="text/css" />
<style>
body {
margin-top: 20px;
margin: 0 auto;
width: 100%;
}
.carousel-inner .item img {
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<!--
描述：菜单栏
-->
<%@include file="/jsp/header.jsp"%>
<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}/jsp/product_info.jsp">
<img
src="${pageContext.request.contextPath}/${p.pimage}"
width="170" height="170" style="display: inline-block;">
</a>
<p>
<a href="${pageContext.request.contextPath}/jsp/product_info.jsp"
style='color: green'>${p.pname }</a>
</p>
<p>
<font color="#FF0000">商城价：¥${p.shcp_price }</font>
</p>
</div>
</c:forEach>
</div>
<!--分页 -->
<%@ include file="/jsp/pageFile.jsp"%>
<!-- 分页结束======================= -->
</c:if>
<!--
商品浏览记录:
-->
<div
style="width: 1210px; margin: 0 auto; padding: 0 9px; border: 1px solid #ddd; border-top: 2px solid #999; height: 246px;">
<h4 style="width: 50%; float: left; font: 14px/30px"微软雅黑 ";">浏览记录</h4>
<div style="width: 50%; float: right; text-align: right;">
<a href="">more</a>
</div>
<div style="clear: both;"></div>
<div style="overflow: hidden;">
<ul style="list-style: none;">
<li
style="width: 150px; height: 216; float: left; margin: 0 8px 0 0; padding: 0 18px 15px; text-align: center;"><img
src="${pageContext.request.contextPath}/products/1/cs10001.jpg"
width="130px" height="130px" /></li>
</ul>
</div>
</div>
<%@include file="footer.jsp"%>
</body>
</html>
最后关联productserviceimpl.java url
pm.setUrl("ProductServlet?method=findProductsByCidWithPage&cid="+cid);
是公共页面pageFile。