用户商品收藏功能实现 - 基于MySQL、Spring Boot和Thymeleaf

{"title":"用户商品收藏功能实现 - 基于MySQL、Spring Boot和Thymeleaf","description":"本教程展示了如何使用MySQL、Spring Boot和Thymeleaf实现用户商品收藏功能。用户登录后可以点击按钮将商品添加到收藏列表，并通过再次点击按钮取消收藏。代码示例包括数据库设计、服务层、控制层和页面交互等。","keywords":"商品收藏, 用户收藏, MySQL, Spring Boot, Thymeleaf, AJAX, 数据库设计, 服务层, 控制层","content":"根据您提供的代码和描述，我看到您的目标是在用户登录后，点击按钮后改变图标和将数据添加到likes表中。以下是您可以尝试的解决方案：\n\n1. 在Likes类中，将goodsId和memberId更改为Integer类型，并添加默认的无参构造方法。\njava\n@Data\n@Component\n@Getter\n@Setter\npublic class Likes {\n private Integer goodsId;\n private Integer memberId;\n \n public Likes() {\n }\n}\n\n\n2. 在LikesService接口中，添加一个方法用于获取用户ID。\njava\nList<Integer> findUid();\n\n\n3. 在LikesService接口的实现类LikesServiceImpl中，实现findUid()方法，用于从数据库中获取用户ID的列表。\njava\n@Override\npublic List<Integer> findUid() {\n return likesMapper.findUid();\n}\n\n\n4. 在LikesMapper接口中，添加一个方法用于查询所有用户ID。\njava\n@Select("SELECT member_id FROM member")\nList<Integer> findUid();\n\n\n5. 在LikesController的findUid()方法中，将查询到的用户ID列表添加到模型中，并返回"recommend"页面。\njava\n@RequestMapping("/findUid")\npublic String findUid(Model model){\n List<Integer> uidList = likesService.findUid();\n model.addAttribute("uidList", uidList);\n return "recommend";\n}\n\n\n6. 在recommend.html中，添加一个隐藏的input元素，用于存储用户ID。\nhtml\n<input type="hidden" id="uid" th:value="${Uid}" />\n\n\n7. 在goods_like()函数中，获取用户ID并将其传递给AJAX请求。\njavascript\nfunction goods_like(button, goodsId, isLiked) {\n var likeIconElement = button.querySelector('i');\n var uid = document.getElementById('uid').value;\n\n if (isLiked) {\n likeIconElement.classList.remove('fas');\n likeIconElement.classList.add('far');\n\n // 发送AJAX请求，调用deleteLike接口\n $.ajax({\n url: '${pageContext.request.contextPath}/likes/delete',\n type: 'POST',\n data: {\n goodsId: goodsId,\n memberId: uid\n },\n success: function(response) {\n console.log('取消收藏成功');\n },\n error: function(error) {\n console.log('取消收藏失败');\n }\n });\n } else {\n likeIconElement.classList.remove('far');\n likeIconElement.classList.add('fas');\n\n // 发送AJAX请求，调用insertLike接口\n $.ajax({\n url: '${pageContext.request.contextPath}/likes/insert',\n type: 'POST',\n data: {\n goodsId: goodsId,\n memberId: uid\n },\n success: function(response) {\n console.log('收藏成功');\n },\n error: function(error) {\n console.log('收藏失败');\n }\n });\n }\n}\n\n\n8. 最后，将LikesMapper中的insertLike()方法和deleteLike()方法的参数名与LikesService和LikesController中的方法参数名保持一致。\n\n请注意，上述代码只是给出了一个实现思路，可能需要根据您的具体业务逻辑进行调整和修改。另外，请确保您已经正确配置了数据库连接和相关依赖项。\n\n}