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

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

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>

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