如何实现一个楼中楼的评论系统

对于一个数据库开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《如何实现一个楼中楼的评论系统》，主要介绍了MySQL、PHP、javascript，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

文章内容由蚊子的博客进行发布，或许你想看看他其他的博客呢： https://www.xiabingbao.com/comments/2017/09/01/blog-comments.html

1. 实现前的思考

在经历过多说和网易云跟帖后，总算是下定决心自己要写一个评论系统了。

我们在使用的很多评论系统中，目前比较流行的就是楼中楼的方式了，比如百度贴吧，wordpress等等。在这以前，一般都是按照时间顺序进行1楼、2楼、3楼的展示，如果要回复某个人，使用

{
    "title": "从0到1学习node(七)之express搭建简易论坛",
    "url": "www.xiabingbao.com/node/2017/02/20/node-express-forum.html",
    "sourceId": "",
    "ctime": 1487581007000,
    "comments": [
        {
            "cid": "72813956",
            "ctime": 1493107384000,
            "content": "这个论坛对node 的版本有要求吗  我的node比较老 下载你的源码   访问出错",
            "pid": "0",
            "ip": "xxx",
            "port": 0,
            "sc": "web",
            "vote": 0,
            "against": 0,
            "anonymous": false,
            "user": {
                "userId": "1074123",
                "nickname": "有态度网友06q23q",
                "avatar": "",
                "anonymous": false
            }
        },
        {
            "cid": "77196403",
            "ctime": 1493714822000,
            "content": "不太清楚，我这里node版本是6.9.4，npm版本是3.10.10，你试一下升级node版本",
            "pid": "72813956",
            "ip": "xxx",
            "port": 0,
            "sc": "web",
            "vote": 0,
            "against": 0,
            "anonymous": false,
            "user": {
                "userId": "2414123",
                "nickname": "小小dd蚊子",
                "avatar": "http://cms-bucket.nosdn.127.net/1d6faddedb544cee93ff426a4aa2fe7620170322162349.jpg",
                "anonymous": false
            }
        }
    ]
}

从上面的数据里，可以看到，每个文章都有标题，url和评论，评论的每一项都有自己对应的id，其回复的评论pid，内容content，该评论的用户userid, nickname和avatar。我这里也就只摘取主要的信息录入到数据库中。

2.1 用户表

用户表相对来说比较简单，要考虑的就是原有的userid也要作为字段进行保存，方便在导入评论数据时能找到对应的用户，在评论数据也导入完成后即可将该字段删除，以后新添加的注册用户用不到这个字段了。用户表的设计：

设计好用户表后，将原数据中所有的用户都单独拿出来，然后使用userid作为key存储到一个数组中，这样也能起到一个去重的效果。把拿到的所有的用户数据存储到用户表

2.2 评论表

在设计评论表，主要考虑如下的因素：

1. 评论必须依托于文章和用户才能存在，因此评论的外键是文章标识和userid，留言板是一个文章内容为空的评论形式;
2. 我想以后新的评论能使用自增id，而不是跟随原有评论的cid来产生新的评论id，因此这次评论表的主键是id，原有的评论id只作为其中的一个字段wid来构造楼中楼的关系，这些旧评论插入到数据表时都会有新的评论id；
3. 楼中楼的评论是处在某个评论下的，同时，楼中楼里还有相互之前的互动回复。因此这个评论的pid(parentid)表示当前评论处于哪个评论之下，同时replyid表示是回复的哪个评论；若直接回复的父级评论，则pid与replyid相同，都是父级评论的id，若回复的不是父级评论，则pid为父级评论的id，replyid为回复评论的id；pid或replyid为0时，则表示直接对文章发表评论。

因此我们的评论表是这样设计的：

表中的aid(文章的标识)可以是文章的url，文章的id或者其他任何能够唯一识别该文章的东东都可以。这里我们使用的是文章的uri来作为唯一标识，比如上面数据中的文章，我们使用

{
    code : 0,
    data : [
        {// 一级评论
            id : 1,
            content : '蚊子的博客棒棒的',
            createtime : '2017年08月08日00:26',
            nickname : '匿名者',
            reply : {// 楼中楼
                data : [
                    id : 1,
                    content : '谢谢，一起学习',
                    createtime : '2017年08月08日00:36',
                    nickname : '蚊子'
                ],
                page : {
                    cur_page : 1,
                    all_page : 1
                }
            }
        }
    ],
    page : {
        cur_page : 1,
        all_page : 1
    }
}

前端拿到接口返回的数据后，就可以渲染页面了。在头像的处理上，也考虑到了https的环境，因此返回的头像链接都是

wzVue = Vue;
delete(Vue);
delete(window.Vue);

同时，在刚开始实现完成评论功能的时候，用户只要进到这个页面，评论就会加载。但是有个问题就是，用户不一定会把你的文章看到底部，不一定就看你的评论。因此后来文章就改成了按需加载，只有用户滚动到底部，有想要看评论的意向时采取加载评论。

最终展示的效果就是这样：

4. 总结

作为一名前端开发，用仅有的后端知识开发一套博客的评论系统，显得是非常的简陋，整个框架的设计感觉也是很糙。同时缓存系统用的不熟练，不能做到评论信息的立即更新。这个系统依然还有很多改进的地方。欢迎大家对蚊子（师少兵）多多提意见和建议。

在写这篇文章的时候，想着是以后要改版的时候，可以做成评论同步加载的方式进行。生成后的文章，更新频率极低，甚至不太变动，那么缓存的就是评论的内容，每当有新的评论时，就删除当前文章的缓存，重新加载新的数据，然后再缓存上新的数据，这样在评论数据更新比较低的时候，可以缓存的时间更长，同时也有利于搜索引起对评论内容的抓取。

文章内容由蚊子的博客进行发布，或许你想看看他其他的博客呢： https://www.xiabingbao.com/comments/2017/09/01/blog-comments.html

好了，本文到此结束，带大家了解了《如何实现一个楼中楼的评论系统》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多数据库知识！