当前位置：首页 > news >正文

评论功能开发全解析：从数据库设计到多语言实现-优雅草卓伊凡

news 来源：原创 2025/6/1 12:03:11

评论功能开发全解析：从数据库设计到多语言实现-优雅草卓伊凡

一、评论功能的核心架构设计

评论功能看似简单，实则涉及复杂的业务逻辑和技术考量。一个完整的评论系统需要支持：内容评论、回复评论、评论点赞、评论排序、敏感词过滤等功能。

1.1 数据库设计的两种主流方案

方案一：单表设计（评论+回复放在同一张表）

表结构设计：

CREATE TABLE `comments` (`id` bigint NOT NULL AUTO_INCREMENT,`content_id` bigint NOT NULL COMMENT '被评论的内容ID',`content_type` varchar(32) NOT NULL COMMENT '内容类型：article/video等',`user_id` bigint NOT NULL COMMENT '评论用户ID',`content` text NOT NULL COMMENT '评论内容',`parent_id` bigint DEFAULT NULL COMMENT '父评论ID，NULL表示一级评论',`root_id` bigint DEFAULT NULL COMMENT '根评论ID，方便查找整个评论树',`created_at` datetime NOT NULL,`updated_at` datetime NOT NULL,`like_count` int DEFAULT '0',`status` tinyint DEFAULT '1' COMMENT '状态：1-正常，0-删除',PRIMARY KEY (`id`),KEY `idx_content` (`content_type`,`content_id`),KEY `idx_parent` (`parent_id`),KEY `idx_root` (`root_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

优点：

查询简单，一次查询即可获取所有评论和回复
事务处理方便
适合中小型系统

缺点：

数据量大时性能下降
树形结构查询效率低

方案二：双表设计（评论和回复分开存储）

评论表设计：

CREATE TABLE `comments` (`id` bigint NOT NULL AUTO_INCREMENT,`content_id` bigint NOT NULL,`content_type` varchar(32) NOT NULL,`user_id` bigint NOT NULL,`content` text NOT NULL,`created_at` datetime NOT NULL,`updated_at` datetime NOT NULL,`like_count` int DEFAULT '0',`reply_count` int DEFAULT '0',`status` tinyint DEFAULT '1',PRIMARY KEY (`id`),KEY `idx_content` (`content_type`,`content_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

回复表设计：

CREATE TABLE `comment_replies` (`id` bigint NOT NULL AUTO_INCREMENT,`comment_id` bigint NOT NULL COMMENT '所属评论ID',`user_id` bigint NOT NULL,`reply_to` bigint DEFAULT NULL COMMENT '回复的目标用户ID',`content` text NOT NULL,`created_at` datetime NOT NULL,`updated_at` datetime NOT NULL,`status` tinyint DEFAULT '1',PRIMARY KEY (`id`),KEY `idx_comment` (`comment_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

优点：

结构清晰，职责分离
大评论量时性能更好
便于分表分库

缺点：

需要多次查询才能构建完整评论树
事务处理更复杂

1.2 最优方案选择

推荐选择：

中小型项目：单表设计（维护简单）
大型高并发项目：双表设计+缓存（性能优先）
超大型项目：双表设计+分库分表+评论服务化

二、多语言实现方案

2.1 PHP实现方案

评论模型（单表设计）：

class Comment extends Model
{protected $table = 'comments';// 获取内容的所有顶级评论public function getRootComments($contentType, $contentId, $page = 1, $pageSize = 10){return self::where('content_type', $contentType)->where('content_id', $contentId)->whereNull('parent_id')->orderBy('created_at', 'desc')->paginate($pageSize, ['*'], 'page', $page);}// 获取评论的所有回复public function getReplies($commentId, $page = 1, $pageSize = 5){return self::where('root_id', $commentId)->orWhere('parent_id', $commentId)->orderBy('created_at', 'asc')->paginate($pageSize, ['*'], 'page', $page);}// 添加评论public function addComment($userId, $contentType, $contentId, $content, $parentId = null){$comment = new self();$comment->user_id = $userId;$comment->content_type = $contentType;$comment->content_id = $contentId;$comment->content = $this->filterContent($content);$comment->parent_id = $parentId;$comment->root_id = $parentId ? $this->getRootId($parentId) : null;$comment->save();return $comment;}// 敏感词过滤private function filterContent($content){// 实现敏感词过滤逻辑return $content;}
}

2.2 Java实现方案（Spring Boot）

实体类：

@Entity
@Table(name = "comments")
public class Comment {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Long id;private Long contentId;private String contentType;private Long userId;private String content;@ManyToOne@JoinColumn(name = "parent_id")private Comment parent;@OneToMany(mappedBy = "parent", cascade = CascadeType.ALL)private List<Comment> replies = new ArrayList<>();// getters and setters
}

服务层：

@Service
public class CommentService {@Autowiredprivate CommentRepository commentRepository;public Page<Comment> getRootComments(String contentType, Long contentId, Pageable pageable) {return commentRepository.findByContentTypeAndContentIdAndParentIsNull(contentType, contentId, pageable);}public Comment addComment(Long userId, String contentType, Long contentId, String content, Long parentId) {Comment parent = parentId != null ? commentRepository.findById(parentId).orElse(null) : null;Comment comment = new Comment();comment.setUserId(userId);comment.setContentType(contentType);comment.setContentId(contentId);comment.setContent(filterContent(content));comment.setParent(parent);return commentRepository.save(comment);}private String filterContent(String content) {// 敏感词过滤实现return content;}
}

2.3 Go实现方案（Gin框架）

模型：

type Comment struct {ID          int64     `gorm:"primaryKey"`ContentID   int64     `gorm:"index"`ContentType string    `gorm:"size:32;index"`UserID      int64     `gorm:"index"`Content     string    `gorm:"type:text"`ParentID    *int64    `gorm:"index"`RootID      *int64    `gorm:"index"`CreatedAt   time.TimeUpdatedAt   time.TimeStatus      int8      `gorm:"default:1"`
}func GetComments(db *gorm.DB, contentType string, contentID int64, page, pageSize int) ([]Comment, error) {var comments []Commentoffset := (page - 1) * pageSizeerr := db.Where("content_type = ? AND content_id = ? AND parent_id IS NULL", contentType, contentID).Offset(offset).Limit(pageSize).Order("created_at DESC").Find(&comments).Errorreturn comments, err
}func AddComment(db *gorm.DB, userID int64, contentType string, contentID int64, content string, parentID *int64) (*Comment, error) {// 敏感词过滤filteredContent := FilterContent(content)comment := &Comment{ContentID:   contentID,ContentType: contentType,UserID:      userID,Content:     filteredContent,ParentID:    parentID,Status:      1,}if parentID != nil {var parent Commentif err := db.First(&parent, *parentID).Error; err != nil {return nil, err}if parent.RootID != nil {comment.RootID = parent.RootID} else {comment.RootID = parentID}}err := db.Create(comment).Errorreturn comment, err
}

三、前端Vue实现方案

3.1 评论组件实现

<template><div class="comment-section"><h3>评论({{ total }})</h3><!-- 评论表单 --><div class="comment-form"><textarea v-model="newComment" placeholder="写下你的评论..."></textarea><button @click="submitComment">提交</button></div><!-- 评论列表 --><div class="comment-list"><div v-for="comment in comments" :key="comment.id" class="comment-item"><div class="comment-header"><span class="username">{{ comment.user.name }}</span><span class="time">{{ formatTime(comment.created_at) }}</span></div><div class="comment-content">{{ comment.content }}</div><!-- 回复按钮 --><button @click="showReplyForm(comment.id)">回复</button><!-- 回复表单（点击回复时显示） --><div v-if="activeReply === comment.id" class="reply-form"><textarea v-model="replyContents[comment.id]" placeholder="写下你的回复..."></textarea><button @click="submitReply(comment.id)">提交回复</button></div><!-- 回复列表 --><div class="reply-list" v-if="comment.replies && comment.replies.length"><div v-for="reply in comment.replies" :key="reply.id" class="reply-item"><div class="reply-header"><span class="username">{{ reply.user.name }}</span><span class="time">{{ formatTime(reply.created_at) }}</span></div><div class="reply-content">{{ reply.content }}</div></div><!-- 查看更多回复 --><button v-if="comment.reply_count > comment.replies.length" @click="loadMoreReplies(comment.id)">查看更多回复({{ comment.reply_count - comment.replies.length }})</button></div></div></div><!-- 分页 --><div class="pagination"><button @click="prevPage" :disabled="page === 1">上一页</button><span>第 {{ page }} 页</span><button @click="nextPage" :disabled="!hasMore">下一页</button></div></div>
</template><script>
export default {props: {contentType: {type: String,required: true},contentId: {type: Number,required: true}},data() {return {comments: [],newComment: '',replyContents: {},activeReply: null,page: 1,pageSize: 10,total: 0,hasMore: true}},created() {this.loadComments();},methods: {async loadComments() {try {const response = await axios.get('/api/comments', {params: {content_type: this.contentType,content_id: this.contentId,page: this.page,page_size: this.pageSize}});this.comments = response.data.data;this.total = response.data.total;this.hasMore = this.page * this.pageSize < this.total;} catch (error) {console.error('加载评论失败:', error);}},async submitComment() {if (!this.newComment.trim()) return;try {const response = await axios.post('/api/comments', {content_type: this.contentType,content_id: this.contentId,content: this.newComment});this.comments.unshift(response.data);this.total++;this.newComment = '';} catch (error) {console.error('提交评论失败:', error);}},showReplyForm(commentId) {this.activeReply = commentId;this.$set(this.replyContents, commentId, '');},async submitReply(commentId) {const content = this.replyContents[commentId];if (!content.trim()) return;try {const response = await axios.post(`/api/comments/${commentId}/replies`, {content: content});const comment = this.comments.find(c => c.id === commentId);if (comment) {if (!comment.replies) {comment.replies = [];}comment.replies.push(response.data);comment.reply_count++;}this.activeReply = null;this.replyContents[commentId] = '';} catch (error) {console.error('提交回复失败:', error);}},async loadMoreReplies(commentId) {try {const comment = this.comments.find(c => c.id === commentId);const currentCount = comment.replies ? comment.replies.length : 0;const response = await axios.get(`/api/comments/${commentId}/replies`, {params: {offset: currentCount,limit: 5}});if (comment.replies) {comment.replies.push(...response.data);} else {comment.replies = response.data;}} catch (error) {console.error('加载更多回复失败:', error);}},prevPage() {if (this.page > 1) {this.page--;this.loadComments();}},nextPage() {if (this.hasMore) {this.page++;this.loadComments();}},formatTime(time) {return dayjs(time).format('YYYY-MM-DD HH:mm');}}
}
</script>