根据您提供的代码,可以通过以下步骤来实现您想要的功能:

  1. 在前端页面中,给按钮添加一个点击事件,调用goods_like函数,并传递goodsIdmemberId参数。
<button tpye="submit" onclick="goods_like(this, ${good.goods_id}, ${memberId})">
    <i class="far fa-heart"></i>
</button>
  1. 修改goods_like函数,通过AJAX请求将goodsIdmemberId传递到后端。
function goods_like(button, goodsId, memberId) {
  var likeIconElement = button.querySelector('i');

  if (likeIconElement.classList.contains('far')) {
    likeIconElement.classList.remove('far');
    likeIconElement.classList.add('fas');

    // 发送AJAX请求,调用insertLike接口
    $.ajax({
        url: '/likes/insert',
        type: 'POST',
        data: {
            goodsId: goodsId,
            memberId: memberId
        },
        success: function(response) {
            console.log('收藏成功');
        },
        error: function(error) {
            console.log('收藏失败');
        }
    });
  } else {
    likeIconElement.classList.remove('fas');
    likeIconElement.classList.add('far');

    // 发送AJAX请求,调用deleteLike接口
    $.ajax({
        url: '/likes/delete',
        type: 'POST',
        data: {
            goodsId: goodsId,
            memberId: memberId
        },
        success: function(response) {
            console.log('取消收藏成功');
        },
        error: function(error) {
            console.log('取消收藏失败');
        }
    });
  }
}
  1. 修改LikesService接口,添加根据goodsIdmemberId查询收藏记录的方法。
public interface LikesService {
    void insertLike(int goodsId, int memberId);

    void deleteLike(int goodsId, int memberId);

    Likes getLike(int goodsId, int memberId);
}
  1. 修改LikesServiceImpl类,添加根据goodsIdmemberId查询收藏记录的实现。
@Override
public Likes getLike(int goodsId, int memberId) {
    return likesMapper.getLike(goodsId, memberId);
}
  1. 修改LikesMapper接口,添加根据goodsIdmemberId查询收藏记录的方法。
@Mapper
public interface LikesMapper {
    @Insert("INSERT INTO likes (goods_id, member_id) VALUES (#{goodsId}, #{memberId})")
    void insertLike(int goodsId, int memberId);

    @Delete("DELETE FROM likes WHERE goods_id = #{goodsId} AND member_id = #{memberId}")
    void deleteLike(int goodsId, int memberId);

    @Select("SELECT * FROM likes WHERE goods_id = #{goodsId} AND member_id = #{memberId}")
    Likes getLike(int goodsId, int memberId);
}
  1. 修改LikesController类,添加查询收藏记录的接口。
@RestController
@RequestMapping("/likes")
public class LikesController {
    @Autowired
    private LikesService likesService;

    @PostMapping("/insert")
    public void insertLike(@RequestParam("goodsId") int goodsId, @RequestParam("memberId") int memberId) {
        likesService.insertLike(goodsId, memberId);
    }

    @PostMapping("/delete")
    public void deleteLike(@RequestParam("goodsId") int goodsId, @RequestParam("memberId") int memberId) {
        likesService.deleteLike(goodsId, memberId);
    }

    @GetMapping("/get")
    public Likes getLike(@RequestParam("goodsId") int goodsId, @RequestParam("memberId") int memberId) {
        return likesService.getLike(goodsId, memberId);
    }
}

通过以上步骤,您应该能够实现点击按钮后图标的变化,并且将数据加入和删除likes表中

目前已使用Spingboot框架写了如下代码:html div class=box-container div class=box theach=good$GoodsList div class=image img thsrc=downloadfilepath=+$goodpic a

原文地址: https://www.cveoy.top/t/topic/inrN 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录