Django 项目试炼blog -- 文章详情页2 -- 前端样式的继承与楼评论显示

Posted 2021-10-28 zhuzhiwei-2019

views

from django.db import transaction
def comment(request):
    article_id = request.POST.get(‘article_id‘)
    content = request.POST.get(‘content‘)
    pid = request.POST.get(‘parent_id‘)

    #事务操作 生成评论，文章数据中评论总数自动+1（同时执行）
    with transaction.atomic():
        comm_obj = Comment.objects.create(user_id=request.user.pk,content=content,article_id=article_id,parent_comment_id=pid)
        Article.objects.filter(pk=article_id).update(comment_count=F(‘comment_count‘)+1)

    send_info = {}
    # create_time：<class ‘datetime.datetime‘>   json序列化无法对对象进行序列换
    send_info[‘create_time‘] = comm_obj.create_time.strftime("%Y-%m-%d %X")
    send_info[‘username‘] =request.user.username
    send_info[‘content‘] = comm_obj.content
    if pid:
        # 如果有父评论
        parent_obj_name =Comment.objects.filter(pk=pid).values(‘user__username‘).first()
        send_info[‘parent_name‘] = parent_obj_name[‘user__username‘]
        parent_obj = Comment.objects.filter(pk=pid).first()
        send_info[‘parent_content‘] = parent_obj.content

    return JsonResponse(send_info)

 

 

---

html

HTML中的母版样式
.....
{% block name %}  

{% endblock %}

 

继承模板
{% extends ‘base.html‘ %}
{% block name %}

新填的内容（html，css，jquery）

{% endblock %}

 

<div class="comment_box">
            <ul class="list-group" id="comm_list"><span>评论区</span>
            {% for comment in comment_list %}
                <li class="list-group-item">
                    <p><span>#{{ forloop.counter }}楼</span> &nbsp; &nbsp; &nbsp;
                        <span>{{ comment.create_time|date:‘Y-m-d H:m‘ }}</span>&nbsp; &nbsp; &nbsp;
                        <a href="">{{ comment.user.username }}</a>
                        <span class="pull-right re_comm" username="{{ comment.user.username }}" comment_pk="{{ comment.pk }}">
                        {#自定义属性 username用于点击回复时，自动@评论人#}
                        {#自定义属性 comment_pk标识此为父评论#}
                            <a>回复</a></span>
                    </p>
                    {% if comment.parent_comment_id %}
                            {#判断是否有父评论#}
                    <div class="well">
                    <p>
                        {{ comment.parent_comment.user.username }}:{{ comment.parent_comment.content }}
                    </p>
                    </div>
                    {% endif %}

                    <p>&nbsp; &nbsp; &nbsp;{{ comment.content }}</p>
                </li>
            {% endfor %}
            </ul>
        </div>

 

 

---

 

 Jquery

            //评论提交
            var parent_id = ‘‘;
            $(‘#btn‘).click(function () {
                var content = $(‘#tbCommentBody‘).val();
                if(parent_id){    //即为子评论
                    var index = content.indexOf(‘\n‘);
                    content = content.slice(index+1)
                } // 回复评论判断后，切片后存入数据库

                $.ajax({
                    url:"/comment/",
                    type: ‘post‘,
                    async:false,
                    data:{
                        ‘csrfmiddlewaretoken‘:$("[name=‘csrfmiddlewaretoken‘]").val(),
                        ‘article_id‘:"{{ art_obj.pk }}",
                        ‘content‘:content,
                        ‘parent_id‘: parent_id,
                    },
                    success:function (data) {
                        var create_time= data[‘create_time‘];
                        var username = data[‘username‘];
                        var content = data[‘content‘];

                        if(!parent_id){
                            //字符串拼接标签样式
                            var com =‘<li class="list-group-item"><span>‘+create_time+
                                ‘</span>&nbsp; &nbsp; &nbsp;<a href="">‘+username+
                                ‘</a><span class="pull-right"><a>回复</a></span> <p>&nbsp; &nbsp; &nbsp;‘+content+
                                ‘</p> </li>‘;
                        $(‘#comm_list‘).append(com);
                        }else{
                            var parent_name = data[‘parent_name‘];
                            var parent_content = data[‘parent_content‘];

                            //ES6用法，连标签模块一起插入
                            com = `<li class="list-group-item">
                                    <span>${create_time}</span>&nbsp; &nbsp; &nbsp;
                                    <a href="">${username}</a>
                                    <span class="pull-right re_comm">
                                    <a>回复</a></span>
                                    <div class="well">
                                    <p>
                                        ${ parent_name }:${parent_content}
                                    </p>
                                    </div>
                                    <p>&nbsp; &nbsp; &nbsp;${content}</p></li>`;
                        $(‘#comm_list‘).append(com);
                        }
                        //清空评论框 与parent_comment_id
                        parent_id = ‘‘;
                        $(‘#tbCommentBody‘).val(‘‘)
            }
            })
        });

            //回复事件
            $(‘.re_comm‘).click(function () {
                $(‘#tbCommentBody‘).focus();
                $(‘#tbCommentBody‘).val(‘@‘+$(this).attr(‘username‘)+‘\n‘);  //利用标签自定义属性
                {#点击回复即给当前评论赋值parent_comment_id#}
                parent_id = $(this).attr(‘comment_pk‘)
            })

        });

 

 

---

 重点

1、给前端ajax 时间数据时，后端存储的是datetime.datetime对象。需要转换成格式化的字符串

2、回复内容切片后存储发送

3、运用字符串拼接、ES6,动态添加标签

4、HTML中标签自定义属性的运用，点击回复按钮（产生子评论），自动添加@+名字，给parent_id赋值传给后端。ajax处理完后进行数据清空

5、评论两种显示：render显示，ajax动态显示