评论
/views/main/view.html
{%extends 'layout.html'%}
{%block content%}
<div class="listBox">
<h1>{{content.title}}</h1>
<p class="colDefault">
作者:<span class="colInfo">{{content.user.username}}</span> -
时间:<span class="colInfo">{{content.addTime|date('Y年m月d日 H:i:s', -8*60)}}</span> -
阅读:<span class="colInfo">{{content.views}}</span> -
评论:<span class="colInfo">{{content.comments.length}}</span>
</p>
<dfn>
{{content.content}}
</dfn>
</div>
<div class="listBox message">
<h3 class="textLeft"><strong>评论</strong> <span class="em">一共有 <em id="messageCount">0</em> 条评论</span></h3>
{% if userInfo._id %}
<p class="textLeft">zmouse</p>
<p class="textLeft clear">
<textarea id="messageContent"></textarea>
<input type="hidden" id="contentId" value="{{content.id}}">
<button id="messageBtn" class="submit">提交</button>
</p>
{%else%}
<p class="bgDanger" style="line-height: 30px;">你还没有登录,请先登录!</p>
{%endif%}
<div class="messageList">
</div>
<div class="pager">
<ul class="clear">
<li class="previous">
<a href="">上一页</a>
</li>
<li></li>
<li class="next">
<a href="">下一页</a>
</li>
</ul>
</div>
</div>
<script src="/public/js/comment.js"></script>
{%endblock%}
/routers/api.js
/**
* 获取指定文章的所有评论
*/
router.get('/comment',function (req,res) {
var contentId = req.query.contentid||'';
Content.findOne({
_id:contentId
}).then(function (content) {
responseData.data = content.comments;
res.json(responseData);
})
});
/**
* 评论提交
*/
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.comment.push(postData);
return content.save();
}).then(function (newContent) {
responseData.message = '评论成功';
res.json(responseData);
});
});
/schemas/contents.js
var mongoose = require('mongoose');
//内容数据结构
module.exports = new mongoose.Schema({
//关联字段-分类的id
category:{
type:mongoose.Schema.Types.ObjectId,
//引用
ref:'Category'
},
//内容标题
title:String,
//关联字段-用户id
user:{
type:mongoose.Schema.Types.ObjectId,
//引用
ref:'User'
},
//添加时间
addTime:{
type:Date,
default:new Date()
},
//阅读量
views:{
type:Number,
default:0
},
//内容简介
description:{
type: String,
default:''
},
//内容
content:{
type:String,
default: ''
},
//评论
comments:{
type:Array,
default:[]
}
});
/public/js/comments.js
var prepage = 10;
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) {
//console.log(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);
pages = Math.max(Math.ceil(comments.length / prepage), 1);
var start = Math.max(0, (page-1) * prepage);
var end = Math.min(start + prepage, comments.length);
var $lis = $('.pager li');
$lis.eq(1).html( page + ' / ' + pages);
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>');
}
if (comments.length == 0) {
$('.messageList').html('<div class="messageBox"><p>还没有评论</p></div>');
} else {
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();
}