NodeJS博客实战25_前台博客评论分页展示

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

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

1.主要功能

1)每次打开文章加载评论

2)若该文章没有评论则展示没有评论的信息

3)对于上一页和下一页点击使用ajax的方式进行请求,没有上一页和没有下一页做处理

4)分页中相关参数的计算等

2.主要代码:

1)public/js/comment.js

var perpage = 2;
var page = 1;
var pages = 0;
var comments = [];
$('.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(''); //清空评论区
            comments = res.data.comments.reverse();
            renderComment();
        }
    })
})
//每次页面加载获取该文章的所有评论
$.ajax({
    type: 'get',
    url: '/api/comment',
    data: {
        contentid: $('#contentId').val()
    },
    success: function(res) {
    	comments = res.data.reverse();
        renderComment();
    }
})

//分页处理
$('.a-page').delegate('a','click',function(){
	if($(this).parent().hasClass('pre')){
		page --;
	}else{
		page ++;
	}
	renderComment();
})

//提交评论
function renderComment() {
	$('.pinglunshu').html(comments.length);
	pages = Math.ceil(comments.length / perpage,1);
	var start = Math.max(0,(page-1) * perpage); //起始页
	var end = Math.min(start + perpage,comments.length); //终止页
	var spans = $('.a-page > span');
	spans.eq(1).html( page + '/' + pages);
	//没有上一页判断
	if(page <= 1){
		page = 1;
		spans.eq(0).html('<span>没有上一页了</span>');
	}else{
		spans.eq(0).html('<a href="javascript:void(0)">上一页</a>');
	}
	//没有下一页判断
	if(page >= pages){
		page = pages;
		spans.eq(2).html('<span>没有下一页了</span>');
	}else{
		spans.eq(2).html('<a href="javascript:void(0)">下一页</a>');
	}
	if(comments.length == 0){
		$('.megList').html('<li style="text-align:left;">还没有评论</li>');
	}else{
		var html = '';
	    for (var i = start; i < end; 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>' + formatDate(comments[i].postTime) + '</p></div><div>' + comments[i].content + '</div></li>'
	    }
	    $('.megList').html(html);
	}
    
}
//格式化时间
function formatDate(date){
	var date1 = new Date(date);
	return date1.getFullYear() + '-' + (date1.getMonth()+1) + '-' + date1.getDate() + ' ' + date1.getHours() + ':' + date1.getMinutes() + ':' + date1.getSeconds()
}

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="">{{content.comments.length}}</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 class="pinglunshu"></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 class="a-page">
            <span class="pre">
                <a href="javascript:void(0)">上一页</a>
            </span>
            <span class="a-pageInfo"></span> 
            <span class="next">
                <a href="javascript:void(0)">下一页</a>
            </span>
        </div>
    </div>

</div>
<script src="/public/js/comment.js"></script>
{% endblock %}

3)views/main/layout.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>博客</title>
    <link rel="stylesheet" type="text/css" href="/public/css/main.css">
    <script type="text/javascript" src="/public/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="public/js/index.js"></script>
</head>

<body>
    <div class="wrap">
	    <div class="header">
		    <ul>
		        {% if category == '' %}
		        <li><a href="/" class="focus">首页</a></li>
		        {% else %}
		        <li><a href="/">首页</a></li>
		        {% endif %} {% for cate in categories %} {% if category == cate.id %}
		        <li>
		            <a href="/?category={{cate.id}}" class="focus">{{cate.name}}</a>
		        </li>
		        {% else %}
		        <li>
		            <a href="/?category={{cate.id}}">{{cate.name}}</a>
		        </li>
		        {% endif %} {% endfor %}
		    </ul>
		</div>
        {% block content %}{% endblock %}
        <div class="info">
            {% if userInfo._id %}
            <div class="showInfo">
                <p class="infoTitle">用户信息</p>
                <div class="name">{{userInfo.username}}
                </div>
                {% if userInfo.isAdmin %}
                <div class="info">你好管理员,欢迎来到博客
                    <a href="/admin">进入管理</a>
                </div>
                {% else %}
                <div class="info">
                    你好,欢迎来到博客
                </div>
                {% endif %}
                <button class="logout">退出</button>
            </div>
            {% else %}
            <div class="registerInfo">
                <form>
                    <p class="infoTitle">注册</p>
                    <div class="inputInfo">
                        <label for="user">用户名</label>
                        <input type="text" name="username" id="user">
                    </div>
                    <div class="inputInfo">
                        <label for="pwd">密码</label>
                        <input type="password" name="pwd" id="pwd">
                    </div>
                    <div class="inputInfo">
                        <label for="rpwd">确认</label>
                        <input type="password" name="rpwd" id="rpwd">
                    </div>
                    <div class="infoBtn">
                        <input type="button" name="" value="注册" class="registerBtn">
                    </div>
                    <div class="infoBtn">
                        <span>已有账号</span>
                        <a href="javascript:void(0)" class="toLogin">马上登录</a>
                    </div>
                    <div class="registerRemind"></div>
                </form>
            </div>
            <div class="hide loginInfo">
                <form>
                    <p class="infoTitle">登录</p>
                    <div class="inputInfo">
                        <label for="user2">用户名</label>
                        <input type="text" name="user2" id="user2">
                    </div>
                    <div class="inputInfo">
                        <label for="pwd2">密码</label>
                        <input type="password" name="pwd2" id="pwd2">
                    </div>
                    <div class="infoBtn">
                        <input type="button" name="" value="登录" class="loginBtn">
                    </div>
                    <div class="infoBtn">
                        <span>还没注册</span>
                        <a href="javascript:void(0)" class="toRegister">马上注册</a>
                    </div>
                    <div class="loginRemind"></div>
                </form>
            </div>
            {% endif %}
            <div>
                <p class="infoTitle">社区</p>
                <ul>
                    <li>
                        <a href="">制度规则</a>
                    </li>
                    <li>
                        <a href="">社区之家</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>

查看评论

博客前台模板

从 https://github.com/PomeloFoundation/YuukoBlog 这个博客上扒下来的一个静态页,当成自己的博客前台页面 下载:http://www.ni...
  • niunan
  • niunan
  • 2017年02月25日 15:25
  • 646

NodeJS实现网站评论

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

NodeJS实战

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

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
  • 358

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

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

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

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

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

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

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

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

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

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