天天生鲜Django项目（六）

最新推荐文章于 2021-02-04 22:57:59 发布

龙舌兰小伙

最新推荐文章于 2021-02-04 22:57:59 发布

阅读量235

点赞数

分类专栏： Linux python 文章标签： django python

本文链接：https://blog.csdn.net/qq_40843987/article/details/106975484

版权

本文档介绍了在Django项目中实现购物车功能的详细步骤，包括添加购物车的前后端实现、购物车页面展示、商品数量更改及删除功能。涉及到前端数据传递、后端视图类定义、路由配置、模板修改以及AJAX交互。同时，讨论了为何在某些场景下不使用mixin进行用户登录验证的原因。

摘要由CSDN通过智能技术生成

45、详情页商品数量前端

<!-- templates/detail.html 底部代码块 -->

{% block bottomfiles %}
	<script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js'%}"></script>
	<script type="text/javascript">
        update_goods_amount()
        //计算商品总价格
        function update_goods_amount(){
            price = $('.show_pirze').children('em').text()
            count = $('.num_show').val()
            amount = parseFloat(price) * parseInt(count)
            $('.total').children('em').text(amount.toFixed(2) + '元')
        }
        //增加商品数量
        $('.add').click(function () {
            count = $('.num_show').val()
            count = parseInt(count) + 1
            $('.num_show').val(count)
            update_goods_amount()
        })
        //减少商品数量
        $('.minus').click(function () {
            count = $('.num_show').val()
            count = parseInt(count) - 1
            if(count < 1)count = 1
            $('.num_show').val(count)
            update_goods_amount()
        })
        //手动输入商品数量
        $('.num_show').blur(function () {
            count = $(this).val()
            if(isNaN(count) || count.trim().length == 0 || parseInt(count) <= 0)count = 1
            $(this).val(parseInt(count))
            update_goods_amount()
        })

		var $add_x = $('#add_cart').offset().top;
		var $add_y = $('#add_cart').offset().left;

		var $to_x = $('#show_count').offset().top;
		var $to_y = $('#show_count').offset().left;

		$(".add_jump").css({'left':$add_y+80,'top':$add_x+10,'display':'block'})
		$('#add_cart').click(function(){
			$(".add_jump").stop().animate({
				'left': $to_y+7,
				'top': $to_x+7},
				"fast", function() {
					$(".add_jump").fadeOut('fast',function(){
						$('#show_count').html(2);
					});
			});
		})
	</script>
{% endblock bottomfiles %}

46、添加购物车后端、前端

确定前端是否传递数据，什么数据，什么格式？

确定前端的访问方式，get，post？

确定后端返回什么数据，什么格式？

定义视图类：

# cart/views.py

from django.http import JsonResponse
from django.views import View
from django_redis import get_redis_connection

from apps.goods.models import GoodsSKU


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在cart_key这个hash中不存在，hget不会报错，返回None
        cart_count = conn.hget(cart_key, sku_id)
        # 如果已有记录，那么总数是count+已有记录；如果没有记录，总数是count
        if cart_count:
            count += int(cart_count)
        if count > sku.stock:
            return JsonResponse({'res': 4, 'errmsg': '库存不足'})
        conn.hset(cart_key, sku_id, count)

        # 计算购物车中的条目数
        total_count = conn.hlen(cart_key)

        return JsonResponse({'res': 5, 'errmsg': '添加成功', 'total_count': total_count})

配置路由：

# cart/urls.py

from django.urls import path
from apps.cart.views import *

app_name = 'cart'

urlpatterns = [
    path('add', CartAddView.as_view(), name='add'),  # 购物车记录添加
]

前端js：

<!-- templates/detail.html 底部代码块 -->

{% block bottomfiles %}
	<script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js'%}"></script>
	<script type="text/javascript">
        update_goods_amount()
        //计算商品总价格
        function update_goods_amount(){
            price = $('.show_pirze').children('em').text()
            count = $('.num_show').val()
            amount = parseFloat(price) * parseInt(count)
            $('.total').children('em').text(amount.toFixed(2) + '元')
        }
        //增加商品数量
        $('.add').click(function () {
            count = $('.num_show').val()
            count = parseInt(count) + 1
            $('.num_show').val(count)
            update_goods_amount()
        })
        //减少商品数量
        $('.minus').click(function () {
            count = $('.num_show').val()
            count = parseInt(count) - 1
            if(count < 1)count = 1
            $('.num_show').val(count)
            update_goods_amount()
        })
        //手动输入商品数量
        $('.num_show').blur(function () {
            count = $(this).val()
            if(isNaN(count) || count.trim().length == 0 || parseInt(count) <= 0)count = 1
            $(this).val(parseInt(count))
            update_goods_amount()
        })

		var $add_x = $('#add_cart').offset().top;
		var $add_y = $('#add_cart').offset().left;

		var $to_x = $('#show_count').offset().top;
		var $to_y = $('#show