Django 프레임 워 크 기반 Ajax 로 좋아요 기능 인 스 턴 스 코드 구현

개요:
'좋아요'기능 을 실현 하려 면'좋아요'를 누 른 사람,'좋아요'를 누 른 사람,'좋아요'를 누 른 사람 이 누구 인지,'좋아요'를 누 른 사람 이 몇 명인 지,'좋아요'를 누 른 후에'좋아요'를 취소 할 수 있어 야 한다.'좋아요'를 누 른 후의 정보 가 전단 페이지 에 신속하게 표시 되 기 위해 서 는'Ajax'를 사용 하여 비동기 적 으로 데 이 터 를 요청 하여 실시 간 으로 표시 해 야 한다.
다음은 더 이상 할 말 이 없 으 니,편집장 과 함께 상세 한 소 개 를 살 펴 보 자.
모델 분석:
만 든 모델 이 기록 해 야 할 데 이 터 는'좋아요'를 누 르 는 사람,'좋아요'를 누 르 는 대상,'좋아요'를 누 르 는 시간,'좋아요'를 누 르 는 수량 이다.앞의 세 가지 속성 은 주로'좋아요'를 누 르 는 상 태 를 기록 하 는 데 사용 되 고'좋아요'를 누 르 는 수량 은 특정한 글 의'좋아요'수량 을 기록 하 는 데 사용 되 기 때문에 여기 서'좋아요'수량 을 한 모델 에 따로 두 는 것 이 좋다.여기에 두 개의 모델 을 만 들 었 는데,LikeRecord 와 LIkeCount,LikeRecord 는 좋아요 상 태 를 기록 하 는 데,LIkeCount 는 좋아요 수 를 기록 하 는 데 사용 된다.대체적인 사고 지도:

코드:

from django.db import models
from django.contrib.contenttypes.fields import GenericForeignKey
from django.contrib.contenttypes.models import ContentType
from django.contrib.auth.models import User

# Create your models here.


#            
class LikeCount(models.Model):
 content_type = models.ForeignKey(ContentType, on_delete=models.DO_NOTHING)
 object_id = models.PositiveIntegerField()
 content_object = GenericForeignKey('content_type', 'object_id')
 #            
 like_num = models.IntegerField(default=0)


#            
class LikeRecord(models.Model):
 content_type=models.ForeignKey(ContentType, on_delete=models.DO_NOTHING)
 object_id=models.PositiveIntegerField()
 content_object=GenericForeignKey('content_type', 'object_id')
 #        
 like_user = models.ForeignKey(User, on_delete=models.DO_NOTHING)
 #        
 like_time = models.DateTimeField(auto_now_add=True)

보기 함수:
보기 함수 의 주요 역할 은 전단 이 Ajax 를 통 해 보 낸 데 이 터 를 받 아들 이 고 데 이 터 를 판단 처리 한 다음 에 앞의 두 모델 에 대해 실례 화 작업 을 하여 데이터 변경 작업 을 한 다음 에 데이터 가 성공 한 후에 처 리 된 결 과 를 되 돌려 주 고 데이터 가 잘못 저장 되 었 을 때 해당 하 는 알림 정 보 를 되 돌려 주 는 것 입 니 다.
코드:

from django.shortcuts import render, HttpResponseRedirect
from django.contrib.contenttypes.models import ContentType
from django.http import JsonResponse
from .models import LikeCount, LikeRecord

# Create your views here.


#             
def success_response(like_num):
 data = {}
 data['status'] = 'SUCCESS'
 data['like_num'] = like_num
 return JsonResponse(data)


#              
def error_response(message):
 data = {}
 data['status'] = 'ERROR'
 data['message'] = message
 return JsonResponse(data)


def like_up(request):
 #   GET          
 user = request.user
 #         
 if not user.is_authenticated:
  return error_response('   ，        ')
 content_type = request.GET.get('content_type')
 content_type = ContentType.objects.get(model=content_type)
 object_id = request.GET.get('object_id')
 is_like = request.GET.get('is_like')

 #         
 if is_like == 'true':
  #     ，          
  like_record, created = LikeRecord.objects.get_or_create(content_type=content_type, object_id=object_id, like_user=user)
  #   created           ，          ，              
  if created:
   #                  ，         
   like_count, created = LikeCount.objects.get_or_create(content_type=content_type, object_id=object_id)
   like_count.like_num += 1
   like_count.save()
   return success_response(like_count.like_num)
  else:
   #        
   return error_response('     ')
 else:
  #     
  #          ，         
  if LikeRecord.objects.filter(content_type=content_type, object_id=object_id, like_user=user).exists():
   #     ，    
   #       
   LikeRecord.objects.get(content_type=content_type, object_id=object_id, like_user=user).delete()
   #                ，              
   like_count, create = LikeCount.objects.get_or_create(content_type=content_type, object_id=object_id)
   if create:
    #      ，      
    return error_response('     ，      ')
   else:
    #     ，       
    like_count.like_num -= 1
    like_count.save()
    return success_response(like_count.like_num)
  else:
   #      ，      
   return error_response('     ，      ')

Ajax 코드:
이 세그먼트 코드 의 주요 역할:전단 단 추 를 통 해 해당 하 는 처리 함 수 를 건 드 려 현재 데 이 터 를 백 엔 드 에 전달 하고 백 엔 드 는 데 이 터 를 받 은 후 처리 하 며,처 리 된 데 이 터 를 다시 프론트 엔 드 에 되 돌려 주 고,Ajax 를 통 해 실시 간 으로 프론트 엔 드 에 표시 합 니 다.
코드:

<script type="text/javascript">
 function change_like(obj, content_type, object_id) {
  //   obj     active   ，               
  var is_like = obj.getElementsByClassName('active').length == 0
  $.ajax({
   url: '/like_up/',
   //       csrf_token  ，    GET  
   type: 'GET',
   //                
   data: {
    content_type: content_type,
    object_id: object_id,
    is_like: is_like,
   },
   cache: false,
   success: function (data) {
    console.log(data);
    if (data['status'] == 'SUCCESS'){
     //       
     //   class       
     var record = $(obj.getElementsByClassName('glyphicon'))
     if (is_like){
      record.addClass('active')
     }
     else {
      record.removeClass('active')
     }
     //       
     var like_num = $(obj.getElementsByClassName('like_num'))
     like_num.text('（' + data['like_num'] + '）')

    }
    else {
     //             
     alert(data['message'])
    }
   },
   error: function (xhr) {
    console.log(xhr)
   }
  });
  return false;
 };
</script>

최종 효과 도:

GitHub 소스 코드
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.