您的位置: 首页  >  文章  >  Tmall_Fore_product

Tmall_Fore_product

分类: 文章 • 2024-01-14 21:55:04

产品页，有product和user，remind等信息

Tmall_Fore_product

 

首先获取产品的各个参数

product方法

 

public String product(HttpServletRequest request, HttpServletResponse response, Page page) {
    int pid = Integer.parseInt(request.getParameter("pid"));
    Product p = productDAO.get(pid);
     
    List<ProductImage> productSingleImages = productImageDAO.list(p, ProductImageDAO.type_single);
    List<ProductImage> productDetailImages = productImageDAO.list(p, ProductImageDAO.type_detail);
    p.setProductSingleImages(productSingleImages);
    p.setProductDetailImages(productDetailImages);
     
    List<PropertyValue> pvs = propertyValueDAO.list(p.getId());      
 
    List<Review> reviews = reviewDAO.list(p.getId());
     
    productDAO.setSaleAndReviewNumber(p);
 
    request.setAttribute("reviews", reviews);
 
    request.setAttribute("p", p);
    request.setAttribute("pvs", pvs);
    return "product.jsp";      
}

1. 获取参数pid
2. 根据pid获取Product 对象p
3. 根据对象p，获取这个产品对应的单个图片集合
4. 根据对象p，获取这个产品对应的详情图片集合
5. 获取产品的所有属性值
6. 获取产品对应的所有的评价
7. 设置产品的销量和评价数量
8. 把上述取值放在request属性上
9. 服务端跳转到 "product.jsp" 页面

 

然后是三个页面用来放具体的产品页

1.imgAndInfo.jsp
单个图片和基本信息
2.productReview.jsp
评价信息
3. productDetail.jsp
详情图片

先看1

imgAndInfo.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
 
<script>
 
$(function(){
    var stock = ${p.stock};
    $(".productNumberSetting").keyup(function(){
        var num= $(".productNumberSetting").val();
        num = parseInt(num);
        if(isNaN(num))
            num= 1;
        if(num<=0)
            num = 1;
        if(num>stock)
            num = stock;
        $(".productNumberSetting").val(num);
    });
     
    $(".increaseNumber").click(function(){
        var num= $(".productNumberSetting").val();
        num++;
        if(num>stock)
            num = stock;
        $(".productNumberSetting").val(num);
    });
    $(".decreaseNumber").click(function(){
        var num= $(".productNumberSetting").val();
        --num;
        if(num<=0)
            num=1;
        $(".productNumberSetting").val(num);
    });
     
    $(".addCartLink").click(function(){
        var page = "forecheckLogin";
        $.get(
                page,
                function(result){
                    if("success"==result){
                        var pid = ${p.id};
                        var num= $(".productNumberSetting").val();
                        var addCartpage = "foreaddCart";
                        $.get(
                                addCartpage,
                                {"pid":pid,"num":num},
                                function(result){
                                    if("success"==result){
                                        $(".addCartButton").html("已加入购物车");
                                        $(".addCartButton").attr("disabled","disabled");
                                        $(".addCartButton").css("background-color","lightgray")
                                        $(".addCartButton").css("border-color","lightgray")
                                        $(".addCartButton").css("color","black")
                                         
                                    }
                                    else{
                                         
                                    }
                                }
                        );                         
                    }
                    else{
                        $("#loginModal").modal('show');                    
                    }
                }
        );     
        return false;
    });
    $(".buyLink").click(function(){
        var page = "forecheckLogin";
        $.get(
                page,
                function(result){
                    if("success"==result){
                        var num = $(".productNumberSetting").val();
                        location.href= $(".buyLink").attr("href")+"&num="+num;
                    }
                    else{
                        $("#loginModal").modal('show');                    
                    }
                }
        );     
        return false;
    });
     
    $("button.loginSubmitButton").click(function(){
        var name = $("#name").val();
        var password = $("#password").val();
         
        if(0==name.length||0==password.length){
            $("span.errorMessage").html("请输入账号密码");
            $("div.loginErrorMessageDiv").show();          
            return false;
        }
         
        var page = "foreloginAjax";
        $.get(
                page,
                {"name":name,"password":password},
                function(result){
                    if("success"==result){
                        location.reload();
                    }
                    else{
                        $("span.errorMessage").html("账号密码错误");
                        $("div.loginErrorMessageDiv").show();                      
                    }
                }
        );         
         
        return true;
    });
     
    $("img.smallImage").mouseenter(function(){
        var bigImageURL = $(this).attr("bigImageURL");
        $("img.bigImg").attr("src",bigImageURL);
    });
     
    $("img.bigImg").load(
        function(){
            $("img.smallImage").each(function(){
                var bigImageURL = $(this).attr("bigImageURL");
                img = new Image();
                img.src = bigImageURL;
                 
                img.onload = function(){
                    console.log(bigImageURL);  
                    $("div.img4load").append($(img));
                };
            });    
        }
    );
});
 
</script>
 
<div class="imgAndInfo">
 
    <div class="imgInimgAndInfo">
        <img src="img/productSingle/${p.firstProductImage.id}.jpg" class="bigImg">
        <div class="smallImageDiv">
            <c:forEach items="${p.productSingleImages}" var="pi">
                <img src="img/productSingle_small/${pi.id}.jpg" bigImageURL="img/productSingle/${pi.id}.jpg" class="smallImage">
            </c:forEach>
        </div>
        <div class="img4load hidden" ></div>
    </div>
     
    <div class="infoInimgAndInfo">
         
        <div class="productTitle">
            ${p.name}
        </div>
        <div class="productSubTitle">
            ${p.subTitle}
        </div>
         
        <div class="productPrice">
            <div class="juhuasuan">
                <span class="juhuasuanBig" >聚划算</span>
                <span>此商品即将参加聚划算，<span class="juhuasuanTime">1天19小时</span>后开始，</span>
            </div>
            <div class="productPriceDiv">
                <div class="gouwujuanDiv"><img height="16px" src="img/site/gouwujuan.png">
                <span> 全天猫实物商品通用</span>
                 
                </div>
                <div class="originalDiv">
                    <span class="originalPriceDesc">价格</span>
                    <span class="originalPriceYuan">¥</span>
                    <span class="originalPrice">
                     
                        <fmt:formatNumber type="number" value="${p.orignalPrice}" minFractionDigits="2"/>                
                    </span>
                </div>
                <div class="promotionDiv">
                    <span class="promotionPriceDesc">促销价 </span>
                    <span class="promotionPriceYuan">¥</span>
                    <span class="promotionPrice">
                        <fmt:formatNumber type="number" value="${p.promotePrice}" minFractionDigits="2"/>
                    </span>              
                </div>
            </div>
        </div>
        <div class="productSaleAndReviewNumber">
            <div>销量 <span class="redColor boldWord"> ${p.saleCount }</span></div>  
            <div>累计评价 <span class="redColor boldWord"> ${p.reviewCount}</span></div>   
        </div>
        <div class="productNumber">
            <span>数量</span>
            <span>
                <span class="productNumberSettingSpan">
                <input class="productNumberSetting" type="text" value="1">
                </span>
                <span class="arrow">
                    <a href="#nowhere" class="increaseNumber">
                    <span class="updown">
                            <img src="img/site/increase.png">
                    </span>
                    </a>
                     
                    <span class="updownMiddle"> </span>
                    <a href="#nowhere"  class="decreaseNumber">
                    <span class="updown">
                            <img src="img/site/decrease.png">
                    </span>
                    </a>
                     
                </span>
                     
            件</span>
            <span>库存${p.stock}件</span>
        </div>
        <div class="serviceCommitment">
            <span class="serviceCommitmentDesc">服务承诺</span>
            <span class="serviceCommitmentLink">
                <a href="#nowhere">正品保证</a>
                <a href="#nowhere">极速退款</a>
                <a href="#nowhere">赠运费险</a>
                <a href="#nowhere">七天无理由退换</a>
            </span>
        </div>   
         
        <div class="buyDiv">
            <a class="buyLink" href="forebuyone?pid=${p.id}"><button class="buyButton">立即购买</button></a>
            <a href="#nowhere" class="addCartLink"><button class="addCartButton"><span class="glyphicon glyphicon-shopping-cart"></span>加入购物车</button></a>
        </div>
    </div>
     
    <div style="clear:both"></div>
     
</div>

效果：

Tmall_Fore_product

1. 左侧显示5张单个图片
1.1 默认显示第一张图片

<img src="img/productSingle/${p.firstProductImage.id}.jpg" class="bigImg">


1.2 5张小图片

<c:forEach items="${p.productSingleImages}" var="pi">

<img src="img/productSingle_small/${pi.id}.jpg" bigImageURL="img/productSingle/${pi.id}.jpg" class="smallImage">

</c:forEach>


2. 右边显示基本信息
2.1 标题和小标题

<div class="productTitle">

${p.name}

</div>

<div class="productSubTitle">

${p.subTitle}

</div>


2.2 原始价格和促销价

<fmt:formatNumber type="number" value="${p.orignalPrice}" minFractionDigits="2"/>

<fmt:formatNumber type="number" value="${p.promotePrice}" minFractionDigits="2"/>


2.3 销量和累计评价

<div>销量 <span class="redColor boldWord"> ${p.saleCount }</span></div>

<div>累计评价 <span class="redColor boldWord"> ${p.reviewCount}</span></div>


2.4 库存

<span>库存${p.stock}件</span>

 

第二条

productReview.jsp

由于没有实际数据，暂时是空的

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
 
<div class="productReviewDiv" >
    <div class="productReviewTopPart">
        <a  href="#nowhere" class="productReviewTopPartSelectedLink">商品详情</a>
        <a  href="#nowhere" class="selected">累计评价 <span class="productReviewTopReviewLinkNumber">${p.reviewCount}</span> </a>
    </div>
     
    <div class="productReviewContentPart">
        <c:forEach items="${reviews}" var="r">
        <div class="productReviewItem">
         
            <div class="productReviewItemDesc">
                <div class="productReviewItemContent">
                    ${r.content }
                </div>
                <div class="productReviewItemDate"><fmt:formatDate value="${r.createDate}" pattern="yyyy-MM-dd"/></div>
            </div>
            <div class="productReviewItemUserInfo">
             
                ${r.user.anonymousName}<span class="userInfoGrayPart">（匿名）</span>
            </div>
             
            <div style="clear:both"></div>
         
        </div>
        </c:forEach>
    </div>
 
</div>

Tmall_Fore_product

 

第三条

productDetail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
 
<div class="productDetailDiv" >
    <div class="productDetailTopPart">
        <a href="#nowhere" class="productDetailTopPartSelectedLink selected">商品详情</a>
        <a href="#nowhere" class="productDetailTopReviewLink">累计评价 <span class="productDetailTopReviewLinkNumber">${p.reviewCount}</span> </a>
    </div>
     
    <div class="productParamterPart">
        <div class="productParamter">产品参数：</div>
         
        <div class="productParamterList">
            <c:forEach items="${pvs}" var="pv">
                <span>${pv.property.name}:  ${fn:substring(pv.value, 0, 10)} </span>
            </c:forEach>
        </div>
        <div style="clear:both"></div>
    </div>
     
    <div class="productDetailImagesPart">
            <c:forEach items="${p.productDetailImages}" var="pi">
                <img src="img/productDetail/${pi.id}.jpg">
            </c:forEach>
    </div>
</div>

1. 显示属性值

<c:forEach items="${pvs}" var="pv">

<span>${pv.property.name}: ${fn:substring(pv.value, 0, 10)} </span>

</c:forEach>


2. 显示详情图片

<c:forEach items="${p.productDetailImages}" var="pi">

<img src="img/productDetail/${pi.id}.jpg">

</c:forEach>

Tmall_Fore_product

到这里product类就结束了。

我们了解到，要对页面了解，就要对业务了解，对数据了解，对框架和类了解。

 

相关推荐