hBlog开发手记之一 ：文章评论系统
本帖最后由 马黑黑 于 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，然后去确认一下便可。还有批量删除方法，就是上面提到的进入对应文章的评论管理页面，在那里删除不需要的行即可。
修改和删除都已尝试过了，操作方便。。
与之前整站系统的修改和删除不同，开始还瞅了几下才找到 博主回评和新评论位置完全不同，
看到R和X明白是从这里进行操作的。{:4_173:}
关于文本发表的问题已解决，现在知道了。。 评论数字后面那个小钢笔，是编辑评论用的。
居然可以更改已有评论。
这个新功能，首见。。{:4_173:} 花飞飞 发表于 2025-4-20 21:25
评论数字后面那个小钢笔，是编辑评论用的。
居然可以更改已有评论。
这个新功能，首见。。
这个开始就有的，你可能没注意到 花飞飞 发表于 2025-4-20 21:23
博主回评和新评论位置完全不同，
看到R和X明白是从这里进行操作的。
关于文本发表的问题已解决 ...
{:4_190:} 花飞飞 发表于 2025-4-20 21:21
修改和删除都已尝试过了，操作方便。。
与之前整站系统的修改和删除不同，开始还瞅了几下才找到
就是要看评论才看到 马黑黑 发表于 2025-4-20 21:28
这个开始就有的，你可能没注意到
{:4_170:}这个新系统我得慢慢熟悉啊 马黑黑 发表于 2025-4-20 21:28
其实我知道是从段落那里加标签，不过就是选了一个最慢的加法。。
现在知道怎么一键加了。。{:4_170:} 马黑黑 发表于 2025-4-20 21:29
就是要看评论才看到
实践才知道。。
刚手机操作发现适应手机版了。。
这个不会也是一开始就有的吧。{:4_173:} 花飞飞 发表于 2025-4-20 21:33
实践才知道。。
刚手机操作发现适应手机版了。。
这个不会也是一开始就有的吧。
是开始就有的 花飞飞 发表于 2025-4-20 21:32
其实我知道是从段落那里加标签，不过就是选了一个最慢的加法。。
现在知道怎么一键加了。。
多种加的方法 花飞飞 发表于 2025-4-20 21:31
这个新系统我得慢慢熟悉啊
这个又没啥复杂的设计，一切简简单单 这个感觉太专业了，来学习学习{:4_187:} 马黑黑 发表于 2025-4-20 21:34
是开始就有的
看来还有很多新功能有待发现。{:4_173:} 马黑黑 发表于 2025-4-20 21:35
多种加的方法
{:4_170:}是挺多的。一下子不知道选哪个好 马黑黑 发表于 2025-4-20 21:35
这个又没啥复杂的设计，一切简简单单
叶子都没有两片一样的，这个新叶子我得慢慢摸索 花飞飞 发表于 2025-4-20 21:44
叶子都没有两片一样的，这个新叶子我得慢慢摸索
虽然是不相同的，但这的的确确是非常简单的设计了，再也没有这么简单的了 花飞飞 发表于 2025-4-20 21:43
是挺多的。一下子不知道选哪个好
如果从头写文章，开始时不用理的，差不多要发布了，就看看那里用p标签，那里用啥自己添上的，弄弄就好 花飞飞 发表于 2025-4-20 21:43
看来还有很多新功能有待发现。
也没啥新功能，都是简单明了的，一看便知