web前端 | 博客（十三）评论功能- 校招VIP

文章声明：转载来源：https://blog.csdn.net/qq_40644568/article/details/103941757

一、评论功能

1.创建评论集合

2.判断用户是否登录，如果用户登录，再允许用户提交评论表单

3.在服务器端创建文章评论功能对应的路由

4.再路由请求处理函数中接受客户端传递过来的评论信息

5.将评论信息存储在评论集合中

6.将页面重定向回文章详情页面

7.在文章详情页面路由.中获取文章评论信息并展示在页面中

二、在model下新建comment.js

const mongoose = require('mongoose');

const commentSchema = new mongoose.Schema({
  //文章id
  aid: {
    type: mongoose.Schema.Types.ObjectId,
    ref: 'Article',
  },
  //用户id
  uid: {
    type: mongoose.Schema.Types.ObjectId,
    ref: 'User',
  },
  //评论时间
  publishDate: {
    type: Date,
    default: Date.now,  //当前时间
  },
  content: {
    type: String
  }
});

//3.  使用规则创建文章集合
const Comment = mongoose.model('Comment', commentSchema);

//4. 将集合规则作为模块成员导出
module.exports = {
  Comment
}

三、判断登录角色

在login.js中判断登录角色

if(user.role == 'admin') {
              //重定向到用户列表页面
              res.redirect('/admin/user');
            } else {
              //重定向到用户列表页面
              res.redirect('/home/');
            }

四、限制普通用户访问后台管理页面

在登录时，将用户角色存储在session对象中

req.session.role = user.role;

在middleware下的loginGuard.js中

//判断用户访问的是否是登录页面
  //判断用户的登录状态
  //如果用户是登录的，将请求放行
  //如果用户不是登录的，将请求重定向到登录页面
  if(req.url != '/login' && !req.session.username) {
    res.redirect('/admin/login');
  } else {
    //如果用户是登录状态，并且是普通用户
    if(req.session.role == 'normal') {
      //让它跳转到墨客首页，阻止程序向下执行
      return res.redirect('/home/');
    }
    //用户是登录状态，将请求放行
    next();
  }
}

五、对未登录用户提示登录后才能评论

在article.art中

{{if userInfo}}
					<h4>评论</h4>
					<form class="comment-form">
						<textarea class="comment"></textarea>
						<div class="items">
							<input type="submit" value="提交">
						</div>
					</form>
					{{else}}
						<div><h2>先进行登录，再对文章进行评论</h2></div>
					{{/if}}

未登录状态：

然而userInfo存储在req.app.locals中，即使退出登录，删除了服务器端的session，删除了客户端的cookie，但是userInfo并不为空。所以要在退出时对它进行置空。

在logout.js中

req.app.locals.userInfo = null;

六、实现添加评论功能

为表单添加请求地址请求方式，为表单控件添加name属性。

给表单添加隐藏域，分别存储文章id和用户id。

在服务器端添加评论添加请求的路由，将客户端中传来的评论信息存储在数据库当中。

article.art

<form class="comment-form" action="/home/comment" method="post">
						<textarea class="comment" name="content"></textarea>
						<input type="hidden" name="uid" value="{{@userInfo._id}}">
						<input type="hidden" name="aid" value="{{@article._id}}">
						<div class="items">
							<input type="submit" value="提交">
						</div>
					</form>

在home.js中创建评论功能路由，

req.body中

所以可以从其中拿到请求信息。

在home文件夹下的comment.js中

//将评论集合构造函数进行导入
const { Comment } = require('../../model/comment');

module.exports = async (req, res) => {
  //接受客户端传递过来的请求参数
  const { content, uid, aid } = req.body;

  //将评论信息存储到评论集合中
  await Comment.create({
    content: content,
    uid: uid,
    aid: aid,
    time: new Date()
  });

  //将页面重定向回文章详情页面
  res.redirect('/home/article?id='+ aid);
}

其中有了数据。

七、评论展示功能

在文章详情的路由请求页面中，根据文章id，从评论集合中查询出评论，并将查询出来的数据展示在页面中。

在article.js中，根据文章的id查询评论信息。

let comments = await Comment.find({aid: id});

因为要得到评论人的信息，所以要.populate('uid')。

将查询出来的评论信息传入模板当中，在模板中使用模板语法即可。

在article.art中，

{{each comments}}
	<div class="mb10">
		<div class="article-info">
			<span class="author">{{$value.uid.username}}</span>
			<span>{{dateFormat($value.time), 'yyyy-mm-dd'}}</span>
			<span>{{$value.uid.email}}</span>
		</div>
		<div class="comment-content">
			{{$value.content}}
		</div>
	</div>
{{/each}}

提交后新评论可以正常显示。