bbs 第六天 评论 (评论列表展示、发表评论)

//给评论绑定按钮事件
        $(‘#submit-comment‘).on(‘click‘, function () {
            // 取到用户id，评论内容， 文章_id
            var commentVal = $(‘#comment‘).val();
            var userId = "{{ request.user.nid }}";
            var articleId = "{{ article.nid }}";

            // 把数据存成key是pid 的数据形式
            // 拿到的是forloop.counter 的楼层数当作pid存到 data里面
            var pid = $(this).data(‘pid‘);
            // 以楼层数来判断是否是子评论，如果有就是子评论，没有就是父评论
            if (pid) {
                //对评论的内容做切片 把@用户给去掉 切换换行前的所有内容
                commentVal = commentVal.slice(commentVal.indexOf("\n") + 1)
            }
            console.log("pid", pid);
            // 如果不是子评论就可以把PID的data给清楚掉
            $(this).removeData("pid");
            console.log(userId);
            if (!userId) {
                // 没有登陆就跳转到登陆页面
                location.href = "/login/"
            } else {
                // 发送请求
                $.ajax({
                    url: "/comment/",
                    type: "POST",
                    data: {
                        user_id: userId,
                        article_id: articleId,
                        comment: commentVal,
                        pid: pid
                    },
                    success: function (res) {
                        if (!res.code) {
                            // 后端评论创建成功
                            // 使用js代码将本次评论内容添加到页面上
                            // 1. 创建HTML
                            // 拿到楼层数，时间，用户名称
                            // 查看comment-list下面有几个li就代表有几层
                            var louceng = $(".comment-list li").length + 1;
                            var time = (new Date()).toLocaleString();
                            var name = "{{ request.user.username }}";
                            // 生成一个页面
                            var htmlStr = `
                            <li class="list-group-item">
                                <p class="small"><span>#${louceng}楼</span> <span>${time}</span>
                                    <a href="/blog/${name}/">${name}</a>
                                    <span class="pull-right replay">回复</span>
                                </p>
                                <p>${commentVal}</p>
                            </li>

`
                            console.log(htmlStr);
                            // 2.添加到页面上
                            // 在comment-list 内部的ul标签的 内部后面追加
                            $(".comment-list ul").append(htmlStr);
                            // 3.清空textarea
                            $("#comment").val(‘‘);
                        }
                    }
                })
            }


        });

        // 给每一楼的回复按钮绑定事件
        // 1.生成一个@用户名 塞到textarea里面
        $(".comment-list").on(‘click‘, ‘.replay‘, function () {
            //添加一个 a 标签 @用户名换行的的str
            var str = ‘@‘ + $(this).prev(‘a‘).text() + "\n";
            // 鼠标点击的话就会把str显示到#comment里面
            $("#comment").focus().val(str);
            // 在评论框下面的提交按钮记录一个标识，表明我是子评论
            var pid = $(this).parent().parent().attr("my-id");
            $("#submit-comment").data("pid", pid);
        });

def comment(request):
    ret = {‘code‘: 0}
    # 拿到登陆的用户id
    user_id = request.user.pk
    comment = request.POST.get("comment")  # 评论的内容
    article_id = request.POST.get("article_id")
    # 拿到父评论的id，没有就拿到空
    pid = request.POST.get("pid", "")

    # 创建评论
    from django.db import transaction
    # 用事务为了保证评论记录与文章的评论数量一致
    with transaction.atomic():
        # 1.先创建一个评论记录
        models.Comment.objects.create(
            user_id=user_id,
            article_id=article_id,
            content=comment,
            parent_comment_id=pid
        )
        # 2.更新当前被评论的文章表里评论数 （comment_count）字段
        models.Article.objects.filter(nid=article_id).update(
            comment_count=F("comment_count")+1
        )
    return JsonResponse(ret)