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

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

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

1.主要功能

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

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

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

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

2.主要代码：

1）public/js/comment.js

  1. var perpage = 2;
  2. var page = 1;
  3. var pages = 0;
  4. var comments = [];
  5. $('.commentBtn').on('click', function() {
  6.     $.ajax({
  7.         type: 'post',
  8.         url: '/api/comment/post',
  9.         data: {
  10.             contentid: $('#contentId').val(),
  11.             content: $('.neirong').val()
  12.         },
  13.         success: function(res) {
  14.             // console.log(res);
  15.             $('.neirong').val(''); //清空评论区
  16.             comments = res.data.comments.reverse();
  17.             renderComment();
  18.         }
  19.     })
  20. })
  21. //每次页面加载获取该文章的所有评论
  22. $.ajax({
  23.     type: 'get',
  24.     url: '/api/comment',
  25.     data: {
  26.         contentid: $('#contentId').val()
  27.     },
  28.     success: function(res) {
  29.         comments = res.data.reverse();
  30.         renderComment();
  31.     }
  32. })
  34. //分页处理
  35. $('.a-page').delegate('a','click',function(){
  36.     if($(this).parent().hasClass('pre')){
  37.         page --;
  38.     }else{
  39.         page ++;
  40.     }
  41.     renderComment();
  42. })
  44. //提交评论
  45. function renderComment() {
  46.     $('.pinglunshu').html(comments.length);
  47.     pages = Math.ceil(comments.length / perpage,1);
  48.     var start = Math.max(0,(page-1) * perpage); //起始页
  49.     var end = Math.min(start + perpage,comments.length); //终止页
  50.     var spans = $('.a-page > span');
  51.     spans.eq(1).html( page + '/' + pages);
  52.     //没有上一页判断
  53.     if(page <= 1){
  54.         page = 1;
  55.         spans.eq(0).html('<span>没有上一页了</span>');
  56.     }else{
  57.         spans.eq(0).html('<a href="javascript:void(0)">上一页</a>');
  58.     }
  59.     //没有下一页判断
  60.     if(page >= pages){
  61.         page = pages;
  62.         spans.eq(2).html('<span>没有下一页了</span>');
  63.     }else{
  64.         spans.eq(2).html('<a href="javascript:void(0)">下一页</a>');
  65.     }
  66.     if(comments.length == 0){
  67.         $('.megList').html('<li style="text-align:left;">还没有评论</li>');
  68.     }else{
  69.         var html = '';
  70.         for (var i = start; i < end; i++) {
  71.             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>'
  72.         }
  73.         $('.megList').html(html);
  74.     }
  76. }
  77. //格式化时间
  78. function formatDate(date){
  79.     var date1 = new Date(date);
  80.     return date1.getFullYear() + '-' + (date1.getMonth()+1) + '-' + date1.getDate() + ' ' + date1.getHours() + ':' + date1.getMinutes() + ':' + date1.getSeconds()
  81. }

2）views/main/view.html

  1. {% extends 'layout.html' %} {% block content %}
  2. <div style="display: inline-block;vertical-align: top;background-color: #eae3e3;padding: 10px;box-shadow: 5px 5px 5px #c3baba;width: calc(100% - 250px);">
  3.     <h2>{
  4.    {content.title}}</h2>
  5.             <div>
  6.                 <span>
  7.                                 <span>作者：</span><a href="">{
  8.    {content.user.username}}</a>
  9.                 </span>
  10.                 <span>
  11.                                 <span>时间：</span><a href="">{
  12.    {content.addTime|date('Y-m-d H:i:s',-8*60)}}</a>
  13.                 </span>
  14.                 <span>
  15.                                 <span>阅读：</span><a href="">{
  16.    {content.views}}</a>
  17.                 </span>
  18.                 <span>
  19.                                 <span>评论：</span><a href="">{
  20.    {content.comments.length}}</a>
  21.                 </span>
  22.             </div>
  23.             <div style="text-align: left;margin-top: 10px;">
  24.                 {
  25.    {content.content}}
  26.             </div>
  27.     <div class="pinglun" style="margin-top: 20px;">
  28.         <div>
  29.             <strong style="float: left;margin-left: 10px;">评论区</strong>
  30.             <span style="float: right;margin-right: 10px;">一共有<span class="pinglunshu"></span>条评论</span>
  31.         </div>
  32.         {% if userInfo._id %}
  33.         <div style="text-align: left;">
  34.             <textarea rows="3" style="width: calc(100% - 100px)" class="neirong"></textarea>
  35.             <input type="hidden" id="contentId" value="{
  36.    {content.id}}">
  37.             <button style="width: 50px;vertical-align: text-bottom;" class="commentBtn">提交</button>
  38.         </div>
  39.         {% else %}
  40.         <div style="text-align: center;padding-top: 30px;font-weight: bold;">您还没有登录，请先
  41.             <a href="">登录</a>
  42.         </div>
  43.         {% endif %}
  44.         <!-- <p style="text-align:left;">还没有留言</p> -->
  45.         <ul style="text-align: left;" class="megList"></ul>
  46.         <div class="a-page">
  47.             <span class="pre">
  48.                 <a href="javascript:void(0)">上一页</a>
  49.             </span>
  50.             <span class="a-pageInfo"></span> 
  51.             <span class="next">
  52.                 <a href="javascript:void(0)">下一页</a>
  53.             </span>
  54.         </div>
  55.     </div>
  57. </div>
  58. <script src="/public/js/comment.js"></script>
  59. {% endblock %}

3）views/main/layout.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>博客</title>
  7.     <link rel="stylesheet" type="text/css" href="/public/css/main.css">
  8.     <script type="text/javascript" src="/public/js/jquery-3.3.1.min.js"></script>
  9.     <script type="text/javascript" src="public/js/index.js"></script>
  10. </head>
  12. <body>
  13.     <div class="wrap">
  14.         <div class="header">
  15.             <ul>
  16.                 {% if category == '' %}
  17.                 <li><a href="/" class="focus">首页</a></li>
  18.                 {% else %}
  19.                 <li><a href="/">首页</a></li>
  20.                 {% endif %} {% for cate in categories %} {% if category == cate.id %}
  21.                 <li>
  22.                     <a href="/?category={
  23.    {cate.id}}" class="focus">{
  24.    {cate.name}}</a>
  25.                 </li>
  26.                 {% else %}
  27.                 <li>
  28.                     <a href="/?category={
  29.    {cate.id}}">{
  30.    {cate.name}}</a>
  31.                 </li>
  32.                 {% endif %} {% endfor %}
  33.             </ul>
  34.         </div>
  35.         {% block content %}{% endblock %}
  36.         <div class="info">
  37.             {% if userInfo._id %}
  38.             <div class="showInfo">
  39.                 <p class="infoTitle">用户信息</p>
  40.                 <div class="name">{
  41.    {userInfo.username}}
  42.                 </div>
  43.                 {% if userInfo.isAdmin %}
  44.                 <div class="info">你好管理员，欢迎来到博客
  45.                     <a href="/admin">进入管理</a>
  46.                 </div>
  47.                 {% else %}
  48.                 <div class="info">
  49.                     你好，欢迎来到博客
  50.                 </div>
  51.                 {% endif %}
  52.                 <button class="logout">退出</button>
  53.             </div>
  54.             {% else %}
  55.             <div class="registerInfo">
  56.                 <form>
  57.                     <p class="infoTitle">注册</p>
  58.                     <div class="inputInfo">
  59.                         <label for="user">用户名</label>
  60.                         <input type="text" name="username" id="user">
  61.                     </div>
  62.                     <div class="inputInfo">
  63.                         <label for="pwd">密码</label>
  64.                         <input type="password" name="pwd" id="pwd">
  65.                     </div>
  66.                     <div class="inputInfo">
  67.                         <label for="rpwd">确认</label>
  68.                         <input type="password" name="rpwd" id="rpwd">
  69.                     </div>
  70.                     <div class="infoBtn">
  71.                         <input type="button" name="" value="注册" class="registerBtn">
  72.                     </div>
  73.                     <div class="infoBtn">
  74.                         <span>已有账号</span>
  75.                         <a href="javascript:void(0)" class="toLogin">马上登录</a>
  76.                     </div>
  77.                     <div class="registerRemind"></div>
  78.                 </form>
  79.             </div>
  80.             <div class="hide loginInfo">
  81.                 <form>
  82.                     <p class="infoTitle">登录</p>
  83.                     <div class="inputInfo">
  84.                         <label for="user2">用户名</label>
  85.                         <input type="text" name="user2" id="user2">
  86.                     </div>
  87.                     <div class="inputInfo">
  88.                         <label for="pwd2">密码</label>
  89.                         <input type="password" name="pwd2" id="pwd2">
  90.                     </div>
  91.                     <div class="infoBtn">
  92.                         <input type="button" name="" value="登录" class="loginBtn">
  93.                     </div>
  94.                     <div class="infoBtn">
  95.                         <span>还没注册</span>
  96.                         <a href="javascript:void(0)" class="toRegister">马上注册</a>
  97.                     </div>
  98.                     <div class="loginRemind"></div>
  99.                 </form>
  100.             </div>
  101.             {% endif %}
  102.             <div>
  103.                 <p class="infoTitle">社区</p>
  104.                 <ul>
  105.                     <li>
  106.                         <a href="">制度规则</a>
  107.                     </li>
  108.                     <li>
  109.                         <a href="">社区之家</a>
  110.                     </li>
  111.                 </ul>
  112.             </div>
  113.         </div>
  114.     </div>
  115. </body>
  117. </html>

发表评论

表情：
评论列表 （有 0 条评论，271人围观）

还没有评论，来说两句吧...

相关阅读