java網上圖書商城（4）購物車模塊1
更新時間：2016年12月05日 11:22:08 作者：ganchuanpu
這篇文章主要為大家詳細介紹了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. 獲取全選的狀態(tài)
*/
var bool = $("#selectAll").attr("checked");
/*
2. 讓所有條目的復選框與全選的狀態(tài)同步
*/
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. 獲取所有的被勾選的條目復選框！循環(huán)遍歷之
*/
$(":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. 創(chuàng)建一數組，把所有被選中的復選框的值添加到數組中
// 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. 創(chuàng)建一數組，把所有被選中的復選框的值添加到數組中
// 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;
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了詳解hbase與hive數據同步的相關資料,需要的朋友可以參考下2017-09-09
這篇文章主要為大家詳細介紹了java實現簡單猜數字小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
負載均衡就是將負載（工作任務,訪問請求）進行分攤到多個操作單元（服務器,組件）上進行執(zhí)行,根據負載均衡發(fā)生位置的不同,一般分為服務端負載均衡和客戶端負載均衡,本文給大家介紹Spring Cloud實現微服務調用的負載均衡的相關知識,感興趣的朋友一起看看吧2024-03-03
Java作為一種廣泛使用的編程語言之一,在開發(fā)Web應用程序時經常需要連接MySQL數據庫進行數據操作,下面這篇文章主要給大家介紹了關于Java+MySQL前后端連接的相關資料,需要的朋友可以參考下2024-03-03
潛艇大戰(zhàn)游戲相信大家都玩過，是一款非常有趣的小游戲，那么基于代碼是如何實現的呢？今天小編給大家?guī)硪黄坛處椭蠹覍W習java實現潛艇大戰(zhàn)游戲，感謝的朋友一起看看吧2021-06-06
java實現ssh登錄linux并執(zhí)行命令的三種實現方式
文章介紹了三種在Java中實現SSH登錄Linux并執(zhí)行命令的方法,包括使用ganymed-ssh2、jsch和sshd-core,由于ganymed-ssh2和jsch的最新版本較舊,可能無法與較新的Linux系統兼容,而sshd-core一直在更新,推薦使用2024-11-11
這篇文章主要為大家詳細介紹了Java實現圖片滑動驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
策略模式屬于Java 23種設計模式中行為模式之一，該模式定義了一系列算法，并將每個算法封裝起來，使它們可以相互替換，且算法的變化不會影響使用算法的客戶。本文將通過示例詳細講解這一模式，需要的可以參考一下2022-05-05
這篇文章主要介紹了@Autowired注入為null問題原因分析嗎，小編覺得挺不錯的，對日后比較有幫助，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
在Maven項目里,我們經常需要導入jar包依賴,本文主要介紹了Maven項目外部jar包導入的實現示例,具有一定的參考價值,感興趣的可以了解一下2024-08-08