zoukankan      html  css  js  c++  java
  • BBS-评论功能

    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('
        ') + 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('
        ') + 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+'
        ');
        
      • 自动对焦

        $('#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)
      
  • 相关阅读:
    Account group in ERP and its mapping relationship with CRM partner group
    错误消息Number not in interval XXX when downloading
    错误消息Form of address 0001 not designated for organization
    Algorithm类介绍(core)
    梯度下降与随机梯度下降
    反思
    绘图: matplotlib核心剖析
    ORB
    SIFT
    Harris角点
  • 原文地址:https://www.cnblogs.com/king-home/p/11079307.html
Copyright © 2011-2022 走看看