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