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()}
        #　如何获取商品Ｉｄ
        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>