blog开发之文章详情页

文章详情页

文章详情页主要内容：

1.文章内容展示

2.评论和点赞

页面效果：

 

 视图代码：

def article_detail(request, username, article_id):
    user_obj = models.UserInfo.objects.filter(username=username).first()
    if not user_obj:
        return render(request, 'blog/not_found.html')
    blog = user_obj.blog
    article_obj = models.Article.objects.filter(nid=article_id).first()
    comment_list = models.Comment.objects.filter(user=user_obj).all()

    return render(request, 'blog/article_detail.html', {'article_obj': article_obj, 'username': username, 'blog': blog,
                                                        'comment_list': comment_list})


def digg(request):
    if request.method == 'POST':
        res = BaseResponse()
        user = request.user
        if not user:
            res.code = 2002
            res.error = '请先登录'
            return JsonResponse(res.dict)
        is_up = json.loads(request.POST.get('is_up'))
        article_id = request.POST.get('article_id')
        article_obj = models.Article.objects.filter(pk=article_id)
        if not article_obj.first():
            res.code = 2004
            res.error = '文章不存在！'
            return JsonResponse(res.dict)
        up_down_obj = models.ArticleUpDown.objects.filter(user=user, article_id=article_id).first()
        if up_down_obj:
            res.code = 2003
            res.error = '你已经推荐过了' if up_down_obj.is_up else '你已经反对过了'
            return JsonResponse(res.dict)
        models.ArticleUpDown.objects.create(user=user, article_id=article_id, is_up=is_up)
        if is_up:
            article_obj.update(up_count=F('up_count') + 1)
        else:
            article_obj.update(down_count=F('down_count') + 1)
        return JsonResponse(res.dict)


def comment(request):
    res = BaseResponse()
    article_id = request.POST.get('article_id')
    content = request.POST.get('content')
    pid = request.POST.get('pid')
    if not request.user.is_authenticated:
        res.code = 3000
        res.error = '请先登录'
        return JsonResponse(res.dict)
    user_id = request.user.pk
    with transaction.atomic():
        models.Comment.objects.create(user_id=user_id, article_id=article_id, content=content, parent_comment_id=pid)
        models.Article.objects.filter(pk=article_id).update(comment_count=F('comment_count') + 1)

    return JsonResponse(res.dict)

注意：

1.评论完成后，需要对评论表增加一条数据，还需要对文章表的评论数做加1操作。用到Django提供的事务，来保证数据完整性。

 

article_detail页面

{% extends 'blog/base.html' %}

{% block content %}
    {% csrf_token %}
    <div class="article_info">
        <h3 class="text-center">{{ article_obj.title }}</h3>
        <div class="content">{{ article_obj.content|safe }}</div>
    </div>

    <div class="clearfix">
        <div id="div_digg">
            <div class="diggit action">
                <span class="diggnum" id="digg_count">{{ article_obj.up_count }}</span>
            </div>
            <div class="buryit action">
                <span class="burynum" id="bury_count">{{ article_obj.down_count }}</span>
            </div>
            <div style="clear: both"></div>
            <div class="diggword" id="digg_tips" style="color: red;"></div>
        </div>
    </div>

    <div class="comments">
        <p>评论列表</p>
        <ul class="list-group comment_list">
            {% for comment in comment_list %}
                <li class="list-group-item">
                    <div>
                        <a href=""># {{ forloop.counter }}楼</a> &nbsp;&nbsp;
                        <a href=""><span>{{ comment.user.username }}</span></a>
                        <span>{{ comment.create_time|date:'Y-m-d' }}</span>
                        <a class="btn btn-info pull-right reply_btn" username="{{ comment.user.username }}"
                           comment_pk="{{ comment.pk }}" id="reply_btn">回复</a>
                    </div>

                    {% if comment.parent_comment_id %}
                        <div class="pid_info well">
                            <p>回复于{{ comment.parent_comment.user.username }}:</p>
                        </div>
                    {% endif %}

                    <div class="comment_con">
                        <p>{{ comment.content }}</p>
                    </div>

                </li>
            {% endfor %}
        </ul>
        <p>发表评论</p>
        <p>昵称：<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50"
                     value="{{ request.user.username }}">
        </p>
        <p>评论内容:</p>
        <textarea name="" id="comment_content" cols="60" rows="10"></textarea>
        <p>
            <button class="btn btn-default comment_btn">提交评论</button>
            <span id="comment_tips"></span>
        </p>
    </div>

{% endblock %}

{% block js %}
    <script>
        // 点赞
        $('#div_digg .action').click(function () {
            var is_up = $(this).hasClass('diggit');
            var $obj = $(this).children('span');
            $.ajax({
                url: '/blog/digg/',
                type: 'post',
                data: {
                    csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val(),
                    is_up: is_up,
                    article_id: "{{ article_obj.pk }}"
                },
                success: function (data) {
                    console.log(data);
                    if (data.code === 1000) {
                        var val = parseInt($obj.text());
                        $obj.text(val + 1);
                    } else {
                        $('#digg_tips').text(data.error);
                        setTimeout(function () {
                            $('#digg_tips').text('');
                        }, 1500)
                    }
                }
            })

        });

        // 提交评论
        var pid = '';
        $('.comment_btn').click(function () {
            var content = $('#comment_content').val();


            $.ajax({
                url: '/blog/comment/',
                type: 'post',
                data:{
                    csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val(),
                    article_id: "{{ article_obj.pk }}",
                    content: content,
                    pid: pid
                },
                success: function (data) {
                    console.log(data);
                    if(data.code===1000){
                        $('#comment_tips').text('评论成功！请刷新查看。').css({"color":"green","margin":"10px"});

                        setTimeout(function () {
                            $('#comment_tips').text('');
                        },1500);

                    }else{
                        // 失败
                        $('#comment_tips').text(data.error).css({"color":"red","margin":"10px"});
                        setTimeout(function () {
                            $('#comment_tips').text('');
                        },1500)
                    }
                }



            })


        });
        // 回复按钮
        $(".reply_btn").click(function () {
            $('#comment_content').focus();
            var val = '@' + $(this).attr('username')+'\n';
            $('#comment_content').val(val);
            pid = $(this).attr('comment_pk');
        })




    </script>
{% endblock %}

注意：

1.点完赞后，需要对页面的点赞数+1，通过parseInt先转换整形再操作。

var val = parseInt($obj.text());
$obj.text(val + 1);