django-redis 和 vue 实现的购物车

• 安装模块

  • pip install django-redis

• 后端代码

  # 购物车
  class CartView(APIView):
      # 初始化函数
      def __init__(self):
          self.conn = get_redis_connection('default')
  
      # 获取购物车信息
      def get(self,request):
          # 读取数据
          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','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>