7 - 用戶購物車模塊


1 實現添加購物車的功能

前端的頁面如下:

 

前端的頁面分析:

要實現添加購物車的功能,前端要向后端傳送的數據有商品的id和添加的數量,並且后端規定以post的方式發送給后端.

后端視圖函數的業務邏輯

1 判斷用戶是否登陸,沒登陸返回用戶未登錄

2 接受前端傳來的參數

3 對參數進行校驗,判斷是否有空的參數,有為空的參數返回參數不完整

4 對傳過來的商品id進行數據庫查詢,看數據庫中是否有這個商品存在,沒有返回商品不存在

5 對參數添加購物車的數量的類型判斷,如果不是整數,返回參數錯誤

6 判斷是否超過庫存的數量,返回超過庫存不足

7  業務邏輯處理,將購物車數據保存到redis中 

如果redis中不存在,則直接將數據保存到redis的購物車中

如果redis中原本包含了這個商品的數量信息, 進行數量累加,在保存到redis中 通過返回json數據,告知前端處理的結果

 

8 將最新的購物車信息設置到redis中

=======================================================

前端的post請求:

 window.location.href = "/users/login";  js中的重定向

post請求必須帶  csrfmiddlewaretoken: "{{ csrf_token }}" 否則回報403訪問被禁止的錯誤

 前端post請求的代碼如下:

$('#add_cart').click(function(){
		    var req_data = {
		       sku_id:  $(this).attr("sku_id"),
                count: $("#num_show").val(),
                csrfmiddlewaretoken: "{{ csrf_token }}"
            };
		    // 向后端發送添加購物車的請求
		    $.post("/cart/add", req_data, function (resp_data) {
                if (1 == resp_data.code) {
                    // 后端表示用戶未登錄
                    window.location.href = "/users/login";
                } else if (0 == resp_data.code) {
                    // 添加成功
                    $(".add_jump").stop().animate({
                    'left': $to_y+7,
                    'top': $to_x+7},
                    "fast", function() {
					$(".add_jump").fadeOut('fast',function(){
						$('#show_count').html(resp_data.cart_num);
					});

			});
                } else {
                    alert(resp_data.message);
                }
            }, "json")


		});

 

請求處理的視圖函數:

View Code

 

 

url的根級的請求路徑:

  url(r'^cart/', include(cart.urls, namespace="cart")),

在cart應用中的uri的請求路徑

from cart import views

urlpatterns = [ url(r"^add$", views.AddCartView.as_view(), name="add"), ]

 添加購物車成功后前端的頁面如下;

 redis中的購物車數量如下:

 ===========================================================================

對上面的添加購物車進行升級(增加用戶未登錄也能添加購物車的功能)

 如果用戶未登錄,則購物車數據保存在用戶的cookie中(用的瀏覽器中)

把用戶的購物車數據以json字符串的方式保存在cookie中(cookie只能保存字符串)  “cart”: ‘{   “sku_1“:10, “sku_2”: 11  }’

如果用戶登錄,則購物車數據是保存在后端的redis中,用戶在登錄的時候,將cookie中的購物車數據與redis中的數據進行合並,合並后保存在redis中

json模塊

將python的字典類型數據轉換為json字符串的方法  json.dumps(字典數據)  {‘a’:1} ---->  '{'a':1}'

將json字符串轉換為python的字典類型數據的方法   json.loads(json字符串) '{'a':1}' ---> {'a':1}

 業務邏輯的分析:

 1 如果用戶未登錄,則將數據保存到cookie中

 2 先獲取用戶的cookie中的購物車數據

 3  取 出原來存儲在瀏覽器中的cookie,把原來的轉成字典

4  判斷cookies是否包含傳來的商品shu_id如果有則求和,沒有則增加

5 把最新的商品數量設置到字典中

6  統計購物車中的商品總數

7 構建response對象

8 設置最新的cookie信息

添加用戶未登錄實現添加購物車的視圖函數

 用戶未登錄主要的代碼

View Code

 

 完整的代碼:

View Code

 點擊添加購物車后用戶的cookie信息:

 ========================================

在goods模塊中寫購物車模塊的基類,讓用到顯示購物車數量的模塊都去繼承這個基類,

顯示購物車的數量可以直接調用 cart_num = self.get_cart_num(request)

 基類

View Code

 

各個類調用如下:

主頁未登錄也能通過cookie顯示購物車的數量

 

2 實現查詢購物車的功能(從redis或cookie中獲取數據)

前端顯示的頁面如下圖所示:

根據前端頁面后端要接受的參數如商品的sku_id和商品的數量,和用戶的信息

 后端視圖函數的業務邏輯如下:

1 獲取數據

2 如果用戶未登錄,從cookie中獲取數據

3 如果用戶已登陸, 從redis中獲取數據

4 處理模板

業務邏輯

后端根據購物車的數據,通過查詢數據庫挨個遍歷要給前端傳送的數據有每個商品的對象(商品sku里面有圖片,name,單位,價格,)商品的數量可以通過從redis或cookie中獲取,把它當成一個商品的屬性添加到商品的對象中,

小計可以通過商品的價格和商品的數量想乘后的結果添加到對象的屬性中,最后總共有多少商品和價格可以選擇兩個變量在每次遍歷商品的時候疊加操作。

查詢購物車信息的視圖函數(CartInfoView)代碼如下

View Code

 

配置url的路徑:

  url(r"^$", views.CartInfoView.as_view(), name="info"),

 

前端的渲染效果如下:

 

3 實現用戶登陸的時候瀏覽器中購物車中的cookie和redis中購物車的數據進行合並

1 初步實現把瀏覽器中購物車的cookie同步到redis中(這個合並會把以前的redis中的數據清除,保存最新的)

在用戶登陸成功后業務邏輯處理如下:

 1 在用戶登陸成功后先獲取瀏覽器中購物車cookie的數據

 2 在獲取redis中購物車的數據

 3 把瀏覽器中的cookie 同步到redis中

 4 在redis中設置最新的購物車數據

 5 清除瀏覽器中的cookie數據

在用戶應用下登陸的視圖函數中添加和修改如下的代碼:

        # 獲取redis中購物車的數據
        redis_con=get_redis_connection('default')
        redis_cart=redis_con.hgetall('cart_%s' % user.id) redis_cart.update(cart_cookie) redis_con.hmset('cart_%s' %user.id,redis_cart) # 判斷頁面的url中是否有next參數如果有,返回到原來的路徑 next = request.GET.get('next') if next: response=redirect(next) else: # 登錄成功,跳轉到主頁 response=redirect(reverse("goods:index")) # 清楚瀏覽器中的cookie數據 response.delete_cookie('cart') return response

 

 登陸完整的視圖函數代碼如下:

View Code

 

 用戶登陸成功后瀏覽器中的cookie被清除了,頁面的效果如下:

 

2  在上面1的基礎上稍微修改實現把數據庫reedis和瀏覽器cookie中的購物車數據進行累加求和

業務邏輯處理如下

 1 分別取出在瀏覽器和數據庫中的購物車數據后,

 2 遍歷cookie中的購物車信息通過cookie中的鍵判斷商品在不在redis中在的話疊加,不在的話添加進去

注意的點

sku_id 從cookie取出時str類型,count是整形,redis中的sku_id和count都是是bytes類型,
1 那cookie中的sku_id在redis中查詢要轉換成bytes類型
2 把redis中的count和瀏覽器中cookie中的count想加要把redis中的count轉換成int()
    for sku_id,count in cart_cookie.items():
            # sku_id 從cookie取出時str類型,redis中是bytes類型
            sku_id=sku_id.encode() if sku_id in redis_cart: origin_count = redis_cart[sku_id] count += int(origin_count) redis_cart[sku_id]=count redis_con.hmset('cart_%s' %user.id,redis_cart)
 完整的代碼如下:
View Code
效果如下:
1 用戶登陸后查看購物車中草莓的數量為6:

2 用退出后添加一個草莓到購物車:

 

3 用戶登陸后查看合並后想加的數據:

 

4 實現用戶在購物車的頁面進行修改的操作(增減)

用戶操作的前端頁面如下所示:

前端頁面分析:

  當用戶通過增加和減少的按鈕或者直接在input框里面修改數值時,會通過ajax中的post請求的方式發送修改后的商品sku_id和數量交給后端進行判斷

  前端需要通過ajax給后端傳送的數據有sku_id和商品的數量count

后端的業務邏輯處理如下:

  1 接受前端通過post傳送的數據(sku_id,count)

  2 參數校驗

    判斷商品是否存在

    count是否是整數

    判斷庫存是否充足

  3 業務處理,保存數據

    如果用戶已登錄保存在redis中

    如果用戶未登錄保存在cookie中

  4 返回json的響應數據

 修改的視圖處理如下:

View Code

 

 

5 實現用戶可以刪除商品的信息

 當用戶點擊刪除的操作后,購物車中的數據會移除,需要給前端傳送的參數只有一個(商品的sku_id)

后端視圖函數的業務邏輯處理如下:

1 獲取參數

2 參數校驗

3 業務處理刪除購物車數據

4 返回處理的結果給前端

 刪除的視圖處理函數如下:

View Code

 

 總共有4件商品

 當用戶點擊刪除時

 前端的代碼如下:

View Code

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM