在之前的一篇文章里，曾经介绍过本博客的楼中楼评论系统的实现：如何实现一个楼中楼的评论系统，那时候主要是对后端系统和数据库设计的介绍，本篇文章主要是从前端的角度讲解评论系统的实现！
评论系统最主要的两块是发表评论和评论列表，同时呢，发表评论成功后，刷新评论列表主要也是有两种方式：
- ajax的方式刷新，直接追加在特定的位置；
- 刷新整个页面，重新获取评论，然后定位到刚才发表的评论的位置；
本小蚊子博客的评论系统，是以ajax的方式获取评论列表，同时在发表评论成功后，也是以异步的方式更新评论列表。
Vue组件的结构是：
Comments.vue
Publish.vue
List.vue
Unit.vue
Publish.vue
1. 如何发表评论 #
用户对文章或者某个评论产生了共鸣，需要留言讨论一番，我们就需要用户能够把自己的评论也添加进去。
评论的类型，细分的话，可以分为3类：
- 直接对文章发表评论，pid与replyid为空；
- 对一级评论进行回复，pid与replyid均为一级评论的id;
- 对楼中楼进行回复，pid为一级评论的id，replyid为你回复的评论的id
我这里前端的实现参考了oschina(开源中国)的评论方式。直接对文章评论，是直接在顶部的评论窗口进行输入；对其他评论进行回复时，采用弹窗的方式来进行回复。弹窗回复的好处就是，页面不用滚动，用户对某个评论的感知也能停留在这个位置；同时也不用增加各种不必要的小输入框来让用户。
所有发表评论用到的组件都是同一个（Publish.vue），只不过表现的方式不一样而已。在发表评论成功后，通过事件通知机制$emit，更新数据结构list数组。
当直接对文章评论时，使用splice操作list数组即可：
this.list.splice(0, 0, item); // 在list数组的最前面添加评论内容
当进行楼中楼的评论时，其实是在item中的reply字段里，我们要先更新reply字段，然后再将item重新更新到list数组中：
let item = this.list[index];
item.reply.push(replyItem);
this.$set(this.list, index, item);
// 或
// this.list.splice(index, 1, item);
在更新楼中楼的评论过程中，之前遇到了一个问题：当出现楼中楼的第一个评论时，数据更新但是页面没有更新，从第2个评论开始就能正常更新评论了！刚开始以为是Vue的字段更新后，导致调用的子组件里的数据不会更新。好一通排查后才发现原因竟然是：楼中楼是否显示使用item.num字段（当前评论里子评论的个数），上面的代码里只是更新了item.reply字段，但是没有更新item.num，导致第一个评论的自动更新老是有问题！
2. 登录的问题 #
之前博客的评论系统，接入的微博登录；一段运行时间后，运行得倒是也没有问题，不过接入微博登录有点大材小用了，最新的评论系统更新时，改为了用户输入昵称和邮箱后即可评论！
用户发表评论后，即将用户的昵称和邮箱存储到cookie中，下次直接从cookie里后去即可！
3. 获取评论列表 #
在获取评论列表时，也是监听了页面的滚动事件，同时采用防抖和节流的策略，在用户将页面滚动到底部的时候再获取数据！在获取到数据后，即解绑滚动事件
handleScroller() {
const scroller = throttle(()=>{
const maxScrollTop = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) - window.innerHeight;
const currentScrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
if (maxScrollTop - currentScrollTop < 100 && !this.loaded) {
this.loaded = true;
this.getList(); // 获取数据
window.removeEventListener('scroll', scroller);
}
}, 300, 400);
scroller();
window.addEventListener('scroll', scroller);
}
4. 总结 #
评论系统是一项比较复杂的系统，我们这里也只是做了简单的工作而已，后续可能也会考虑，全部使用原生的js来实现！
