zoukankan      html  css  js  c++  java

  • 案例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=" 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}&currentPage=${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}&currentPage=${pageBean.currentPage}" 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>

    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;  930px; margin-bottom: 10px; margin: 0 auto; padding: 10px; margin-bottom: 10px;">
                <a href="./index.htm">首页&nbsp;&nbsp;&gt;</a> <a href="./蔬菜分类.htm">蔬菜&nbsp;&nbsp;&gt;</a>
                <a>无公害蔬菜</a>
            </div>

            <div style="margin: 0 auto;  950px;">
                <div class="col-md-6">
                    <img style="opacity: 1;  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;  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;  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;  127px;"
                                value="加入购物车" type="button">
                            </a> &nbsp;收藏商品
                        </div>
                    </div>
                        <a href="${pageContext.request.contextPath }/productListByCid?cid=${cid }&currentPage=${currentPage}">返回商品列表</a>
                </div>
            </div>
            <div class="clear"></div>
            <div style=" 950px; margin: 0 auto;">
                <div
                    style="background-color: #d3d3d3;  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;  930px; padding: 10px 10px; margin: 10px 0 10px 0;">
                    <strong>商品参数</strong>
                </div>
                <div style="margin-top: 10px;  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;  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;  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>
  • 相关阅读:
    redis 设置分布式锁要避免死锁
    jmeter的简单http接口用法
    整理一些好的网站或者好的文章来慢慢学
    多线程的共享变量的内存不可见性如何理解
    谷歌浏览器可以google了
    org.apache.commons.dbcp.DelegatingPreparedStatement.isClosed()Z和NewProxyPreparedStatement.isClosed()
    php封装curl,模拟POST和GET请求HTTPS请求
    PHP 轻量级 REST框架
    使用 spring封装的javamail linux服务器发送邮件失败解决
    安装Ruby、Sass在WebStrom配置Scss编译环境css自动压缩
  • 原文地址：https://www.cnblogs.com/jepson6669/p/8445264.html
Copyright © 2011-2022 走看看