1.首先在view.html中增加评论区域
2.使用ajax方法,把评论提交上去,在api.js中写入
var Content=require('../models/Content');//引入内容
//评论提交
router.post('/comment/post',function (req,res) {
//内容的id
var contentId = req.body.contentid ||'';
var postData={
username:req.userInfo.username,
postTime:new Date(),
content:req.body.content
};
//查询当前这篇内容的信息
Content.findOne({
_id:contentId
}).then(function (content) {
content.comments.push(postData);
return content.save();
}).then(function (newContent) {
responseData.message='评论成功';
responseData.data=newContent;
res.json(responseData);
});
});
3.将每一篇的评论保存在每篇评论下面,在contents.js中加入下面代码
//评论
comments:{
type:Array,
default:[]
}
4.根据后台修改前台,增加comment.js使用ajax传输数据
//提交评论
$('#messageBtn').on('click',function () {
$.ajax({
type:'POST',
url:'/api/comment/post',
data:{
contentid:$('#contentId').val(),
content:$('#messageContent').val()
},
success:function (responseData) {
$('#messageContent').val('');
}
});
});
function renderComment(comments) {
var html='';
for(var i=0;i<comments.length;i++){
html+='<div class="messageBox">'+
'<p class="name clear"><span class="fl">'+comments[i].username+'</span>' +
'<span class="fr">'+comments[i].postTime+'</span></p>' +
'<p>'+comments[i].content+'</p>'+
'</div>';
}
$('.messageList').html(html);
}
5.但是在页面刷新的时候,能展示出评论,在api.js中修改
//获得指定文章的所有评论
router.get('/comment',function (req,res) {
//内容的id
var contentId = req.query.contentid ||'';
Content.findOne({
_id:contentId
}).then(function (content) {
responseData.data=content.comments;
res.json(responseData);
});
});
在comment.js中修改
//提交评论
$('#messageBtn').on('click',function () {
$.ajax({
type:'POST',
url:'/api/comment/post',
data:{
contentid:$('#contentId').val(),
content:$('#messageContent').val()
},
success:function (responseData) {
$('#messageContent').val('');
//得到当前最新的评论
renderComment(responseData.data.comments.reverse());
}
});
});
//每次页面重载的时候获取一下该文章的所有评论
$.ajax({
url:'/api/comment',
data:{
contentid:$('#contentId').val()
},
success:function (responseData) {
renderComment(responseData.data.reverse());
}
});
function renderComment(comments) {
var html='';
for(var i=0;i<comments.length;i++){
html+='<div class="messageBox">'+
'<p class="name clear"><span class="fl">'+comments[i].username+'</span>' +
'<span class="fr">'+comments[i].postTime+'</span></p>' +
'<p>'+comments[i].content+'</p>'+
'</div>';
}
$('.messageList').html(html);
}
6.问题:评论数和时间问题
(1)在function renderComment中加入
$('#messageCount').html(comments.length);
(2)在comment.js中格式化时间
//格式化时间
function formatDate(d) {
var date1=new Date(d);
return date1.getFullYear()+'年'+(date1.getMonth()+1)+'月'+date1.getDate()+'日 '+date1.getHours()+':'+date1.getMinutes()+':'+date1.getSeconds();
}
7.前端对评论区进行分页
var perpage=5;//每页显示多少条
var page=1;
var pages=0;
var comments=[];
//提交评论
$('#messageBtn').on('click',function () {
$.ajax({
type:'POST',
url:'/api/comment/post',
data:{
contentid:$('#contentId').val(),
content:$('#messageContent').val()
},
success:function (responseData) {
$('#messageContent').val('');
comments=responseData.data.comments.reverse();
//得到当前最新的评论
renderComment();
}
});
});
//每次页面重载的时候获取一下该文章的所有评论
$.ajax({
url:'/api/comment',
data:{
contentid:$('#contentId').val()
},
success:function (responseData) {
comments=responseData.data.reverse();
renderComment();
}
});
$('.pager').delegate('a','click',function () {
if($(this).parent().hasClass('previous')){
page--;
}else {
page++;
}
renderComment();
});
function renderComment() {
$('#messageCount').html(comments.length);
var pages=Math.ceil(comments.length/perpage);
var $lis=$('.pager li');
$lis.eq(1).html(page +'/'+pages);
var start=Math.max(0,(page-1)*perpage);
var end=Math.min(start+perpage,comments.length);
if(page<=1){
page=1;
$lis.eq(0).html('<span>没有上一页</span>');
}else {
$lis.eq(0).html('<a href="javascript:;">上一页</a>');
}
if(page>=pages){
page=pages;
$lis.eq(2).html('<span>没有下一页了</span>');
}else {
$lis.eq(2).html('<a href="javascript:;">下一页</a>');
}
var html='';
for(var i=start;i<end;i++){
html+='<div class="messageBox">'+
'<p class="name clear"><span class="fl">'+comments[i].username+'</span>' +
'<span class="fr">'+formatDate(comments[i].postTime)+'</span></p>' +
'<p>'+comments[i].content+'</p>'+
'</div>';
}
$('.messageList').html(html);
}
//格式化时间
function formatDate(d) {
var date1=new Date(d);
return date1.getFullYear()+'年'+(date1.getMonth()+1)+'月'+date1.getDate()+'日 '+date1.getHours()+':'+date1.getMinutes()+':'+date1.getSeconds();
}
8.分类页中的评论数
9.细节处理
(1)内容的显示,多样化(百度编辑器)
(2)对安全的处理xss等等