用户在购物车中提交订单,将购物车中的数据以订单/订单项的形式保存下来,之后清空购物车。
整体技术路线:客户端点击提交订单至OrderServlet中saveOrder方法中,将购物车中的购物信息以订单形式保存,清空购物车,之后将订单放入request,转发到订单详情页面。
将购物车中信息抽取成两个数据库表,分别是:
(1)order表:表示此次交易的所有商品项,类似于超市小票;
为订单表中插入一行数据,描述本次交易,这行数据部分数据是通过程序赋予,部分数据来自于购物车的,部分数据来自于session中的用户,其中字段包含:
oid:UUIDUtils orderTime:new Date(); total: 从购物车获取 state:1 address: null name:null telephone:null uid:从session中的用户获取
(2)orderitem表:表示此次订单中的每个订单项,类似于小票中的各个商品项;
向订单项表中插入数据,描述当前订单的详细的购买信息,部分数据来自于购物车,部分数据需要通过程序赋予
itemid: UUIDUtils quantity:来自于购物车中的购物项 total:来自于购物车中的购物项 pid:来自于购物车上的购物项下商品对象pid oid:来自于当前订单id
注:商品提交时需要加入事务,一旦订单或订单项提交失败,则全部回滚
思路:点击cart.jsp页面中的【提交订单】,调用服务器端的OrderServlet中的saveOrder方法,之后调用OrderService OrderServiceImp OrderDao OrderDaoImp中的saveOrder方法,最终将数据存入数据库。
代码如下:
购物车界面:cart.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>购物车</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css" />
<script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js" type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css"/>
<style>
body {
margin-top: 20px;
margin: 0 auto;
}
.carousel-inner .item img {
width: 100%;
height: 300px;
}
.container .row div {
/* position:relative;
float:left; */
}
font {
color: #3164af;
font-size: 18px;
font-weight: normal;
padding: 0 10px;
}
</style>
</head>
<body>
<%@ include file="/jsp/header.jsp" %>
<div class="container">
<c:if test="${empty cart.cartItems }">
<div class="row">
<div class="col-md-12">
<h1>开启剁手模式</h1>
</div>
</div>
</c:if>
<c:if test="${not empty cart.cartItems }">
<div class="row">
<div style="margin:0 auto; margin-top:10px;width:950px;">
<strong style="font-size:16px;margin:5px 0;">订单详情</strong>
<table class="table table-bordered">
<tbody>
<tr class="warning">
<th>图片</th>
<th>商品</th>
<th>价格</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<c:forEach items="${cart.cartItems}" var="item">
<tr class="active">
<td width="60" width="40%">
<input type="hidden" name="id" value="22">
<img src="${pageContext.request.contextPath}/${item.product.pimage}" width="70" height="60">
</td>
<td width="30%">
<a target="_blank">${item.product.pname}</a>
</td>
<td width="20%">
¥${item.product.shop_price}
</td>
<td width="10%">
<input type="text" name