Vue前端商品的添加收藏，删除收藏以及清空收藏的操作（基于vant-ui）

Vue前端商品的添加收藏，删除收藏以及清空收藏的操作

---

1. 添加收藏

• 达到的效果：效果就是在商品详情页点击收藏的时候收藏的那个icon高亮变为红色，同时呢，向后台传输收藏商品的数据，使用户在“我的收藏”列表里面可以看到这个商品；当然了，在初始化页面的时候我们要先写一个方法判断一下这个用户是否已经收藏这个商品，如果已经收藏了，这里的icon在初始化的时候就应该是红色。
  
• **html：**这里我是用了vant-ui的一个底部组件van-goods-action，做了大改，部分代码如下：

	  <div class="ACTION">
          <van-goods-action >
          //收藏按钮，绑定一个爱心的icon、绑定颜色likecolor、绑定点击事件like
            <van-goods-action-icon icon="like-o"  @click="like" :color="likeColor" text="收藏"/>
            <van-goods-action-icon icon="cart-o" @click="goCar" :info="cartCount" text="拼的车"/>
            <van-goods-action-button type="warning" text="加入拼的车" @click="addCar" />
            <van-goods-action-button type="danger" text="立即拼" @click="onDeal" />
          van-goods-action>
      div>

• script：

export default {
  data () {
    return {
      ifLike:false,
      likeColor:'black',
      likeList:[],
      token:'',
      jobId:''
    }
  },
  methods:{
    //初始化页面时判断是否已收藏，向后端请求获取一下收藏列表
    init(){
      this.$axios({
        method: 'get',
        url: '/job/list',
        headers: {
            'Content-Type': "application/json;charset=UTF-8",
            'Authorization': 'Bearer ' + this.token,
        },
        params: {
          wid:this.jobId
        }
      })
      .then(res=>{                    //请求成功后执行函数
        if(res.data.code === 0){
          //把收藏列表放进空数组likelist[]
          var res = res.data.data;
          this.likeList=res
          //对获取的收藏列表数组likelist进行遍历，再用if语句看列表里面是否有id跟本页面商品id一样的元素
          this.likeList.forEach(item=>{
          //用if语句看列表里面是否有id跟本页面商品id一样的元素
            if(item.id==this.jobId){
            //如果有，改变下icon的颜色
                this.likeColor='red';
                this.ifLike = true;
                console.log("已收藏");
            }
          })
        }else{
          console.log("err")
        }
      })
      .catch(err=>{                   //请求错误后执行函
        console.log("请求错误")
      })
    },
        
        //点击收藏事件，向后台数据库插入一条新数据
    like() {
        if(this.ifLike === false) {
        	this.$axios({
        	method: 'post',
        	url: '/job/insert',
        	headers: {
            	'Content-Type': "application/json;charset=UTF-8",
            	'Authorization': 'Bearer ' + this.token,
        	},
        	params: {
          		wid:this.jobId
        	}
      		})
      	.then(res=>{                    //请求成功后执行函数
        	if(res.data.code === 0){
                this.likeColor='red';
                this.ifLike = true;
                console.log("收藏成功");
        	}else{
          		console.log("err")
        	}
      	})
      	.catch(err=>{                   //请求错误后执行函
        	console.log("请求错误")
      	})
        }
    },

    goCar(){
    	this.$router.push("/car");        
    },
    
    },
created(){
	this.token =  localStorage.getItem('token'),
    this.jobId = localStorage.getItem('jobId'),
    this.init()
 },
  components: {
    [GoodsAction.name]: GoodsAction,
    [GoodsActionIcon.name]: GoodsActionIcon,
    [Icon.name]: Icon,
    [GoodsActionButton.name]: GoodsActionButton,
  }
}

2. “我的收藏”页面收藏的删除与清空

• 要达到的效果：点击单个item的删除按钮，页面快速删除，同时向后端发出请求删除数据库中的item。点击清空全部同样如此。
  
  - html：

    //删除按钮，绑定点击事件，且附带两个参数，index是前端的索引，item.id是列表项的id
    <el-button type="primary" size="mini" @click="dellike(index,item.id)" round>删除el-button>
	<div class="footer">
	//清空全部按钮，绑定事件clear
    	<el-button class="footer" type="primary" style="font-size:16px;font-family:'微软雅黑';width:100%" @click="clear" round>清空全部el-button>
	div>

- script：

<script>
export default {
  data () {
    return {
      List: [],
      token:''
    }
  },
  methods: {
    //清空全部
    clear(){
    //首先在前端快速让list变成空数组
        this.List=[];
        //请求后端数据库清空列表
        this.$axios({
        method: 'get',
        	url: '/job/clear',
        	headers: {
            	'Content-Type': "application/json;charset=UTF-8",
            	'Authorization': 'Bearer ' + this.token,
        	}
      	})
      .then(res=>{                    //请求成功后执行函数
        if(res.data.code === 0){
          console.log("清空成功")
        }else{
          console.log("清空失败")
        }
      })
      .catch(err=>{                   //请求错误后执行函
        console.log("请求错误")
      })
      },
      
     //单个item的删除  
    dellike(index,e){
      this.List.splice(index,1)//'1' 获取item的前台索引值，从这个索引值开始删除，1代表删除一个
      //请求后端数据库删除item
      this.$axios({
        method: 'get',
        url: '/job/remove',
        headers: {
            'Content-Type': "application/json;charset=UTF-8",
            'Authorization': 'Bearer ' + this.token,
        },
        params:{
          wid:e
        }
      })
      .then(res=>{                    //请求成功后执行函数
        if(res.data.code === 0){
          console.log("删除成功")
        }else{
          console.log("删除失败")
        }
      })
      .catch(err=>{                   //请求错误后执行函
        console.log("请求错误")
      })
    },
    //页面初始化时获取收藏列表
    getList() {
     this.$axios({
        method: 'get',
        url: '/job/list',
        headers: {
            'Content-Type': "application/json;charset=UTF-8",
            'Authorization': 'Bearer ' + this.token,
        }
      })
      .then(res=>{                    //请求成功后执行函数
        if(res.data.code === 0){
          //定义从后端获取的joblist
          var res = res.data.data
          this.List = res
          
          console.log("获取成功")
        }else{
          console.log("获取失败")
        }
      })
      .catch(err=>{                   //请求错误后执行函
        console.log("请求错误")
      })
    },
   //获取token
  created(){
        this.token =  localStorage.getItem('token')
        },
  mounted: function () {
      this.getList()
  },
}
</script>

本篇文章如有错的地方，欢迎在评论指正。喜欢在微信看技术文章，可以微信搜索「胡录乱影」，回复【Python】【前端基础】【vue开发】即可获得视频资源，回复【答辩PPT】【演讲PPT】即可获得超级实用PPT模板，还有更多资料，建议后台留言或者直接私信我。

另，如果觉得这本篇文章写得不错，有点东西的话，各位人才记得来个三连【点赞+关注+分享】。