django项目开发之cart页面

cart页面

1.购物车页面添加商品

我们在app上购买商品，都是先在商品页选择商品添加到购物车，然后从购物车结算，考虑一下怎么实现这个功能。

1.1 表的关联

商品，购物车，用户之间，可以转换为表的关联，购物车相当于关系表的角色，用户和商品之间成为多对多的关系。
首先去models.py写购物车的模型

class Cart(models.Model):
    c_user=models.ForeignKey(User)
    c_goods=models.ForeignKey(Goods)

    c_goods_num=models.IntegerField(default=1)
    c_is_select=models.BooleanField(default=True)
    class Meta:
        db_table = 'sxw_cart'

在新版本的django中，外键必须添加on_delete=models.CASCADE属性，否则会报错。外键关联到用户和商品，采用级联删除，当购物车中删除的时候，用户也删除相关信息。
执行数据迁移。

1.2 获取商品id，数量num

当点击购物车的时候，添加一个点击事件，这个事件发起了一个ajax请求，通过js，把goodsid传到后台，

market.js

 $(".addShopping").click(function(){
   
        console.log('add');
        var $add=$(this);
        var goodsid=$add.attr('goodsid');
        $.get('/sxw/addtocart/',{
   'goodsid':goodsid},function(data){
   
            console.log(data);
            if (data['status'] === 302){
   
                window.open('/sxw/login/',target="_self");
            }else if(data['status']===200){
   
                $add.prev('span').html(data['c_goods_num']);
            }
        })
    })

1.3 将商品id和num传到后台

上面的步骤已经取到了商品的id和num，接下来使用ajax传到后台。先将数据传到/sxw/addtocart/
function（data）是一个回调函数，作用是当ajax请求发起后，在后台接受到请求后，会主动调用这个函数，把数据放到data里。
写一个视图函数，因为是ajax请求，所以返回json会比较好。

def add_to_cart(request):
    goodsid=request.GET.get('goodsid')
    #获取到商品id，根据用户和商品id，获取到购物车数据
    carts=Cart.objects.filter(c_user=request.user).filter(c_goods_id=goodsid)
    #如果购物车中有该商品，该商品数量加1；如果没有，将该商品id加入购物车
    if carts.exists():
        cart_obj=carts.first()
        cart_obj.c_goods_num = cart_obj.c_goods_num + 1
    else:
        cart_obj=Cart()
        cart_obj.c_goods_id=goodsid
        cart_obj.c_user=request.user
    cart_obj.save()
    data={
   
        'status':200,
        'msg':'add success',
        'c_goods_num':cart_obj.c_goods_num
    }
    #返回购物车中该商品数量
    return JsonResponse(data=data)

最后，添加下url

 url(r'^addtocart/',views.add_to_cart,name='add_to_cart'),

1.4 从购物车移除商品

从购物车移除商品的做法与添加一样。
market.js

$(".subShopping").click(function(){
   
    console.log('sub');
    var $sub=$(this);
    var goodsid=$sub.attr('goodsid');
    $.get('/sxw/subtocart/',{
   'goodsid':goodsid},function(data){
   
        console.log(data);
        if (data['status'] === 302){
   
            window.open('/sxw/login/',target="_self");
        }else if(data['status']===200){
   
            $sub.prev('span').html(data['c_goods_num']);
        }
    })
})

视图函数

def sub_to_cart(request):
    goodsid = request.GET.get('goodsid')
    carts = Cart.objects.filter(c_user=request.user).filter(c_goods_id=goodsid)
    data = {
   
        'status': 200,
        'msg': 'add success',
    }
    if carts.exists()