BBS-評論功能

BBS-評論功能

前端搭建

一、參考畫面，編輯評論區有如下要素：

• 暱稱：

  <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 %}

二、評論樓的頁面搭建

• 後端傳送來全部的評論列表：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>

三、前端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)