Javaweb实现电子商城在线购物网站的查询订单作业界面案例SSM JavaScript jQuery

一、前端

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>


<!-- 通过动态标签引入公共jsp页面 -->
<%@ include file="/WEB-INF/jsp/common/header.jsp"%>


<!-- 引入格式化标签 -->
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
 

<!DOCTYPE html>
<html lang="zh_CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>商品详情</title>
    <!-- Bootstrap core CSS -->
    <link href="resources/bootstrap/css/bootstrap.css" rel="stylesheet" />
     <link rel="stylesheet" href="resources/bootstrap/style.css" />
    <link href="resources/css/taobao.css" rel="stylesheet" />
   <script src="resources/jquery/jquery.js"></script>
     
  </head>
  
  <body>

    

  
 <!-- 横幅导航条开始 -->
   <jsp:include page="/WEB-INF/jsp/common/nav.jsp"></jsp:include>
    
    <!--  横幅下方的主体开始 -->
    <div class="container">
                <div class="table-responsive">
                <table class="table table-hover table-bordered table-striped">
                
                <!-- 遍历订单 -->
                <c:forEach items="${orders}" var="order">
                
                     <thead>
                        <tr style="background-color: #eeccff">
                            <th style="width: 15%">订单号</th>
                            <th style="width: 40%">下单时间</th>
                            <th style="width: 10%">发货时间</th>
                            <th style="width: 8%">发货状态</th>
                            <th style="width: 15%">订单总金额</th>
                            <th style="width: 15%">支付状态</th>
                        </tr>
                    </thead>
                    
                    <tbody>
                        <tr>
                                <td>
                                     ${order.orderCode}
                                </td>
                                <td>
                                   <fmt:formatDate value="${order.createDate}" pattern="yyyy年MM月dd日 HH:mm:ss"/> 
                                </td>
                                <td>
                                    <fmt:formatDate value="${order.sendDate}" pattern="yyyy年MM月dd日 HH:mm:ss"/> 
                                </td>
                                <td>
                                   <c:choose>
                                      <c:when test="${order.status eq '0'}">未发货</c:when>
                                      <c:otherwise>已发货</c:otherwise>
                                   </c:choose>
                                </td>
                                <td>
                                    ${order.amount}
                                </td>
                                <td>
                                   <c:choose>
                                      <c:when test="${order.payStatus eq '0'}">未支付</c:when>
                                      <c:otherwise>已支付</c:otherwise>
                                   </c:choose>
                                </td>
                            </tr>
                    
                    </tbody>
                    
                    
                    <!-- 获取订单中的详情信息   order.items:List<OrderItem>    item:OrderItem -->
                    <c:forEach items="${order.items}" var="item">
                          <thead>
                        <tr>
                            <th style="width: 15%">图片</th>
                            <th style="width: 40%" colspan="2">名称</th>
                            <th style="width: 10%">价格</th>
                            <th style="width: 8%">数量</th>
                            <th style="width: 15%">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    
                        
                     
                            <tr>
                                <td>
                                    <img alt="商品图片" style="width:200px;height:200px" src="${pageContext.request.contextPath}/image/article/${item.article.image}">
                                </td>
                                <td colspan="2">
                                    ${item.article.title}
                                </td>
                                <td>
                                    <span class="price">${item.article.price}</span>    
                                </td>
                                <td>
                                     ${item.orderNum}
                                </td>
                                <td>
                                    <!-- <a href="shop/delete.do?id=1"
                                        onclick="return confirm('确定要把\n  苹果(APPLE)iPhone 5 16G版 3G手机(白色)WCDMA/GSM 全新设计,更薄、更轻、更快、更好的iPhone,以及卓越音效的EarPods耳机  \n从购物车中删除吗?')">删除</a>
                                    <a>收藏</a> -->
                                </td>
                            </tr>
                        
                    </tbody> 
                    </c:forEach>
                   
                </c:forEach>

                </table>
            </div>
                 


      <footer>
        <p>&copy; 版权所有,欢迎借鉴</p>
      </footer>

    </div><!--/.container-->
    <!--  横幅下方的主体结束 -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
   
    <script src="resources/bootstrap/js/bootstrap.js"></script>

    <script src="resources/js/taobao.js"></script>
  </body>
</html>

二、后端

/**
 * 
 */
package com.longIt.shoppingApp.controller;

import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.longIt.shoppingApp.bean.Order;
import com.longIt.shoppingApp.service.OrderServiceI;
import com.longIt.shoppingApp.weixin.utils.DataJoinUtils;


@Controller
@RequestMapping("/order")
public class OrderController {
    
    @Autowired
    private OrderServiceI orderServiceI;
    
    //跳转至确认订单信息页面
     @RequestMapping(value="/checkOrder.do")
     public  String checkOrder(String orderInfo,HttpSession session) {
         
          try {
              //将订单相关信息保存至session中
              session.setAttribute("orderInfo", orderInfo);

        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
        }
          
        //跳转至确认订单信息页面
          return "checkOrderInfo";
    }
    
    
    
     //提交订单
    @RequestMapping(value="/orderSubmit.do")
    public  String orderSubmit(HttpSession session,Model model) {
         
          try {
              
              String orderInfo = (String)session.getAttribute("orderInfo");
              System.out.println("orderInfo:"+orderInfo);
              //将订单信息保存至数据库
              Order order = orderServiceI.orderSubmit(orderInfo);
              model.addAttribute("order", order);
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
        }
          
          //展示支付页面
          return "pay";
       
    }
      
      //查询当前用户所有的订单信息
      @RequestMapping(value="/showOrder.do")
    public  String showOrder(Model model) {
         
          try {
              
              //根据当前用户的id查询,该用户所有的订单信息
              List<Order> orders = orderServiceI.getOrdersByUserId();
              model.addAttribute("orders", orders);
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
        }
          
          //跳转至订单列表页面
          return "order";
       
    }
      
    
      //异步校验订单是否支付成功
      @ResponseBody
      @RequestMapping(value="/queryPayStatus",produces= {"application/text;charset=utf-8"})
      public String queryStatus(String orderNo) {
          String tip = "";
          
          try {
              
              int num = 0;
              DataJoinUtils dataJoinUtils = new DataJoinUtils();
              
              while(true) {
                //查询订单的支付状态
                Map<String,String> map = dataJoinUtils.wxOrderQuery(orderNo);
                 
                if(map == null) {
                    tip = "支付发生错误";
                    break;
                }
                
                if(map.get("trade_state").equals("SUCCESS")) {
                    tip = "ok";
                    //支付成功,应该修改数据库中订单状态,改成已支付
                    orderServiceI.updateOrderPayOrderNo(orderNo);
                    break;
                }
                
                 Thread.sleep(3000);
                
                 num++;
                 
                 if(num >= 1000) {
                     tip = "支付超时";
                     break;
                 }
              }

        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
        }
          
          return tip;
      }
      
      
      //跳转至支付成功页面
      @RequestMapping("/paySuccess")
      public String paySuccess(double amount,Model model) {
         model.addAttribute("amount", amount);
         return "paysuccess";
      }
      
      
      //跳转至支付失败页面
      @RequestMapping("/payfail")
      public String payfail(double amount,Model model) {
         model.addAttribute("amount", amount);
         return "payfail";
      }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值