文章目录
1.1 将来到商品，并且设置了购买数量之后，加入购物车之后，购买数量依旧是1
当我们选中了某一个商品，之后，设置购买数量为4，然后加入购物车，然后我们就会来到购物车的界面，看到我们新加入的商品以及购买的数量，如下所示:
但是一开始在点击"加入购物车"这个超链接之后，来到了第二个界面，显示的购买数量却是1，后来才发现，在超链接中并没有传递参数count，而在自己的Servlet中代码中，如果没有传递参数count，那么就默认购买了1本，所以就到了错误。那么我们将如何实现我们上面的要求呢？我们只需要向请求中发送count参数即可，并且count的值就是我们在第一个界面中设置的值。但是我们又该如何获取设置的值呢？。也即这个问题变成了，超链接将如何获取表中的值呢？其实很简单，我们只需要给这个超链接设置一个点击事件，然后再这个点击事件中，获取我们想要的标签的值，然后再来设置这个超链接的href属性即可实现我们的需求了。所以我们只需要修改第一个界面的代码即可,主要代码如下：
--------------html代码--------------------------
<div id="top" style="text-align: right">
<div id="right">
<c:if test="${not empty requestScope.book}">
<form action="/OrderServlet" method="post">
<input type="hidden" name="method" value="produceOrder">
<input type="hidden" name="id" value="${book.id}"> <!--提交订单的时候，需要传递这个图书的相关信息-->
<div id="image_frame">
<img src="/images/${book.name}.png">
</div>
<div id="desc_frame">
<p>${book.name}</p>
<p name="price">￥ ${book.price} 元</p>
<p>
<input type="button" id="sub" value="-">
<input type="text" name="count" id="count" value="1" style="width: 50px;"> <!--默认购买一本-->
<input type="button" id="add" value="+">
</p>
<p>
<input type="submit" value="立刻购买">
<a id="a" style="margin-left: 25px; background-color: lightgreen; " onclick="getHref(${book.id})">加入购物车</a>
</p>
</div>
</form>
</c:if>
</div>
</div>
------------js代码--------------------------
<script type="text/javascript" src="<c:url value="/ajax.js"></c:url>"></script>
<script type="text/javascript">
function getHref(id){
var a = document.getElementById("a");
var count = document.getElementById("count").value;//获取文本框的值
a.href = "/CartServlet?method=addItem&id=" + id + "&count=" + count;
}
</script>
1.2 生成订单的过程
首先我们生成订单主要有2种方式:一种是从购物车中生成，另一种方式则是从商品界面中直接生成。但是不管哪一种方式，我们点击购买之后，都需要先设置收货人，收获地址以及联系电话，然后点击提交订单之后才可以生成订单，否则是不会产生订单的。我们可以参考以下淘宝支付的过程就可以理解了。之前就是在这里生成订单的时候弄了好久。所以我们需要的流程主要是这样的:
所以主要的代码如下所示:
//来到了购物车之后，点击下单就生成对应的订单，然后转发到对应的界面中
public String produceFromCart(HttpServletRequest request, HttpServletResponse response){
request.setAttribute("source","produceFromCart");
HttpSession session = request.getSession();
double total = ((CartList)session.getAttribute("cartList")).getTotal();//购物车的总计
session.setAttribute("total",total);
//来到订单预支付的界面，来选择收货人，电话等信息
return "f:/jsps/orders/prePay.jsp";
}
//来到某一个商品界面，点击购买
public String produceOrder(HttpServletRequest request, HttpServletResponse response){
//获取商品的id
String value = request.getParameter("id");
if(value == null){
throw new RuntimeException("没有传递参数id,没有办法生成Order");
}
int id = Integer.parseInt(value);
Book book = null;
//获取购买的图书
try {
book = bookService.queryById(id);
} catch (IOException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
value = request.getParameter("count");//获取购买数量
if(value == null){
throw new RuntimeException("没有传递购买数量");
}
int count = Integer.parseInt(value);
double total = book.getPrice() * count;
//生成订单
HttpSession session = request.getSession();
//生成订单条目
OrderItem orderItem = new OrderItem();
orderItem.setCount(count);
orderItem.setBook(book);
session.setAttribute("orderItem",orderItem);
request.setAttribute("source","produceOrder");
session.setAttribute("total",total);
return "f:/jsps/orders/prePay.jsp";
}
public String payOrder(HttpServletRequest request,HttpServletResponse response){
//设计生成订单的时间以及最迟支付订单的时间
Date date = new Date();//获取当前下单的时间
Date dead_date = DateUtils.addMinutes(date, 30);//获取最迟支付的事件
Timestamp timestamp = new Timestamp(date.getTime());
Timestamp dead_time = new Timestamp(dead_date.getTime());
String value = request.getParameter("province_id");
if(value == null){
throw new RuntimeException("没有传递province_id参数");
}
int province_id = Integer.parseInt(value);
//获取这个id的城市
String province = null;
try {
province = new ProvinceService().queryById(province_id).getName();
} catch (SQLException e) {
e.printStackTrace();
}
String city = request.getParameter("city");
//获取这个订单，设置收件人，收获地址以及收件人的电话
String detail = request.getParameter("detail");
String address = province + city + detail;
String receiver = request.getParameter("receiver");
String phone = request.getParameter("phone");
//将购物车中的商品生成对应OrderItem
String source = request.getParameter("source");
HttpSession session = request.getSession();
Customer customer = (Customer)session.getAttribute("customer");
int customer_id = customer.getId();
double total = (Double)session.getAttribute("total");
System.out.println(address + ", " + receiver + ", " + phone + ", " + source);
try {
int order_id = service.produceOrder(total, customer_id, timestamp,dead_time,address,receiver,phone);
if(source != null && "produceFromCart".equals(source)){
//从购物车中生成orderItem，然后从购物车中生成订单的，并需要将购物车清空
CartList cartList = (CartList)(session.getAttribute("cartList"));
List<OrderItem> orderItems = produceOrderItemFromCart(cartList);
for(OrderItem orderItem : orderItems){
System.out.println(orderItem);
orderItem.setOrder_id(order_id);
}
//将订单条目添加到orderItem表中
orderItemService.addItem(orderItems);
cartList.clearItems();
}else{
//如果时点击某一个商品之后，立即购买
OrderItem orderItem = (OrderItem)session.getAttribute("orderItem");
orderItem.setOrder_id(order_id);
orderItemService.addItem(orderItem);
}
} catch (SQLException e) {
e.printStackTrace();
}
//支付完毕之后，来到首页
return "d:/jsps/index.jsp";
}
prePay界面的主要代码为:
<!--如果产生订单的来源不为空-->
<c:if test="${not empty requestScope.source}">
<form action="/OrderServlet" method="post">
<input type="hidden" name="method" value="payOrder">
<input type="hidden" name="source" value="${requestScope.source}">
所在地址: <select id="province" name="province_id"><option>===请选择===</option></select> <select id="city" name="city"><option>===请选择===</option></select><br>
详细地址: <input type="text" id="detail" name="detail"><br>
收件人: <input type="text" id="receiver" name="receiver"><br>
电话: <input type="text" id="phone" name="phone"><br>
<table>
<c:choose>
<c:when test="${requestScope.source eq 'produceFromCart'}">
<c:forEach items="${sessionScope.cartList.cartItems.values()}" var="item">
<tr>
<td><img src="<c:url value='/images/${item.book.name}.png'></c:url>"></td>
<td>${item.book.name}</td>
<td>${item.book.catagory_name}</td>
<td>${item.book.price} x ${item.count} 本</td>
<td>
<!--pattern的格式为0.00,规定保留两位小数-->
￥ <f:formatNumber value="${item.total}" pattern="0.00"></f:formatNumber> 元
</td>
</tr>
</c:forEach>
</c:when>
<c:otherwise>
<tr>
<td><img src="<c:url value='/images/${sessionScope.orderItem.book.name}.png'></c:url>"></td>
<td>${sessionScope.orderItem.book.name}</td>
<td>${sessionScope.orderItem.book.catagory_name}</td>
<td>${sessionScope.orderItem.book.price} x ${sessionScope.orderItem.count} 本</td>
<td>
<!--pattern的格式为0.00,规定保留两位小数-->
￥ <f:formatNumber value="${sessionScope.orderItem.subtotal}" pattern="0.00"></f:formatNumber> 元
</td>
</tr>
</c:otherwise>
</c:choose>
</table>
<span style="margin-left: 800px;text-align: right;" name="total">总计: ￥ <f:formatNumber pattern="0.00" value="${sessionScope.total}"></f:formatNumber> 元</span>
<input style="margin-left: 10px;" type="submit" value="提交订单">
</form>
</c:if>
</div>
1.3 生成订单的时候，生成的事件和实际的时间相差8个小时
当我们生成订单之后，如果我们来查看数据库的时候，会发现生成订单的时间和实际时间相差了8个小时，虽然我们在配置c3p0-config.xml的时候，有添加了serverTimezone=UTC,但是依旧是发生了这样的报错，如果我们在用命令行执行select now()的时候，发现获取的时间和我们实际的时间一样的，所以关键就在于我们c3p0-confing.xml中serverTimezone的值了，要解决这个问题，我们需要将serverTimezone的值设置为Asia/Shanghai即可。
1.4 多条订单未支付的时候，需要显示倒计时，超过相应时间自动取消订单
如果我们来到了我的订单界面，如果订单还没有支付的话，那么我们需要倒计时，那么我们将如何来实现呢？
我们要实现订单的倒计时，我们需要利用定时器，即js调用setInternal()方法即可，因为是以毫秒为单位的，所以是每1000毫秒就要执行一次。
但是我们拥有多条订单，怎么获取某一个订单的的最迟支付时间，又该如何在时间超过了最迟支付的时间，取消订单呢？
-
设置多条订单的倒计时支付
①准备工作: 因为是多条订单，所以我们需要在js中利用遍历，首先我们需要先获取显示时间倒计时的span，因为不只一个，所以我们需要将span的class属性定义为time_span，然后利用document.getElementsByClassName("time_span")来获取所有的time_span，同时我们需要获取每一个订单的最迟支付时间，这时候我们需要给这个span标签定义一个属性left_time，对应的值就是订单的最迟支付时间。
②js中遍历span标签，每获取到一个span标签，就获取属性left_time的值，这样就可以生成一个字符串，根据这个字符串，来新建Date对象，调用getTime方法，即获取到了最迟支付时间的long类型的值dead_time，注意的是此时获取到的值是一个毫秒单位的值。
③新建Date对象，调用getTime方法，来获取当前的时间cur_time。
④如果cur_time大于等于了dead_time，那么就需要利用ajax来取消订单
⑤否则，获取两者的差值sub，此时的sub依旧是以毫秒为单位的。我们需要先除以1000
⑥获取剩余的时间：hour: sub / 3600; minute: (sub - hour * 3600) / 60; second: sub - hour * 3600 - minute * 60;
⭐⭐⭐注意的是，在js中，/并不是象在java中的是一个整除，而是最后得到的是一个浮点数。所以我们需要利用Math.floor来实现。注意不是以Math.round，否则就会导致倒计时有问题，比如我测试的时候，剩余9分00秒的时候，下一个时间本应该是8分59秒，如果是用Math.round的话，就会导致是9分59秒.所以我才使用的是Math.floor，目前也是可以正常运行的。
⑦在获取hour,minute,second之后，将他们拼接成为字符串，然后赋值给span。但是span.value是不可以实现我们的需求的，这时候我们就利用innerHTML来给span赋值即可。
⑧上面的方法就是我们定时器需要执行的代码，所以我们调用setInterval(xxx,1000),这样就可以实现每隔1秒就执行对应的代码了。 -
如果时间超过了最迟支付的时间，那么我们将利用ajax来取消订单，在取消订单之后，就会重定向到了首页，所以我们再次来点击我的订单的时候，就会发现超时未支付的订单已经没有了，再来到数据库查看的时候，发现对应的order的确已经删除了。
所以对应的代码为:
--------------------------html代码----------------------------------
<c:if test="${not empty requestScope.orders}">
<table>
<c:set var="index" value="0"></c:set>
<c:forEach items="${requestScope.orders}" var="order" varStatus="vs">
<tr>
<td colspan="6" style="background-color: lightseagreen;height: 20px;">
<c:if test="${order.state == 1}">
<!--如果这个订单时已经生成了，但是未支付的状态-->
剩余支付时间: <span class="time_span" left_time="${order.dead_time}" order_id="${order.id}"></span>
<a href="/OrderServlet?method=cancelOrder&order_id=${order.id}">取消订单</a>
</c:if>
<a href="/OrderServlet?method=detailOrder&order_id=${order.id}">订单详情</a>
</td>
</tr>
<c:forEach items="${order.items}" var="item">
<tr>
<td><img src="<c:url value='/images/${item.book.name}.png'></c:url>"></td>
<td>${item.book.name}</td>
<td>${item.book.catagory_name}</td>
<td>${item.book.price} x ${item.count} 本</td>
<td>
<!--pattern的格式为0.00,规定保留两位小数-->
￥ <f:formatNumber value="${item.subtotal}" pattern="0.00"></f:formatNumber> 元
</td>
<td>
<a href="/OrderServlet?method=cancelItem&id=${item.id}">取消</a>
</td>
</tr>
</c:forEach>
</c:forEach>
</table>
</c:if>
--------------------------js代码------------------------------------
<script type="text/javascript" src="<c:url value="/ajax.js"></c:url>"></script>
<script type="text/javascript">
function time_expire(){
//获取所有time的span标签
var spans = document.getElementsByClassName("time_span");
for(var i = 0; i < spans.length; ++i){
//对于每一个span，都需要获取它的最迟购买时间
var left_time = spans[i].getAttribute("left_time"); //yyyy-MM-dd HH:mm:ss的形式字符串
var dead_time = new Date(left_time).getTime();
//判断当前的时间是否等于left_time
var cur_time = new Date().getTime();
if(dead_time <= cur_time){
//将这个订单取消，然后重定向到了首页
var order_id = spans[i].getAttribute("order_id");
request({
method: "POST",
resource: "/OrderServlet",
params: "method=cancelOrder&order_id=" + order_id
})
window.location.reload();
}else{
//剩余共有sub秒
var sub = dead_time - cur_time;//getTime返回的是毫秒值，所以还需要将其除以1000
sub = Math.floor(sub / 1000);
var hour = Math.floor(sub / 3600);
var minute = Math.floor((sub - hour * 3600) / 60);
var second = sub - hour * 3600 - minute * 60;
// spans[i].innerHTML = hour + "时" + minute + "分" + second + "秒";
spans[i].innerHTML = hour + "时" + minute + "分" + second + "秒";
}
}
}
window.setInterval(time_expire,1000);//1000ms就执行一次
</script>
1.4 根据生成订单时间，设置最迟支付时间
生成订单的时候，我们需要设置2时间produce_time(生成订单的时间)，以及dead_time(最迟支付时间),但是我们如何生成dead_time，使得和produce_time相差30分钟呢？主要是通过使用DateUtils来实现，例如我们这里最迟支付时间，比生成时间多了30分钟，那么只需要执行DateUtils.addMinutes(date, 30);即可获取最迟支付的事件
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
