"<div class="box-container" >\n\n <div class="box" th:each="good:${GoodsList}">\n <div class="image">\n <img th:src="@{'/download?filepath='+${good.pic}}" alt="加载失败，请重新尝试"\n height="200" width="200">\n
\n\n
<span th:text="${good.name}">
\n
看看它！
\n <a th:href="@{'findGoodById?goods_id='+${good.goods_id}}" class="btn">了解更多\n
\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 likeIconElement.classList.remove('far');\n likeIconElement.classList.add('fas');\n insertLike(goodsId, memberId);\n } else {\n likeIconElement.classList.remove('fas');\n likeIconElement.classList.add('far');\n deleteLike(goodsId, memberId);\n }\n}\n\nfunction insertLike(goodsId, memberId) {\n fetch('/likes/insert', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/x-www-form-urlencoded'\n },\n body: 'goodsId=' + goodsId + '&memberId=' + memberId\n })\n .then(function(response) {\n if (response.ok) {\n console.log('Like inserted successfully');\n } else {\n console.error('Failed to insert like');\n }\n })\n .catch(function(error) {\n console.error('Error:', error);\n });\n}\n\nfunction deleteLike(goodsId, memberId) {\n fetch('/likes/delete', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/x-www-form-urlencoded'\n },\n body: 'goodsId=' + goodsId + '&memberId=' + memberId\n })\n .then(function(response) {\n if (response.ok) {\n console.log('Like deleted successfully');\n } else {\n console.error('Failed to delete like');\n }\n })\n .catch(function(error) {\n console.error('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(@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("/my_love")\n public ModelAndView myLove() {\n ModelAndView modelAndView = new ModelAndView("my_love");\n List
likesList = likesService.getAllLikes();\n modelAndView.addObject("likesList", likesList);\n return modelAndView;\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\n @Override\n public List getAllLikes() {\n return likesMapper.getAllLikes();\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 @Select("SELECT * FROM likes")\n List getAllLikes();\n}\n\nLikes\n@Data\n@Component\npublic class Likes {\n private int goodsId;\n private int memberId;\n}\n代码目标是可以实现点击bottom按钮后<i class="far fa-heart">图标变成<i class="fas fa-heart">，\n并且goods_id和member_id，把数据加进likes表里面。再按一下可以取消收藏，并把likes对应的goods_id里的数据删除。\n并有一个html 叫my_love的页面显示“likes”表格。但是现在依然无法达成想要的效果，请帮忙完善和补充代码，实现功能。内容：首先，您需要在JavaScript代码中调用LikesController中的insertLike和deleteLike方法来实现插入和删除数据的操作。可以使用fetch函数来发送POST请求。修改您的JavaScript代码如下：\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 likeIconElement.classList.remove('far');\n likeIconElement.classList.add('fas');\n insertLike(goodsId, memberId);\n } else {\n likeIconElement.classList.remove('fas');\n likeIconElement.classList.add('far');\n deleteLike(goodsId, memberId);\n }\n}\n\nfunction insertLike(goodsId, memberId) {\n fetch('/likes/insert', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/x-www-form-urlencoded'\n },\n body: 'goodsId=' + goodsId + '&memberId=' + memberId\n })\n .then(function(response) {\n if (response.ok) {\n console.log('Like inserted successfully');\n } else {\n console.error('Failed to insert like');\n }\n })\n .catch(function(error) {\n console.error('Error:', error);\n });\n}\n\nfunction deleteLike(goodsId, memberId) {\n fetch('/likes/delete', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/x-www-form-urlencoded'\n },\n body: 'goodsId=' + goodsId + '&memberId=' + memberId\n })\n .then(function(response) {\n if (response.ok) {\n console.log('Like deleted successfully');\n } else {\n console.error('Failed to delete like');\n }\n })\n .catch(function(error) {\n console.error('Error:', error);\n });\n}\n\n\n然后，在您的HTML代码中，将data-goods-id和data-member-id属性添加到按钮上，以便在JavaScript代码中获取goodsId和memberId。修改您的HTML代码如下：\n\nhtml\n<button type=\"submit\" onclick=\"goods_like(this)\" data-goods-id=\"${good.goods_id}\" data-member-id=\"${memberId}\">\n <i class=\"far fa-heart\"></i>\n</button>\n\n\n接下来，您需要创建一个新的HTML页面my_love.html来显示likes表格。在该页面中，您可以使用Thymeleaf来遍历并显示likes列表。修改您的my_love.html代码如下：\n\nhtml\n<!DOCTYPE html>\n<html xmlns:th=\"http://www.thymeleaf.org\">\n<head>\n <meta charset=\"UTF-8\">\n <title>My Love</title>\n</head>\n<body>\n <table>\n <thead>\n <tr>\n <th>Goods ID</th>\n <th>Member ID</th>\n </tr>\n </thead>\n <tbody>\n <tr th:each=\"like : ${likesList}\">\n <td th:text=\"${like.goodsId}\"></td>\n <td th:text=\"${like.memberId}\"></td>\n </tr>\n </tbody>\n </table>\n</body>\n</html>\n\n\n最后，您需要创建一个LikesController的新方法来获取likes列表并将其传递给my_love.html页面。修改您的LikesController类如下：\n\njava\n@GetMapping("/my_love")\npublic ModelAndView myLove() {\n ModelAndView modelAndView = new ModelAndView(\"my_love\");\n List<Likes> likesList = likesService.getAllLikes();\n modelAndView.addObject(\"likesList\", likesList);\n return modelAndView;\n}\n\n\n另外，您还需要在LikesService和LikesServiceImpl中添加一个新的方法来获取likes列表。修改您的LikesService和LikesServiceImpl类如下：\n\nLikesService.java:\njava\npublic interface LikesService {\n void insertLike(int goodsId, int memberId);\n void deleteLike(int goodsId, int memberId);\n List<Likes> getAllLikes();\n}\n\n\nLikesServiceImpl.java:\njava\n@Service\npublic class LikesServiceImpl implements LikesService {\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\n @Override\n public List<Likes> getAllLikes() {\n return likesMapper.getAllLikes();\n }\n}\n\n\nLikesMapper.xml:\nxml\n<select id=\"getAllLikes\" resultType=\"com.example.Likes\">\n SELECT * FROM likes\n</select>\n\n\n这样，当您点击按钮时，会将likes数据插入likes表中，并且如果您再次点击按钮，会从likes表中删除相应的数据。您可以通过访问/my_love页面来查看likes列表。\n