BBS之文章详情页搭建

博客评论相关

博客文章详情页搭建

{% extends 'base.html' %}
{% block css %}
    <style>
        #div_digg {
            float: right;
            margin-bottom: 10px;
            margin-right: 30px;
            font-size: 12px;
            width: 125px;
            text-align: center;
            margin-top: 10px;
        }

        #div_digg .diggnum {
            line-height: 1.5em !important;
        }

        .diggit {
            float: left;
            width: 46px;
            height: 52px;
            background: url(/static/img/up.gif) no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        .buryit {
            float: right;
            margin-left: 20px;
            width: 46px;
            height: 52px;
            background: url(/static/img/down.gif) no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        .clear {
            clear: both;
        }

        #div_digg .diggnum {
            line-height: 1.5em !important;
        }

        .diggword {
            margin-top: 5px;
            margin-left: 0;
            font-size: 12px;
            color: gray;
        }
    </style>
{% endblock %}

{% block right_content %}
    {#    文章及标题开始    #}
    <h3>{{ article_obj.title }}</h3>
    {{ article_obj.content|safe }}
    {#    文章结束   #}
    {#    点赞点踩开始    #}
    <div class="clearfix">
        <div id="div_digg">
            <div class="diggit action">
                <span class="diggnum" id="digg_count">{{ article_obj.up_num }}</span>
            </div>
            <div class="buryit action">
                <span class="burynum" id="bury_count">{{ article_obj.down_num }}</span>
            </div>
            <div class="clear"></div>
            <div class="diggword" id="digg_tips">
            </div>
        </div>
    </div>
    {#    点赞点踩结束    #}
    {#    评论楼开始    #}
    <div><h4>评论</h4></div>
    {% for comment in comment_list %}
        <hr>
        <div>
            <span>#{{ forloop.counter }}楼&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span><span class="glyphicon glyphicon-time"></span>&nbsp;{{ comment.comment_time|date:'Y-m-d' }}&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span><span class="glyphicon glyphicon-user"></span>&nbsp;<a href="/{{ comment.user }}/">{{ comment.user }}</a></span>
            <span class="pull-right reply " id="id_reply"  username="{{ comment.user.username }}" comment_id="{{ comment.pk }}"><span class="glyphicon glyphicon-comment"></span>&nbsp;<a >回复</a></span>
        </div>
        <div>

        {% if comment.parent %}
            <div>@{{ comment.parent.user.username }}</div>
        {% endif %}
            <div>{{ comment.content }}</div>
        </div>
    {% endfor %}
    <div class="linshi_comment"></div>

    {#    评论楼结束    #}
    {#    评论输入 开始  #}
    <hr>
    <div><span class="glyphicon glyphicon-comment"></span>&nbsp;&nbsp;&nbsp;发表评论</div>

    <div style="margin-top: 20px">
        <span class="glyphicon glyphicon-user"></span>
        <span>&nbsp;&nbsp;&nbsp;昵称:&nbsp;&nbsp;&nbsp;{{ request.user.username }}</span>
    </div>
    <div style="margin-top: 20px">
        <span>评论内容:</span>
    </div>
    <div>
        <textarea name="comment" id="id_comment" cols="60" rows="10"></textarea>

    </div>
    <button class="btn btn-primary" id="id_submit_comment" style="margin-left: 400px; margin-top: 20px">提交</button>

    {#    评论输入结束   #}
{% endblock %}

{% block js %}
    <script>
        // 点赞点踩 点击事件绑定
        $('.action').click(function () {
            let isUp = $(this).hasClass('diggit');
            let $info = $('#digg_tips');
            let $span = $(this).children();
            $.ajax({
                url: "/up_or_down/",
                type: 'post',
                data: {
                    'article_id':{{ article_obj.pk }},
                    'is_up': isUp,
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                },
                success: function (data) {
                    if (data.code == 200) {
                        console.log(data);
                        $info.html(data.msg);
                        //将span标签内的文本加1
                        $span.text(Number($span.text() + 1))
                    }
                    else {
                        $info.html(data.msg)
                    }
                }
            })
        });
        //{#评论js开始#}
        // 先定义一个全局的 parent
        let parentId='';
        $('#id_submit_comment').click(function () {
            // 获取textarea 文本内容
            let $comment_content = $('#id_comment').val();
            //判断parentId 是否有值，有值则进行切分
            if (parentId){
                // 获取切分的索引（切分的时候 顾头不顾尾，所以需要加1）
                let indexVal = $comment_content.indexOf('\n')+1;
                $comment_content=$comment_content.slice(indexVal);
            }
            // 发送ajax请求
            $.ajax({
                url: '/comment/',
                type: 'post',
                data: {
                    'article_id': '{{ article_id }}',
                    'comment_content': $comment_content,
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                    'parent_id': parentId
                },
                success: function (data) {
                    // 将新的评论临时渲染到前端页面
                    if (data.code == 100) {
                        let userName = '{{ request.user.username }}';
                        let commentConent = $comment_content;
                        //此处用的是前端的模板语言的替换
                        let tempStr = `
                        <div>
                            <hr>
                            <span><span class="glyphicon glyphicon-user"></span>&nbsp;<a 	     href="/${userName}/">${userName}</a></span>
                            <p>${commentConent}</p>
                        </div>
                    `;
                        // 查找url标签，添加子元素
                        $('.linshi_comment').append(tempStr);
                        // 将textarea文本框清空
                        $('#id_comment').val('');
                    }
                }
            })

        });
        // 回复父评论信息
        $('.reply').click(function () {
            // 把你想评论的那条评论的任命自动添加到 textarea 文本中去
            let pUserName=$(this).attr('username');
            let pCommentId=$(this).attr('comment_id');
            // 自动换行
            $('#id_comment').val('@'+pUserName+'\n');
            // 聚焦到评论文本框
            $('#id_comment').focus();
            //给parent_id 赋值
            parentId=pCommentId;
        });
    </script>
{% endblock %}

博客详情页后端视图函数

# 将博客文章内容 以及评论的列表传导前端

# url.py 中的对应路由
url(r'^(?P<username>\w+)/article/(?P<article_id>\d+)',views.article_detail)

# views.py
def article_detail(request, username, article_id):
    # 从数据库中查找文章对象
    article_obj = models.Article.objects.filter(pk=article_id).first()
    # 查找当前用户对象
    user_obj = models.UserInfo.objects.filter(username=username).first()
    # 查找评论的queryset对象
    comment_list= models.Comment.objects.filter(article_id=article_id)
    return render(request, 'article_detail.html', locals())

# 评论 视图函数 路由
url('/comment/',views.comment)

# views.py
def comment(request):
    back_dic = {'code': 100, 'msg': ''}
    if request.is_ajax():
        article_id = request.POST.get('article_id')
        comment_content = request.POST.get('comment_content')
        parent_id = request.POST.get('parent_id')
        print('article_id', article_id)
        print('comment', comment_content)
        # 1.先校验当前用户是否已经登录
        if request.user.is_authenticated():
            # 开启事务操作   // from django.db import transaction
            with transaction.atomic():
                # 1.在文章表中将普通字段加1
                models.Article.objects.filter(pk=article_id).update(comment_num=F('comment_num') + 1)
                # 2.在评论表中将存储真正的数据
                models.Comment.objects.create(article_id=article_id, user=request.user, content=comment_content,parent_id=parent_id)
                back_dic['msg'] = '评论成功'
        else:
            back_dic['code'] = 101
            back_dic['msg'] = '请先登录'
    return JsonResponse(back_dic)