NodeJS博客实战24_前台博客评论展示

源码地址:https://github.com/RidingACodeToStray/Nodejs_blog

1.主要功能以及实现

1)登录和未登录在评论区给出提示,使用模板条件判断,对未登录的给出登录提示

2)评论提交包含评论当前文章的id,内容,时间和用户信息,其中用户信息是从session中获取

3)在数据库中查找该文章的信息,并将评论存入,再返回所有的评论用户展示

4)前台使用ajax提交评论,得到相应的所有评论信息后使用字符串循环拼接的方式展示在下方

2.相关代码片段

1)routers/api.js

//评论提交
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){
		resData.message = '评论成功';
		resData.data = newContent,
		res.json(resData);
	});
})

2)views/main/view.html

{% extends 'layout.html' %} {% block content %}
<div style="display: inline-block;vertical-align: top;background-color: #eae3e3;padding: 10px;box-shadow: 5px 5px 5px #c3baba;width: calc(100% - 250px);">
    <h2>{{content.title}}</h2>
            <div>
                <span>
                                <span>作者:</span><a href="">{{content.user.username}}</a>
                </span>
                <span>
                                <span>时间:</span><a href="">{{content.addTime|date('Y-m-d H:i:s',-8*60)}}</a>
                </span>
                <span>
                                <span>阅读:</span><a href="">{{content.views}}</a>
                </span>
                <span>
                                <span>评论:</span><a href="">10</a>
                </span>
            </div>
            <div style="text-align: left;margin-top: 10px;">
                {{content.content}}
            </div>
    <div class="pinglun" style="margin-top: 20px;">
        <div>
            <strong style="float: left;margin-left: 10px;">评论区</strong>
            <span style="float: right;margin-right: 10px;">一共有<span>0</span>条评论</span>
        </div>
        {% if userInfo._id %}
        <div style="text-align: left;">
            <textarea rows="3" style="width: calc(100% - 100px)" class="neirong"></textarea>
            <input type="hidden" id="contentId" value="{{content.id}}">
            <button style="width: 50px;vertical-align: text-bottom;" class="commentBtn">提交</button>
        </div>
        {% else %}
        <div style="text-align: center;padding-top: 30px;font-weight: bold;">您还没有登录,请先
            <a href="">登录</a>
        </div>
        {% endif %}
        <!-- <p style="text-align:left;">还没有留言</p> -->
        <ul style="text-align: left;" class="megList"></ul>
    </div>
</div>
<script src="/public/js/comment.js"></script>
{% endblock %}

3)public/js/comment.js

$('.commentBtn').on('click',function(){
	$.ajax({
		type:'post',
		url:'/api/comment/post',
		data:{
			contentid:$('#contentId').val(),
			content:$('.neirong').val()
		},
		success:function(res){
			// console.log(res);
			$('.neirong').val(''); //清空评论区
			renderComment(res.data.comments.reverse())
		}
	})
})

function renderComment(comments){
	var html = '';
	for(var i = 0; i < comments.length; i ++){
		html += '<li style="padding: 10px;border: 1px solid;margin-bottom: 20px;"><div style="font-weight: bold;justify-content: space-between;display: flex;"><p>'+ comments[i].username +'</p><p>'+ comments[i].postTime +'</p></div><div>'+ comments[i].content +'</div></li>'
	}
	$('.megList').html(html);
}
阅读更多
版权声明:在那最初的相遇中,我们都曾经为彼此心动过... https://blog.csdn.net/weixin_36185028/article/details/79948479
文章标签: NodeJS博客
个人分类: NodeJS博客实战
上一篇NodeJS博客实战23_前台博客内容详情页和阅读数处理
下一篇NodeJS博客实战25_前台博客评论分页展示
想对作者说点什么? 我来说一句

仿新浪博客留言评论功能

2016年06月02日 2.9MB 下载

没有更多推荐了,返回首页

关闭
关闭