文章的評論（跟評論與子評論的制作）

文章的評論制作

先做跟評論，在做子評論

發表評論框的制作：
前端渲染發表評論框：

    {#    評論功能開始#}
    {% if request.user.is_authenticated %}
        <div>
            <p><span >發表評論：</span></p>
            <div>
                <textarea name="" id="comment" cols="60" rows="10"></textarea>
            </div>
            <button  id="id_commit">提交評論</button>
        </div>
    {% else %}
        <li><a href="https://www.cnblogs.com/suncolor/archive/2022/10/10/{% url'login' %}">登錄</a></li>
        <li><a href="https://www.cnblogs.com/suncolor/archive/2022/10/10/{% url'reg' %}">注冊</a></li>
    {% endif %}

    {#    評論功能結束#}

提交評論資料：

        // 向后端提交用戶評論資料
        $('#id_commit').click(function () {
            let conTent = $('#comment').val();
            $.ajax({
                type: 'post',
                url: '/comment/',
                data: {
                    'article_id': '{{ article_obj.pk }}',
                    'content': conTent,
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                },
                success: function (args) {
                    alert(args)
                }
            })
        })

后端獲取評論資料：

# 九、評論視圖
def comment(request):
    if request.method == 'POST':
        back_dic = {'code':1000,'msg':''}
        if request.user.is_authenticated:
            article_id = request.POST.get('article_id')
            content = request.POST.get('content')
            with transaction.atomic():
                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)
            back_dic['msg'] = '評論成功'
        else:
            back_dic['code'] = 1001
            back_dic['msg'] = '請先登錄'
        return JsonResponse(back_dic)

跟評論展示：
需要在詳情視圖函式內傳入評論內容到前端！

    {#    評論展示開始#}
    {#    #1樓 2022-10-09 08:51 lyshark#}
    <div>
        <h4>評論串列</h4>
        <hr>、
        <ul >
            {% for comment in comment_list %}
                <li >
                    <div>
                        <span>#{{ forloop.counter }}樓</span>&nbsp;
                        <span>{{ comment.create_time|date:'Y-m-d h:i:s' }}</span>&nbsp;
                        <span>{{ comment.user.username }}</span>&nbsp;
                        <span><a href="" >回復</a></span>
                        <div>
                            {{ comment.content }}
                        </div>
                    </div>
                </li>
            {% endfor %}
        </ul>
    </div>
    {#    評論展示結束#}

跟評論臨時渲染：
提交評論之后，臨時渲染到評論串列，重繪之后才會展示正常的評論格式：

步驟：
1.DOM臨時渲染（用到了模板字串）
2.頁面重繪render渲染
3.提交評論之后清空評論框內容

 success: function (args) {
                    if (args.code == 1000) {
                        // 將評論框內容清空
                        $('#comment').val('');
                        // dom臨時渲染評論
                        let Name = '{{ request.user.username }}'
                        // 模板字串添加臨時渲染標簽到評論串列
                        let temp = `
                            <li >
                                <div>
                                    <span >&nbsp;${Name}</span>&nbsp;
                                    <span><a href="" >回復</a></span>
                                    <div>
                                        ${conTent}
                                    </div>
                                </div>
                            </li>
                        `
                        // 將生成好的標簽添加到對應標簽下
                        $('.list-group').append(temp)
                    }
                }

子評論展示制作：

1.點擊跟評論回復按鈕，發生了以下幾件事：
(1).評論框自動聚焦
(2).將回復那一行的評論人姓名，拼接成@username放到評論框中
(3).評論框自動換行

<span><a  username="{{ comment.user.username }}" comment_id="{{ comment.pk }}">回復</a></span>
回復按鈕標簽內，需要添加對應的自定義屬性，方便我們點擊時獲取對應的值
        // 給回復按鈕系結一個點擊事件
        $('.reply').click(function (){
            // 獲取當前點擊所在行的用戶名和跟評論主鍵值
            let commentUserName = $(this).attr('username');
            parentID = $(this).attr('comment_id');
            // 拼接@username放到評論框中并自動聚焦
            $('#comment').val('@'+ commentUserName + '\n').focus();
}

2.判斷該評論是跟評論還是子評論

判斷的依據在于，該評論是否有parent_id

在點擊回復時，我們已經獲取了parent_id,當我們點擊提交評論時，又觸發了提交評論事件，因此改事件里需要多添加一個parent_id資料

parent_id 變數可以定義在全域，默認為空，當點擊回復時在重新賦予對應的值

在后端的視圖函式里也可以進行相應的獲取parent_id 并添加到資料庫中：

3.添加到資料庫的子評論內容有@username的資料，我們需要把它去除，只需要在提交評論事件里對應判斷一下是否是子評論就行，是則對評論內容進行處理！！

4.在前端顯示還是需要顯示一下@username的，我們可以也判斷一下，手動添加一下

5.最后需要將parent_id手動清空，不然下次評論還是子評論！

標籤：其他

上一篇：SpringBoot(一) - SpringBoot 初識

下一篇：獲取 /resources 目錄資源檔案的 9 種方法，還有誰不會？！