我们在利用的很多评论系统中，目前比较盛行的便是楼中楼的办法了，比如百度贴吧，wordpress等等。在这以前，一样平常都是按照韶光顺序进行1楼、2楼、3楼的展示，如果要回答某个人，利用@符号标识出这个用户的名字，然后回答内容。可是这样存在一个很大的问题，谈论问题没有集中在一起，其他用户根本不知道你们在谈论什么，原作者在1楼揭橥评论，你进来回复这个用户的评论时，已经到10楼了，原作者再回答你又到20楼了。其他用户看到10楼时，早已经忘却原作者说了什么了。
百度贴吧在改版之前便是这种办法，后来在新版中启用了楼中楼的办法，这种办法，关于某个话题的谈论就能集中在一块了。
同时，知乎也对他的评论系统进行了一次改版，不过不是改版成楼中楼，而是在每个有对话评论的后面加上一个弹窗链接查看对话，点击链接后弹窗能看到这两个人之间互动的所有评论。
采取韶光顺序倒序或者正序平铺的办法展示评论，这种办法实现起来大略，但是阅读困难;采取楼中楼的办法展示评论，对用户的阅读习气比较友好，但是实现起来可能比较困难。不过，末了仍旧决定采取楼中楼的办法来，虽然本人博客的评论量也少的可怜，不过还是决定要实现一下。
2. 数据表的设计先说下前后端利用的措辞和框架，前端考虑到页面渲染和比较多的事宜调用，利用了vue框架，vue该当说不是最好的选择，毕竟对一个评论的前端部门来说，可能有点大材小用，不过为了快速开拓，也就选择了vue。后端利用的是php措辞，数据库利用的是mysql。
数据库表的设计，既要考虑到可以导入以前的数据，又能方便往后添加新的评论。这里我创建了3个表： 文章表，用户表，评论表。
在网易云跟帖关闭之前，我把自己的数据导出来了（多说的数据已经丢失，不知道导出的格式是什么了），我们来看下网易云跟帖里导出数据的格式：
从上面的数据里，可以看到，每个文章都有标题，url和评论，评论的每一项都有自己对应的id，其回答的评论pid，内容content，该评论的用户userid, nickname和avatar。我这里也就只摘取紧张的信息录入到数据库中。
2.1 用户表
用户表相对来说比较大略，要考虑的便是原有的userid也要作为字段进行保存，方便在导入评论数据时能找到对应的用户，在评论数据也导入完成后即可将该字段删除，往后新添加的注册用户用不到这个字段了。用户表的设计：
设计好用户表后，将原数据中所有的用户都单独拿出来，然后利用userid作为key存储到一个数组中，这样也能起到一个去重的效果。把拿到的所有的用户数据存储到用户表
2.2 评论表
在设计评论表，紧张考虑如下的成分：
评论必须依托于文章和用户才能存在，因此评论的外键是文章标识和userid，留言板是一个文章内容为空的评论形式;
我想往后新的评论能利用自增id，而不是跟随原有评论的cid来产生新的评论id，因此这次评论表的主键是id，原有的评论id只作为个中的一个字段wid来布局楼中楼的关系，这些旧评论插入到数据表时都会有新的评论id；
楼中楼的评论是处在某个评论下的，同时，楼中楼里还有相互之前的互动回答。因此这个评论的pid(parentid)表示当前评论处于哪个评论之下，同时replyid表示是回答的哪个评论；若直接回答的父级评论，则pid与replyid相同，都是父级评论的id，若回答的不是父级评论，则pid为父级评论的id，replyid为回答评论的id；pid或replyid为0时，则表示直接对文章揭橥评论。
因此我们的评论表是这样设计的：
表中的aid(文章的标识)可以是文章的url，文章的id或者其他任何能够唯一识别该文章的东东都可以。这里我们利用的是文章的uri来作为唯一标识，比如上面数据中的文章，我们利用/node/2017/02/20/node-express-forum.html来标识文章。其他文章同理。
将这些评论写入表时，我们还要把稳的是，原数据中，每个评论都对应着一个用户，在我设计的系统里，用户与评论分来了，只利用uid来进行关联。新的用户与新的评论都是利用自有的自增主键，因此在原有评论进行入库时，须要将原来的userid转换为新用户表中的主键id，新旧数据进行统一。
文章表不做阐明。
3. 详细实现前端部分紧张是卖力展示每个文章的评论，同时让登任命户可以添加评论。
3.1 展示评论
我们已经对每个评论都添加了文章标识，前端只要根据aid就能拿到当前文章所有的评论。不过我们的评论是要楼中楼的办法展示的，不能一股脑的把数据平铺到页面中。我们在2.2中也说了，pid为0的评论都是直接对文章进行评论的，这些评论该当是作为一级评论展示的;pid为其他数据的，一定是属于某个评论之下，应该作为楼中楼展示。
同时，无论一级评论，还是楼中楼的评论，都有可能产生分页的情形，因此这里也要做好分页处理。
那么终极，我们前端拿到的构造该当大致是这样的：
前端拿到接口返回的数据后，就可以渲染页面了。在头像的处理上，也考虑到了https的环境，因此返回的头像链接都是//开头的形式。
3.2 参与评论
用户对文章或者某个评论产生了共鸣，须要留言谈论一番，我们就须要用户能够把自己的评论也添加进去。
评论的类型，细分的话，可以分为3类：
直接对文章揭橥评论，pid与replyid为空；
对一级评论进行回答，pid与replyid均为一级评论的id;
对楼中楼进行回答，pid为一级评论的id，replyid为你回答的评论的id
我这里前真个实现参考了oschina(开源中国)的评论办法。直接对文章评论，是直接在顶部的评论窗口进行输入；对其他评论进行回答时，采取弹窗的办法来进行回答。弹窗回答的好处便是，页面不用滚动，用户对某个评论的感知也能勾留在这个位置；同时也不用增加各种不必要的小输入框来让用户输入评论。
3.3 登录
在登录问题上，我也是纠结了不少的韶光，究竟是利用自己的登录系统呢，还是利用第三方登录呢，或者是用户不用注册登录，只要输入邮箱和昵称就能进行评论呢？
利用自己的评论系统，那么就须要开拓一套注册和登录流程，开拓麻烦，而且对付想要回答一句话的用户来说，可能就直接放弃注册了；若只要输入邮箱和昵称就能评论，我考虑到可能会引起用户的无限评论，无法掌握。因此，末了还是考虑接入第三方的登录，这里选择了利用微博作为第三方登录的入口，后续会考虑加入github的帐号登录。
关于如何接入微博的第三方登录，我们下篇文章再讲，文档完好，对不熟习的开拓者来说，刚开始可能有点懵逼，不过该当问题不大。
3.4 添加邮箱功能
用户在第三方登录成功后，在名字阁下有个小的input输入框，可以让用户输入邮箱来吸收回答提醒，这个输入完备是志愿的，不输入邮箱也依然可以评论。也是考虑到本站是个小站，访问量极低，用户可能一时兴起评论了两句，事后又想起这个网站来，又不知道怎么找了。因此就想着添加一个邮件提醒功能，不让大神的评论石沉大海。
3.5 特殊把稳
前端部门引入了vue框架，评论模块在每个文章页都会加载。为了防止评论模块中的vue库对外部的资源造成影响（比如版本冲突等），我先把全局变量给了wzVue，然后在把Vue注销掉：
同时，在刚开始实现完成评论功能的时候，用户只要进到这个页面，评论就会加载。但是有个问题便是，用户不一定会把你的文章看到底部，不一定就看你的评论。因此后来文章就改成了按需加载，只有用户滚动到底部，有想要看评论的意向时采纳加载评论。
终极展示的效果便是这样：
4. 总结
作为一名前端开拓，用仅有的后端知识开拓一套博客的评论系统，显得是非常的简陋，全体框架的设计觉得也是很糙。同时缓存系统用的不闇练，不能做到评论信息的立即更新。这个别系依然还有很多改进的地方。欢迎大家对蚊子（师少兵）多多提见地和建议。
在写这篇文章的时候，想着是往后要改版的时候，可以做成评论同步加载的办法进行。天生后的文章，更新频率极低，乃至不太变动，那么缓存的便是评论的内容，每当有新的评论时，就删除当前文章的缓存，重新加载新的数据，然后再缓存上新的数据，这样在评论数据更新比较低的时候，可以缓存的韶光更长，同时也有利于搜索引起对评论内容的抓取。
