实现商品收藏功能：前端JavaScript和后端Java代码示例

\n\n \n\njs\nfunction goods_like(button) {\n var likeIconElement = button.querySelector('i');\n var goodsId = button.getAttribute('data-goods-id');\n var memberId = button.getAttribute('data-member-id');\n\n if (likeIconElement.classList.contains('far')) {\n // 发送添加收藏的请求\n axios.post('/likes/insert', { goodsId, memberId })\n .then(() => {\n likeIconElement.classList.remove('far');\n likeIconElement.classList.add('fas');\n })\n .catch(error => {\n console.error(error);\n });\n } else {\n // 发送取消收藏的请求\n axios.post('/likes/delete', { goodsId, memberId })\n .then(() => {\n likeIconElement.classList.remove('fas');\n likeIconElement.classList.add('far');\n })\n .catch(error => {\n console.error(error);\n });\n }\n}\nmysql有新表名：likes，里面有goods_id和member_id。一个member表，表里有member_id，goods表里有goods_id。\n\njava已经有LikeService类\npublic interface LikesService {\n public void insertLike(int goods_Id, int member_Id);\n\n public void deleteLike(int goods_Id, int member_Id);\n\n}\nLikesController类\n@RestController\n@RequestMapping("/likes")\npublic class LikesController {\n\n @Autowired\n private LikesService likesService;\n\n @PostMapping("/insert")\n public void insertLike(@RequestBody Likes likes) {\n likesService.insertLike(likes.getGoodsId(), likes.getMemberId());\n }\n\n @PostMapping("/delete")\n public void deleteLike(@RequestBody Likes likes) {\n likesService.deleteLike(likes.getGoodsId(), likes.getMemberId());\n }\n}\n\nLikesServiceImpl类\n@Service\npublic class LikesServiceImpl implements LikesService {\n\n @Autowired\n private LikesMapper likesMapper;\n\n @Override\n public void insertLike(int goodsId, int memberId) {\n likesMapper.insertLike(goodsId, memberId);\n }\n\n @Override\n public void deleteLike(int goodsId, int memberId) {\n likesMapper.deleteLike(goodsId, memberId);\n }\n}\nLikesMapper类\n@Mapper\npublic interface LikesMapper {\n\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\nLikes\n@Data\n@Component\npublic class Likes {\n private int goodsId;\n private int memberId;\n \n // 添加setter和getter方法\n}\n代码目标是可以实现点击bottom按钮后图标变成，\n并且goods_id和member_id，把数据加进likes表里面。再按一下可以取消收藏，并把likes对应的goods_id里的数据删除。\n但是现在依然无法达成想要的效果，请帮忙完善和补充代码，实现功能。内容：根据你提供的代码，可以参考以下步骤来完善和补充代码：\n\n1. 在前端的JavaScript代码中，修改goods_like函数，使其在点击按钮时发送POST请求到后端的insertLike或deleteLike接口，同时传递goodsId和memberId参数。\n\njs\nfunction goods_like(button) {\n var likeIconElement = button.querySelector('i');\n var goodsId = button.getAttribute('data-goods-id');\n var memberId = button.getAttribute('data-member-id');\n\n if (likeIconElement.classList.contains('far')) {\n // 发送添加收藏的请求\n axios.post('/likes/insert', { goodsId, memberId })\n .then(() => {\n likeIconElement.classList.remove('far');\n likeIconElement.classList.add('fas');\n })\n .catch(error => {\n console.error(error);\n });\n } else {\n // 发送取消收藏的请求\n axios.post('/likes/delete', { goodsId, memberId })\n .then(() => {\n likeIconElement.classList.remove('fas');\n likeIconElement.classList.add('far');\n })\n .catch(error => {\n console.error(error);\n });\n }\n}\n\n\n2. 在前端的HTML代码中，为按钮添加data-goods-id和data-member-id属性，用来存储对应的goodsId和memberId。\n\nhtml\n<button tpye="submit" onclick="goods_like(this)" data-goods-id="${good.goods_id}" data-member-id="${member.member_id}">\n <i class="far fa-heart"></i>\n</button>\n\n\n3. 在后端的LikesController中，将insertLike和deleteLike接口的参数改为接收一个Likes对象，以便方便地获取goodsId和memberId。\n\njava\n@PostMapping("/insert")\npublic void insertLike(@RequestBody Likes likes) {\n likesService.insertLike(likes.getGoodsId(), likes.getMemberId());\n}\n\n@PostMapping("/delete")\npublic void deleteLike(@RequestBody Likes likes) {\n likesService.deleteLike(likes.getGoodsId(), likes.getMemberId());\n}\n\n\n4. 在前端的Likes类中，添加对应的setter和getter方法。\n\njava\n@Data\n@Component\npublic class Likes {\n private int goodsId;\n private int memberId;\n \n // 添加setter和getter方法\n}\n\n\n这样，当点击按钮时，前端会发送对应的请求到后端的接口，并根据返回结果修改图标的样式。同时，后端会将数据添加到或从likes表中进行相应的操作。请注意，这里假设已经配置了前后端的数据交互，例如使用了axios库来发送请求。如果没有配置，你需要根据自己的项目情况进行相应的调整。