java網(wǎng)上圖書商城（4）購(gòu)物車模塊1

更新時(shí)間：2016年12月05日 11:22:08 作者：ganchuanpu

這篇文章主要為大家詳細(xì)介紹了java網(wǎng)上圖書商城，購(gòu)物車模塊,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了購(gòu)物車模塊的具體代碼，供大家參考，具體內(nèi)容如下

使用的不是session,也不是cookie，而是表

> 添加購(gòu)物條目
> 修改購(gòu)物條目的數(shù)量
> 刪除條目
> 批量刪除條目
> 我的購(gòu)物車，即按用戶查詢條目
> 查詢勾選的條目

1.數(shù)據(jù)表

insert  into `t_cartitem`(`cartItemId`,`quantity`,`bid`,`uid`,`orderBy`) values ('B8939FC55131469CAB11E3924D40185B',1,'CE01F15D435A4C51B0AD8202A318DCA7','xxx',11); 

2.CartItem

public class CartItem {
 private String cartItemId;// 主鍵
 private int quantity;// 數(shù)量
 private Book book;// 條目對(duì)應(yīng)的圖書
 private User user;// 所屬用戶
 
 // 添加小計(jì)方法
 public double getSubtotal() {
 /*
 * 使用BigDecimal不會(huì)有誤差
 * 要求必須使用String類型構(gòu)造器
 */
 BigDecimal b1 = new BigDecimal(book.getCurrPrice() + "");
 BigDecimal b2 = new BigDecimal(quantity + "");
 BigDecimal b3 = b1.multiply(b2);
 return b3.doubleValue();
 }

 public String getCartItemId() {
 return cartItemId;
 }

 public void setCartItemId(String cartItemId) {
 this.cartItemId = cartItemId;
 }

 public int getQuantity() {
 return quantity;
 }

 public void setQuantity(int quantity) {
 this.quantity = quantity;
 }

 public Book getBook() {
 return book;
 }

 public void setBook(Book book) {
 this.book = book;
 }

 public User getUser() {
 return user;
 }

 public void setUser(User user) {
 this.user = user;
 }
}

小技巧：Java中四舍五入 BigDecimal不會(huì)有誤差

// 添加小計(jì)方法
public double getSubtotal() {
 /*
 * 使用BigDecimal不會(huì)有誤差
 * 要求必須使用String類型構(gòu)造器
 */
 BigDecimal b1 = new BigDecimal(book.getCurrPrice() + "");
 BigDecimal b2 = new BigDecimal(quantity + "");
 BigDecimal b3 = b1.multiply(b2);
 return b3.doubleValue();
}

3.通過用戶查詢購(gòu)物車條目

我的購(gòu)物車條目中每個(gè)條目需要顯示圖書的圖片書名單價(jià) ，這說明需要多表查詢

public List<CartItem> findByUser(String uid) throws SQLException {
 String sql = "select * from t_cartitem c, t_book b where c.bid=b.bid and uid=? order by c.orderBy";
 List<Map<String,Object>> mapList = qr.query(sql, new MapListHandler(), uid);
 return toCartItemList(mapList);
}

4.添加購(gòu)物車條目----增

jsp

<div class="divForm">
 <form id="form1" action="<c:url value='/CartItemServlet'/>" method="post">
 <input type="hidden" name="method" value="add"/>
 <input type="hidden" name="bid" value="${book.bid }"/>
 我要買：<input id="cnt" style="width: 40px;text-align: center;" type="text" name="quantity" value="1"/>件
 </form>
 <a id="btn" href="javascript:$('#form1').submit();"></a>
</div>

CartItemServlet

public String add(HttpServletRequest req, HttpServletResponse resp)
 throws ServletException, IOException {
 /*
 * 1. 封裝表單數(shù)據(jù)到CartItem(bid, quantity)
 */
 Map map = req.getParameterMap();
 CartItem cartItem = CommonUtils.toBean(map, CartItem.class);
 Book book = CommonUtils.toBean(map, Book.class);
 User user = (User)req.getSession().getAttribute("sessionUser");
 cartItem.setBook(book);
 cartItem.setUser(user);
 cartItemService.add(cartItem);
 return myCart(req, resp);
}

CartItemService

public void add(CartItem cartItem) {
 try {
 /*
 * 1. 使用uid和bid去數(shù)據(jù)庫中查詢這個(gè)條目是否存在
 */
 CartItem _cartItem = cartItemDao.findByUidAndBid(
 cartItem.getUser().getUid(),
 cartItem.getBook().getBid());
 if(_cartItem == null) {//如果原來沒有這個(gè)條目，那么添加條目
 cartItem.setCartItemId(CommonUtils.uuid());
 cartItemDao.addCartItem(cartItem);
 } else {//如果原來有這個(gè)條目，修改數(shù)量
 // 使用原有數(shù)量和新條目數(shù)量之各，來做為新的數(shù)量
 int quantity = cartItem.getQuantity() + _cartItem.getQuantity();
 // 修改這個(gè)老條目的數(shù)量
 cartItemDao.updateQuantity(_cartItem.getCartItemId(), quantity);
 }
 } catch(Exception e) {
 throw new RuntimeException(e);
 }
}

CartItemDao

public void addCartItem(CartItem cartItem) throws SQLException {
 String sql = "insert into t_cartitem(cartItemId, quantity, bid, uid)" +
 " values(?,?,?,?)";
 Object[] params = {cartItem.getCartItemId(), cartItem.getQuantity(),
 cartItem.getBook().getBid(), cartItem.getUser().getUid()};
 qr.update(sql, params);
}

5.購(gòu)物車模塊頁面javascript----查　

計(jì)算總計(jì)

給全選添加click事件

給所有條目的復(fù)選框添加click事件

給減號(hào)添加click事件

給加號(hào)添加click事件

批量刪除

list.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>cartlist.jsp</title>
  
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">  
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">
  <!--
  <link rel="stylesheet" type="text/css" href="styles.css">
  -->
  <script src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
  <script src="<c:url value='/js/round.js'/>"></script>
  
  <link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/cart/list.css'/>">
<script type="text/javascript">
$(function() {
  showTotal();//計(jì)算總計(jì)
  
  /*
  給全選添加click事件
  */
  $("#selectAll").click(function() {
    /*
    1. 獲取全選的狀態(tài)
    */
    var bool = $("#selectAll").attr("checked");
    /*
    2. 讓所有條目的復(fù)選框與全選的狀態(tài)同步
    */
    setItemCheckBox(bool);
    /*
    3. 讓結(jié)算按鈕與全選同步
    */
    setJieSuan(bool);
    /*
    4. 重新計(jì)算總計(jì)
    */
    showTotal();
  });
  
  /*
  給所有條目的復(fù)選框添加click事件
  */
  $(":checkbox[name=checkboxBtn]").click(function() {
    var all = $(":checkbox[name=checkboxBtn]").length;//所有條目的個(gè)數(shù)
    var select = $(":checkbox[name=checkboxBtn][checked=true]").length;//獲取所有被選擇條目的個(gè)數(shù)

    if(all == select) {//全都選中了
      $("#selectAll").attr("checked", true);//勾選全選復(fù)選框
      setJieSuan(true);//讓結(jié)算按鈕有效
    } else if(select == 0) {//誰都沒有選中
      $("#selectAll").attr("checked", false);//取消全選
      setJieSuan(false);//讓結(jié)算失效
    } else {
      $("#selectAll").attr("checked", false);//取消全選
      setJieSuan(true);//讓結(jié)算有效        
    }
    showTotal();//重新計(jì)算總計(jì)
  });
  
  /*
  給減號(hào)添加click事件
  */
  $(".jian").click(function() {
    // 獲取cartItemId
    var id = $(this).attr("id").substring(0, 32);
    // 獲取輸入框中的數(shù)量
    var quantity = $("#" + id + "Quantity").val();
    // 判斷當(dāng)前數(shù)量是否為1，如果為1,那就不是修改數(shù)量了，而是要?jiǎng)h除了。
    if(quantity == 1) {
      if(confirm("您是否真要?jiǎng)h除該條目？")) {
        location = "/goods/CartItemServlet?method=batchDelete&cartItemIds=" + id;
      }
    } else {
      sendUpdateQuantity(id, quantity-1);
    }
  });
  
  // 給加號(hào)添加click事件
  $(".jia").click(function() {
    // 獲取cartItemId
    var id = $(this).attr("id").substring(0, 32);
    // 獲取輸入框中的數(shù)量
    var quantity = $("#" + id + "Quantity").val();
    sendUpdateQuantity(id, Number(quantity)+1);
  });
});

// 請(qǐng)求服務(wù)器，修改數(shù)量。
function sendUpdateQuantity(id, quantity) {
  $.ajax({
    async:false,
    cache:false,
    url:"/goods/CartItemServlet",
    data:{method:"updateQuantity",cartItemId:id,quantity:quantity},
    type:"POST",
    dataType:"json",
    success:function(result) {
      //1. 修改數(shù)量
      $("#" + id + "Quantity").val(result.quantity);
      //2. 修改小計(jì)
      $("#" + id + "Subtotal").text(result.subtotal);
      //3. 重新計(jì)算總計(jì)
      showTotal();
    }
  });
}

/*
 * 計(jì)算總計(jì)
 */
function showTotal() {
  var total = 0;
  /*
  1. 獲取所有的被勾選的條目復(fù)選框！循環(huán)遍歷之
  */
  $(":checkbox[name=checkboxBtn][checked=true]").each(function() {
    //2. 獲取復(fù)選框的值，即其他元素的前綴
    var id = $(this).val();
    //3. 再通過前綴找到小計(jì)元素，獲取其文本
    var text = $("#" + id + "Subtotal").text();
    //4. 累加計(jì)算
    total += Number(text);
  });
  // 5. 把總計(jì)顯示在總計(jì)元素上
  $("#total").text(round(total, 2));//round()函數(shù)的作用是把total保留2位
}

/*
 * 統(tǒng)一設(shè)置所有條目的復(fù)選按鈕
 */
function setItemCheckBox(bool) {
  $(":checkbox[name=checkboxBtn]").attr("checked", bool);
}

/*
 * 設(shè)置結(jié)算按鈕樣式
 */
function setJieSuan(bool) {
  if(bool) {
    $("#jiesuan").removeClass("kill").addClass("jiesuan");
    $("#jiesuan").unbind("click");//撤消當(dāng)前元素止所有click事件
  } else {
    $("#jiesuan").removeClass("jiesuan").addClass("kill");
    $("#jiesuan").click(function() {return false;});
  }
  
}

/*
 * 批量刪除
 */
function batchDelete() {
  // 1. 獲取所有被選中條目的復(fù)選框
  // 2. 創(chuàng)建一數(shù)組，把所有被選中的復(fù)選框的值添加到數(shù)組中
  // 3. 指定location為CartItemServlet，參數(shù)method=batchDelete，參數(shù)cartItemIds=數(shù)組的toString()
  var cartItemIdArray = new Array();
  $(":checkbox[name=checkboxBtn][checked=true]").each(function() {
    cartItemIdArray.push($(this).val());//把復(fù)選框的值添加到數(shù)組中
  });
  location = "/goods/CartItemServlet?method=batchDelete&cartItemIds=" + cartItemIdArray;
}

/*
 * 結(jié)算
 */
function jiesuan() {
  // 1. 獲取所有被選擇的條目的id，放到數(shù)組中
  var cartItemIdArray = new Array();
  $(":checkbox[name=checkboxBtn][checked=true]").each(function() {
    cartItemIdArray.push($(this).val());//把復(fù)選框的值添加到數(shù)組中
  });  
  // 2. 把數(shù)組的值toString()，然后賦給表單的cartItemIds這個(gè)hidden
  $("#cartItemIds").val(cartItemIdArray.toString());
  // 把總計(jì)的值，也保存到表單中
  $("#hiddenTotal").val($("#total").text());
  // 3. 提交這個(gè)表單
  $("#jieSuanForm").submit();
}
</script>
 </head>
 <body>

<c:choose>
  <c:when test="${empty cartItemList }">
  <table width="95%" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td align="right">
        <img align="top" src="<c:url value='/images/icon_empty.png'/>"/>
      </td>
      <td>
        <span class="spanEmpty">您的購(gòu)物車中暫時(shí)沒有商品</span>
      </td>
    </tr>
  </table> 
  </c:when>
  <c:otherwise>
<table width="95%" align="center" cellpadding="0" cellspacing="0">
  <tr align="center" bgcolor="#efeae5">
    <td align="left" width="50px">
      <input type="checkbox" id="selectAll" checked="checked"/><label for="selectAll">全選</label>
    </td>
    <td colspan="2">商品名稱</td>
    <td>單價(jià)</td>
    <td>數(shù)量</td>
    <td>小計(jì)</td>
    <td>操作</td>
  </tr>



<c:forEach items="${cartItemList }" var="cartItem">
  <tr align="center">
    <td align="left">
      <input value="${cartItem.cartItemId }" type="checkbox" name="checkboxBtn" checked="checked"/>
    </td>
    <td align="left" width="70px">
      <a class="linkImage" href="<c:url value='/jsps/book/desc.jsp'/>"><img border="0" width="54" align="top" src="<c:url value='/${cartItem.book.image_b }'/>"/></a>
    </td>
    <td align="left" width="400px">
      <a href="<c:url value='/jsps/book/desc.jsp'/>"><span>${cartItem.book.bname }</span></a>
    </td>
    <td><span>&yen;<span class="currPrice">${cartItem.book.currPrice }</span></span></td>
    <td>
      <a class="jian" id="${cartItem.cartItemId }Jian"></a><input class="quantity" readonly="readonly" id="${cartItem.cartItemId }Quantity" type="text" value="${cartItem.quantity }"/><a class="jia" id="${cartItem.cartItemId }Jia"></a>
    </td>
    <td width="100px">
      <span class="price_n">&yen;<span class="subTotal" id="${cartItem.cartItemId }Subtotal">${cartItem.subtotal }</span></span>
    </td>
    <td>
      <a href="<c:url value='/CartItemServlet?method=batchDelete&cartItemIds=${cartItem.cartItemId }'/>">刪除</a>
    </td>
  </tr>
</c:forEach>
  
  <tr>
    <td colspan="4" class="tdBatchDelete">
      <a href="javascript:batchDelete();">批量刪除</a>
    </td>
    <td colspan="3" align="right" class="tdTotal">
      <span>總計(jì)：</span><span class="price_t">&yen;<span id="total"></span></span>
    </td>
  </tr>
  <tr>
    <td colspan="7" align="right">
      <a href="javascript:jiesuan();" id="jiesuan" class="jiesuan"></a>
    </td>
  </tr>
</table>
  <form id="jieSuanForm" action="<c:url value='/CartItemServlet'/>" method="post">
    <input type="hidden" name="cartItemIds" id="cartItemIds"/>
    <input type="hidden" name="total" id="hiddenTotal"/>
    <input type="hidden" name="method" value="loadCartItems"/>
  </form>

  </c:otherwise>
</c:choose>
 </body>
</html>

小技巧：js中四舍五入round.js

// 5. 把總計(jì)顯示在總計(jì)元素上
$("#total").text(round(total, 2));//round()函數(shù)的作用是把total保留2位

6.批量刪除功能----刪

jsp

function batchDelete() {
 // 1. 獲取所有被選中條目的復(fù)選框
 // 2. 創(chuàng)建一數(shù)組，把所有被選中的復(fù)選框的值添加到數(shù)組中
 // 3. 指定location為CartItemServlet，參數(shù)method=batchDelete，參數(shù)cartItemIds=數(shù)組的toString()
 var cartItemIdArray = new Array();
 $(":checkbox[name=checkboxBtn][checked=true]").each(function() {
  cartItemIdArray.push($(this).val());//把復(fù)選框的值添加到數(shù)組中
 });
 location = "/goods/CartItemServlet?method=batchDelete&cartItemIds=" + cartItemIdArray;
}

刪除一個(gè)

if(quantity == 1) {
 if(confirm("您是否真要?jiǎng)h除該條目？")) {
  location = "/goods/CartItemServlet?method=batchDelete&cartItemIds=" + id;
 }
} else {

7.修改數(shù)量----改　　

jsp

// 請(qǐng)求服務(wù)器，修改數(shù)量。
function sendUpdateQuantity(id, quantity) {
 $.ajax({
 async:false,
 cache:false,
 url:"/goods/CartItemServlet",
 data:{method:"updateQuantity",cartItemId:id,quantity:quantity},
 type:"POST",
 dataType:"json",
 success:function(result) {
 //1. 修改數(shù)量
 $("#" + id + "Quantity").val(result.quantity);
 //2. 修改小計(jì)
 $("#" + id + "Subtotal").text(result.subtotal);
 //3. 重新計(jì)算總計(jì)
 showTotal();
 }
 });
}

servlet

public String updateQuantity(HttpServletRequest req, HttpServletResponse resp)
 throws ServletException, IOException {
 String cartItemId = req.getParameter("cartItemId");
 int quantity = Integer.parseInt(req.getParameter("quantity"));
 CartItem cartItem = cartItemService.updateQuantity(cartItemId, quantity);
 
 // 給客戶端返回一個(gè)json對(duì)象
 StringBuilder sb = new StringBuilder("{");
 sb.append("\"quantity\"").append(":").append(cartItem.getQuantity());
 sb.append(",");
 sb.append("\"subtotal\"").append(":").append(cartItem.getSubtotal());
 sb.append("}");
 
 resp.getWriter().print(sb);
 return null;
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: