返回

手写 Hexo 评论系统(二):设计与实现

Android

在上一篇文章《手写一个 Hexo 评论系统(一)》中,我们介绍了 Hexo 评论系统的基本概念和设计方案。本篇文章将深入探讨具体的实现细节和技术方案,带领你一步一步构建一个功能完善的评论系统。

评论数据模型

评论系统需要存储评论数据,因此需要设计一个数据模型。我们采用以下数据模型:

{
  id: ObjectId,
  content: String,
  author: String,
  email: String,
  website: String,
  avatar: String,
  created_at: Date,
  updated_at: Date,
  post: ObjectId
}

其中:

  • id:评论唯一标识符
  • content:评论内容
  • author:评论作者姓名
  • email:评论作者邮箱
  • website:评论作者个人网站
  • avatar:评论作者头像
  • created_at:评论创建时间
  • updated_at:评论更新时间
  • post:评论所属文章 ID

数据存储

我们选择 MongoDB 作为评论数据的存储引擎,因为 MongoDB 是一个文档型数据库,非常适合存储评论这种非结构化数据。

API 设计

评论系统需要提供以下 API:

  • 创建评论
  • 获取评论列表
  • 获取单个评论
  • 更新评论
  • 删除评论

我们使用 Express.js 作为 API 框架,设计了以下路由:

POST /api/comments      创建评论
GET /api/comments        获取评论列表
GET /api/comments/:id    获取单个评论
PUT /api/comments/:id    更新评论
DELETE /api/comments/:id   删除评论

评论表单

用户通过评论表单提交评论。我们使用 React.js 构建了一个表单,该表单包括以下字段:

  • 姓名
  • 邮箱
  • 个人网站
  • 头像(可选)
  • 评论内容

表单使用 Axios 发送数据到后端 API。

评论列表

评论列表显示所有已批准的评论。我们使用 MongoDB 的聚合管道功能对评论进行排序和过滤。

单个评论

单个评论页面显示特定评论的详细信息,包括评论内容、作者信息和评论时间。

评论管理

管理页面允许管理员对评论进行管理,包括:

  • 审核评论
  • 编辑评论
  • 删除评论

评论通知

当有新的评论时,我们可以通过邮件或其他方式通知博主。

技术栈

评论系统使用了以下技术栈:

  • 前端:React.js、Axios
  • 后端:Express.js、MongoDB
  • 数据库:MongoDB
  • 部署:Heroku

部署

我们使用 Heroku 将评论系统部署到云端。Heroku 提供了一个便捷的平台,可以轻松部署和管理 Web 应用。