java網上圖書商城（4）購物車模組1_java

本文執行個體為大家分享了購物車模組的具體代碼，供大家參考，具體內容如下

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

> 添加購物條目
> 修改購物條目的數量
> 刪除條目
> 大量刪除條目
> 我的購物車，即按使用者查詢條目
> 查詢勾選的條目 

1.資料表

複製代碼 代碼如下:

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;// 數量 private Book book;// 條目對應的圖書 private User user;// 所屬使用者  // 添加小計方法 public double getSubtotal() { /* * 使用BigDecimal不會有誤差 * 要求必須使用String類型構造器 */ 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不會有誤差

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

3.通過使用者查詢購物車條目

我的購物車條目中每個條目需要顯示圖書的圖片 書名 單價 ，這說明需要多表查詢

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.添加購物車條目----增

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. 封裝表單資料到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去資料庫中查詢這個條目是否存在 */ CartItem _cartItem = cartItemDao.findByUidAndBid( cartItem.getUser().getUid(), cartItem.getBook().getBid()); if(_cartItem == null) {//如果原來沒有這個條目，那麼添加條目 cartItem.setCartItemId(CommonUtils.uuid()); cartItemDao.addCartItem(cartItem); } else {//如果原來有這個條目，修改數量 // 使用原有數量和新條目數量之各，來做為新的數量 int quantity = cartItem.getQuantity() + _cartItem.getQuantity(); // 修改這個老條目的數量 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.購物車模組頁面javascript----查　

計算總計

給全選添加click事件

給所有條目的複選框添加click事件

給減號添加click事件

給加號添加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();//計算總計    /*  給全選添加click事件  */  $("#selectAll").click(function() {    /*    1. 擷取全選的狀態    */    var bool = $("#selectAll").attr("checked");    /*    2. 讓所有條目的複選框與全選的狀態同步    */    setItemCheckBox(bool);    /*    3. 讓結算按鈕與全選同步    */    setJieSuan(bool);    /*    4. 重新計算總計    */    showTotal();  });    /*  給所有條目的複選框添加click事件  */  $(":checkbox[name=checkboxBtn]").click(function() {    var all = $(":checkbox[name=checkboxBtn]").length;//所有條目的個數    var select = $(":checkbox[name=checkboxBtn][checked=true]").length;//擷取所有被選擇條目的個數    if(all == select) {//全都選中了      $("#selectAll").attr("checked", true);//勾選全選複選框      setJieSuan(true);//讓結算按鈕有效    } else if(select == 0) {//誰都沒有選中      $("#selectAll").attr("checked", false);//取消全選      setJieSuan(false);//讓結算失效    } else {      $("#selectAll").attr("checked", false);//取消全選      setJieSuan(true);//讓結算有效            }    showTotal();//重新計算總計  });    /*  給減號添加click事件  */  $(".jian").click(function() {    // 擷取cartItemId    var id = $(this).attr("id").substring(0, 32);    // 擷取輸入框中的數量    var quantity = $("#" + id + "Quantity").val();    // 判斷當前數量是否為1，如果為1,那就不是修改數量了，而是要刪除了。    if(quantity == 1) {      if(confirm("您是否真要刪除該條目？")) {        location = "/goods/CartItemServlet?method=batchDelete&cartItemIds=" + id;      }    } else {      sendUpdateQuantity(id, quantity-1);    }  });    // 給加號添加click事件  $(".jia").click(function() {    // 擷取cartItemId    var id = $(this).attr("id").substring(0, 32);    // 擷取輸入框中的數量    var quantity = $("#" + id + "Quantity").val();    sendUpdateQuantity(id, Number(quantity)+1);  });});// 請求伺服器，修改數量。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. 修改數量      $("#" + id + "Quantity").val(result.quantity);      //2. 修改小計      $("#" + id + "Subtotal").text(result.subtotal);      //3. 重新計算總計      showTotal();    }  });}/* * 計算總計 */function showTotal() {  var total = 0;  /*  1. 擷取所有的被勾選的條目複選框！迴圈遍曆之  */  $(":checkbox[name=checkboxBtn][checked=true]").each(function() {    //2. 擷取複選框的值，即其他元素的首碼    var id = $(this).val();    //3. 再通過首碼找到小計元素，擷取其文本    var text = $("#" + id + "Subtotal").text();    //4. 累加計算    total += Number(text);  });  // 5. 把總計顯示在總計元素上  $("#total").text(round(total, 2));//round()函數的作用是把total保留2位}/* * 統一設定所有條目的複選按鈕 */function setItemCheckBox(bool) {  $(":checkbox[name=checkboxBtn]").attr("checked", bool);}/* * 設定結算按鈕樣式 */function setJieSuan(bool) {  if(bool) {    $("#jiesuan").removeClass("kill").addClass("jiesuan");    $("#jiesuan").unbind("click");//撤消當前元素止所有click事件  } else {    $("#jiesuan").removeClass("jiesuan").addClass("kill");    $("#jiesuan").click(function() {return false;});  }  }/* * 大量刪除 */function batchDelete() {  // 1. 擷取所有被選中條目的複選框  // 2. 建立一數組，把所有被選中的複選框的值添加到數組中  // 3. 指定location為CartItemServlet，參數method=batchDelete，參數cartItemIds=數組的toString()  var cartItemIdArray = new Array();  $(":checkbox[name=checkboxBtn][checked=true]").each(function() {    cartItemIdArray.push($(this).val());//把複選框的值添加到數組中  });  location = "/goods/CartItemServlet?method=batchDelete&cartItemIds=" + cartItemIdArray;}/* * 結算 */function jiesuan() {  // 1. 擷取所有被選擇的條目的id，放到數組中  var cartItemIdArray = new Array();  $(":checkbox[name=checkboxBtn][checked=true]").each(function() {    cartItemIdArray.push($(this).val());//把複選框的值添加到數組中  });    // 2. 把數組的值toString()，然後賦給表單的cartItemIds這個hidden  $("#cartItemIds").val(cartItemIdArray.toString());  // 把總計的值，也儲存到表單中  $("#hiddenTotal").val($("#total").text());  // 3. 提交這個表單  $("#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">您的購物車中暫時沒有商品</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>單價</td>    <td>數量</td>    <td>小計</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>¥<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">¥<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>總計：</span><span class="price_t">¥<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. 把總計顯示在總計元素上$("#total").text(round(total, 2));//round()函數的作用是把total保留2位　

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

jsp

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

刪除一個

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

7.修改數量----改　　

jsp

// 請求伺服器，修改數量。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. 修改數量 $("#" + id + "Quantity").val(result.quantity); //2. 修改小計 $("#" + id + "Subtotal").text(result.subtotal); //3. 重新計算總計 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);  // 給用戶端返回一個json對象 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;}

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。