案例21-分页显示某种类别的商品列表

1 vo部分PageBean

package www.test.vo;

import java.util.ArrayList;
import java.util.List;

public class PageBean<T> {

    // 1 当前页
    private int currentPage;
    // 2 当前页显示的条数
    private int currentCount;
    // 3 总条数
    private int totalCount;
    // 4 总页数
    private int totalPage;
    // 5 每页显示的数据
    private List<T> list;
    
    public int getCurrentPage() {
        return currentPage;
    }
    public void setCurrentPage(int currentPage) {
        this.currentPage = currentPage;
    }
    public int getCurrentCount() {
        return currentCount;
    }
    public void setCurrentCount(int currentCount) {
        this.currentCount = currentCount;
    }
    public int getTotalCount() {
        return totalCount;
    }
    public void setTotalCount(int totalCount) {
        this.totalCount = totalCount;
    }
    public int getTotalPage() {
        return totalPage;
    }
    public void setTotalPage(int totalPage) {
        this.totalPage = totalPage;
    }
    public List<T> getList() {
        return list;
    }
    public void setList(List<T> list) {
        this.list = list;
    }
}

2 web层

1 ProductListByCidServlet 代码

package www.test.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 www.test.domain.Product;
import www.test.service.ProductService;
import www.test.vo.PageBean;

public class ProductListByCidServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //获取cid
        String cid = request.getParameter("cid");
        String currentPageStr = request.getParameter("currentPage");
        if(currentPageStr == null){
            currentPageStr = "1";
        }
        int currentPage = Integer.parseInt(currentPageStr);
        int currentCount =12;
        //根据cid查询商品
        ProductService service = new ProductService();
        PageBean<Product> pageBean = service.findProductListByCid(cid,currentPage,currentCount);
        
        request.setAttribute("pageBean", pageBean);
        request.setAttribute("cid", cid);
        
        //转发
        request.getRequestDispatcher("/product_list.jsp").forward(request, response);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

3 service层

1 ProductService代码

//封装一个pageBean并返回给web层
    public PageBean<Product> findProductListByCid(String cid,int currentPage ,int currentCount) {
        
        ProductDao dao = new ProductDao();
        
        //封装一个pageBean并返回给web层
        PageBean<Product> pageBean = new PageBean<Product>();
        // 1 封装当前页
        pageBean.setCurrentPage(currentPage);
        
        //2 封装每页显示的条数
        pageBean.setCurrentCount(currentCount);
        
        //3 封装总条数
        int totalCount = 0;
        try {
            totalCount = dao.getTotalCount(cid);
        } catch (SQLException e) {
            
            e.printStackTrace();
        }
        pageBean.setTotalCount(totalCount);
        
        //4 封装总页数
        int totalPage = (int) Math.ceil(1.0*totalCount/currentCount);
        pageBean.setTotalPage(totalPage);
        
        //5 当前页显示的数据
        //select * from product where cid =? limit ?,?;
        //当前页与起始页面的关系
        List<Product> list = null;
        int index = (currentPage-1)*currentCount;
        try {
            list = dao.findProductListByPage(cid,index,currentCount);
        } catch (SQLException e) {
            
            e.printStackTrace();
        }
        pageBean.setList(list);
        
        
        return pageBean;
    }

4 dao层

1 ProductDao代码

package www.test.dao;

import java.sql.SQLException;
import java.util.List;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.apache.commons.dbutils.handlers.ScalarHandler;

import www.test.domain.Category;
import www.test.domain.Product;
import www.test.utils.C3P0Utils;

public class ProductDao {

    //获取热门商品
    public List<Product> findHotProductList() throws SQLException {
        QueryRunner qr = new QueryRunner(C3P0Utils.getDataSource());
        String sql = "select * from product where is_hot=? limit ?,?";
        List<Product> hotProductList = qr.query(sql, new BeanListHandler<Product>(Product.class), 1,0,9);
        return hotProductList;
    }
    
    //获取最新商品
    public List<Product> findNewProductList() throws SQLException {
        QueryRunner qr = new QueryRunner(C3P0Utils.getDataSource());
        String sql = "select * from product order by pdate desc limit ?,?";
        List<Product> newProductList = qr.query(sql, new BeanListHandler<Product>(Product.class), 0,9);
        return newProductList;
    }

    //获取商品分类
    public List<Category> findAllCategory() throws SQLException {
        QueryRunner qr = new QueryRunner(C3P0Utils.getDataSource());
        String sql = "select * from category";
        List<Category> categoryList = qr.query(sql, new BeanListHandler<Category>(Category.class));
        return categoryList;
    }

    //获取商品的总条数
    public int getTotalCount(String cid) throws SQLException {
        QueryRunner qr = new QueryRunner(C3P0Utils.getDataSource());
        String sql = "select count(*) from product where cid =?";
        Long totalCount = (Long) qr.query(sql, new ScalarHandler(),cid);
        return totalCount.intValue();
    }

    //获取分页显示的商品
    public List<Product> findProductListByPage(String cid, int index, int currentCount) throws SQLException {
        QueryRunner qr = new QueryRunner(C3P0Utils.getDataSource());
        String sql = "select * from product where cid=? limit ?,?";
        List<Product> list = qr.query(sql, new BeanListHandler<Product>(Product.class), cid,index,currentCount);
        return list;
    }

}

5 WebContent部分

1 header.jsp代码修改

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<!-- 登录 注册 购物车... -->
<div class="container-fluid">
    <div class="col-md-4">
        <img src="img/logo2.png"/>
    </div>

    <div class="col-md-5">
        <img src="img/header.png" />
    </div>
    <div class="col-md-3" style="padding-top:20px">
        <ol class="list-inline">
            <c:if test="${empty user }">
                <li><a href="login.jsp">登录</a></li>
                <li><a href="register.jsp">注册</a></li>
            </c:if>
            <c:if test="${!empty user }">
                <li>欢迎您,${user.username }</li>
                <li><a href="#">退出</a></li>
            </c:if>
            
            <li><a href="cart.jsp">购物车</a></li>
            <li><a href="order_list.jsp">我的订单</a></li>
        </ol>
    </div>
</div>

<!-- 导航条 -->
<div class="container-fluid">
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">首页</a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav" id="categoryUl">
                
                <%-- <c:forEach items="${categoryList }" var="category">
                        <li><a href="#">${category.cname }</a>
                    </c:forEach> --%>
                    
                </ul>
                <form class="navbar-form navbar-right" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
            </div>
        </div>
        
        <!-- 实现引入header.jsp页面的所有页面都动态获取类别 -->
        <script type="text/javascript">
            //header.jsp加载完毕后 去服务器端获得所有的category数据
            //引入header.jsp的页面本身已经引入的jquery文件，所以不用再次引入
            $(function(){
                var content = "";
                $.post(
                    "${pageContext.request.contextPath}/categoryList",
                    function(data){
                        //[{"cid":"xxx","cname":"xxxx"},{},{}]
                        //动态创建<li><a href="#">${category.cname }</a></li>
                        for(var i=0;i<data.length;++i){
                            content += "<li><a href='${pageContext.request.contextPath}/productListByCid?cid="+data[i].cid+"'>"+data[i].cname+"</a></li>";
                        }
                        //将拼接好的li放置到ul中
                        $("#categoryUl").html(content);
                    },
                    "json"    
                );
            });
        </script>
        
        
    </nav>
</div>

2 product_list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>会员登录</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->
<link rel="stylesheet" href="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>


    <!-- 引入header.jsp -->
    <jsp:include page="/header.jsp"></jsp:include>


    <div class="row" style=" 1210px; margin: 0 auto;">
        <div class="col-md-12">
            <ol class="breadcrumb">
                <li><a href="#">首页</a></li>
            </ol>
        </div>
        <c:forEach items="${pageBean.list }" var="product">
            <div class="col-md-2" style="height: 250px">
                <a href="product_info.htm"> <img src="${pageContext.request.contextPath }/${product.pimage}"
                    width="170" height="170" style="display: inline-block;">
                </a>
                <p>
                    <a href="product_info.html" style='color: green'>${product.pname }</a>
                </p>
                <p>
                    <font color="#FF0000">商城价：&yen;${product.shop_price }</font>
                </p>
            </div>
        </c:forEach>
    </div>

    <!--分页 -->
    <div style=" 380px; margin: 0 auto; margin-top: 50px;">
        <ul class="pagination" style="text-align: center; margin-top: 10px;">
            
                    
            
            <!-- 2 上一页 -->
                <!--判断当前页是否是第一页  -->
            <c:if test="${pageBean.currentPage==1 }">
                <li class="disabled">
                    <a href="javascript:void(0);" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
            </c:if>
            <c:if test="${pageBean.currentPage!=1 }">
                <li>
                    <a href="${pageContext.request.contextPath }/productListByCid?cid=${cid}&currentPage=${pageBean.currentPage-1 }" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
            </c:if>
            
            
            
            
            <!-- 1 显示每一页 -->        
            <c:forEach begin="1" end="${pageBean.totalPage }" var="page">
                <!-- 判断是否是当前页 -->
                <c:if test="${page==pageBean.currentPage }">
                    <li class="active"><a href="javascript:void(0);">${page }</a></li>
                </c:if> 
                <c:if test="${page!=pageBean.currentPage }">
                    <li><a href="${pageContext.request.contextPath }/productListByCid?cid=${cid}&currentPage=${page }">${page }</a></li>
                </c:if>
            </c:forEach>
            
            
            
            <!-- 3 下一页 -->
                <!--判断当前页是否是第一页  -->
            <c:if test="${pageBean.currentPage==pageBean.totalPage }">
                <li class="disabled">
                    <a href="javascript:void(0);" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </c:if>
            <c:if test="${pageBean.currentPage!=pageBean.totalPage }">
                <li>
                    <a href="${pageContext.request.contextPath }/productListByCid?cid=${cid}&currentPage=${pageBean.currentPage+1 }" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </c:if>

            
        </ul>
    </div>
    <!-- 分页结束 -->

    <!--商品浏览记录-->
    <div
        style=" 1210px; margin: 0 auto; padding: 0 9px; border: 1px solid #ddd; border-top: 2px solid #999; height: 246px;">

        <h4 style=" 50%; float: left; font: 14px/30px 微软雅黑">浏览记录</h4>
        <div style=" 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=" 150px; height: 216; float: left; margin: 0 8px 0 0; padding: 0 18px 15px; text-align: center;"><img
                    src="products/1/cs10001.jpg" width="130px" height="130px" /></li>
            </ul>

        </div>
    </div>


    <!-- 引入footer.jsp -->
    <jsp:include page="/footer.jsp"></jsp:include>

</body>

</html>