53 - 项目 -15 - 添加购物车

一. 商品详情页js代码

        1. 实现商品总价(detail.html)

<script type="text/javascript">

        update_goods_amount() // 一进入就调用函数

        // 计算商品总价
        function update_goods_amount() {
            // 获取商品的单价和数量
            price = $('.show_pirze').children('em').text()
            count = $('.num_show').val()
            // 计算商品的总价格
            price = parseFloat(price)
            count = parseInt(count)
            amount = price * count
            // 设置商品的总价
            $('.total').children('em').text(amount.toFixed(2) + '元')
        }


    </script>

        2. 实现添加和减少商品数量

<script type="text/javascript">
        update_goods_amount()

        // 计算商品总价
        ...

        // 增加商品的数量
        $('.add').click(function () {
            //获取商品原有的数目
            count = $('.num_show').val()
            // 加1
            count = parseInt(count) + 1
            //重新设置商品的数目
            $('.num_show').val(count)

            //更新商品总价
            update_goods_amount()
        })

        // 减少商品的数量
        $('.minus').click(function () {
            //获取商品原有的数目
            count = $('.num_show').val()
            // 减1
            count = parseInt(count) - 1
            if (count <= 0) {
                count = 1
            }
            //重新设置商品的数目
            $('.num_show').val(count)

            //更新商品总价
            update_goods_amount()
        })

  
    </script>

        3. 手动输入商品的数量

<script type="text/javascript">
        update_goods_amount()

        // 计算商品总价
        ...

        // 增加商品的数量
        ...

        // 减少商品的数量
       ...

        // 手动输入商品的数量
        $('.num_show').blur(function () {
            // 获取用户输入的数目
            count = $(this).val()
            // 校验count是否合法
            if (isNaN(count) || count.trim().length==0 || parseInt(count) <=0){
                count=1
            }
            // 重新设置商品的数目
            $(this).val(parseInt(count))
            // 更新商品的总价
            update_goods_amount()

        })

       
    </script>

二. 购物车记录添加后台

1. 添加商品到购物车

        (1). 请求方式, 采用ajax

                post: 如果涉及到数据的修改(增加,更新,删除)

                get: 如果只涉及到数据的获取

        (2). 传递参数: 商品id 商品数量

                get传参: /cart/add?sku_id=1&count=3

                post传参: ['sku_id':1, 'count':3]

                url传参: url配置时捕获参数

2. 定义视图类

# cart / views.py

from django.http import JsonResponse
from django.shortcuts import render

# Create your views here.
from django.views import View
from django_redis import get_redis_connection

from goods.models import GoodsSKU


# /cart/add
class CartAddView(View):
    """购物车记录添加"""

    def post(self, request):
        """购物车记录添加"""
        user = request.user
        if not user.is_authenticated():
            # 用户未登录
            return JsonResponse({'res': 0, 'errmsg': "请先登录"})

        # 接收数据
        sku_id = request.POST.get('sku_id')
        count = request.POST.get('count')

        # 数据校验
        if not all([sku_id, count]):
            return JsonResponse({'res': 1, 'errmsg': "数据不完整"})

        # 校验添加的商品数量
        try:
            count = int(count)
        except Exception as e:
            # 数目出错
            return JsonResponse({'res': 2, 'errmsg': "商品数目出错"})

        # 校验商品是否存在
        try:
            sku = GoodsSKU.objects.get(id=sku_id)
        except GoodsSKU.DoesNotExist:
            # 商品不存在
            return JsonResponse({'res': 3, 'errmsg': "商品不存在"})

        # 业务处理: 添加购物车记录
        conn = get_redis_connection('default')
        cart_key = 'cart_%d' % user.id
        # 先尝试获取sku_id的值 -> hget(cart_key, 属性)
        # 如果sku_id在hash中不存在,hget返回None
        cart_count = conn.hget(cart_key, sku_id)
        if cart_count:
            # 累加购物车中商品的数目
            count += int(cart_count)

        # 校验商品的库存
        if count > sku.stock:
            return JsonResponse({'res': 4, 'errmsg': "商品库存不足"})

        # 设置hash中 sku_id对应的值 -> hset(cart_key, 属性,value)
        # hset->如果sku_id存在就更新数据, 不存在就新增
        conn.hset(cart_key, sku_id, count)

        # 计算用户购物车商品的条目数
        total_count = conn.hlen(cart_key)

        # 返回应答
        return JsonResponse({'res': 5,"total_count" :total_count,'message': "添加成功"})

3. 定义路由

# cart / urls.py

from django.conf.urls import url
from cart.views import CartAddView

app_name="cart"

urlpatterns = [
    url(r'^add$',CartAddView.as_view(),name="add"), # 购物车记录添加
]

三. 购物车记录添加前端js

        商品详情页操作(detail.html)

1. 点击添加购物车

        post请求需要csrf验证

                可以在页面上随便找个地方添加 {% csrf_token %} (必须加上)

                然后页面上查看源代码,获取到 name 和 value

                请求时携带上csrf参数

                 

  <script type="text/javascript">
        update_goods_amount()

        // 计算商品总价
        ...

        // 增加商品的数量
        ...

        // 减少商品的数量
        ...

        // 手动输入商品的数量
        ...

        // 获取add_cart div元素左上角的坐标
        var $add_x = $('#add_cart').offset().top;
        var $add_y = $('#add_cart').offset().left;

        // show_count div元素左上角的坐标
        var $to_x = $('#show_count').offset().top;
        var $to_y = $('#show_count').offset().left;


        $('#add_cart').click(function () {
            // 获取商品id和数量
            sku_id = $(this).attr('sku_id')
            count = $('.num_show').val()
            csrf = $('input[name="csrfmiddlewaretoken"]').val() // 获取csrf的value
            // 组织参数
            params = {"sku_id": sku_id, "count": count,"csrfmiddlewaretoken":csrf}
            // 发起ajax post请求,访问/cart/add,传递参数: sku_id count
            $.post('/cart/add', params, function (data) {
                if (data.res == 5) {
                    // 添加成功
                    $(".add_jump").css({'left': $add_y + 80, 'top': $add_x + 10, 'display': 'block'})
                    $(".add_jump").stop().animate({
                            'left': $to_y + 7,
                            'top': $to_x + 7
                        },
                        "fast", function () {
                            $(".add_jump").fadeOut('fast', function () {
                                // 重新设置用户购物车中的条目数
                                $('#show_count').html(data.total_count);
                            });

                        });
                } else {
                    //添加失败
                    alert(data.errmsg)
                }
            })

        })
    </script>