NodeJS实战 利用Express&MongoDB搭建博客（11）评论

评论

    /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();
}