1.渲染页面： 

<!--        收藏-->
        <div>
<!--          已收藏  如果iscollect为true显示已收藏，绑定取消收藏功能-->
          <el-button class="collect" v-if="isCollect" style="background-color: #99a9bf " @click="delCollect" type="primary">已收藏</el-button>
<!--          未收藏  绑定点击收藏按钮-->
          <el-button class="collect" v-else style="background-color: deepskyblue"@click="addCollect" type="primary">未收藏</el-button>
        </div>

2.创建一个isCollect来判断商品是否处于收藏状态（true已收藏，false未收藏，默认为false）

3.在页面创建时挂载init()初始方法查看该商品状态

 设置初始方法init()，查看该商品是在否用户收藏列表中，若已经收藏将isCollect状态改为true

 4.创建收藏和取消收藏方法

这个收藏功能是在商品详情页下实现的，需要在主页面获得所有商品的id，并传到商品详情页面，才可调用一些后端的接口。

    /*点击收藏商品*/
    addCollect(){
      this.gid=this.$route.params.gid;
      /*判断如果没有收藏则执行收藏商品接口*/

        this.axios.post("http://localhost:8100/insertCollection/"+this.gid).then(res=>{
          /*如果接口返回成功则将isCollect状态改为true*/
          if(res.data.length){
            this.isCollect = true;
            alert("收藏成功")
          }else(
            alert("收藏失败")
          )
        })

    },
    /*点击取消收藏商品*/
    delCollect(){
      this.gid=this.$route.params.gid;
      /*判断如果已经收藏则执行取消收藏商品接口*/

        this.axios.delete("http://localhost:8100/deleteCollection/"+this.gid).then(res=>{
          /*如果接口返回成功则将isCollect状态改为true*/
          if(res.data.length){
            this.isCollect = false;
            alert("取消收藏成功")
          }else(
            alert("取消收藏失败")
          )
        })

    }

后端代码： 建议使用MybatisPlus，减少工作量，也可以自己写sql语句，就是会麻烦一点。

package com.example.auction_java.controller;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.example.auction_java.entity.Collection;
import com.example.auction_java.mapper.CollectionMapper;
import com.example.auction_java.service.CollectionService;
import com.example.auction_java.service.GoodsService;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.thymeleaf.util.StringUtils;

import javax.servlet.http.HttpSession;
import java.sql.Wrapper;
import java.util.Date;
import java.util.List;

@RestController
public class CollectionController {
    @Autowired
    GoodsService goodsService;
    @Autowired
    CollectionMapper collectionMapper;
    @Autowired
    CollectionService collectionService;
    // 新增收藏
    @ApiOperation("新增收藏")
    @PostMapping("/insertCollection/{gid}")
    public String insertCollection(@PathVariable("gid") String gid,HttpSession session){
        Collection collection = new Collection();
        if(StringUtils.isEmpty(gid)){
            return "未选中商品";
        }else {
            // 获取商品gid
            collection.setGid(Integer.parseInt(gid));
        }
        // 获取用户id
        Integer uid = (Integer) session.getAttribute("uid");

        if(uid==null){
            return "请登陆后在收藏";
        }else {
            collection.setUid(uid);
        }
        // 获取商品名称
        collection.setGoodsname(goodsService.getGoodsnameById(Integer.parseInt(gid)));
        // 获取商品价格
        collection.setGoodsprice(goodsService.getGoodsPriceById(Integer.parseInt(gid)));
        // 获取商品图片链接
        collection.setGoodspicture(goodsService.getGoodspictureById(Integer.parseInt(gid)));
        // 添加收藏时间
        collection.setAddtime(new Date());
        // 添加收藏状态
        collection.setStatus("isCollectioned");
        // 操作数据库  mybatisplus
        int insertCollection = collectionMapper.insert(collection);
        if(insertCollection>0){
            return "收藏成功";
        }else {
            return "收藏失败";
        }
    }

    // 查看我的收藏列表
    @ApiOperation("查看我的收藏列表")
    @GetMapping("/checkCollection")
    public List<Collection> checkCollection(HttpSession session){
        QueryWrapper<Collection> wapper = new QueryWrapper<>();
        Integer uid = (Integer) session.getAttribute("uid");
        wapper .eq("uid",uid);
        List<Collection> collectionlist = collectionMapper.selectList(wapper);
        return collectionlist;
    }
    // 取消收藏
    @ApiOperation("取消收藏")
    @DeleteMapping ("/deleteCollection/{gid}")
    public String deleteCollection(@PathVariable("gid") Integer gid){
        collectionService.deleteCollection(gid);
        return "删除成功";
    }

    // 判断当前商品是否被收藏
    @ApiOperation("判断当前商品是否被收藏")
    @GetMapping("/isCollect/{gid}")
    public List<Collection> isCollect(@PathVariable("gid") Integer gid){
        // 如果该gid未在收藏表中
        QueryWrapper<Collection> wapper = new QueryWrapper<>();
        wapper .eq("gid",gid);
        List<Collection> collections = collectionMapper.selectList(wapper);
        return collections;
    }
}

效果展示：