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

标签: NodeJS博客
6人阅读 评论(0) 收藏 举报
分类:

源码地址: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://github.com/PomeloFoundation/YuukoBlog 这个博客上扒下来的一个静态页,当成自己的博客前台页面 下载:http://www.ni...
  • niunan
  • niunan
  • 2017年02月25日 15:25
  • 650

NodeJS实现网站评论

今天在scott老师的带领下学习了一下nodeJS基础的一些东西,更激动的是学习了简单的灌水小程序,于是记录如下。 首先我们需要调用http模块var http = require('http')接着...
  • u013096194
  • u013096194
  • 2016年10月01日 22:24
  • 850

NodeJS实战

node实战计划
  • Phil_Young
  • Phil_Young
  • 2016年03月16日 20:26
  • 243

nodejs 盖楼评论

评论mongodb增删改查 短信验证 socket.io聊天 sh /root/ robomongoajax异步调用 短信验证 在线聊天 javascript序列化对象serialize...
  • caopeng26
  • caopeng26
  • 2016年08月23日 07:48
  • 635

Nodejs,express博客搭建

新手入门指引:手把手教你用express搭建个人博客 1.首先需要安装node环境,版本最新比较好,最低4.0+吧 2.express中文官网:http://www.expressjs.com.c...
  • Gray_arrows
  • Gray_arrows
  • 2017年02月12日 22:38
  • 360

一个前端写的php博客系统2--前台展示+后台登录

部署的演示地址我的博客地址: http://www.weber.pub 可以查看到具体的站点展示github 地址:https://github.com/baiyuming/byblog前台首页展示首...
  • canglingyue
  • canglingyue
  • 2016年08月01日 14:29
  • 2712

nodejs实战express笔记之实现用户和文章页面

概念 用户页面:单击某个用户链接名,跳转到:域名/u/用户,并列出该用户的所有文章 文章页面:同理,某个文章的页面当访问这些页面的时候,会从路径中提取用户名,时间,标题等查询数据库并返回查询的文章信息...
  • doujiao_pengpeng
  • doujiao_pengpeng
  • 2015年10月21日 17:25
  • 948

NodeJS博客实战17_前台分类的展示和排序

源码地址:https://github.com/RidingACodeToStray/Nodejs_blog实现功能:1)在前台展示分类2)最新添加非分类展示在最前方实现思路:1)在routers/m...
  • weixin_36185028
  • weixin_36185028
  • 2018年04月08日 09:12
  • 23

如何给Ghost博客添加多说评论

ghost博客是一个简单的博客的系统,其官网当中,提供了一款Disqus的评论系统,感兴趣的可以参考Disqus安装方法;这里我们主要讲国产的第三方评论系统多说的安装方法....
  • skyeTang
  • skyeTang
  • 2016年07月04日 21:54
  • 1814

介绍一个node创建博客的教程并总结

接近一个月没写博客了,是因为实在不知道该写什么= =。。。除了完成工作外,这段时间自学了一个教你使用node从0-1创建博客的教程,写的十分详细,教程也重构过几次了,已经相对比较完善,推荐对node感...
  • yolo0927
  • yolo0927
  • 2017年03月20日 15:26
  • 1878
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 20万+
    积分: 4599
    排名: 7994
    博客专栏
    最新评论