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

最新推荐文章于 2022-03-13 19:26:45 发布

骑着代马去流浪

最新推荐文章于 2022-03-13 19:26:45 发布

阅读量500

点赞数 1

分类专栏： NodeJS博客系统文章标签： NodeJS博客

本文链接：https://blog.csdn.net/weixin_36185028/article/details/79949090

版权

NodeJS博客系统专栏收录该内容

26 篇文章 26 订阅

订阅专栏

源码地址：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>