hBlog开发手记之一：文章评论系统

马黑黑 · 发表于 2025-4-20 21:03

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2025-4-20 22:37 编辑

博客吧，总得有互动功能，不管将来的现实有木有互动发生。酱紫，hBlog 就加入文章评论系统吧。

基本文本库的好处多多，使用特定格式的构成组织每一个评论，像酱紫：

user=张三&face=2&time=2025.4.20&content=啥啥啥&reply=啥啥啥

这是以 get 的方式弄成的数据结构，但是，得用 post 方法传递，因此得有表单 form，通过 form 的映射构造 get 类型的数据然后通过 post 方式提交。这在前端用JS完成就可以，例如：

const form = document.getElementById('form'); //表单操作标识

//表单提交事件
form.onsubmit = (e) => {
      e.preventDefault(); //阻止默认提交动作
      const formData = new FormData(form); // 生成表单对象 formData，从 form 中映射数据表
      formData.append('userface', selectedEmoji); // 添加 form 表单中没有的emoji数据 - 头像
      let data = ''; // 待提交的数据
      // 遍历映射的数据表项目，将内容一一加入到 data 变量中
      for (var key of formData.keys()) {
            data += `${key}=${formData.get(key)}&`;
      }
      // 创建 XMLHttpRequest 对象：以 XMLHttpRequest 协议提交数据
      const xhr = new XMLHttpRequest();
      const url = 'comment.php'; // 后端处理页面地址
      xhr.open('POST', url, true); // 以 POST 提交方式打开后端处理页面
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');  // 申明相关提交协议
      // 等待后端页面的反馈：拿到处理结果并作相应前端刷新等处理
      xhr.onreadystatechange = function () {
            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                     var response = xhr.responseText; // 结果
                     // ... 将结果显示出来
            }
      };
      // 其它相关处理机制
};

其实有没有 form 表单以及数据映射都不影响 post 提交，不过，对于要收集数据量较大的页面而言，使用表单映射会更省事。

博主回复评论，我就没有使用表单，因为这个机制需要收集的数据量少，直接构建 data 数据然后通过相关协议 post 过去就成。有点遗憾的是，因为要动态生成提交按钮，该按钮生成之后，如果博主放弃回复而要去处理其它的评论，就得需要手动刷新页面。问题不是不可以处理，主要考虑代码量的问题，不想为一个动态按钮添加太多的处理机制，将就着用吧。

博主还可以对评论做统一处理：针对每一篇文章，都提供有管理评论的链接（博主登录后可见），在目标页面会有一个编辑器，每一行是一条评论信息，若评论信息行的末尾没有 &re=啥啥啥，加上 &re=啥啥啥即可，有了想修改，就修改等号后面的内容。

另外，博主删除评论极其简单：文章阅读页面，博主登录后都可以看到 X 按钮，想删哪一条留言点一下对应的 x，然后去确认一下便可。还有批量删除方法，就是上面提到的进入对应文章的评论管理页面，在那里删除不需要的行即可。