从零构建vue-blog评论系统：留言功能到邮箱通知的完整实现指南

从零构建vue-blog评论系统：留言功能到邮箱通知的完整实现指南

【免费下载链接】vue-blogVue2 + Node.js + Mongodb 前后端分离的个人博客项目地址: https://gitcode.com/gh_mirrors/vueb/vue-blog

vue-blog是一个基于Vue2 + Node.js + Mongodb的前后端分离个人博客项目，其评论系统不仅支持基础的留言互动，还实现了智能的邮箱通知功能。本文将详细介绍如何从评论功能设计到邮件通知实现的全过程，帮助开发者快速掌握前后端分离架构下评论系统的开发要点。

评论系统核心功能设计

一个完整的博客评论系统需要包含三大核心模块：评论提交与存储、评论展示与排序、互动反馈与通知。在vue-blog项目中，这些功能分别通过前端组件和后端API实现。

数据模型设计

评论系统的基础是合理的数据结构设计。在server/db/db.js中定义了评论的数据模型，包含用户信息、评论内容、时间戳等关键字段：

comment_n: Number

实际存储的评论数据结构在server/api/comment.js中定义，包含头像、用户名、评论内容、文章ID等必要信息：

const comment = { imgName: req.body.imgName, name: req.body.name, address: req.body.address, date: Date(), content: req.body.content, articleId: req.body.articleId, like: 0 }

功能模块划分

评论系统主要分为以下功能模块：

• 评论提交：用户发布新评论
• 评论展示：按时间或热度展示评论列表
• 评论互动：点赞功能
• 通知系统：评论回复与新评论邮件通知

图：博客评论系统架构示意图，展示了前后端交互流程

前端评论组件实现

前端评论功能主要通过ArticleComment.vue组件实现，该组件位于src/components/front/component/ArticleComment.vue，负责评论的展示、提交和互动功能。

评论列表展示

评论列表使用Vue的v-for指令循环渲染评论数据，展示用户名、评论内容、时间和点赞数等信息：

<div class='comments' v-for='(comment,index) in comments'> <div id='info' :class='comment.imgName'> <p class='commentName'>#{{index + 1}} <span>{{comment.name}}</span></p> <p class='text'>{{comment.content}}</p> <div class='commentFooter'> <p class='commentDate'>{{comment.date | to_date}}</p> <a href='#comment'>// comment submit_comment: (context, payload) => { return Vue.http.post('/api/comment', payload) }

评论排序与点赞

评论支持按时间或点赞数排序，通过调用不同的API参数实现：

// 获取评论 get_comments: (context, payload) => { return Vue.http.get('/api/comments', {params: {payload}}) .then(res => { const comments = res.data commit('set_comments', comments) }) }

点赞功能通过patch请求更新点赞数：

update_like: (context, payload) => { return Vue.http.patch('/api/comments/' + payload.id, {option: payload.option}) }

后端API实现

后端评论API集中在server/api/comment.js文件中，提供了评论的CRUD操作和通知功能。

评论提交API

评论提交API负责验证用户信息、保存评论数据并触发通知机制：

router.post('/api/comment', (req, res) => { db.Comment.findOne({name: req.body.name, articleId: req.body.articleId}, (err, doc) => { if (doc && doc.address !== req.body.address) { res.status(403).end('用户名已存在') } else if(!doc || doc.address === req.body.address) { const comment = { // 评论数据 } // 保存评论 new db.Comment(comment).save().then(() => { // 发送通知邮件 mail.send('xxx@qq.com', '您的博客有一条新评论', content, res) res.status(200).send('send email successfully') }) // 更新文章评论数 db.Article.update({aid: req.body.articleId},{$inc: {comment_n: 1}}, (err, data) => { // 错误处理 }) } }) })

评论获取API

评论获取API支持按时间或点赞数排序，并返回指定文章的评论列表：

router.get('/api/comments', (req, res) => { const articleId = req.query.payload.id if (req.query.payload.sort === 'date') { // 按时间排序 db.Comment.find({articleId: articleId}, 'name date content like imgName').sort({date: -1}).exec() .then((comments) => { res.send(comments) }) } else if (req.query.payload.sort === 'like') { // 按点赞数排序 db.Comment.find({articleId: articleId}, 'name date content like imgName').sort({like: -1}).exec() .then((comments) => { res.send(comments) }) } else { // 默认排序 db.Comment.find({articleId: articleId}, 'name date content like imgName').exec().then((comments) => { res.send(comments) }) } })

点赞功能API

点赞功能通过patch请求实现，使用MongoDB的$inc操作符原子更新点赞数：

router.patch('/api/comments/:id', (req, res) => { const id = req.params.id if (req.body.option === 'add') { db.Comment.update({_id: id}, {$inc: {like: 1}}, (err, data) => { // 处理结果 }) } else if (req.body.option === 'drop') { db.Comment.update({_id: id}, {$inc: {like: -1}}, (err, data) => { // 处理结果 }) } })

邮箱通知系统实现

vue-blog的评论系统不仅支持基础的评论功能，还实现了智能的邮箱通知机制，当有新评论或回复时自动发送邮件通知。

邮件发送模块

邮件发送功能在server/email.js中实现，使用nodemailer库发送HTML格式邮件：

const nodemailer = require('nodemailer') let transporter = nodemailer.createTransport({ service: '126', auth: { user: 'blogbutler@126.com', pass: '123456abc' } }) exports.send = function(to, subject, html, res) { const mailOptions = { from: '"博客小管家" <blogbutler@126.com>', to : to, subject : subject, html : html } transporter.sendMail(mailOptions, function(error, info){ if (error) { console.log(error) res.status(504).end("通知邮件发送失败") } else { console.log("Message sent: " + info.response) } }) }

评论通知触发机制

在评论提交时，系统会判断是否为回复评论，并分别发送通知给文章作者和被回复者：

// 判断是否为回复评论 if (/^@(.*):/.test(req.body.content)) { const reviewer = /^@(.*):/.exec(req.body.content)[1] // 被回复者名字 db.Comment.findOne({name: reviewer, articleId: req.body.articleId}, (err, doc) => { const url = 'https://www.xxx.cn' + req.body.curPath const replyEmail = doc.address // 发送回复通知邮件 const content = emailForm('欢迎常来我的博客', reviewer, req.body.name, '回复了你的评论', req.body.content, url) mail.send(replyEmail, '您在FatDong的博客有一条新评论', content, res) }) } // 发送新评论通知给博主 new db.Comment(comment).save().then(() => { const url = 'https://www.xxx.cn' + req.body.curPath const content = emailForm('MyBlog Message', '站长', req.body.name, '评论了你的文章', req.body.content, url) mail.send('xxx@qq.com', '您的博客有一条新评论', content, res) res.status(200).send('send email successfully') })

邮件模板设计

邮件内容使用HTML模板生成，在server/api/comment.js中定义了邮件模板函数：

const emailForm = (title, name, otherName, message, content, url) => { let string = ` <div style="width: 90%; border: 2px solid lightgreen; margin: 1rem auto; padding: 1rem; text-align: center;"> <p style="border-bottom: 1px dashed lightgreen; margin: 0;padding-bottom: 1rem; color: lightgreen; font-size: 1.25rem;">${title}</p> <p style="margin: 1rem 0 0;">hello,${name} &#x1f608</p> <p style="margin: 0 0 1rem;">${otherName}${message}</p> <p style="width: 70%; border-left: 4px solid lightgreen; padding: 1rem; margin: 0 auto 2rem; text-align: left;white-space: pre-line;">${content}</p> <a href= ${url} style="text-decoration: none; background: lightgreen;color: #fff; height: 2rem; line-height: 2rem; padding: 0 1rem; display: inline-block; border-radius: 0.2rem;">前往查看</a> </div> ` return string }

系统集成与使用

项目结构

评论系统在项目中的主要文件结构如下：

• 前端组件：src/components/front/component/ArticleComment.vue
• 状态管理：src/store/actions.js、src/store/mutations.js
• 后端API：server/api/comment.js
• 数据模型：server/db/db.js
• 邮件服务：server/email.js

安装与配置

要在本地运行该项目，首先需要克隆仓库：

git clone https://gitcode.com/gh_mirrors/vueb/vue-blog

然后安装依赖并配置邮件服务：

1. 修改server/email.js中的邮件服务配置
2. 配置MongoDB数据库连接
3. 运行前后端服务

总结与扩展

vue-blog评论系统通过前后端分离架构，实现了评论提交、展示、排序、点赞和邮件通知等完整功能。系统设计遵循了模块化原则，将评论功能分解为数据模型、API接口、前端组件和通知服务等独立模块，便于维护和扩展。

未来可以考虑添加以下功能：

• 评论审核机制，防止垃圾评论
• 评论嵌套回复，支持多级评论
• 评论表情支持，丰富评论内容
• 评论 markdown 格式支持，增强排版功能

通过本文的介绍，相信你已经掌握了vue-blog评论系统的实现原理和开发方法，可以在此基础上进行二次开发和功能扩展，打造更加完善的博客评论体验。

【免费下载链接】vue-blogVue2 + Node.js + Mongodb 前后端分离的个人博客项目地址: https://gitcode.com/gh_mirrors/vueb/vue-blog