評論功能的實現

評論：

• 根評論：對文章的評論

• 子評論：對評論的評論

• 區別：是否有父評論

流程

1. 構建樣式

2. 提交根評論

3. 顯示根評論

   1. -- render顯示

   2. -- Ajax顯示

4. 提交子評論

5. 顯示子評論

1. -- render顯示

2. -- Ajax顯示

html

    <!-- 評論 -->
    <div class="comments">
        <ul class="comment_list list-group">
            {% for comment in comment_list %}
                <li class="list-group-item">
                    <div class="comment_info">
                        <a href="">#{{ forloop.counter }}樓 &nbsp;&nbsp;</a>
                        <span>{{ comment.created_time | date:'Y-m-d H:i' }} </span> &nbsp;&nbsp;
                        <a href=""><span>{{ comment.user.username }}</span></a>
                        <a class="pull-right reply_btn" username="{{ comment.user.username }}"
                           comment_pk='{{ comment.pk }}'>回復</a>
                    </div>

                    {% if comment.parent_comment_id %}
                        <div class="pid_info well">  <!-- well:和子評論形成間隙 -->
                            <p>
                                {{ comment.parent_comment.user.username }}: {{ comment.parent_comment.content }}
                            </p>
                        </div>
                    {% endif %}
                    <div class="show_comment_content">
                        <p>{{ comment.content }}</p>
                    </div>

                </li>
            {% endfor %}
        </ul>
        <p>評論列表</p>
        <p>發表評論</p>
        <p>
            昵稱：<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50"
                      value="{{ request.user.username }}">
        </p>
        <p>評論內容:</p>
        <p>
            <textarea name="" id="comment_content" cols="60" rows="10"></textarea>
        </p>

        <button class="btn btn-default" id="comment_btn">提交評論</button>
    </div>

 

css

/* 評論 */
input.author {
    background-image: url(/static/font/icon_form.gif);
    background-repeat: no-repeat;
    background-position: 3px -3px;
    border: 1px solid #ccc;
    padding: 4px 4px 4px 30px;
    width: 300px;
    font-size: 13px;
}

.show_comment_content {
    margin-top: 10px;
}

.comment_info a {
    cursor: pointer;
    text-decoration: none;
}

.comment_info a:hover {
    color: #5cb85c;
}

 

js

        // 點贊請求
        $('#div_digg .action').click(function () {
            let is_up = $(this).hasClass('diggit');

            $obj = $(this).children('span');

            $.ajax({
                url: '/digg/',
                type: 'post',
                data: {
                    'csrfmiddlewaretoken': $("[name='csrfmiddlewaretoken']").val(),
                    'is_up': is_up,
                    'article_id': "{{ article_obj.pk }}",
                },
                success: function (data) {
                    if (data.status) {
                        let val = parseInt($obj.text());
                        $obj.text(val + 1);
                    } else {
                        let val = data.handled ? '您已經推薦過！' : '您已經反對過！';
                        $('#digg_tips').html(val);

                        setTimeout(function () {
                            $('#digg_tips').html("");
                        }, 1000)
                    }
                }
            })
        });

        // 評論請求
        let pid = '';
        $('#comment_btn').click(function () {
            let content = $('#comment_content').val();

            if (pid) {
                let index = content.indexOf("\n");
                content = content.slice(index + 1);

            }
            $.ajax({
                url: '/comment/',
                type: 'post',
                data: {
                    'csrfmiddlewaretoken': $("[name='csrfmiddlewaretoken']").val(),
                    'article_id': "{{ article_obj.pk }}",
                    'content': content,
                    'pid': pid,
                },
                success: function (data) {
                    let created_time = data.created_time;
                    let username = data.username;
                    let content = data.content;

                    if (data.parent_comment) {  // 用戶提交的是子評論，同時顯示父評論
                        let latest_comment = `
                    <li class="list-group-item">
                    <div class='well'>
                        <p>${data.parent_name}: ${data.parent_comment}</p>
                    </div>
                    <div>
                        <span>${created_time}</span> &nbsp;&nbsp;
                        <a href=""><span>${username}</span></a>
                    </div>
                    <div class="show_comment_content">
                        <p>${content}</p>
                    </div>
                    </li>`;
                        $('ul.comment_list').append(latest_comment);

                    } else {  // 用戶提價的是根評論，只顯示用戶提交的評論
                        let latest_comment = `
                    <li class="list-group-item">
                    <div>
                        <span>${created_time}</span> &nbsp;&nbsp;
                        <a href=""><span>${username}</span></a>
                    </div>
                    <div class="show_comment_content">
                        <p>${content}</p>
                    </div>
                    </li>`;
                        $('ul.comment_list').append(latest_comment);
                    }

                    // 清空評論框
                    $('#comment_content').val('');
                    pid = "";
                }
            })
        });

        // 回復按鈕事件
        $('.reply_btn').click(function () {
            $('#comment_content').focus();
            let comment_user = '@' + $(this).attr('username') + "\n";
            $('#comment_content').val(comment_user);

            pid = $(this).attr('comment_pk');
        });

 

py

# urls.py

# 評論
path('comment/', views.comment),

views.py

# 評論
def comment(request):
    article_id = request.POST.get("article_id")
    pid = request.POST.get('pid')
    content = request.POST.get('content')
    user_id = request.user.pk

    comment_obj = models.Comment.objects.create(
        user_id=user_id,
        article_id=article_id,
        content=content,
        parent_comment_id=pid
    )

    response = {}
    response['created_time'] = comment_obj.created_time.strftime('%Y-%m%d %X')
    response['username'] = request.user.username
    response['content'] = content
    if pid:
        parent_comment = models.Comment.objects.filter(nid=pid).first()
        response['parent_comment'] = parent_comment.content
        response['parent_name'] = parent_comment.user.username

    return JsonResponse(response