victory的博客

长安一片月，万户捣衣声

0%

基于JavaWeb的网上购物商城 | 商品详情页展示及分类商品列表显示

发表于 分类于 ， ， ，

商品详情页展示及分类商品列表显示

实现功能：
1）点击某一个商品，网页显示商品的详情信息
改动index.jsp页面中的热门商品部分的代码,展示商品详情页

<!-- 热门商品 -->
<div class="container-fluid">
    <div class="col-md-12">
        <h2>热门商品&nbsp;&nbsp;<img src="img/title2.jpg"/></h2>
    </div>
    <div class="col-md-2" style="border:1px solid #E7E7E7;border-right:0;padding:0;">
        <img src="products/hao/big01.jpg" width="205" height="404" style="display: inline-block;"/>
    </div>
    <div class="col-md-10">
        <div class="col-md-6" style="text-align:center;height:200px;padding:0px;">
            <a href="product_info.htm">
                <img src="products/hao/middle01.jpg" width="516px" height="200px" style="display: inline-block;">
            </a>
        </div>
        
        <c:forEach items="${list}" var="pro">
            <div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;">
                <a href="product_info.htm">
                    <img src="${pageContext.request.contextPath}/${pro.pimage}" width="130" height="130" style="display: inline-block;">
                </a>
                <p><a href="${pageContext.request.contextPath}/product?method=getProById&pid=${pro.pid}" style='color:#666'>${pro.pname}</a></p>
                <p><font color="#E4393C" style="font-size:16px">&yen;${pro.shop_price}</font></p>
            </div>
        </c:forEach>
    </div>
</div>

product_info.jsp
改动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="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}/${p.pimage}">
                </div>

                <div class="col-md-6">
                    <div>
                        <strong>${p.pname}</strong>
                    </div>
                    <div
                        style="border-bottom: 1px dotted #dddddd; width: 350px; margin: 10px 0 10px 0;">
                        <div>编号：${p.pid}</div>
                    </div>

                    <div style="margin: 10px 0 10px 0;">
                        亿家价: <strong style="color: #ef0101;">￥：${p.shop_price}元/份</strong> 参 考 价：
                        <del>￥${p.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> &nbsp;收藏商品
                        </div>
                    </div>
                </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="image/r___________renleipic_01/bigPic139f030b-d68b-41dd-be6d-b94cc568d3c5.jpg">
                </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>

        </div>
    </div>


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

</body>

</html>

ProductServlet.java

package com.oracle.servlet;

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

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.oracle.bean.Product;
import com.oracle.service.ProductService;

public class ProductServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String method = request.getParameter("method");
        if("getProById".equals(method)) {
            getProById(request, response);
        }else if("findListByCate".equals(method)) {
            findListByCate(request, response);
        }
    }

    public void findListByCate(HttpServletRequest request, HttpServletResponse response) {
        // TODO Auto-generated method stub
        try {
            String cid = request.getParameter("cid");
            ProductService ps = new ProductService();
            List<Product> plist = ps.findListByCate(cid);
            
            request.setAttribute("plist", plist);
            request.getRequestDispatcher("/product_list.jsp").forward(request, response);
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        
    }

    public void getProById(HttpServletRequest request, HttpServletResponse response) {
        // TODO Auto-generated method stub
        try {
            String pid = request.getParameter("pid");
            
            ProductService ps = new ProductService();
            Product p = ps.getProById(pid);
            
            request.setAttribute("p", p);
            request.getRequestDispatcher("/product_info.jsp").forward(request, response);
            
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        
    }

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

ProductService.java

package com.oracle.service;

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

import com.oracle.bean.Category;
import com.oracle.bean.Product;
import com.oracle.dao.ProductDao;

public class ProductService {

    public List<Product> findProList() throws SQLException {
        // TODO Auto-generated method stub
        ProductDao pd = new ProductDao();
        List<Product> list = pd.findProList();
        return list;
    }

    public List<Category> findCateList() throws SQLException {
        // TODO Auto-generated method stub
        ProductDao pd = new ProductDao();
        List<Category> clist = pd.findCateList();
        return clist;
    }

    public Product getProById(String pid) throws SQLException {
        // TODO Auto-generated method stub
        ProductDao pd = new ProductDao();
        Product p = pd.getProById(pid);
        return p;
    }

    public List<Product> findListByCate(String cid) throws SQLException {
        // TODO Auto-generated method stub
        ProductDao pd = new ProductDao();
        List<Product> plist = pd.findListByCate(cid);
        return plist;
    }

}

ProductDao.java

package com.oracle.dao;

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

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

import com.oracle.bean.Category;
import com.oracle.bean.Product;
import com.oracle.utils.DataSourceUtils;

public class ProductDao {

    public List<Product> findProList() throws SQLException {
        // TODO Auto-generated method stub
        QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSource());
        
        String sql = "select * from product where pflag=? order by pdate desc limit 0,9";
        
        List<Product> list = qr.query(sql, new BeanListHandler<>(Product.class), 0);
        return list;
    }

    public List<Category> findCateList() throws SQLException {
        // TODO Auto-generated method stub
        QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSource());
        
        String sql = "select * from category";
        
        List<Category> clist = qr.query(sql, new BeanListHandler<>(Category.class));
        return clist;
    }

    public Product getProById(String pid) throws SQLException {
        // TODO Auto-generated method stub
        QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSource());
        
        String sql = "select * from product where pid=?";
        
        Product p = qr.query(sql, new BeanHandler<>(Product.class), pid);
        return p;
    }

    public List<Product> findListByCate(String cid) throws SQLException {
        // TODO Auto-generated method stub
        QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSource());
        
        String sql = "select * from product where cid=? and pflag=? order by pdate desc";
        
        List<Product> plist = qr.query(sql, new BeanListHandler<>(Product.class), cid, 0);
        return plist;
    }

}

2）点击菜单栏的商品类别显示对应类别的商品（与（1）都使用上面列出的ProductServlet/ProductService/ProductDao）
header.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>
<!-- 登录 注册 购物车... -->
<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="${not empty user}">
                <li>${user.username}</li>
                <li><a href="cart.jsp">购物车</a></li>
                <li><a href="order_list.jsp">我的订单</a></li>
            </c:if>
        </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">
                    <c:forEach items="${clist}" var="cate">
                        <li><a href="${pageContext.request.contextPath}/product?method=findListByCate&cid=${cate.cid}">${cate.cname}</a></li>
                    </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>
    </nav>
</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 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;">
        
        <c:forEach items="${plist}" var="pro">
            <div class="col-md-2">
                <a href="${pageContext.request.contextPath}/product?method=getProById&pid=${pro.pid}"> 
                    <img src="${pageContext.request.contextPath}/${pro.pimage}" width="170" height="170" style="display: inline-block;">
                </a>
                <p>
                    <a href="product_info.html" style='color: green'>${pro.pname}</a>
                </p>
                <p>
                    <font color="#FF0000">商城价：&yen;${pro.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;">
            <li class="disabled"><a href="#" aria-label="Previous"><span
                    aria-hidden="true">&laquo;</span></a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span>
            </a></li>
        </ul>
    </div>
    <!-- 分页结束 -->



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

</body>

</html>