网页如何实现点击评论时显示我的评论，点击回复时显示我收到的回复

要实现在网页上点击评论时显示您的评论，点击回复时显示您收到的回复，您需要使用一些前端技术和后端技术。

前端技术包括 HTML、CSS 和 JavaScript。您需要为评论和回复区域创建不同的标识符，例如 ID 或类名。当用户点击评论区域时，您可以使用 JavaScript 来显示用户的评论。同样，当用户点击回复按钮时，您可以使用 JavaScript 来显示用户收到的回复。

后端技术包括服务器端语言和数据库。您需要将用户的评论和回复存储在数据库中，并使用服务器端语言处理和返回数据。当用户发表评论时，您需要将评论数据插入到数据库中。当用户请求回复时，您需要从数据库中检索相应的数据并将其返回给用户。

总的来说，实现在网页上点击评论时显示您的评论，点击回复时显示您收到的回复需要综合运用前端技术和后端技术。如果您没有相关的技术经验，可以考虑请相关的开发人员帮助您实现。

相关问题

用HTML,CSS,JS,PHP,SQL实现网页点击评论时显示我的评论，点击回复时显示我收到的回复

好的，以下是一种基本的实现方式：

1. 创建 HTML 页面，包括评论区域和回复区域，使用不同的 ID 或类名来标识它们。

<div id="comments">
  <!-- 评论区域 -->
</div>

<div id="replies">
  <!-- 回复区域 -->
</div>

2. 使用 CSS 样式设计评论区域和回复区域的外观。

3. 在 JavaScript 中编写代码，监听用户的点击事件。当用户点击评论区域时，显示输入框并获取用户的评论内容。当用户点击回复按钮时，显示回复框并获取相关信息。

// 显示评论输入框
document.getElementById("comments").addEventListener("click", function() {
  var commentInput = document.createElement("textarea");
  commentInput.placeholder = "请输入您的评论...";
  document.getElementById("comments").appendChild(commentInput);
});

// 显示回复输入框
document.getElementById("replies").addEventListener("click", function(event) {
  var replyInput = document.createElement("textarea");
  replyInput.placeholder = "回复 " + event.target.dataset.user + ":";
  document.getElementById("replies").appendChild(replyInput);
});

4. 在 PHP 中编写代码，处理用户提交的评论和回复信息。将其存储到数据库中。

// 连接数据库
$conn = mysqli_connect($servername, $username, $password, $dbname);

// 提交评论
if ($_POST["comment"]) {
  $comment = mysqli_real_escape_string($conn, $_POST["comment"]);
  $sql = "INSERT INTO comments (comment) VALUES ('" . $comment . "')";
  mysqli_query($conn, $sql);
}

// 提交回复
if ($_POST["reply"]) {
  $reply = mysqli_real_escape_string($conn, $_POST["reply"]);
  $user = mysqli_real_escape_string($conn, $_POST["user"]);
  $sql = "INSERT INTO replies (user, reply) VALUES ('" . $user . "', '" . $reply . "')";
  mysqli_query($conn, $sql);
}

5. 在 PHP 中编写代码，从数据库中检索评论和回复信息，并返回给用户。

// 获取评论
$sql = "SELECT * FROM comments";
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_assoc($result)) {
  echo $row["comment"];
}

// 获取回复
$sql = "SELECT * FROM replies";
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_assoc($result)) {
  echo "<div data-user='" . $row["user"] . "'>" . $row["reply"] . "</div>";
}

注意，这只是一个基本的实现方式，您需要根据实际需求进行调整和修改。同时，还需要对输入的数据进行验证和过滤，以防止 SQL 注入等攻击。

模板实现类似个人中心的我的评论我的回复

要实现类似个人中心的我的评论和我的回复，可以使用模板引擎来简化界面的开发。以下是一个基本的实现方式：

1. 使用 HTML 和 CSS 设计个人中心的界面，包括“我的评论”和“我的回复”两个模块。

<div class="my-comments">
  <h2>我的评论</h2>
  <ul>
    {{#each comments}}
    <li>{{this}}</li>
    {{/each}}
  </ul>
</div>

<div class="my-replies">
  <h2>我的回复</h2>
  <ul>
    {{#each replies}}
    <li>{{this}}</li>
    {{/each}}
  </ul>
</div>

2. 在 JavaScript 中编写代码，使用 AJAX 或 Fetch API 从服务器获取评论和回复数据。将数据传递给模板引擎进行渲染。

// 获取评论数据
fetch("/api/comments")
  .then(response => response.json())
  .then(data => {
    const template = Handlebars.compile($("#comments-template").html());
    $(".my-comments ul").html(template({ comments: data }));
  });

// 获取回复数据
fetch("/api/replies")
  .then(response => response.json())
  .then(data => {
    const template = Handlebars.compile($("#replies-template").html());
    $(".my-replies ul").html(template({ replies: data }));
  });

3. 在服务器端编写 API，将评论和回复数据从数据库中检索出来，并返回给客户端。可以使用 PHP、Python 或 Node.js 等语言来编写 API。

// 获取评论数据
app.get("/api/comments", (req, res) => {
  const sql = "SELECT comment FROM comments WHERE user_id = ?";
  const values = [req.session.user_id];
  db.query(sql, values, (err, result) => {
    if (err) throw err;
    res.json(result.map(item => item.comment));
  });
});

// 获取回复数据
app.get("/api/replies", (req, res) => {
  const sql = "SELECT reply FROM replies WHERE user_id = ?";
  const values = [req.session.user_id];
  db.query(sql, values, (err, result) => {
    if (err) throw err;
    res.json(result.map(item => item.reply));
  });
});

4. 使用模板引擎来渲染评论和回复数据。可以使用 Handlebars、EJS 或其他模板引擎。

<!-- 评论模板 -->
<script id="comments-template" type="text/x-handlebars-template">
  {{#each comments}}
  <li>{{this}}</li>
  {{/each}}
</script>

<!-- 回复模板 -->
<script id="replies-template" type="text/x-handlebars-template">
  {{#each replies}}
  <li>{{this}}</li>
  {{/each}}
</script>

5. 将渲染后的 HTML 插入到个人中心的界面中。

<div id="my-center">
  <!-- 插入渲染后的 HTML -->
</div>

这样就可以实现类似个人中心的我的评论和我的回复功能。使用模板引擎可以大大简化前端开发的工作量，并且有利于代码的维护和扩展。