python3 之 天天生鮮 購物車操作 更新與刪除
阿新 • • 發佈：2020-10-29
是這鳥樣的 當點選 + - 數量時 更新 ； 刪除就是刪除：
html
<li class="col06"> <div class="num_add"> <!-- class帶fl 就可以通過 $('. ') 呼叫--> <a href="javascript:;" class="add fl">+</a> <!-- 沒有定義name='count'或定義為其他名字不與detail相同 是為了區分訂單頁面來自 cart還是detail--> <input type="text" class="num_show fl" sku_id="{{ sku.id }}" value="{{sku.count}}"> <a href="javascript:;" class="minus fl">-</a> </div> </li> <li class="col07"><span>{{sku.amount}}</span>元</li> <liclass="col08"><a href="javascript:;" class="del_btn">刪除</a></li>
script
更新過數量 交給
updateRemoteCartInfo 函式處理
// 增加 $(".add").click(function(){ // 獲取操作的商品id var sku_id = $(this).next().attr("sku_id"); // 獲取加操作前的的數量 var sku_num = $(this).next().val(); // 進行數量加1 sku_num = parseInt(sku_num); sku_num += 1; // 顯示商品數目的dom var num_dom = $(this).next(); // 更新購物車數量 updateRemoteCartInfo(sku_id, sku_num, num_dom); }); // 減少 $(".minus").click(function(){ // 獲取操作的商品id var sku_id = $(this).prev().attr("sku_id"); // 獲取加操作前的的數量 var sku_num = $(this).prev().val(); // 進行數量加1 sku_num = parseInt(sku_num); sku_num -= 1; if (sku_num < 1) sku_num = 1; // 更新頁面顯示數量 var num_dom = $(this).prev(); // 更新購物車數量 updateRemoteCartInfo(sku_id, sku_num, num_dom); }); var pre_sku_count = 0; $('.num_show').focus(function () { // 記錄使用者手動輸入之前商品數目 pre_sku_count = $(this).val(); }); // 手動輸入 $(".num_show").blur(function(){ var sku_id = $(this).attr("sku_id"); var sku_num = $(this).val(); // 如果輸入的資料不合理，則將輸入值設定為在手動輸入前記錄的商品數目 if (isNaN(sku_num) || sku_num.trim().length<=0 || parseInt(sku_num)<=0) { $(this).val(pre_sku_count); return; } sku_num = parseInt(sku_num); var num_dom = $(this); updateRemoteCartInfo(sku_id, sku_num, num_dom); });
// 更新後端購物車資訊 function updateRemoteCartInfo(sku_id, sku_count, num_dom) { // 傳送給後端的資料 var req = { sku_id: sku_id, count: sku_count, csrfmiddlewaretoken: "{{ csrf_token }}" }; $.post("/cart/update", req, function(data){ if (0 == data.code) { // 更新商品數量 $(num_dom).val(sku_count); // 更新商品金額資訊 var sku_price = $(".cart_list_td[sku_id="+sku_id+"]").children('li.col05').children().text(); var sku_amount = parseFloat(sku_price) * sku_count; $(".cart_list_td[sku_id="+sku_id+"]").children('li.col07').children().text(sku_amount.toFixed(2)); // 更新頂部商品總數 freshTotalGoodsCount(); // 更新底部合計資訊 freshOrderCommitInfo(); } else { alert(data.message); } }); }
#實現對資料庫 及 cookie 商品的更新
class UpdateCartView(View): def post(self,request): #獲取商品 id和count sku_id = request.POST.get('sku_id') count = request.POST.get('count') #驗證資料完整性 if not all([sku_id, count]): return JsonResponse({'code': 1, 'message': '引數不完整'}) #驗證 sku_id 在沒有黑客攻擊的情況下其實不會拿到None id try: sku = GoodsSKU.objects.get(id=sku_id) except GoodsSKU.DoesNotExist: return JsonResponse({'code': 2, 'message': '商品不存在'}) #保證 count 為整數 不能隨意輸入：字母、符號等無效 try: count = int(count) except Exception: return JsonResponse({'code': 3, 'message': '數量有誤'}) #判斷 庫存 數量是否充足 if count > sku.stock: return JsonResponse({'code': 4, 'message': '庫存不足'}) #判斷使用者是否登陸 if request.user.is_authenticated(): #獲取使用者id user_id = request.user.id #建立 redis 客戶端 讀取cart redis_conn = get_redis_connection('default') # 從資料庫獲取cart_%s 並判斷 商品是否存在 if redis_conn.hget('cart_%s' % user_id,sku_id): #存在更新sku_id 數量 redis_conn.hset('cart_%s'%user_id,sku_id,count) return JsonResponse({'code': 0, 'message': '新增購物車成功'}) else:#不存在 基本不可能 可能黑客可以能造假id return JsonResponse({'code': 10, 'message': '購物車無該資料'}) else: # 判斷cookie 中是否有 cart資訊 為了更加安全加上判斷 if request.COOKIES.get('cart'): # 如果 cookie中存在 cart 就加載出來 cart_dict = json.loads(request.COOKIES['cart']) if cart_dict[sku_id]: #如果存在 更新數量 cart_dict[sku_id] = count # 把新資料轉換為json 進行序列化轉儲 dump:有 轉儲 的意思 new_cart = json.dumps(cart_dict) response = JsonResponse({'code': 0, 'message': '新增購物車成功'}) #設定 cookie 存入 response.set_cookie('cart',new_cart) return response
刪除
// 刪除 $(".del_btn").click(function(){ var sku_id = $(this).parents("ul").attr("sku_id"); var req = { sku_id: sku_id, csrfmiddlewaretoken: "{{ csrf_token }}" }; $.post('/cart/delete', req, function(data){ // window.reload() location.href="/cart/info/"; // 刪除後，重新整理頁面 }); });
class DelCartView(View): def post(self,request): #獲得商品 id sku_id = request.POST.get('sku_id') #驗證商品是否存在 快取等因素商品不存在 try: sku = GoodsSKU.objects.get(id=sku_id) except GoodsSKU.DoesNotExist: return JsonResponse({'code': 1, 'message': '商品不存在'}) # 判斷使用者是否登陸 if request.user.is_authenticated(): # 獲取使用者id user_id = request.user.id # 建立 redis 客戶端 讀取cart redis_conn = get_redis_connection('default') #驗證商品 if redis_conn.hget('cart_%s'%user_id,sku_id): #刪除 redis_conn.hdel('cart_%s'%user_id,sku_id) else: return JsonResponse({'code': 2, 'message': '商品不存在'}) return JsonResponse({'code': 0, 'message': '刪除購物車成功'}) else: # 判斷cookie 中是否有 cart資訊 為了更加安全加上判斷 if request.COOKIES.get('cart'): # 如果 cookie中存在 cart 就加載出來 cart_dict = json.loads(request.COOKIES['cart']) #驗證 if cart_dict[sku_id]: #刪除 del cart_dict[sku_id] #刪除後的字典 在此序列 轉儲 new_cart = json.dumps(cart_dict) else: return JsonResponse({'code': 2, 'message': '商品不存在'}) response = JsonResponse({'code': 0, 'message': '刪除購物車成功'}) #設定 cookie 存入 response.set_cookie('cart',new_cart) return response
更新 購物車總數 價格 全選與不全選
function freshOrderCommitInfo() { var total_amount = 0; //總金額 var total_count = 0; // 總數量 $('.cart_list_td').find(':checked').parents('ul').each(function () { var sku_amount = $(this).children('li.col07').text(); // 商品的金額 var sku_count = $(this).find('.num_show').val(); // 商品的數量 total_count += parseInt(sku_count); total_amount += parseFloat(sku_amount); }); // 設定商品的總數和總價 $("#total_amount").text(total_amount.toFixed(2)); $("#total_count").text(total_count); } // 更新頁面頂端全部商品數量 function freshTotalGoodsCount() { var total_count = 0; $('.cart_list_td').find(':checkbox').parents('ul').each(function () { var sku_count = $(this).find('.num_show').val(); total_count += parseInt(sku_count); }); $(".total_count>em").text(total_count);
// 我的購物車後面的總數
$('#show_count').text(total_count);
}
// 商品對應checkbox發生改變時，全選checkbox發生改變 $('.cart_list_td').find(':checkbox').change(function () { // 獲取商品所有checkbox的數目 var all_len = $('.cart_list_td').find(':checkbox').length; // 獲取選中商品的checkbox的數目 var checked_len = $('.cart_list_td').find(':checked').length; if (checked_len < all_len){ // 有商品沒有被選中 $('.settlements').find(':checkbox').prop('checked', false) } else{ // 所有商品都被選中 $('.settlements').find(':checkbox').prop('checked', true) } freshOrderCommitInfo(); }); // 全選和全不選 $('.settlements').find(':checkbox').change(function () { // 1.獲取當前checkbox的選中狀態 var is_checked = $(this).prop('checked'); // 2.遍歷並設定商品ul中checkbox的選中狀態 $('.cart_list_td').find(':checkbox').each(function () { // 設定每一個goods ul中checkbox的值 $(this).prop('checked', is_checked) }); freshOrderCommitInfo(); });