记一次评论系统开发过程

这篇文章发表于 阅读 7

以前用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

返回结构

FromNameFromAvatarToNameToAvatar分别代表对应用户的昵称和头像,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地址