介绍
购物车模块是我第一次遇到的这样的情况，购物车其实是将商品与用户进行多对多连接的一个中间环节。人对购物车是一对多，购物车对商品也是一对多，这样就实现了商品与人的多对多。（第一次接触多对多的关系）。另外购物车实现了商品与人关系的暂时储存，提交订单后要清空购物车。
1. model类的建立
这里的一个cart对象，并不是现实生活中的 购物车 ，一个cart对象相当于一个购物车 中的一个商品格子，储存了一种商品和商品的所有者，及商品的数量。所有的cart组成一个用户的购物车。
#用户 与 商品的 联系 是多对多的
#购物车 充当中间 环节，与 用户 一对多，同时 与 商品一对多
class Cart(models.Model):
user = models.ForeignKey('df_user.User')
goods = models.ForeignKey('df_goods.GoodInfo')
count = models.IntegerField()
2. 视图函数
1.购物车显示页面
这个页面就是根据用户获取所有的cart对象，传入模板，然后提取出商品信息和数量并加载
@user_decorator.login
def cart(request):
uid = request.session.get('uid')
carts = Cart.objects.filter(user_id=uid)
context = {'title': '购物车',
'name': 1,
'carts': carts}
return render(request, 'df_cart/cart.html', context)
2.加入购物车的视图函数
在模板中加入购物车的视图函数是通过ajax异步发送的，这样的化需要返回json格式的数据。传入参数为商品id和数量
@user_decorator.login
def add(request,gid,gcount):
gid = int(gid)
gcount = int(gcount)
uid = request.session.get('uid')
carts = Cart.objects.filter(goods_id=gid,user_id=uid)
#先判断 该用户 购物车中 是否 存在 该商品
#如果纯在，则仅作数量上的 加法
if len(carts) >= 1:
cart = carts[0]
cart.count += gcount
else:
cart = Cart()
cart.user_id = uid
cart.goods_id =gid
cart.count =gcount
cart.save()
#判断请求方式 是否是ajax，若是则返回json格式的 商品数量即可
if request.is_ajax():
count = Cart.objects.filter(user_id=uid).count()
return JsonResponse({'count':count})
else:
return redirect('/cart')
3.接下来是编辑购物车信息的请求函数
同样编辑购物车中的商品，数量信息也是通过ajax来异步请求的
def edit(request,cid,gcount):#传入 cart id 和 count 改变Cart
try:
cart = Cart.objects.get(pk=int(cid))
cart.count = int(gcount)
cart.save()
except:
return JsonResponse({'count':gcount})
#如果错误就将原来的数量返回去
return JsonResponse({'count':0})
4.最后是删除一行 购物车中的商品的 请求函数
直接做物理删除
def delete(request,cid):
try:
cart=Cart.objects.get(pk=int(cid))
cart.delete()
data ={'ok':1}
except:
data={'ok':0}
return JsonResponse(data)
3. 模板和js
购物车是用到js最多的地方，商品数量的加减，加入购物车，顶部购物车显示商品类别数量，小计与总计，从页面上删除一行商品。
1.购物车显示页面的js
<script>
$(function () {
total();
{# 全选全消#}
$('#check_all').click(function () {
{# 获取当前全选框的状态#}
state=$(this).prop('checked');
{# 将其他的选矿 都设置成这个状态#}
$(':checkbox:not(#ckeck_all)').prop('checked',state)
});
//选择
$(':checkbox:not(#check_all)').click(function () {
if($(this).prop('checked')){
alert($(':checked').length)
if($(':checked').length+1==$(':checkbox').length
){ $('#ckeck_all').prop('checked',true)
}
}
else{
$('#check_all').prop('checked',false)
}
});
//数量加
//为所有的 add绑定点击事件
$('.add').click(function () {
txt=$(this).next();
//数值加1，同时取消 焦点
txt.val(parseFloat(txt.val())+1).blur()
});
$('.minus').click(function () {
txt=$(this).prev();
//数值加1，同时取消 焦点
txt.val(parseFloat(txt.val())-1).blur()
});
//在blur事件里ajax 提交
$('.num_show').blur(function () {
count=$(this).val();
if(count<=0){
alert('数量不能小于0');
return
}else {};
id = $(this).parents('.cart_list_td').attr('id');
$.get('/cart/edit_'+id+'_'+count,function (data) {
if(data.count==0){
//修改成功，计算总价
alert('ok')
total();
}
else {
//修改失败,改为原来 的值（回掉回来原来的值）
$(this).val(data.count)
}
})
})
})
function cart_del(cart_id) {
del = confirm('确定删除');
if(del){
$.get('/cart/delete/'+cart_id,function (data) {
if(data.ok==1){
//删掉哪一行 商品
$('ul').remove('#'+cart_id);
total();
}
})
}
}
function total(){
total1=0;
total_count=0;
$('.col07').each(
function () {
//获取数量
count=$(this).prev().find('input').val();
//获取单价
price = $(this).prev().prev().text();
//计算小计
total0=parseFloat(count)*parseFloat(price);
//显示小计
$(this).text(total0.toFixed(2));
//加到总计上
total1 += total0;
total_count++;
});
//显示总计
$('#total').text(total1.toFixed(2));
$('.total_count1').text(total_count);
}
function go_order() {
s = '';
$(':checked:not(#check_all)').each(function () {
id = $(this).parents('.cart_list_td').attr('id');
s = s +'cart_id='+id + '&'
})
//删掉最后一个&
s=s.substring(0,s.length-1);
alert(s);
location.href = '/order?'+s ;
}
</script>
2.详情页加入购物车的js
里面的动画效果看不懂，但是主要请求看懂就行了
<script type="text/javascript">
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() {
{# 先判断是否登录#}
{# alert('点击');#}
if ($('.login_btn fl').text().indexOf('登录') >= 0) {
alert('请登陆后购买');
location.href('/user/login')
return
};
{# alert('ok');#}
$(".add_jump").stop().animate({
'left': $to_y + 7,
'top': $to_x + 7
},
"fast", function () {
$(".add_jump").fadeOut('fast', function () {
count =$('.num_show').val();
$.get('/cart/add_{{ goods.id }}_'+count.toString(),function (data) {
$('#show_count').html(data.count);
})
});
});
})
</script>
购物车基本完成了，收获很大，下一个是订单模块。
网友评论