接着上一篇文章 《手写一个Hexo评论系统(一)》,本篇文章主要是讲述记述评论系统实现的一些具体的设计方案与技术细节,方便以后修改或者重构。还有项目的部署问题,包括域名解析,Nginx配置代理,云服务器选购的一些问题,选购服务器的坑是真的大,所以还是尽量选择大厂,稳定一点,好用一点就不用在乎多几那块钱嘛,而且根据自己的需要买配置还是比较划算的。
上次总共列出了如下的一些需求,根据这些需求来构想一下如何设计:
1、无需登录和验证码,直接评论即可
2、支持回复评论,且可无限递归回复
3、支持评论点赞,按照点赞排序,相同则按照时间排序
3、支持文章评分,显示评分人数和评分的平均分数
4、支持自己的评论被别人回复后可以邮件通知
5、支持评论后台管理系统,可以设置对应属性
6、支持评论导出,且高度100%可恢复数据
界面与UI设计
第一版得UI就长这样了,整体看起来风格比较简单,这也是我比较喜欢的风格。在文章加载后评论者会获得一个随机的昵称与头像,点击昵称可以切换昵称和头像,不过都是随机的而已。然后就是三个输入框,邮箱输入框、评论内容、文章评分。所以从整体上分成了两部分,一部分是用户信息和评论框,另一部分是具体评论展示区域,只要思考清楚了那么就可以开始了。
反正是做PC的Web端UI嘛,直接上ElementUI了,其实还真的挺适合的,尤其是在展示具体评论的时候按照时间线来展示最合适不过了,而且评分组件也很OK,挺好看的,以后有时间再拿其他的组件库试试!
交互流程设计
首先用户要一打开博客就可以获得随机头像和昵称,并且要保持这个用户的状态,所以整体思路如下