Django 项目试炼blog（6） -- 文章详情页1 -- 点赞功能

url

   #文章详情页
    re_path(r'(?P<username>\w+)/article/(?P<article_id>\d+)/$',views.article),
    # 点赞
    path('up_down/', views.up_down),

 

 

---

views

from django.db.models import F

def up_down(request):
    sign = request.POST.get('sign')
    sign = json.loads(sign)  # 前端数据默认以json传来，将‘true’进换成布尔值
    article_id = request.POST.get('article_id')

    send_info = {'state': True}
    obj = ArticleUpDown.objects.filter(article_id=article_id, user_id=request.user.pk).first()
    if not obj:
        ArticleUpDown.objects.create(is_up=sign, article_id=article_id, user_id=request.user.pk)
        if sign == True:
            Article.objects.filter(pk=article_id).update(up_count=F('up_count') + 1)
        else:
            Article.objects.filter(pk=article_id).update(down_count=F('down_count') + 1)
    else:
        send_info['state'] = False  # 用户已对文章进行过操作
        send_info['handled'] = obj.is_up  # 对文章的Up or Down操作
    print(send_info)

    return JsonResponse(send_info)

 

---

 

前端

        <div id="div_digg" class="pull-right">
            {#功能效果一样时，给与同一个类名进行jquery操作#}
            <div class="diggit action" >
                <span class="diggnum" id="digg_count">{{ art_obj.up_count }}</span>
            </div>
            <div class="buryit action" >
                <span class="burynum" id="bury_count">{{ art_obj.down_count }}</span>
            </div>
            <div><span class="up_down_info" style="color: red;margin-left: 10px"></span></div>
        </div>
        <div style="clear: both"></div>

 

Jquery

$(function () {
            {#点赞哪个用户对哪篇文章进行了点赞操作（用户即为登陆用户）#}
            $('.action').click(function () {
                var $obj = $(this).children('span');
                var sign = '';
                if($(this).children().attr('class')==='diggnum'){
                sign = true
                }
                else {
                    sign = false
                }

                {#在jQuery使用ajax后$(this)失效#}
                $.ajax({
                    url:'/up_down/',
                    type:'post',
                    data:{
                        'sign':sign,
                        'article_id':"{{ art_obj.pk }}",
                        'csrfmiddlewaretoken':$("[name='csrfmiddlewaretoken']").val()
                        },
                    success:function(data){
                        console.log(data);
                        {#判断用户是否已操作#}
                        if(data['state'] === false){
                            if(data['handled']===true){
                                $('.up_down_info').text('你已经支持过');
                                setTimeout(function () {$('.up_down_info').text('')},1000)
                            }
                            else{
                                $('.up_down_info').text('你已经反对过');
                                setTimeout(function () {$('.up_down_info').text('')},1000)
                            }
                        }else{
                            nub = $obj.text();
                            $obj.text(parseInt(nub)+1)
                        }
                    }
                    })
                });

 

---

 

重点：

1、点赞框，反对框（因为功能一样）设置统一类名，在jquery事件中再判断“赞”与“反对”

2、前端ajax数据以json数据传输至后端，需要转序列

3、点赞数两种显示，ajax动态显示，render显示