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

最新推荐文章于 2024-05-24 16:34:03 发布

bentou_

最新推荐文章于 2024-05-24 16:34:03 发布

阅读量6.6k

点赞数 18

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/bentou_/article/details/105400985

版权

前端专栏收录该内容

24 篇文章 2 订阅

订阅专栏

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>