记一次评论系统开发过程

以前用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代表子评论列表

后端流程

1. 注册站点拿到站点id
2. 在创建评论时首先判断前端传过来的websiteID(站点id) 和 domain(域名)能否找站点的数据，能则创建评论，否则返回错误信息。
3. 评论成功后会进行邮件通知

前端

先上一个效果图：

在站点加上如下代码

<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高度。

总结

本次只是做了评论系统的一点点功能，还有很多需要添加，比如：数据缓存、前端脚本注入、评论敏感字过滤等等，以及后台关系系统。

demo地址