天猫整站（简易版）SSM（十五）需要登录才能使用的功能

目录

一、我的订单页操作

1.1 付款

1.2 确认收货

1.2.1 点击确认收货后，访问地址/foreconfirmPay

​1.2.2 ForeController.confirmPay()方法被调用

1.2.3 confirmPay.jsp

1.2.4 confirmPayPage.jsp

1.3 确认收货成功

1.3.1 ForeController.orderConfirmed() 方法

1.3.2 orderConfirmed.jsp

1.3.3 orderConfirmedPage.jsp

1.4 删除

1.4.1 ForeController.deleteOrder()

1.4.2 修改

1.5 评价

二、评价产品

2.1 评价产品页面

2.1.1 ForeController.review()

2.1.2 review.jsp

2.1.3 reviewPage.jsp

2.2 提交评价

2.2.1 ForeController.doreview()

2.2.2 reviewPage.jsp

---

一、我的订单页操作

在我的订单页面，根据订单的不同状态，可以做出如下不同的操作：
1. 付款 —— 已经生成，但是未付款
2. 确认收货 —— 通过后台发货后
3. 评价 —— 确认收货后, 进行评价
4. 删除 —— 任意状态下

1.1 付款

点击直接跳转forealipay，携带参数订单id和总价。

1.2 确认收货

1.2.1 点击确认收货后，访问地址/foreconfirmPay

1.2.2 ForeController.confirmPay()方法被调用

•      获取参数oid
•      通过oid获取订单对象o
•      为订单对象填充订单项
•      把订单对象放在request的属性"o"上
•      服务端跳转到 confirmPay.jsp

    @RequestMapping("foreconfirmPay")
    public String confirmPay(Model model,int oid){
        Order order = orderService.get(oid);
        orderItemService.fill(order);
        model.addAttribute("o",order);
        return "fore/confirmPay";
    }

1.2.3 confirmPay.jsp

中间是订单确认业务页面 confirmPayPage.jsp

<%--
  Created by IntelliJ IDEA.
  User: 
  Date: 2018/10/2
  Time: 14:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false"%>

<%@include file="../include/fore/header.jsp"%>
<%@include file="../include/fore/top.jsp"%>
<%@include file="../include/fore/simpleSearch.jsp"%>
<%@include file="../include/fore/cart/confirmPayPage.jsp"%>
<%@include file="../include/fore/footer.jsp"%>

1.2.4 confirmPayPage.jsp

显示订单的创建时间，付款时间和发货时间，以及订单号，收款人信息等
遍历订单项集合，显示其中的产品图片，产品标题，价格，数量，小计，总结信息
最后提供确认支付按钮，提交到/foreorderconfirmed路径

<%--
  Created by IntelliJ IDEA.
  User: 
  Date: 2018/10/2
  Time: 14:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false"%>

<div class="confirmPayPageDiv">
    <div class="confirmPayImageDiv">
        <img src="${pageContext.request.contextPath}/img/site/comformPayFlow.png">
        <div  class="confirmPayTime1">
            <fmt:formatDate value="${o.createDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
        </div>
        <div  class="confirmPayTime2">
            <fmt:formatDate value="${o.payDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
        </div>
        <div class="confirmPayTime3">
            <fmt:formatDate value="${o.deliveryDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
        </div>

    </div>
    <div class="confirmPayOrderInfoDiv">
        <div class="confirmPayOrderInfoText">我已收到货，同意支付宝付款</div>
    </div>
    <div class="confirmPayOrderItemDiv">
        <div class="confirmPayOrderItemText">订单信息</div>
        <table class="confirmPayOrderItemTable">
            <thead>
            <th colspan="2">宝贝</th>
            <th width="120px">单价</th>
            <th width="120px">数量</th>
            <th width="120px">商品总价 </th>
            <th width="120px">运费</th>
            </thead>
            <c:forEach items="${o.orderItems}" var="oi">
                <tr>
                    <td><img width="50px" src="${pageContext.request.contextPath}/img/productSingle_middle/${oi.product.productImage.id}.jpg"></td>
                    <td class="confirmPayOrderItemProductLink">
                        <a href="#nowhere">${oi.product.name}</a>
                    </td>
                    <td>￥<fmt:formatNumber type="number" value="${oi.product.originalPrice}" minFractionDigits="2"/></td>
                    <td>1</td>
                    <td><span class="conformPayProductPrice">￥<fmt:formatNumber type="number" value="${oi.product.promotePrice}" minFractionDigits="2"/></span></td>
                    <td><span>快递 ： 0.00 </span></td>
                </tr>
            </c:forEach>
        </table>

        <div class="confirmPayOrderItemText pull-right">
            实付款： <span class="confirmPayOrderItemSumPrice">￥<fmt:formatNumber type="number" value="${o.total}" minFractionDigits="2"/></span>
        </div>

    </div>
    <div class="confirmPayOrderDetailDiv">

        <table class="confirmPayOrderDetailTable">
            <tr>
                <td>订单编号：</td>
                <td>${o.orderCode} <img width="23px" src="${pageContext.request.contextPath}/img/site/confirmOrderTmall.png"></td>
            </tr>
            <tr>
                <td>卖家昵称：</td>
                <td>天猫商铺 <span class="confirmPayOrderDetailWangWangGif"></span></td>
            </tr>
            <tr>
                <td>收货信息： </td>
                <td>${o.address}，${o.receiver}， ${o.mobile}，${o.post} </td>
            </tr>
            <tr>
                <td>成交时间：</td>
                <td><fmt:formatDate value="${o.createDate}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
            </tr>
        </table>

    </div>
    <div class="confirmPayButtonDiv">
        <div class="confirmPayWarning">请收到货后，再确认收货！否则您可能钱货两空！</div>
        <a href="foreorderConfirmed?oid=${o.id}"><button class="confirmPayButton">确认支付</button></a>
    </div>
</div>

1.3 确认收货成功

通过上一步最后的确认支付按钮，提交到路径/foreorderConfirmed，导致ForeController.orderConfirmed()方法被调用

1.3.1 ForeController.orderConfirmed() 方法

• 获取参数oid
• 根据参数oid获取Order对象o
• 修改对象o的状态为等待评价，修改其确认支付时间
• 更新到数据库
• 服务端跳转到orderConfirmed.jsp页面

    @RequestMapping("foreorderConfirmed")
    public String orderConfirmed(int oid){
        Order order = orderService.get(oid);
        order.setStatus(OrderService.WAIT_REVIEW);
        order.setConfirmDate(new Date());
        orderService.update(order);
        return "fore/orderConfirmed";
    }

1.3.2 orderConfirmed.jsp

中间是确认收货成功业务页面 orderConfirmedPage.jsp

<%--
  Created by IntelliJ IDEA.
  User: 
  Date: 2018/10/2
  Time: 14:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false"%>

<%@include file="../include/fore/header.jsp"%>
<%@include file="../include/fore/top.jsp"%>
<%@include file="../include/fore/simpleSearch.jsp"%>
<%@include file="../include/fore/cart/orderConfirmedPage.jsp"%>
<%@include file="../include/fore/footer.jsp"%>

1.3.3 orderConfirmedPage.jsp

显示"交易已经成功，卖家将收到您的货款。

<%--
  Created by IntelliJ IDEA.
  User: 
  Date: 2018/10/2
  Time: 14:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false"%>

<div class="orderFinishDiv">
    <div class="orderFinishTextDiv">
        <img src="${pageContext.request.contextPath}/img/site/orderFinish.png">
        <span>交易已经成功，卖家将收到您的货款。</span>
    </div>
</div>

1.4 删除

在我的订单页上点击删除按钮，根据 boughtPage中的ajax操作，会访问路径/foredeleteOrder，

删除按钮

js

导致ForeController.deleteOrder方法被调用

1.4.1 ForeController.deleteOrder()

• 获取参数oid
• 根据oid获取订单对象o
• 修改状态
• 更新到数据库
• 返回字符串"success"

    @RequestMapping("foredeleteOrder")
    @ResponseBody
    public String deleteOrder(@RequestParam("oid") int oid){
        Order order = orderService.get(oid);
        order.setStatus(OrderService.DELETE);
        orderService.update(order);
        return "success";
    }

1.4.2 修改

boughtPage中的javascript代码获取返回字符串是success的时候，隐藏掉当前这行订单数据。

1.5 评价

下一节

二、评价产品

2.1 评价产品页面

通过点击评价按钮，来到路径/forereview，导致ForeController.review()方法被调用

2.1.1 ForeController.review()

• 获取参数oid
• 根据oid获取订单对象o
• 为订单对象填充订单项
• 获取第一个订单项对应的产品,因为在评价页面需要显示一个产品图片，那么就使用这第一个产品的图片了
• 获取这个产品的评价集合
• 为产品设置评价数量和销量
• 把产品，订单和评价集合放在request上
• 服务端跳转到 review.jsp

    @RequestMapping("forereview")
    public String review(Model model,@RequestParam("oid")int oid){
        Order order = orderService.get(oid);
        orderItemService.fill(order);
        Product product = order.getOrderItems().get(0).getProduct();
        List<Review> reviews = reviewService.list(product.getId());
        productService.setSaleAndReviewNumber(product);
        model.addAttribute("p", product);
        model.addAttribute("o", order);
        model.addAttribute("reviews", reviews);
        return "fore/review";
    }

2.1.2 review.jsp

中间是产品业务页面 reviewPage.jsp

<%--
  Created by IntelliJ IDEA.
  User: 
  Date: 2018/10/2
  Time: 15:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false"%>

<%@include file="../include/fore/header.jsp"%>
<%@include file="../include/fore/top.jsp"%>
<%@include file="../include/fore/simpleSearch.jsp"%>
<%@include file="../include/fore/cart/reviewPage.jsp"%>
<%@include file="../include/fore/footer.jsp"%>

2.1.3 reviewPage.jsp

在reviewPage.jsp中显示产品图片，产品标题，价格，产品销量，产品评价数量，以及订单信息等。 
同时还显示出了该产品所有的评价，但是默认是隐藏的

<%--
  Created by IntelliJ IDEA.
  User: 
  Date: 2018/10/2
  Time: 15:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false"%>

<div class="reviewDiv">
    <div class="reviewProductInfoDiv">
        <div class="reviewProductInfoImg"><img width="400px" height="400px" src="${pageContext.request.contextPath}/img/productSingle/${p.productImage.id}.jpg"></div>
        <div class="reviewProductInfoRightDiv">
            <div class="reviewProductInfoRightText">
                ${p.name}
            </div>
            <table class="reviewProductInfoTable">
                <tr>
                    <td width="75px">价格:</td>
                    <td><span class="reviewProductInfoTablePrice">￥<fmt:formatNumber type="number" value="${p.originalPrice}" minFractionDigits="2"/></span> 元 </td>
                </tr>
                <tr>
                    <td>配送</td>
                    <td>快递:  0.00</td>
                </tr>
                <tr>
                    <td>月销量:</td>
                    <td><span class="reviewProductInfoTableSellNumber">${p.saleCount}</span> 件</td>
                </tr>
            </table>

            <div class="reviewProductInfoRightBelowDiv">
                <span class="reviewProductInfoRightBelowImg"><img src="${pageContext.request.contextPath}/img/site/reviewLight.png" /></span>
                <span class="reviewProductInfoRightBelowText" >现在查看的是 您所购买商品的信息
于<fmt:formatDate value="${o.createDate}" pattern="yyyy年MM月dd"/>下单购买了此商品 </span>

            </div>
        </div>
        <div style="clear:both"></div>
    </div>
    <div class="reviewStasticsDiv">
        <div class="reviewStasticsLeft">
            <div class="reviewStasticsLeftTop"></div>
            <div class="reviewStasticsLeftContent">累计评价 <span class="reviewStasticsNumber"> ${p.reviewCount}</span></div>
            <div class="reviewStasticsLeftFoot"></div>
        </div>
        <div class="reviewStasticsRight">
            <div class="reviewStasticsRightEmpty"></div>
            <div class="reviewStasticsFoot"></div>
        </div>
    </div>

    <c:if test="${param.showonly==true}">
        <div class="reviewDivlistReviews">
            <c:forEach items="${reviews}" var="r">
                <div class="reviewDivlistReviewsEach">
                    <div class="reviewDate"><fmt:formatDate value="${r.createDate}" pattern="yyyy-MM-dd"/></div>
                    <div class="reviewContent">${r.content}</div>
                    <div class="reviewUserInfo pull-right">${r.user.anonymousName}<span class="reviewUserInfoAnonymous">(匿名)</span></div>
                </div>
            </c:forEach>
        </div>
    </c:if>

    <c:if test="${param.showonly!=true}">
        <div class="makeReviewDiv">
            <form method="post" action="foredoreview">
                <div class="makeReviewText">其他买家，需要你的建议哦！</div>
                <table class="makeReviewTable">
                    <tr>
                        <td class="makeReviewTableFirstTD">评价商品</td>
                        <td><textarea name="content"></textarea></td>
                    </tr>
                </table>
                <div class="makeReviewButtonDiv">
                    <input type="hidden" name="oid" value="${o.id}">
                    <input type="hidden" name="pid" value="${p.id}">
                    <button type="submit">提交评价</button>
                </div>
            </form>
        </div>
    </c:if>

</div>

2.2 提交评价

在评价产品页面点击提交评价，就把数据提交到了/foredoreview路径，导致ForeController.doreview方法被调用

2.2.1 ForeController.doreview()

• 获取参数oid
• 根据oid获取订单对象o
• 修改订单对象状态
• 更新订单对象到数据库
• 获取参数pid
• 根据pid获取产品对象
• 获取参数content (评价信息)
• 对评价信息进行转义
• 从session中获取当前用户
• 创建评价对象review
• 为评价对象review设置 评价信息，产品，时间，用户
• 增加到数据库
• 客户端跳转到/forereview： 评价产品页面，并带上参数showonly=true

    @RequestMapping("foredoreview")
    public String doreview(@RequestParam("oid") int oid,@RequestParam("pid") int pid,String content,HttpSession session){
        Order order = orderService.get(oid);
        order.setStatus(OrderService.FINISH);
        orderService.update(order);

        content = HtmlUtils.htmlEscape(content);

        User user = (User) session.getAttribute("user");
        Review review = new Review();
        review.setUser(user);
        review.setPid(pid);
        review.setCreateDate(new Date());
        review.setUid(user.getId());
        review.setContent(content);
        reviewService.add(review);

        return "redirect:forereview?oid="+oid+"&showonly=true";
    }

2.2.2 reviewPage.jsp

在reviewPage.jsp中，当参数showonly==true，那么就显示当前产品的所有评价信息