django-购物车添加

商品详情页detail.html添加加入购物车按钮

<a href="javascript:;" sku_id="{{ sku.id }}" class="add_cart" id="add_cart">加入购物车</a>
....
<script>
$(‘#add_cart‘).click(function(){
            // 获取商品id和商品数量
            sku_id = $(this).attr(‘sku_id‘) // attr prop
            count = $(‘.num_show‘).val()
            csrf = $(‘input[name="csrfmiddlewaretoken"]‘).val()
            // 组织参数
            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>

视图函数views.py中添加add功能

from django.shortcuts import render
from django.views.generic import View
from django.http import JsonResponse

from goods.models import GoodsSKU
from django_redis import get_redis_connection

# Create your views here.
# 添加商品到购物车:
# 1）请求方式，采用ajax post
# 如果涉及到数据的修改(新增，更新，删除), 采用post
# 如果只涉及到数据的获取，采用get
# 2) 传递参数: 商品id(sku_id) 商品数量(count)

# ajax发起的请求都在后台，在浏览器中看不到效果
# /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->如果sku_id已经存在，更新数据， 如果sku_id不存在，添加数据
        conn.hset(cart_key, sku_id, count)

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

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

购物车页面

跳转到购物车

base.html中

 <a href="{% url ‘cart:show‘ %}" class="cart_name fl">我的购物车</a>

视图函数views.py添加CartInfoView视图功能

# /cart/
from utils.mixin import LoginRequiredMinxin  # 登录校验
class CartInfoView(LoginRequiredMinxin, View):
    ‘‘‘购物车页面显示‘‘‘
    def get(self, request):
        ‘‘‘显示‘‘‘
        # 获取登录的用户
        user = request.user
        # 获取用户购物车中商品的信息
        conn = get_redis_connection(‘default‘)
        cart_key = ‘cart_%d‘%user.id
        # {‘商品id‘:商品数量, ...}
        cart_dict = conn.hgetall(cart_key)

        skus = []
        # 保存用户购物车中商品的总数目和总价格
        total_count = 0
        total_price = 0
        # 遍历获取商品的信息
        for sku_id, count in cart_dict.items():
            # 根据商品的id获取商品的信息
            sku = GoodsSKU.objects.get(id=sku_id)
            # 计算商品的小计
            amount = sku.price*int(count)
            # 动态给sku对象增加一个属性amount, 保存商品的小计
            sku.amount = amount
            # 动态给sku对象增加一个属性count, 保存购物车中对应商品的数量
            sku.count = count
            # 添加
            skus.append(sku)

            # 累加计算商品的总数目和总价格
            total_count += int(count)
            total_price += amount

        # 组织上下文
        context = {‘total_count‘:total_count,
                   ‘total_price‘:total_price,
                   ‘skus‘:skus}

        # 使用模板
        return render(request, ‘cart.html‘, context)

模板cart.html

{% extends ‘layout/base_no_cart.html‘ %}
{% load staticfiles %}
{% block title %}天天生鲜-购物车{% endblock title %}
{% block page_title %}购物车{% endblock page_title %}
{% block body %}
    <div class="total_count">全部商品<em>{{ total_count }}</em>件</div>
    <ul class="cart_list_th clearfix">
        <li class="col01">商品名称</li>
        <li class="col02">商品单位</li>
        <li class="col03">商品价格</li>
        <li class="col04">数量</li>
        <li class="col05">小计</li>
        <li class="col06">操作</li>
    </ul>
    <form method="post" action="">
    {% for sku in skus %}
    <ul class="cart_list_td clearfix">
        <li class="col01"><input type="checkbox" name="sku_ids" value="{{ sku.id }}" checked></li>
        <li class="col02"><img src="{{ sku.image.url }}"></li>
        <li class="col03">{{ sku.name }}<br><em>{{ sku.price }}元/{{ sku.unite }}</em></li>
        <li class="col04">{{ sku.unite }}</li>
        <li class="col05">{{ sku.price }}元</li>
        <li class="col06">
            <div class="num_add">
                <a href="javascript:;" class="add fl">+</a>
                <input type="text" sku_id="{{ sku.id }}" class="num_show fl" value="{{ sku.count }}">
                <a href="javascript:;" class="minus fl">-</a>
            </div>
        </li>
        <li class="col07">{{ sku.amount }}元</li>
        <li class="col08"><a href="javascript:;">删除</a></li>
    </ul>
    {% endfor %}

    <ul class="settlements">
        {% csrf_token %}
        <li class="col01"><input type="checkbox" name="" checked=""></li>
        <li class="col02">全选</li>
        <li class="col03">合计(不含运费)：<span>¥</span><em>{{ total_price }}</em><br>共计<b>{{ total_count }}</b>件商品</li>
        <li class="col04"><input type="submit" value="去结算"></li>
    </ul>
    </form>
{% endblock body %}

{% block bottomfiles %}
    <script src="{% static ‘js/jquery-1.12.4.min.js‘ %}"></script>
    <script>
    // 计算被选中的商品的总件数和总价格
    function update_page_info() {
        // 获取所有被选中的商品的checkbox
        // 获取所有被选中的商品所在的ul元素
        total_count = 0
        total_price = 0
        $(‘.cart_list_td‘).find(‘:checked‘).parents(‘ul‘).each(function () {
            // 获取商品的数目和小计
            count = $(this).find(‘.num_show‘).val()
            amount = $(this).children(‘.col07‘).text()
            // 累加计算商品的总件数和总价格
            count = parseInt(count)
            amount = parseFloat(amount)
            total_count += count
            total_price += amount
        })
        // 设置被选中的商品的总件数和总价格
        $(‘.settlements‘).find(‘em‘).text(total_price.toFixed(2))
        $(‘.settlements‘).find(‘b‘).text(total_count)
    }

    // 计算商品的小计
    function update_goods_amount(sku_ul) {
        // 获取商品的价格和数量
        count = sku_ul.find(‘.num_show‘).val()
        price = sku_ul.children(‘.col05‘).text()
        // 计算商品的小计
        amount = parseInt(count)*parseFloat(price)
        // 设置商品的小计
        sku_ul.children(‘.col07‘).text(amount.toFixed(2)+‘元‘)
    }

    // 商品的全选和全不选
    $(‘.settlements‘).find(‘:checkbox‘).change(function () {
        // 获取全选的checkbox的选中状态
        is_checked = $(this).prop(‘checked‘)
        // 遍历商品的对应的checkbox，设置这些checkbox的选中状态和全选的checkbox保持一致
        $(‘.cart_list_td‘).find(‘:checkbox‘).each(function () {
            $(this).prop(‘checked‘, is_checked)
        })
        // 更新页面的信息
        update_page_info()
    })

    // 商品对应的checkbox状态发生改变时，设置全选checkbox的状态
    $(‘.cart_list_td‘).find(‘:checkbox‘).change(function () {
        // 获取页面上所有商品的数目
        all_len = $(‘.cart_list_td‘).length
        // 获取页面上被选中的商品的数目
        checked_len = $(‘.cart_list_td‘).find(‘:checked‘).length
        is_checked = true
        if (checked_len < all_len){
            is_checked = false
        }
        $(‘.settlements‘).find(‘:checkbox‘).prop(‘checked‘, is_checked)
        // 更新页面的信息
        update_page_info()
    })

    // 更新购物车中商品的数量
    error_update = false
    total = 0
    function update_remote_cart_info(sku_id, count) {
        csrf = $(‘input[name="csrfmiddlewaretoken"]‘).val()
        // 组织参数
        params = {‘sku_id‘:sku_id, ‘count‘:count, ‘csrfmiddlewaretoken‘:csrf}
        // 设置ajax请求为同步
        $.ajaxSettings.async = false
        // 发起ajax post请求，访问/cart/update, 传递参数:sku_id count
        // 默认发起的ajax请求都是异步的，不会等回调函数执行
        $.post(‘/cart/update‘, params, function (data) {
            if (data.res == 5){
                // 更新成功
                error_update = false
                total = data.total_count
            }
            else{
                // 更新失败
                error_update = true
                alert(data.errmsg)
            }
        })
        // 设置ajax请求为异步
        $.ajaxSettings.async = true
    }

    // 购物车商品数量的增加
    $(‘.add‘).click(function () {
        // 获取商品的id和商品的数量
        sku_id = $(this).next().attr(‘sku_id‘)
        count = $(this).next().val()

        // 组织参数
        count = parseInt(count)+1

        // 更新购物车记录
        update_remote_cart_info(sku_id, count)

        // 判断更新是否成功
        if (error_update == false){
            // 重新设置商品的数目
            $(this).next().val(count)
            // 计算商品的小计
            update_goods_amount($(this).parents(‘ul‘))
            // 获取商品对应的checkbox的选中状态，如果被选中，更新页面信息
            is_checked = $(this).parents(‘ul‘).find(‘:checkbox‘).prop(‘checked‘)
            if (is_checked){
                // 更新页面信息
                update_page_info()
            }
            // 更新页面上购物车商品的总件数
            $(‘.total_count‘).children(‘em‘).text(total)
        }
    })

    // 购物车商品数量的减少
    $(‘.minus‘).click(function () {
        // 获取商品的id和商品的数量
        sku_id = $(this).prev().attr(‘sku_id‘)
        count = $(this).prev().val()

        // 校验参数
        count = parseInt(count)-1
        if (count <= 0){
            return
        }

        // 更新购物车中的记录
        update_remote_cart_info(sku_id, count)

        // 判断更新是否成功
        if (error_update == false){
            // 重新设置商品的数目
            $(this).prev().val(count)
            // 计算商品的小计
            update_goods_amount($(this).parents(‘ul‘))
            // 获取商品对应的checkbox的选中状态，如果被选中，更新页面信息
            is_checked = $(this).parents(‘ul‘).find(‘:checkbox‘).prop(‘checked‘)
            if (is_checked){
                // 更新页面信息
                update_page_info()
            }
            // 更新页面上购物车商品的总件数
            $(‘.total_count‘).children(‘em‘).text(total)
        }
    })

    // 记录用户输入之前商品的数量
    pre_count = 0
    $(‘.num_show‘).focus(function () {
        pre_count = $(this).val()
    })

    // 手动输入购物车中的商品数量
    $(‘.num_show‘).blur(function () {
        // 获取商品的id和商品的数量
        sku_id = $(this).attr(‘sku_id‘)
        count = $(this).val()

        // 校验参数
        if (isNaN(count) || count.trim().length==0 || parseInt(count)<=0){
            // 设置商品的数目为用户输入之前的数目
            $(this).val(pre_count)
            return
        }

        // 更新购物车中的记录
        count = parseInt(count)
        update_remote_cart_info(sku_id, count)

        // 判断更新是否成功
        if (error_update == false){
            // 重新设置商品的数目
            $(this).val(count)
            // 计算商品的小计
            update_goods_amount($(this).parents(‘ul‘))
            // 获取商品对应的checkbox的选中状态，如果被选中，更新页面信息
            is_checked = $(this).parents(‘ul‘).find(‘:checkbox‘).prop(‘checked‘)
            if (is_checked){
                // 更新页面信息
                update_page_info()
            }
            // 更新页面上购物车商品的总件数
            $(‘.total_count‘).children(‘em‘).text(total)
        }
        else{
            // 设置商品的数目为用户输入之前的数目
            $(this).val(pre_count)
        }
    })

    // 删除购物车中的记录
    $(‘.cart_list_td‘).children(‘.col08‘).children(‘a‘).click(function () {
        // 获取对应商品的id
        sku_id = $(this).parents(‘ul‘).find(‘.num_show‘).attr(‘sku_id‘)
        csrf = $(‘input[name="csrfmiddlewaretoken"]‘).val()
        // 组织参数
        params = {‘sku_id‘:sku_id, ‘csrfmiddlewaretoken‘:csrf}
        // 获取商品所在的ul元素
        sku_ul = $(this).parents(‘ul‘)
        // 发起ajax post请求， 访问/cart/delete, 传递参数:sku_id
        $.post(‘/cart/delete‘, params, function (data) {
            if (data.res == 3){
                // 删除成功，异常页面上商品所在的ul元素
                sku_ul.remove()
                // 获取sku_ul中商品的选中状态
                is_checked = sku_ul.find(‘:checkbox‘).prop(‘checked‘)
                if (is_checked){
                    // 更新页面信息
                    update_page_info()
                }
                // 重新设置页面上购物车中商品的总件数
                $(‘.total_count‘).children(‘em‘).text(data.total_count)
            }
            else{
                alert(data.errmsg)
            }
        })
    })

    </script>
{% endblock bottomfiles %}

视图函数views.py中添加购物车更新和删除功能

# 更新购物车记录
# 采用ajax post请求
# 前端需要传递的参数:商品id(sku_id) 更新的商品数量(count)
# /cart/update
class CartUpdateView(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

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

        # 更新
        conn.hset(cart_key, sku_id, count)

        # 计算用户购物车中商品的总件数 {‘1‘:5, ‘2‘:3}
        total_count = 0
        vals = conn.hvals(cart_key)
        for val in vals:
            total_count += int(val)

        # 返回应答
        return JsonResponse({‘res‘:5, ‘total_count‘:total_count, ‘message‘:‘更新成功‘})

# 删除购物车记录
# 采用ajax post请求
# 前端需要传递的参数:商品的id(sku_id)
# /cart/delete
class CartDeleteView(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‘)

        # 数据的校验
        if not sku_id:
            return JsonResponse({‘res‘:1, ‘errmsg‘:‘无效的商品id‘})

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

        # 业务处理:删除购物车记录
        conn = get_redis_connection(‘default‘)
        cart_key = ‘cart_%d‘%user.id

        # 删除 hdel
        conn.hdel(cart_key, sku_id)

        # 计算用户购物车中商品的总件数 {‘1‘:5, ‘2‘:3}
        total_count = 0
        vals = conn.hvals(cart_key)
        for val in vals:
            total_count += int(val)

        # 返回应答
        return JsonResponse({‘res‘:3, ‘total_count‘:total_count, ‘message‘:‘删除成功‘})

原文地址：https://www.cnblogs.com/yifengs/p/11665093.html

时间： 2024-09-29 09:57:10

django-购物车添加的相关文章

八、Python Django数据库添加查询

Python Django数据库添加查询 对数据进行操作 一.创建记录 # pwd /root/csvt03 # ipython manage.py shell In [1]: from blog.models import Employee #(第一种方法) In [2]: Employee Out[2]: blog.models.Employee In [3]: emp = Employee() In [4]: emp.name = 'Alen' In [5]: emp.save() #(第

magento购物车添加减少数量 实时更新购物车

magento实时更新购物车商品数量 <td> <button onclick="addQtyone();" type="submit">+</button> <input id="qtyPro" name="cart[<?php echo $_item->getId() ?>][qty]" value="<?php echo $this->ge

django中添加用户

在django中添加用户,直接在auth_user表中添加会有问题,因为这里密码是加密的,可以通过manage.py shell加入 创建User: 1 >>> from django.contrib.auth.models import User 2 >>> user = User.objects.create_user('esperyong', '[email protected]', '123456') 3 # 现在一个is_active属性为True的User对

Django 购物车模板

url from django.contrib import admin from django.urls import path, re_path from django.urls import include urlpatterns = [ re_path(r'^admin/', admin.site.urls), re_path('^api/(?P<version>[v1|v2]\w+)/', include('app01.urls')), ] from django.urls impo

贝塞尔曲线实现的购物车添加商品动画效果

效果图如下: 1.activity_main.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/rly_bezier_curve_shopping_cart" android:layout_w

Django Admin 添加readonly用户

Django默认没有只读权限,只能自己实现.查看了大量的资料,总算搞定了. 修改admin.py from django.contrib.admin.util import flatten_fieldsets #引入类 class GconfAdmin(admin.ModelAdmin): list_display=('mailserver','mailsender','mail_on_off','sms_on_off') #搜索字段 search_fields=('mailserver','m

django (八) 第一个django app 添加样式表和图片

在Django中,需要把Css和图片等文件放在static files下. 然后依次创建下列文件下: polls/static/polls/style.css 然后修改style.css如下: li a { color: green; } 下一步,在polls/index.html里添加下面代码: {% load staticfiles %} <link rel="stylesheet" type="text/css" href="{% static

Android 利用二次贝塞尔曲线模仿购物车添加物品抛物线动画

0.首先,先给出一张效果gif图. 1.贝塞尔曲线原理及相关公式参考:http://www.jianshu.com/p/c0d7ad796cee 作者:许方镇. 2.原理:计算被点击 view.购物车view 以及他们所在父容器相对于屏幕的坐标. 3.在呗点击View坐标位置 父容器通过addView 增加需要完成动画的imgview. 4.自定义估值器 通过二次贝塞尔曲线公式(2个数据点,一个控制点)完成抛物线路径上的点xy坐标计算. 5.利用属性动画 +自定义估值器 完成imgview在父容

django admin 添加用户出现外键约束错误

今天在做mxonline项目时,注册了用户表进admin后,想在后台添加一个用户试试,结果出现了错误,经过一番搜索发现以下两个解决方法,不过我只用了一种 报错信息: IntegrityError: (1452, u'Cannot add or update a child row: a foreign key constraint fails (`mxonline`.`django_admin_log`, CONSTRAINT `django_admin_log_user_id_c564eba6

Django Admin Cookbook-39如何两次向Django管理员添加模型

39.如何向Django Admin后台中添加两个同样的模型? 你需要将添加两个Hero模型Admin后台中,一个作为常规管理使用,一个作为只读使用(某些用户可能只会看到只读页面). 如果你尝试两次注册相同的模型: admin.site.register(Hero) admin.site.register(Hero) 将显示如下报错: raise AlreadyRegistered('The model %s is already registered' % model.__name__) 解决