BBS子评论如何是实现

郑统京

>前端代码HTML部分{#    评论楼开始#}
    <div>
    <ul class="list-group">
        {% for comment in comment_list %}
            <li class="list-group-item">
            <span>#{{ forloop.counter }}楼</span>
            <span>{{ comment.comment_time|date:'Y-m-d h:i:s' }}</span>
            <span>{{ comment.user.username }}</span>
            <span><a class="pull-right reply" username="{{ comment.user.username }}" comment_id="{{ comment.pk }}">回复</a></span>
            <div>
{#                判断当前评论是否是子评论 如果是则需要渲染对应的评论人名#}
                {% if comment.parent_id %}
                    <p>@{{ comment.parent.user.username }}</p>
                {% endif %}
                {{ comment.content }}
            </div>
            </li>
        {% endfor %}
    </ul>
    </div>
{#    评论楼结束#}JS部分// 设置一个全局标志位置
    let parentId =null
// 用户点击评论朝后端发送ajax请求
    $('#id_submit').click(function (){
        // 获取用户评论的内容
        let conTent=$('#id_comment').val()
        // 判断是否是子评论，如果是则需要手动将@username名字去除掉
        if(parentId){
            // 先找到\n对应的索引 然后利用切片 但是切片是顾头不顾尾 索引索引+1
            let indexNum = conTent.indexOf('\n') +1 ;
            conTent=conTent.slice(indexNum) // 将indexNum所有的数据切除，只保留后面的部分
        }
        $.ajax({
            url: '/comment/',
            type: 'post',
            data:{
                'article_id': '{{ article_obj.pk }}',
                // 如果后端没有值 那么就是null 后端存储null没有任何关系
                'parent_id':parentId,
                'content':conTent,
                'csrfmiddlewaretoken':'{{csrf_token}}'
            },
            success:function (args){
                if(args.code==1000){
                    $('#errors').text(args.msg)

                    // 将评论区里面的内容清空
                    $('#id_comment').val('')

                    // 临时渲染评论楼
                    let userName = '{{ request.user.username }}'
                    let temp = `
                    <li class="list-group-item">
                        <span>${userName}</span>
                        <span><a href="#" class="pull-right">回复</a></span>
                        <div>
                            ${conTent}
                        </div>
                    </li> `
                    // 将生成好的标签加到到评论楼里面去
                    $('.list-group').append(temp);
                    // 要清空全局的parentId字段
                    parentId =null

                }
            }
        })
    })

// 用户进行子评论
    $('.reply').click(function (){
        // 用户名字和评论id
        let commentUserName =$(this).attr('username')
        parentId =$(this).attr('comment_id')
        // 跳转到textarea中，把@+作者名字+换行添加进去
        $('#id_comment').val('@'+commentUserName+'\n').focus()
    })=================================================
后端代码if request.user.is_authenticated():
    article_id = request.POST.get('article_id')
    content = request.POST.get('content')
    parentId = request.POST.get('parent_id')
    # 直接操作评论表存储数据
    with transaction.atomic():
        models.Article.objects.filter(pk=article_id).update(comment_num=F('comment_num')+1)
        models.Comment.objects.create(user=request.user,content=content,article_id=article_id,parent_id=parentId)=============================================================【思路整理】子评论的所有所及基本全部集中在前端JS和HTML代码中点击回复按钮发生了几件事
    1、评论框自动聚焦
    2、将回复按钮所在的那一行评论人的姓名进行拼接
    3、自动换行
1、首先在回复的标签中，创建一个点击事件，我们设置自己设置一个类为 class=‘reply’方便查找,为什么在这里不直接设置id呢，因为这个实在for循环里面的，可能会有多个相同id存在，就不合符id唯一的特性了，用类比较符合规范，见明字意
2、我们要进行子评论的时候要拿到跟评论的id和评论人的姓名，我们可以把标签当作临时容器自己定义属性，再去通过attr方法拿到值

eg：<span><a class="pull-right reply" username="{{ comment.user.username }}" comment_id="{{ comment.pk }}">回复</a></span>
        let commentUserName =$(this).attr('username')；
        parentId =$(this).attr('comment_id')；》》这个后面会有引入到另外一个函数内的概念，暂时先放着
3、在把获取到底值进行拼接然后在取获取焦点，那么第一阶段算是实现了
// 跳转到textarea中，把@+作者名字+换行添加进去
        $('#id_comment').val('@'+commentUserName+'\n').focus()
    })


4、当我们在子评论在textarea点击提交的时候，我们还是走Ajax请求，但是子评论和跟评论的区别是子评论会多一个parent_id,
那么这个时候我们想发送子评论的时候就要parent_id带上，但是parent_id在另外的函数里面怎么办呢？这个就可以用到刚才我们
在标签中获取的parentId，首先设置一个全部标志位 let parentId =null ，只有跟评论时候那么这个parentId是为空的，没有关系
我们后端代码允许parent字段为空，但如果进行了子评论了，就会有原先的null就会带上跟评论的id做标识，提交数据的时候，数据
也会显示parent_id有跟评论的id了，这样就可以完成子评论的初步功能了


5、但是我们还会发现，在保存数据内容的时候，还会自动把我们当时拼接的@和用户名一起保存到数据里面，这个显示是不合理的，那么
我们接下来就是要将这个去除，那么怎么去除呢？首先我们得先判断一下我们这个是不是子评论，是的话我们在去除，我们可以回想一下当时
我们拼接的时候是以"\n",作为结尾的，所以我们只要拿到"\n"所在的索引，我们再利用切片，但是切片是顾头不顾尾的，所以我们在拿索引的
时候还要在加1，然后用切片方法
        // 判断是否是子评论，如果是则需要手动将@username名字去除掉
        if(parentId){
            // 先找到\n对应的索引 然后利用切片 但是切片是顾头不顾尾 索引索引+1
            let indexNum = conTent.indexOf('\n') +1 ;
            conTent=conTent.slice(indexNum) // 将indexNum所有的数据切除，只保留后面的部分
        }


6、那么经过以上的方法还是会发现渲染到时候会有问题，因为正常渲染的时候都是会有@人名加内容的，
那么我们只有在HTML部分的代码用if判断，如果是子评论我们则渲染对象的人名和下面的内容，如果是跟评论
我们直接走{{comment.content}}就行
{#                判断当前评论是否是子评论 如果是则需要渲染对应的评论人名#}
                {% if comment.parent_id %}
                    <p>@{{ comment.parent.user.username }}</p>
                {% endif %}
                {{ comment.content }}
            </div>
            </li>
        {% endfor %}
    </ul>
    </div>


7、还会有一个问题就是，当你进行子评论完了后，在此进行跟评论时候，你会发现，一致都是子评论了，没有楼层的显示了，这个是什么原因呢
，原来是我们一开始定义的parentId是有值的，一致会带有跟评论的id，所以当我们在发送ajax后我们还要把parentId的值为空，这样下一次在进行
评论的时候，才会变成根评论
// 将生成好的标签加到到评论楼里面去
  $('.list-group').append(temp);
  // 要清空全局的parentId字段
parentId =null