目录

不用数据库, 静态博客实现评论功能的实现


前言

这个博客虽然使用了expressjs作为后端框架, 但是本质上还是一个基于Markdown渲染Html的静态博客. 因此, 不使用数据库来开发评论功能会造成一点小麻烦.

重申: 为什么不使用数据库?

  1. 穷: 所以希望博客在各处搬家的时候不要依赖数据库, 降低迁移过程的麻烦
  2. 解决多点数据同步问题: 本博客的项目同时部署在法国aws和中国的腾讯云, 如果使用数据库, 势必要处理数据库同步的问题, 解决起来有意义但是为了数据库同步而在端口开洞不是个好方法
  3. 考虑历史问题: 数据库出问题评论交互就没了, 不好. 过去有些娱乐项目就是这样数据库内容搞丢了跑不起来.
  4. 自娱自乐
  5. 复古

需求分析

业务层面

  1. 每篇文章都需要能够添加评论, 也可以锁评论
  2. 评论区可以互相引用, 可以re
  3. 提交评论需要验证图形验证码(国内外可能需要用不同验证机制)
  4. 评论提交后需要审核后才能发布(防spam)
  5. 需要一个评论审核后台, 集中审核/ 回复所有评论
  6. 评论时间显示的时候注意时区
  7. 用户登录使用第三方登录(微信, google,

技术层面

  1. 文章模板增加评论区
  2. 新做一个管理员鉴权界面(弹窗输入密码, 存cookie身份 - 用passport )
  3. 新做一个评论管理界面
    1. 文章筛选: 根据文件名和相对路径筛选文章列表, 和文章的评论列表
    2. 批量操作: 批量改变文章的状态, 或者评论的状态 -> 显示(可显示, 可回复), 锁定(可显示, 不可以回复), 隐藏(不显示), 删除(软删除)
  4. 评论存入json
  5. 每篇文章用uri做拼接: {{base路径}}_sanitize( {{文章文件名}} )
  6. 所有json统一存在一个目录里面 /comments, 不需要多层的相对路径 多了容易乱,还是要多层路径
  7. json内容:
    1. 文章相对路径
    2. 文章名
    3. 文章hash
    4. 评论状态: 文章: 显示(可显示, 可回复), 锁定(可显示, 不可以回复), 隐藏(不显示), 删除(软删除)
    5. 评论列表 数组:
      1. 评论状态: 显示(可显示, 可回复), 锁定(可显示, 不可以回复), 隐藏(不显示), 删除(软删除)
      2. 评论时间
      3. 发言人昵称
      4. 发言人email
      5. 被回复昵称
      6. 被回复摘要
      7. 评论内容(markdown格式, 所以要注意内部特殊字符转义)
      8. 操作记录: 时间, 动作( 通过, 隐藏, 删除, 锁定)
  8. 同步方法:
    1. A站点(aws)作为master, B站点(腾讯云)作为slave
    2. master收到的评论直接存入目录里面的json
    3. master提供一个内部API给slave, 用于评论提交(上行)
    4. master提供一个内部API给slave, 用于评论更新(下行)
    5. slave自己不存评论
      1. 收到评论的时候, 调用上行API提交给master
      2. 打开页面的时候, 调用下行API更新评论(并存入本地缓存) (async/ await)
  9. Config
    1. comments.lock_all : 全站禁止评论
    2. comments.sync_role : master / slave 评论同步中的角色区分
    3. comments.sync_master_url : master的网站URL
    4. comments.sync_token : 评论同步过程中, master和slave鉴权时候的token
  10. 验证码和token用中间件实现

开发步骤

  1. 项目config增加comments相关配置
  2. mock一个评论文件
  3. 文章模板新增评论区
    1. 样式和布局
    2. 显示mock的评论内容
    3. 隐藏和显示目录/评论面板
    4. 提交评论表单
  4. 路由
    1. 收到评论提交, 处理并保存到json
  5. API
    1. 一个供slave查询评论的API
    2. 一个供slave提交新评论的API
    3. 管理员操作相关API
  6. 中间件
    1. API鉴权中间件
    2. 集成图形验证码(中式) / svg-captcha
    3. 集成图形验证码(外国) / google ReCaptcha
    4. 集成passport做管理员鉴权(以及未来的用户鉴权)
  7. 管理员界面
    1. 管理员登录界面
    2. 管理员管理和操作界面
  8. 文章管理:
    1. 管理员管理界面, 文章列表和相关评论浏览
    2. 点赞功能: 数据结构, API和UI
  9. 远期
    1. 评论弹幕功能

参考

  1. hexo的评论模板
666    ·   1

(点赞功能开发中)

评论列表
{{item.userName}}
{{item.lastUpdate}}
{{item.content}}
{{item.like}}    |   {{item.unlike}}
{{ sItem.userName }}
{{ sItem.lastUpdate }}
{{ sItem.content }}
{{ sItem.like }}    |   {{ sItem.unlike }}