JavaScript, HTML, MySQL: 实现用户点赞功能并显示点赞记录

{ "title": "JavaScript, HTML, MySQL: 实现用户点赞功能并显示点赞记录", "description": "本指南详细介绍如何利用 JavaScript、HTML 和 MySQL 实现用户点赞功能并展示点赞记录，包括前端交互、后端数据处理以及数据库操作，并提供示例代码。", "keywords": "点赞功能, JavaScript, HTML, MySQL, 数据库, 后端接口, Ajax, 表格, 用户体验", "content": ""要实现将用户喜欢的内容记录到本地 MySQL 数据库的 likes 表中，并在 HTML 页面上显示出来，你需要编写以下代码：\n\n1. 首先，你需要在后端编写一个接口，用于将用户的喜欢记录插入到 likes 表中。你可以使用 Java 语言编写一个简单的后端接口，使用 JDBC 连接 MySQL 数据库，并执行相应的 SQL 语句来实现插入操作。以下是一个简单的示例代码：\n\njava\nimport java.sql.Connection;\nimport java.sql.DriverManager;\nimport java.sql.PreparedStatement;\nimport java.sql.SQLException;\n\npublic class LikeService {\n private static final String DB_URL = \"jdbc:mysql://localhost:3306/your_database_name\";\n private static final String DB_USERNAME = \"your_username\";\n private static final String DB_PASSWORD = \"your_password\";\n\n public void insertLike(int goodsId, int memberId) {\n try {\n Connection conn = DriverManager.getConnection(DB_URL, DB_USERNAME, DB_PASSWORD);\n String sql = \"INSERT INTO likes (goods_id, member_id) VALUES (?, ?)\";\n PreparedStatement pstmt = conn.prepareStatement(sql);\n pstmt.setInt(1, goodsId);\n pstmt.setInt(2, memberId);\n pstmt.executeUpdate();\n pstmt.close();\n conn.close();\n } catch (SQLException e) {\n e.printStackTrace();\n }\n }\n}\n\n\n2. 在前端的 JavaScript 代码中，你需要修改 goods_like 函数，使其在用户点击喜欢按钮时，调用后端接口将喜欢记录插入到 likes 表中。可以通过使用 Ajax 来异步调用后端接口。以下是一个简单的示例代码：\n\njavascript\nfunction goods_like(button) {\n var likeIconElement = button.querySelector('i');\n var goodsId = 123; // 你需要根据实际情况获取商品ID\n var memberId = 456; // 你需要根据实际情况获取会员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 // 可以添加删除喜欢记录的代码\n }\n}\n\nfunction insertLike(goodsId, memberId) {\n var xhr = new XMLHttpRequest();\n xhr.open("POST", "your_backend_api_url", true);\n xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");\n xhr.onreadystatechange = function() {\n if (xhr.readyState === 4 && xhr.status === 200) {\n console.log(xhr.responseText);\n // 可以根据返回的结果进行相应处理\n }\n };\n xhr.send("goodsId=" + goodsId + "&memberId=" + memberId);\n}\n\n\n3. 在 HTML 页面中，你需要使用一个表格来显示 likes 表中的喜欢记录。你可以在后端编写一个接口，用于从 likes 表中获取喜欢记录，并返回给前端。在前端的 JavaScript 代码中，你可以使用 Ajax 来异步调用后端接口，并将返回的喜欢记录动态添加到表格中。以下是一个简单的示例代码：\n\njavascript\nfunction showLikes() {\n var xhr = new XMLHttpRequest();\n xhr.open("GET", "your_backend_api_url", true);\n xhr.onreadystatechange = function() {\n if (xhr.readyState === 4 && xhr.status === 200) {\n var likes = JSON.parse(xhr.responseText);\n var table = document.getElementById("likesTable");\n for (var i = 0; i < likes.length; i++) {\n var row = table.insertRow(-1);\n var goodsIdCell = row.insertCell(0);\n var memberIdCell = row.insertCell(1);\n goodsIdCell.innerHTML = likes[i].goods_id;\n memberIdCell.innerHTML = likes[i].member_id;\n }\n }\n };\n xhr.send();\n}\n\n\n在 HTML 页面中，你需要添加一个表格元素，并在页面加载完成后调用 showLikes 函数来显示喜欢记录。以下是一个简单的示例代码：\n\nhtml\n<table id="likesTable">\n <tr>\n <th>Goods ID</th>\n <th>Member ID</th>\n </tr>\n</table>\n\n<script>\n showLikes();\n</script>\n\n\n请注意，以上代码仅为示例代码，你需要根据实际情况进行适当的修改和调整。另外，后端接口的 URL、数据库连接信息以及获取商品 ID 和会员 ID 的方法需要根据你的实际情况进行相应的修改。\n