Detail.vue--js
 filters:{
      pInt(val){
        let a = parseInt(val);
        if (a < 10){
          a = `0${a}`;
        }
         a
      }
    }

 cart/views.py
 AddCartView:
    
     请求头必须携带着token
    permission_classes = [IsAuthenticated,]  添加用户认证
     add:
        user_id = request.user.id  获取真实的用户id
        '''
        request = user_obj
        '''
    

 Detail.vue 添加购物车
    methods: {

      addCart(){

        let token = localStorage.token || sessionStorage.token;

         (token){
          this.$axios.post(`${this.$settings.Host}/users/verify/`,{
              token:token,}).then((res)=>{
    this.$settings.Host}/cart/add_cart/`,{
                course_id:this.course_id,},{
               向后端提交数据需要加上header项,将token也要提交过去
              headers:{
                'Authorization':'jwt ' + token
              }
            }).then((res)=>{
                .$message.success(res.data.msg);
                console.log('>>>>>',.$store)
                this.$store.commit('add_cart',res.data.cart_length) ;
                console.log(.$store.state);
              })

            }).catch((error)=>{
             ......
            })


        } else {
          ......
              })
        }

      },

 Cart.vue 购物车页面
created() {
    let token = sessionStorage.token || localStorage.token;
     (token){

       查看购物车页面也要携带token 否则不能查看
         headers:{
                'Authorization':'jwt ' + token
              }
      })
      .then((res)=>{
        this.cart_data_list = res.data.cart_data_list
      })
      ..$message.error(error.response.data.msg);
      })

 cart/views.py

 AddCartView:
 cart_list(self,request):
       ......
        cart_data_list.append({
           ......
            real_price: course_obj.real_price(),......
        })
       ......

 cartitem.vue ="cart_column column_4">¥{{cart.real_price}}>

 AddCartView:
     change_select(self,request):
        
         拿到课程id
        course_id = request.data.get(course_id)
        
         校验课程id合法性
        try:
            models.Course.objects.get(id=course_id)
        except:
            return Response({msg': 课程不存在，不要乱搞！'},status=status.HTTP_400_BAD_REQUEST)
        
         拿到user_id
        user_id = request.user.id
        
         去redis数据库：cart
        conn = get_redis_connection(cart redis存数据-用集合存:用户id：勾选课程id
        conn.sadd(selected_cart_%s' % user_id,course_id)
        
        ':勾选成功})   
    
        cancel_select(self,request):
        course_id = request.data.get()

        status.HTTP_400_BAD_REQUEST)

        user_id = request.user.id
        conn = get_redis_connection(')   1:{1,3}
        conn.srem(恭喜你！少花钱了，但是你真的不学习了吗！'}) 

 cart/urls.py
from django.urls  path,re_path
from .  views

urlpatterns = [
    path(add_cart/postaddgetcart_listpatchchange_selectputcancel_select'}))  不同的请求方法走不同函数

]

 当用户点击前面的勾选框时，会改变selected的值
近而会被watch监听到
在监听中 无论是选中还是取消选中都会触发父级标签重新计算价格的动作（this.$emit） el-checkBox ="my_el_checkBox" v-model="cart.selected"></el-checkBox>

 Cartitem.vue
watch:{

      'cart.selected':function (){
          
         添加选中
        let token = localStorage.token || sessionStorage.token;
        if (.cart.selected){
          this.$axios.patch(`${.cart.course_id,{
            headers:{
              'Authorization':'jwt ' + token
            }
          }).then((res)=>.$message.success(res.data.msg);
            this.$emit('cal_t_p')  触发cart组件计算商品总价格的方法
          })..$message.error(res.data.msg);
          })
        }
         {
            
           取消选中
          this.$axios.put(`${.$message.error(res.data.msg);
          })
        }
      },}

 Cart.vue -->
 ="cart_course_list">
     
     CartItem v-for="(value,index) in cart_data_list" :key="index" :cart="value" @cal_t_p="cal_total_price"CartItem>

 Cart.vue
methods:{
    cal_total_price(){
        
        let t_price = 0
        this.cart_data_list.forEach((v,k)=>{  v是值 k是索引
           (v.selected){
            t_price += v.real_price
          }
        })
        this.total_price = t_price

      }
}

 request.user.id

        conn = get_redis_connection()

        conn.delete( user_id)
        ret = conn.hgetall(cart_%s' % user_id)   dict {b'1': b'0',b'2': b'0'}
        cart_data_list = []
        
        for cid,eid  ret.items():
                course_id = cid.decode(utf-8')  取出用户购物车里的课程id(redis中存着呢)
                expire_id = eid.decode( 取出用户购物车里的有效期id(redis中存着呢)

                course_obj = models.Course.objects.get(id=course_id)  根据课程id,通过ORM查询得到课程对象，在下面就可以通过课程对象.字段 取到对应课程的参数信息

                cart_data_list.append({
                    : course_obj.id,name: course_obj.name,1)">course_img': constants.SERVER_ADDR + course_obj.course_img.url,1)">price: course_obj.price,1)">expire_id: expire_id,1)">selected': False,1)"> 默认没有勾选
                })
         Exception:
            logger.error(获取购物车数据失败)
            后台数据库出问题了,请联系管理员status.HTTP_507_INSUFFICIENT_STORAGE)

        xxxcart_data_list: cart_data_list})
    

)
     用户刷新页面时,从redis中删除用户对应的课程id
    conn.delete( user_id)
    ret = conn.hgetall( user_id)  
    ......