Node写博客--内容评论和分页实现

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等等