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

Posted 2020-12-03 kermitjam

bbs第六天：

发表评论：

　　给评论绑定按钮事件:

　　1.找到用户输入的textarea 里面的元素的评论内容、用户id、文章id，把forloop.counter的数字当作父id用data 已pid为key存到内存里；然后判断pid是否存在，存在的话就证明当前用户是子评论，就需要把@子用户的字样以还行前用slice切掉，最后拿到没有@用户名的评论，如果不是子评论就可以把PID的data给清楚掉；把userId,articleId,comment,pid传过去服务端

　　2.服务端取到pid看里面有没有值，有的话就存一个父id到到新建的子评论id中，服务端创建一个事务，里面新建一个新的评论，更新文章评论数+1；然后把结果返回到前端；  

　　3.前端拿到后端发送过来的结果如果没有报错的话，就直接给楼层数量长度+1，时间变成当前时间，转下格式；名字是当前用户名；接着生成一个新的页面，用ES6的语法 ` ` 把页面的标签写在里面，然后把这些li添加到ul里面；然后提交后清空comment；

　　4.给每一楼添加一个回复按钮事件：

　　生成一个@用户名然后把他塞到textarea里面，然后添加一个@用户名换行的str ，也就是点击回复字样跳到comment里面，在子评论下面做个attr(‘my-id‘)做一个标记；

 

 评论Js代码

//给评论绑定按钮事件
        $(‘#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("
") + 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() + "
";
            // 鼠标点击的话就会把str显示到#comment里面
            $("#comment").focus().val(str);
            // 在评论框下面的提交按钮记录一个标识，表明我是子评论
            var pid = $(this).parent().parent().attr("my-id");
            $("#submit-comment").data("pid", pid);
        });

View Code

 

评论的views.py

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)

View Code

 

 

评论页面升级...，属性图评论楼: