python代码实现购物车(django的redis与vue)
- 安装模块
- 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()} # 如何获取商品Id 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','0')) 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',"0") gid = request.data.get('gid',"0") 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>