基于Express与Handlebars为博客添加评论功能的技术问询

Got it, let's walk through adding a fully functional comment system to your Express/Handlebars blog step by step. I’ll break this down into actionable parts so you can implement it easily:

1. Update Your Data Structure First #

Since your _DATA stores blog posts, we need to add a comments array to each post to hold its associated comments. Here’s how to adjust it:

// Example _DATA with comments field added
const _DATA = [
  {
    slug: "hello-world",
    title: "Hello World!",
    content: "This is my first blog post.",
    comments: [] // New array to store comments for this post
  },
  // Add other posts with the same comments field
];

2. Modify the Post Handlebars Template #

Update post.handlebars to display existing comments and add a form for users to submit new ones. This will make the comment section interactive:

<!-- Existing post content -->
<h1>{{title}}</h1>
<div class="post-content">{{content}}</div>

<!-- Comments Section -->
<div class="comments-container">
  <h2>Comments ({{comments.length}})</h2>
  
  <!-- Display existing comments -->
  {{#each comments}}
    <div class="comment-card">
      <div class="comment-author"><strong>{{author}}</strong></div>
      <div class="comment-body">{{body}}</div>
      <div class="comment-time">{{timestamp}}</div>
    </div>
  {{else}}
    <p>No comments yet — be the first to share your thoughts!</p>
  {{/each}}

  <!-- Comment submission form -->
  <form action="/post/{{slug}}/comment" method="POST" class="comment-form">
    <div>
      <label for="author">Your Name:</label>
      <input type="text" id="author" name="author" required>
    </div>
    <div>
      <label for="body">Your Comment:</label>
      <textarea id="body" name="body" rows="4" required></textarea>
    </div>
    <button type="submit">Post Comment</button>
  </form>
</div>

3. Set Up Middleware for Form Data #

Before handling the comment submission, make sure your Express app can parse form data. Add this line before your route definitions (it’s built into Express 4.16+, no need for extra packages):

app.use(express.urlencoded({ extended: true }));

4. Add a POST Route to Handle Comment Submissions #

This route will take the form data, validate it, add the comment to the correct post, and redirect back to the post page so the user can see their comment:

app.post('/post/:slug/comment', function(req, res) {
  const slug = req.params.slug;
  const post = _.findWhere(_DATA, { slug: slug });

  // If post doesn't exist, show 404
  if (!post) {
    return res.render('404');
  }

  // Create a new comment object with timestamp
  const newComment = {
    author: req.body.author.trim(),
    body: req.body.body.trim(),
    timestamp: new Date().toLocaleString() // Shows readable local time
  };

  // Add the comment to the post's comments array
  post.comments.push(newComment);

  // Redirect back to the post page to display the new comment
  res.redirect(`/post/${slug}`);
});

Quick Notes for Improvement #

• Persistence: Right now, comments are stored in memory — if you restart your server, they’ll disappear. For long-term storage, you could switch to a database like MongoDB or SQLite and adjust the code to read/write comments there.
• Validation: Add extra checks (e.g., minimum comment length, sanitize input to prevent XSS attacks) to make the system more robust.
• Styling: Add CSS to the .comments-container, .comment-card, and .comment-form classes to make the comment section look polished.

内容的提问来源于stack exchange，提问作者bli00