以前用disqus作为评论,由于墙的原因导致无法访问,就一直没有加上新的评论系统,国内的评论系统有些已经关掉了,也无法使用,所以就想自己写一个简单的评论系统,只是实现了最基本的功能,还有大量的工作没有做。先整理成如下笔记。
一、设计
-
前端
- 前端只需引入一个js文件就直接可以使用,类似disqus
- 一个用户多个站点的评论分别保存,不互相干扰
- 评论只有两级,避免嵌套层级太多导致样式问题
- 采用github登陆(以后添加更多登陆方式)
- 技术栈: javascript + scss + webpack,尽量减少第三包的引入,加快加载速度
-
后端
- 后端采用微服务的方式,认证、用户、评论模块作为单独的系统,通过gateway来进行接口的转发和权限验证。
- 技术栈:golang + postgres + docker
二、开发
###后端
数据结构
站点数据结构
- ID: 数据唯一标识
- OperatorID:用户id
- domain:站点域名,比如abc.com
评论数据结构
- FromID: 评论者用户id (必须)
- ToID: 被评论者用户id
- Content: 内容 (必须)
- ParentID:父级评论id
- Url: 评论对应的页面url,此处删除了http/https,比如: abc.com?id=xxx(必须)
- WebsiteID: 站点id(必须)
- ReplyID: 回复评论的id
返回结构
FromName、FromAvatar、ToName、ToAvatar分别代表对应用户的昵称和头像,Children代表子评论列表
后端流程
- 注册站点拿到站点id
- 在创建评论时首先判断前端传过来的websiteID(站点id) 和 domain(域名)能否找站点的数据,能则创建评论,否则返回错误信息。
- 评论成功后会进行邮件通知
前端
先上一个效果图:
在站点加上如下代码
<div id="vcomment-go"></div>
<script src="//comment.vwood.xyz/vcomment.js?u_id=xxxxxxxxxxxxxxxxxxxxxxxxxx"></script>
代码执行后会将u_id的数据以及页面的url设置到iframe的src数据中,iframe就可以拿到评论了。
发布评论时需要先登陆,所以接入了github,具体的接入方式看官网。
PS: 由于采用iframe来展示评论,避免与网站的样式产生冲突,注意由于iframe的高度不会与内容的高度自适应,所以采用了**postMessage**来通知父级窗口设置iframe高度。
总结
本次只是做了评论系统的一点点功能,还有很多需要添加,比如:数据缓存、前端脚本注入、评论敏感字过滤等等,以及后台关系系统。