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

ゞ浴缸里的玫瑰 2022-05-27 08:42 186阅读 0赞

源码地址：[https://github.com/RidingACodeToStray/Nodejs\_blog][https_github.com_RidingACodeToStray_Nodejs_blog]

1.主要功能

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

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

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

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

2.主要代码：

1）public/js/comment.js

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 %}
            
            <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_RidingACodeToStray_Nodejs_blog]: https://github.com/RidingACodeToStray/Nodejs_blog