• 前台开发----进行单个商品信息的查询


    点击某一个商品时,可以进行查看商品的详情:

    进行写查询语句:但是里面并没有包含type,测试结果如下:

    测试代码:

    public Goods getById(int id) throws SQLException {//不包含type
        
        QueryRunner r = new QueryRunner(DBUtil.getDataSource());
        String sql="select* from goods where id=?";
        return r.query(sql, new BeanHandler<Goods>(Goods.class),id );
        
        
    }
    public static void main(String[] args) throws SQLException {
        Goods g=new GoodsDao().getById(3);
        System.out.println(g);
        
    }

    说明需要两个表进行连接,在MySQL中使用两表来连接测试其结果:

     由于type中的id和name难与goods中的id和name区分,所以进行去别名:

    监测typeid与typename的改变,测试代码在Goods.java中加入,最终结果:

    //监测typeid与typename的改变
        public void setTypeid(int typeid) {
            
            System.out.println(typeid);
        }
        public void setTypename(String  typename) {
            System.out.println(typename);
            
        }

    type的构造:

    Goods.java

    //监测typeid与typename的改变
        public void setTypeid(int typeid) {
            
            if(type==null) {
                type=new Type();
                
            }
            type.setId(typeid);
        }
        public void setTypename(String  typename) {
            if(type==null) {
                type=new Type();
                
            }
            type.setName(typename);
            
        }

    结果type不为null:

    GoodsDao.java写入查询语句:

    public Goods getById(int id) throws SQLException {//不包含type
        
        QueryRunner r = new QueryRunner(DBUtil.getDataSource());
        String sql="select g.name,g.cover,g.image1,g.image2,g.price,g.intro, g.stock,t.id  typeid,t.name typename from goods g , type t where g.id=? and g.type_id=t.id";
        return r.query(sql, new BeanHandler<Goods>(Goods.class),id );
        
        
    }

    GoodsService.java中进行异常的处理:

    public Goods getById(int id) {
            
            Goods g=null;
            try {
                g = gDao.getById(id);
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            return g;
        }
        

    GoodsDetailServlet.java中进行数据的获取:

    package com.guiyan.servlet;
    
    import java.io.IOException;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import com.guiyan.model.Goods;
    import com.guiyan.service.GoodsService;
    
    /**
     * Servlet implementation class GoodsDetailServlet
     */
    @WebServlet("/goods_detail")
    public class GoodsDetailServlet extends HttpServlet {
        private GoodsService gService=new GoodsService();
        
        
        
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            int id=Integer.parseInt(request.getParameter("id"));
            Goods g=gService.getById(id);
            request.setAttribute("g", g);
            request.getRequestDispatcher("goods_detail.jsp").forward(request, response);
            
            
            
        }
    
        
    
    }

    goods_detail.jsp进行商品详细信息的展示:

    <div class="flexslider">
                            
                            <ul class="slides">
                                <li data-thumb="${pageContext.request.contextPath }${g.cover}">
                                    <div class="thumb-image"> <img src="${pageContext.request.contextPath }${g.cover}" data-imagezoom="true" class="img-responsive"> </div>
                                </li>
                                <li data-thumb="${pageContext.request.contextPath }${g.image1}">
                                     <div class="thumb-image"> <img src="${pageContext.request.contextPath }${g.image1}" data-imagezoom="true" class="img-responsive"> </div>
                                </li>
                                <li data-thumb="${pageContext.request.contextPath }${g.image2}">
                                   <div class="thumb-image"> <img src="${pageContext.request.contextPath }${g.image2}" data-imagezoom="true" class="img-responsive"> </div>
                                </li> 
                            </ul>
                        </div>
                    </div>    
                    <div class="col-md-4 single-grid simpleCart_shelfItem">        
                        <h3> ${g.name} </h3>
                        <div class="tag">
                            <p>分类 : <a href="goods.action?typeid=5"> ${g.type.name} </a></p>
                        </div>
                        <p> ${g.intro} </p>
                        <div class="galry">
                            <div class="prices">
                                <h5 class="item_price">¥ ${g.price}  </h5>
                            </div>
                            <div class="clearfix"></div>
                        </div>
      1 <%@ page language="java" contentType="text/html; charset=UTF-8"
      2     pageEncoding="UTF-8"%>
      3  <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
      4 
      5 <!DOCTYPE html>
      6 <html>
      7 <head>
      8     <title>商品详情</title>
      9     <meta name="viewport" content="width=device-width, initial-scale=1">
     10     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     11     <link type="text/css" rel="stylesheet" href="css/bootstrap.css">
     12     <link type="text/css" rel="stylesheet" href="css/style.css">
     13     <link type="text/css" rel="stylesheet" href="css/flexslider.css">
     14     <script type="text/javascript" src="js/jquery.min.js"></script>
     15     <script type="text/javascript" src="js/jquery.flexslider.js"></script>
     16     <script type="text/javascript" src="js/bootstrap.min.js"></script>
     17     <script type="text/javascript" src="layer/layer.js"></script>
     18     <script type="text/javascript" src="js/cart.js"></script>
     19     <script>
     20         $(function() {
     21           $('.flexslider').flexslider({
     22             animation: "slide",
     23             controlNav: "thumbnails"
     24           });
     25         });
     26     </script>
     27 </head>
     28 <body>
     29      
     30     
     31 
     32 
     33 
     34 
     35 
     36     <jsp:include page="/header.jsp"></jsp:include>
     37 
     38 
     39     <!--//single-page-->
     40     <div class="single">
     41         <div class="container">
     42             <div class="single-grids">                
     43                 <div class="col-md-4 single-grid">        
     44                     <div class="flexslider">
     45                         
     46                         <ul class="slides">
     47                             <li data-thumb="${pageContext.request.contextPath }${g.cover}">
     48                                 <div class="thumb-image"> <img src="${pageContext.request.contextPath }${g.cover}" data-imagezoom="true" class="img-responsive"> </div>
     49                             </li>
     50                             <li data-thumb="${pageContext.request.contextPath }${g.image1}">
     51                                  <div class="thumb-image"> <img src="${pageContext.request.contextPath }${g.image1}" data-imagezoom="true" class="img-responsive"> </div>
     52                             </li>
     53                             <li data-thumb="${pageContext.request.contextPath }${g.image2}">
     54                                <div class="thumb-image"> <img src="${pageContext.request.contextPath }${g.image2}" data-imagezoom="true" class="img-responsive"> </div>
     55                             </li> 
     56                         </ul>
     57                     </div>
     58                 </div>    
     59                 <div class="col-md-4 single-grid simpleCart_shelfItem">        
     60                     <h3> ${g.name} </h3>
     61                     <div class="tag">
     62                         <p>分类 : <a href="goods.action?typeid=5"> ${g.type.name} </a></p>
     63                     </div>
     64                     <p> ${g.intro} </p>
     65                     <div class="galry">
     66                         <div class="prices">
     67                             <h5 class="item_price">¥ ${g.price}  </h5>
     68                         </div>
     69                         <div class="clearfix"></div>
     70                     </div>
     71                     <div class="btn_form">
     72                         <a href="javascript:;" class="add-cart item_add" onclick="buy(6)">加入购物车</a>    
     73                     </div>
     74                 </div>
     75                 <div class="col-md-4 single-grid1">
     76                     <!-- <h2>商品分类</h2> -->
     77                     <ul>
     78                         
     79                             <li><a href="goods.action?typeid=5">经典系列</a></li>
     80                         
     81                             <li><a href="goods.action?typeid=4">法式系列</a></li>
     82                         
     83                             <li><a href="goods.action?typeid=3">儿童系列</a></li>
     84                         
     85                             <li><a href="goods.action?typeid=2">零食系列</a></li>
     86                         
     87                             <li><a href="goods.action?typeid=1">冰淇淋系列</a></li>
     88                         
     89                     </ul>
     90                 </div>
     91                 <div class="clearfix"> </div>
     92             </div>
     93         </div>
     94     </div>
     95     
     96     <!--related-products--><!-- 
     97     <div class="related-products">
     98         <div class="container">
     99             <h3>猜你喜欢</h3>
    100             <div class="product-model-sec single-product-grids">
    101                 <div class="product-grid single-product">
    102                     <a href="single.html">
    103                     <div class="more-product"><span> </span></div>                        
    104                     <div class="product-img b-link-stripe b-animate-go  thickbox">
    105                         <img src="images/m1.png" class="img-responsive" alt="">
    106                         <div class="b-wrapper">
    107                         <h4 class="b-animate b-from-left  b-delay03">                            
    108                         <button>View</button>
    109                         </h4>
    110                         </div>
    111                     </div>
    112                     </a>                    
    113                     <div class="product-info simpleCart_shelfItem">
    114                         <div class="product-info-cust prt_name">
    115                             <h4>Product #1</h4>                                
    116                             <span class="item_price">$2000</span>
    117                             <div class="ofr">
    118                               <p class="pric1"><del>$2300</del></p>
    119                               <p class="disc">[15% Off]</p>
    120                             </div>
    121                             <div class="clearfix"> </div>
    122                         </div>                                                
    123                     </div>
    124                 </div>
    125                 <div class="clearfix"> </div>
    126             </div>
    127         </div>
    128     </div>
    129  -->    <!--related-products-->    
    130     
    131     
    132 
    133 
    134 
    135 
    136     <!-- footer -->
    137 <jsp:include page="/footer.jsp"></jsp:include>
    138 
    139 
    140 
    141 </body>
    142 </html>
    goods_detail.jsp

    最终首页商品详细信息的效果:

     

  • 相关阅读:
    技术周刊 · 耿耿星河欲曙天 | SpaceX 上的前端架构;跨平台新选择;开源世界的新“大门”;用户推荐算法的敲门砖……
    说说SVG的feTurbulence滤镜
    机器学习进阶
    小程序与动画的故事
    技术周刊 · 迢迢山径峻 | Web 开发成长图谱;下一代前端构建技术;AI 应用下支离破碎的真实;不懂产品不会开发;虚拟货币是新时代的黄金
    从中断机制看 React Fiber 技术
    三分钟了解数字人民币
    凹凸技术揭秘:如何服务 toG 项目——数字人民币项目前端总结
    使用 Phaser3+Matter.js 实现“合成大西瓜”游戏
    痞子衡嵌入式:快速定位i.MXRT600板级设计ISP[2:0]启动模式引脚上电时序问题的方法
  • 原文地址:https://www.cnblogs.com/jiguiyan/p/10608881.html
Copyright © 2020-2023  润新知