码迷,mamicode.com
首页 > 其他好文 > 详细

BBS-评论功能

时间:2019-06-24 20:57:06      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:function   lse   cti   逻辑   sub   use   ESS   pre   img   

BBS-评论功能

技术图片

前端搭建

1、参考画面,编辑评论区有以下要素:

  • 昵称:

    <p>昵称:<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50" value="{{ request.user.username }}"></p>
  • 评论内容:

     <textarea name="" id="id_comment" cols="60" rows="10"></textarea>
  • 提交按钮:

    <button class="btn btn-primary" id="id_submit">提交评论</button>
{# 前端品评论区搭建 #}

{% if request.user.is_authenticated %}
    <div>
        <p><span class="glyphicon glyphicon-comment"></span>发布评论</p>
        <p>昵称:<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50"
                     value="{{ request.user.username }}"></p>
        <p>评论内容:</p>
        <p>
            <textarea name="" id="id_comment" cols="60" rows="10"></textarea>
        </p>
        <p>
            <button class="btn btn-primary" id="id_submit">提交评论</button>
        </p>
    </div>
{% endif %}

2、评论楼的页面搭建

  • 后端传送来所有的评论列表:comment_list

技术图片

  • 根据提示例子:

    利用for循环搭建页面吧

    每层的内容固定有

    • 楼层号:
    <span>#{{ forloop.counter }}楼</span>
    • 发布时间:
    <span>{{ comment.create_time|date:'Y-m-d' }}</span>
    • 发布用户
    <span><a href="/{{ comment.user.username }}/">{{ comment.user.username }}</a></span>
    • 回复按钮(涉及到子评论内容)
    <span class="pull-right reply" comment_id="{{ comment.pk }}" username="{{ comment.user.username }}"><a>回复</a></span>
    • 评论内容

      如果是子评论的话需要在评论内容加上:@+用户名

    <div>
    {% if comment.parent %}
    <p>@&nbsp;{{ comment.parent.user.username }}</p>
    {% endif %}
    {{ comment.content }}
    </div>
  • 完整代码

    <ul class="list-group">
        {% for comment in comment_list %}
            <li class="list-group-item">
                <div>
                    <span>#{{ forloop.counter }}楼</span>
                    <span>{{ comment.create_time|date:'Y-m-d' }}</span>
                    <span><a href="/{{ comment.user.username }}/">{{ comment.user.username }}</a></span>
                    <span class="pull-right reply" comment_id="{{ comment.pk }}" username="{{ comment.user.username }}"><a>回复</a></span>
                    <div>
                        {% if comment.parent %}
                        <p>@&nbsp;{{ comment.parent.user.username }}</p>
                        {% endif %}
                        {{ comment.content }}
                    </div>
                </div>
            </li>
        {% endfor %}
    
    </ul>

3、前端js代码

  • 提交按钮功能

    • 提交按钮获取所有的数据内容,用户id,评论id通过ajax发送给后端

    • 定义一个全局变量的parentId

    • 注意当为子评论的时候需要对评论的内容进行切分

      if (parentId){
          let indexVal = $content.indexOf('\n') + 1;
          $content = $content.slice(indexVal);
          console.log($content)
      }
    • ajax功能编写

      // 评论逻辑代码
      // 定义一个全局的parentId变量名
      let parentId = '';
      $('#id_submit').click(function () {
          // 获取textarea内容
          let $content = $('#id_comment').val();
          // 判断parentId是否有值才能确定是否切内容
          if (parentId){
              let indexVal = $content.indexOf('\n') + 1;
              $content = $content.slice(indexVal);
              console.log($content)
          }
          $.ajax({
              url: '/comment/',
              type: 'post',
              data: {
                  'article_id': '{{ article_obj.pk }}',
                  'content': $content,
                  'csrfmiddlewaretoken': '{{ csrf_token }}',
                  'parent_id': parentId,
              },
              success: function (data) {
                  if(data.code == 100){
                      let userName = '{{ request.user.username }}';
                      let content = $content;
                      let tempStr = `
                      <li class="list-group-item">
                          <div>
                              <span><a href="/${userName}/">${userName}:</a></span>
                              <p>
                                  ${content}
                              </p>
                          </div>
                      </li>
                      `;
                      // 查找url标签 添加子元素
                      $(".list-group").append(tempStr);
                      // 将textarea框中的内容清空
                      $('#id_comment').val('');
                      // 将全局的parentId清空
                      parentId = ''
                  }
              }
          })
      });
  • 回复功能按钮

    • 子评论需要将用户名的加入到textarea中,如何获取人名

      let pUserName = $(this).attr('username');
      let pCommentId = $(this).attr('comment_id');
    • 自动换行

      $('#id_comment').val('@'+pUserName+'\n');
    • 自动对焦

      $('#id_comment').focus();
    • 将全局的parent_id赋值

      parentId = pCommentId;

后端:

  • 获取前端发来的数据

    article_id = request.POST.get("article_id")
    content = request.POST.get('content')
    parent_id = request.POST.get('parent_id')
    
  • 检查用户是否登录

            if request.user.is_authenticated():
                with transaction.atomic():
                    # 在文章表中将普通的评论字段加1
                    models.Article.objects.filter(pk=article_id).update(comment_num = F('comment_num')+1)
                    # 在去评论表存储真正的数据
                    models.Comment.objects.create(user=request.user,article_id=article_id,content=content,parent_id=parent_id)
                back_dic['msg'] = '评论成功'
            else:
                back_dic['code'] = 110
                back_dic['msg'] = '请先登录'
        return JsonResponse(back_dic)

BBS-评论功能

标签:function   lse   cti   逻辑   sub   use   ESS   pre   img   

原文地址:https://www.cnblogs.com/king-home/p/11079307.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!