如何实现可用的评论删除按钮及评论权限与日期功能

1. 修复删除按钮触发逻辑 #

删除按钮绑定ID但无法触发，大概率是事件绑定方式不对（比如动态生成的评论没做事件委托），或者请求逻辑有问题，以下是修复方案：

• 使用事件委托绑定点击事件，兼容动态生成的评论元素
• 确保评论ID通过data-*属性正确传递
• 调用后端删除接口后同步更新DOM

// 给评论列表容器绑定事件，委托处理删除按钮点击
document.querySelector('.comment-list').addEventListener('click', function(e) {
  // 只处理删除按钮的点击
  if (!e.target.classList.contains('delete-btn')) return;
  
  // 获取绑定的评论ID
  const commentId = e.target.dataset.commentId;
  if (!commentId) {
    alert('无法获取评论ID');
    return;
  }

  // 发送删除请求
  fetch(`/api/comments/${commentId}`, {
    method: 'DELETE',
    headers: {
      'Content-Type': 'application/json',
      // 若需鉴权，添加用户token
      'Authorization': `Bearer ${localStorage.getItem('authToken')}`
    }
  })
  .then(res => res.json())
  .then(data => {
    if (data.success) {
      // 从DOM中移除该评论
      e.target.closest('.comment-item').remove();
    } else {
      alert(data.message || '删除失败，请稍后重试');
    }
  })
  .catch(err => {
    console.error('删除请求出错:', err);
    alert('网络异常，删除失败');
  });
});

2. 实现删除权限控制 #

核心是前端渲染时控制按钮可见性+后端接口校验权限，双重保障：

• 渲染评论时，对比当前登录用户ID与评论发布者ID，仅一致时显示删除按钮
• 前端请求删除前做二次校验，后端必须再次校验权限（防止前端篡改）

渲染时控制按钮显示（模板示例） #

<!-- 假设使用模板引擎渲染单条评论 -->
<div class="comment-item" data-comment-id="{{comment.id}}" data-author-id="{{comment.authorId}}">
  <p class="comment-content">{{comment.content}}</p>
  <!-- 仅当前用户是评论作者时显示删除按钮 -->
  {{if currentUser.id === comment.authorId}}
    <button class="delete-btn" data-comment-id="{{comment.id}}">删除</button>
  {{/if}}
</div>

删除前前端校验 #

// 在删除请求前添加权限校验
const currentUserId = localStorage.getItem('userId');
const authorId = e.target.closest('.comment-item').dataset.authorId;

if (currentUserId !== authorId) {
  alert('你无权删除他人评论');
  return;
}

3. 添加发布日期显示功能 #

需要后端返回评论的发布时间戳，前端转换为友好格式后渲染：

• 封装时间格式化函数，将时间戳转为YYYY-MM-DD HH:mm这类易读格式
• 渲染评论时将格式化后的日期插入对应元素

// 时间格式化工具函数
function formatPublishDate(timestamp) {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hour = String(date.getHours()).padStart(2, '0');
  const minute = String(date.getMinutes()).padStart(2, '0');
  return `${year}-${month}-${day} ${hour}:${minute}`;
}

// 渲染所有评论的发布日期
document.querySelectorAll('.comment-item').forEach(item => {
  const publishTimestamp = item.dataset.publishTimestamp;
  const dateElement = item.querySelector('.publish-date');
  if (publishTimestamp && dateElement) {
    dateElement.textContent = `发布于：${formatPublishDate(publishTimestamp)}`;
  }
});

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