案例23-商品详情页面返回商品列表页面
1 product_list.jsp代码修改
点击图片的时候将cid 和 currentPage传递过去
<%@ 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="width: 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="${pageContext.request.contextPath }/productInfo?pid=${product.pid}&cid=${cid}¤tPage=${pageBean.currentPage}"> <img src="${pageContext.request.contextPath }/${product.pimage}" width="170" height="170" style="display: inline-block;"> </a> <p> <a href="${pageContext.request.contextPath }/productInfo?pid=${product.pid}&cid=${cid}¤tPage=${pageBean.currentPage}" style='color: green'>${product.pname }</a> </p> <p> <font color="#FF0000">商城价:¥${product.shop_price }</font> </p> </div> </c:forEach> </div> <!--分页 --> <div style="width: 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">«</span> </a> </li> </c:if> <c:if test="${pageBean.currentPage!=1 }"> <li> <a href="${pageContext.request.contextPath }/productListByCid?cid=${cid}¤tPage=${pageBean.currentPage-1 }" aria-label="Previous"> <span aria-hidden="true">«</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}¤tPage=${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">»</span> </a> </li> </c:if> <c:if test="${pageBean.currentPage!=pageBean.totalPage }"> <li> <a href="${pageContext.request.contextPath }/productListByCid?cid=${cid}¤tPage=${pageBean.currentPage+1 }" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </c:if> </ul> </div> <!-- 分页结束 --> <!--商品浏览记录--> <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="products/1/cs10001.jpg" width="130px" height="130px" /></li> </ul> </div> </div> <!-- 引入footer.jsp --> <jsp:include page="/footer.jsp"></jsp:include> </body> </html>
2 web层ProductInfoServlet代码修改
package www.test.web.servlet; import java.io.IOException; import java.sql.SQLException; 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; public class ProductInfoServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //获取cid和当前页 String cid = request.getParameter("cid"); String currentPage = request.getParameter("currentPage"); //获取pid String pid =request.getParameter("pid"); //传递给service层并调取service层的方法 ProductService service = new ProductService(); Product product = null; try { product = service.findProductByPid(pid); } catch (SQLException e) { e.printStackTrace(); } //存储到request域中 request.setAttribute("product", product); request.setAttribute("cid", cid); request.setAttribute("currentPage", currentPage); //转发 request.getRequestDispatcher("/product_info.jsp").forward(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
3 product_info.jsp代码修改
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!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; } .carousel-inner .item img { width: 100%; height: 300px; } </style> </head> <body> <!-- 引入header.jsp --> <jsp:include page="/header.jsp"></jsp:include> <div class="container"> <div class="row"> <div style="border: 1px solid #e4e4e4; width: 930px; margin-bottom: 10px; margin: 0 auto; padding: 10px; margin-bottom: 10px;"> <a href="./index.htm">首页 ></a> <a href="./蔬菜分类.htm">蔬菜 ></a> <a>无公害蔬菜</a> </div> <div style="margin: 0 auto; width: 950px;"> <div class="col-md-6"> <img style="opacity: 1; width: 400px; height: 350px;" title="" class="medium" src="${pageContext.request.contextPath }/${product.pimage}"> </div> <div class="col-md-6"> <div> <strong>${product.pname }</strong> </div> <div style="border-bottom: 1px dotted #dddddd; width: 350px; margin: 10px 0 10px 0;"> <div>编号:${product.pid }</div> </div> <div style="margin: 10px 0 10px 0;"> 亿家价: <strong style="color: #ef0101;">¥:${product.shop_price }元/份</strong> 参 考 价: <del>¥${product.market_price }元/份</del> </div> <div style="margin: 10px 0 10px 0;"> 促销: <a target="_blank" title="限时抢购 (2014-07-30 ~ 2015-01-01)" style="background-color: #f07373;">限时抢购</a> </div> <div style="padding: 10px; border: 1px solid #e7dbb1; width: 330px; margin: 15px 0 10px 0;; background-color: #fffee6;"> <div style="margin: 5px 0 10px 0;">白色</div> <div style="border-bottom: 1px solid #faeac7; margin-top: 20px; padding-left: 10px;"> 购买数量: <input id="quantity" name="quantity" value="1" maxlength="4" size="10" type="text"> </div> <div style="margin: 20px 0 10px 0;; text-align: center;"> <a href="cart.htm"> <input style="background: url('./images/product.gif') no-repeat scroll 0 -600px rgba(0, 0, 0, 0); height: 36px; width: 127px;" value="加入购物车" type="button"> </a> 收藏商品 </div> </div> <a href="${pageContext.request.contextPath }/productListByCid?cid=${cid }¤tPage=${currentPage}">返回商品列表</a> </div> </div> <div class="clear"></div> <div style="width: 950px; margin: 0 auto;"> <div style="background-color: #d3d3d3; width: 930px; padding: 10px 10px; margin: 10px 0 10px 0;"> <strong>商品介绍</strong> </div> <div> <img src="${pageContext.request.contextPath }/${product.pimage}"> </div> <div style="background-color: #d3d3d3; width: 930px; padding: 10px 10px; margin: 10px 0 10px 0;"> <strong>商品参数</strong> </div> <div style="margin-top: 10px; width: 900px;"> <table class="table table-bordered"> <tbody> <tr class="active"> <th colspan="2">基本参数</th> </tr> <tr> <th width="10%">级别</th> <td width="30%">标准</td> </tr> <tr> <th width="10%">标重</th> <td>500</td> </tr> <tr> <th width="10%">浮动</th> <td>200</td> </tr> </tbody> </table> </div> <div style="background-color: #d3d3d3; width: 900px;"> <table class="table table-bordered"> <tbody> <tr class="active"> <th><strong>商品评论</strong></th> </tr> <tr class="warning"> <th>暂无商品评论信息 <a>[发表商品评论]</a></th> </tr> </tbody> </table> </div> <div style="background-color: #d3d3d3; width: 900px;"> <table class="table table-bordered"> <tbody> <tr class="active"> <th><strong>商品咨询</strong></th> </tr> <tr class="warning"> <th>暂无商品咨询信息 <a>[发表商品咨询]</a></th> </tr> </tbody> </table> </div> </div> </div> </div> <!-- 引入footer.jsp --> <jsp:include page="/footer.jsp"></jsp:include> </body> </html>