安装模块
pip install django-redis
后端代码
# 购物车
class CartView(APIView):
# 初始化函数
def __init__(self):
self.conn = get_redis_connection('default') # 获取购物车信息
def get(self,request):
# 读取数据 (获取前端传来的id)
uid = request.GET.get('id')
key = 'cart_{}'.format(uid) # cart_1
tmp = self.conn.hgetall(key) # {b'a9':b'20',b'a10':b'13'}
if not tmp:
return Response({
"status":201,
"msg":"购物车为空"
})
data = {k.decode('utf-8')[1:]:v.decode('utf-8') for k,v in tmp.items()}
# 如何获取商品Ｉｄ
goods = models.Goods.objects.filter(id__in=data).all()
data_list = []
datax = {k.decode('utf-8'): v.decode('utf-8') for k, v in tmp.items()} # {'a10': '13', 'a9': '20'}
for good in goods:
gid = good.id
info = {"id":gid,"name":good.name,"store":good.store,"price":float(good.price),"img":good.img,"count":datax.get('a'+str(gid))}
data_list.append(info)
return Response({
"status":200,
"msg": "",
"data":data_list
})
# 添加购物车信息
def post(self,request):
data = request.data
uid = data.get('uid','')
gid = 'a'+ str(data.get('gid',''))
count = data.get('count',0)
# 存入redis
key = 'cart_'+ str(uid)
self.conn.hset(key,gid,count)
return Response({
"msg":"已设置"
}) # 删除购物车信息
def delete(self,request):
uid = request.data.get('uid',"")
gid = request.data.get('gid',"")
key = 'cart_{}'.format(uid)
field = 'a{}'.format(gid)
tmp = self.conn.hdel(key,field)
print(tmp)
return Response({
"msg":""
})
前端
<template>
<div id='cart'>
<div class="total_count">全部商品<em>2</em>件</div>
<ul class="cart_list_th clearfix">
<li class="col01">商品名称</li>
<li class="col03">商品价格</li>
<li class="col04">数量</li>
<li class="col05">小计</li>
<li class="col06">操作</li>
</ul>
<ul class="cart_list_td clearfix" v-for="(i,index) in goods">
<li class="col01"></li>
<li class="col02"><img :src="src+i.img"></li>
<li class="col03">{{i.name}}</li>
<li class="col05">{{i.price}}元</li>
<li class="col06">
<div class="num_add">
<a href="javascript:;" class="add fl" @click="add(index)">+</a>
<input type="text" class="num_show fl" v-model="i.count">
<a href="javascript:;" class="minus fl" @click="minus(index)">-</a>
</div>
</li>
<li class="col07">{{i.count*i.price}}元</li>
<li class="col08"><a href="javascript:;" @click="delx(i.id)">删除</a></li>
</ul>
<ul class="settlements">
<li class="col01"></li>
<li class="col02"></li>
<li class="col03">合计(不含运费)：<span>¥</span><em>{{totalPrice}}</em><br>共计<b>2</b>件商品</li>
<li class="col04"><a @click="pay">去结算</a></li>
</ul>
</div>
</template>
<script>
export default {
name:'cart',
data() {
return {
goods:[],
src:'/hou/static/goods/',
totalPrice:0
}
},
// 页面加载之前获取购物车参数信息
mounted(){
// 方法共用
this.get_data()
},
methods:{
// 添加点击事件 加一
add:function(index){
this.goods[index].count++;
this.totalPricefn(index,'+');
},
// 添加点击事件 减一
minus:function(index){
if(this.goods[index].count>1){
this.goods[index].count--;
this.totalPricefn(index,'-');
} },
// 计算总价
totalPricefn:function(index,params){
if(params=='+'){
this.totalPrice += this.goods[index].price*1;
}else if(params =='-'){
this.totalPrice -= this.goods[index].price*1;
}else{
this.totalPrice += this.goods[index].price*this.goods[index].count;
}
},
// 支付
pay:function(){
let data = {
"total":this.totalPrice,
} this.axios({
url:'/api/pay/pay/',
method:'get',
params:data
}).then(res=>{
//
let url = res.data.url;
location.href = url;
})
},
// 删除商品
delx:function(id){
let data = {
'uid':localStorage.getItem('uid'),
'gid':id
}
this.axios({
url:'/api/goods/cart/',
method:'delete',
data:data
}).then(res=>{
this.get_data();
})
},
// 获取初始信息
get_data:function(){
this.axios({
url:'/api/goods/cart/',
method:'get',
params:{"id":localStorage.getItem('uid')}
}).then(res=>{
this.goods = res.data.data;
this.totalPrice = 0;
this.goods.forEach((item,index)=>{
this.totalPricefn(index,'');
}) })
}
}
}
</script>
