BBS根评论如何实现

郑统京

[后端代码]
from django.db import transaction
def comment(request):
    # 自己也可以给自己的文章经行评论
    if request.is_ajax():
        back_dic = {'code': 1000, 'msg': ''}
        if request.method == 'POST':
            # 后端也可以再次校验是否登录
            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,content=content,article_id=article_id)
                back_dic['msg']='评论成功'
            else:
                back_dic['code']=1001
                back_dic['msg']='用户未登录'
            return JsonResponse(back_dic)
[前端代码]
{#    评论楼开始#}
    <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 href="#" class="pull-right">回复</a></span>
            <div>
                {{ comment.content }}
            </div>
            </li>
        {% endfor %}
    </ul>
    </div>
{#    评论楼结束#}
// 用户点击评论朝后端发送ajax请求
    $('#id_submit').click(function (){
        // 获取用户评论的内容
        let conTent=$('#id_comment').val()
        $.ajax({
            url: '/comment/',
            type: 'post',
            data:{
                'article_id': '{{ article_obj.pk }}',
                '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)
                }
            }
        })
    })
</script>
总结：1、通过bootstrap的复制列表组件，继续在author_datail的点赞样式下面新增评论区2、通过后端传回来的back_dic结果进行判断①先在评论按钮下加span的错误标签②通过code值判断如果为1000，在textarea添加样式.val()为空的样式③做一个临时渲染：先定义用户然后通过模板字符`${}`把用户名request.user.username 和之前定义的内容let conTent = $('#id_comment').val()塞进去④最后在保存到评论楼的ul标签里里面  $('.list-group').append(temp)