购物车

django-redis 和 vue 实现的购物车

• 安装模块

  • pip install django-redis

• 后端代码

  # 导包
  from django_redis import get_redis_connection
  # 购物车
  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'9':b'20',b'10':b'13'}
          if not tmp:
              return Response({
                  "status":201,
                  "msg":"购物车为空"
              })
          data = {k.decode('utf-8'):v.decode('utf-8') for k,v in tmp.items()}
          print(data)  #  {'10': '13', '9': '20'}
          #　如何获取商品Ｉｄ
          #　from now on, 循环里禁止查数据库  data.keys()  =>   dict_keys(['9','10'])
          print(list(data.keys()))  # ['9','10']
          # list = []
          # for i in data.keys():
          #     print(i)
          #     good = models.Goods.objects.filter(id=i).first()
          #     list.append(good)
          goods = models.Goods.objects.filter(id__in=data).all()
          data_list = []
          datax = {'a' + 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 = data.get('gid',0)
          count = data.get('count',0)
          # 存入redis
          key = 'cart_'+ str(uid)
          self.conn.hset(key,gid,count)
          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:;">删除</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>去结算</a></li>
          </ul>
      </div>
  </template>
  <script>
  export default {
      name:'cart',
      data() {
          return {
              goods:[],
              src:'/hou/static/goods/',
              totalPrice:0
          }
      },
      mounted(){
          this.axios({
              url:'/api/goods/cart/',
              method:'get',
              params:{"id":localStorage.getItem('uid')}
          }).then(res=>{
              this.goods = res.data.data;
              this.goods.forEach((item,index)=>{
                  this.totalPricefn(index,'');
              })
          })
      },
      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;
              }
          }
      }
  }
  </script>