SpringBoot 实现商品收藏功能：点击按钮切换图标并更新数据库

根据您提供的代码，可以通过以下步骤来实现您想要的功能：\n\n1. 在前端页面中，给按钮添加一个点击事件，调用goods_like函数，并传递goodsId和memberId参数。\n\nhtml\n<button tpye="submit" onclick="goods_like(this, ${good.goods_id}, ${memberId})">\n <i class="far fa-heart"></i>\n</button>\n\n\n2. 修改goods_like函数，通过AJAX请求将goodsId和memberId传递到后端。\n\njavascript\nfunction goods_like(button, goodsId, memberId) {\n var likeIconElement = button.querySelector('i');\n\n if (likeIconElement.classList.contains('far')) {\n likeIconElement.classList.remove('far');\n likeIconElement.classList.add('fas');\n\n // 发送AJAX请求，调用insertLike接口\n $.ajax({\n url: '/likes/insert',\n type: 'POST',\n data: {\n goodsId: goodsId,\n memberId: memberId\n },\n success: function(response) {\n console.log('收藏成功');\n },\n error: function(error) {\n console.log('收藏失败');\n }\n });\n } else {\n likeIconElement.classList.remove('fas');\n likeIconElement.classList.add('far');\n\n // 发送AJAX请求，调用deleteLike接口\n $.ajax({\n url: '/likes/delete',\n type: 'POST',\n data: {\n goodsId: goodsId,\n memberId: memberId\n },\n success: function(response) {\n console.log('取消收藏成功');\n },\n error: function(error) {\n console.log('取消收藏失败');\n }\n });\n }\n}\n\n\n3. 修改LikesService接口，添加根据goodsId和memberId查询收藏记录的方法。\n\njava\npublic interface LikesService {\n void insertLike(int goodsId, int memberId);\n\n void deleteLike(int goodsId, int memberId);\n\n Likes getLike(int goodsId, int memberId);\n}\n\n\n4. 修改LikesServiceImpl类，添加根据goodsId和memberId查询收藏记录的实现。\n\njava\n@Override\npublic Likes getLike(int goodsId, int memberId) {\n return likesMapper.getLike(goodsId, memberId);\n}\n\n\n5. 修改LikesMapper接口，添加根据goodsId和memberId查询收藏记录的方法。\n\njava\n@Mapper\npublic interface LikesMapper {\n @Insert("INSERT INTO likes (goods_id, member_id) VALUES (#{goodsId}, #{memberId})")\n void insertLike(int goodsId, int memberId);\n\n @Delete("DELETE FROM likes WHERE goods_id = #{goodsId} AND member_id = #{memberId}")\n void deleteLike(int goodsId, int memberId);\n\n @Select("SELECT * FROM likes WHERE goods_id = #{goodsId} AND member_id = #{memberId}")\n Likes getLike(int goodsId, int memberId);\n}\n\n\n6. 修改LikesController类，添加查询收藏记录的接口。\n\njava\n@RestController\n@RequestMapping("/likes")\npublic class LikesController {\n @Autowired\n private LikesService likesService;\n\n @PostMapping("/insert")\n public void insertLike(@RequestParam("goodsId") int goodsId, @RequestParam("memberId") int memberId) {\n likesService.insertLike(goodsId, memberId);\n }\n\n @PostMapping("/delete")\n public void deleteLike(@RequestParam("goodsId") int goodsId, @RequestParam("memberId") int memberId) {\n likesService.deleteLike(goodsId, memberId);\n }\n\n @GetMapping("/get")\n public Likes getLike(@RequestParam("goodsId") int goodsId, @RequestParam("memberId") int memberId) {\n return likesService.getLike(goodsId, memberId);\n }\n}\n\n\n通过以上步骤，您应该能够实现点击按钮后图标的变化，并且将数据加入和删除likes表中。