장고 실시간 추천

1 개요

추천기능은 앞서 장고 추천기능에서 만들었다. 앞의 내용을 참고한 후 진행하자. 장고 추천기능

다만, 매번 새로고침 해서 데이터를 갱신했는데, 이번엔 AJAX를 이용한 통신으로 추천을 실시간 반영하는 방법을 다루고자 한다.

기본적으로 장고 추천기능 문서에서 사용한 코드에서 변형을 가한다.

2 모델 변형

@login_required(login_url='membership:login')
def vote_question(request, question_id):
    question = get_object_or_404(Question, pk=question_id)
    question_like, question_like_created = question.like_user.get_or_create(user=request.user)
    #위 함수가 어떤 기능인지 제대로 파악해야겠다.
    #question.voter.add(request.user)
    if not question_like_created:  # 생성된 게 아닌 경우.
        question_like.delete()  # 삭제한다.
    #기존의 이 줄을 아래로 대체한다. return redirect('pool:detail', question_id=comment.answer.question.id)
    #ajax를 구현하기 위해 json으로 반환한다.
    return HttpResponse(json.dumps(context), context_type="application/json")

3 ajax 사용

3.1 html에 직접 입력

<script type="text/javascript">
(function(){
    const contents = document.querySelector('#클래스명')
    const textField = document.querySelector('#입력하는 창의 클래스')
    
    function contentsFunc(e){
        let elem = e.target;  /*클릭한 타겟을 객체화 한다.*/
        while (!elem.getAttribute('속성')){
            elem = elem.parentNode;  /*객체가 해당 속성을 갖고 있을 때까지 찾는다..*/
            if (elem.nodeName === 'BODY'){
                elem = null;
                return;  /*BODY까지 올라갔는데 없으면 아무것도 반환하지 않는다.*/
            }
        }
        if (elem.matches('[속성="속성값"]')){
            const pk = elem.getAttribute('name');  /*name속성에 좋아요를 할 객체의 pk를 담아둔다.*/
            
            $.ajax({
                type: "POST",
                url: "{% url '인덱스' %}",
                data: {'pk':pk, 'csrfmiddlewaretocken': '{{csrf_tocken}}'},  /*csrf토큰도 담아준다.*/
                datatype: "json",
                success: function (response){
                    alert('성공');
                    const likeCount = document.querySelector('#like-count-'+pk);  /*해당 좋아요 카운트를 세는 pk로 구분해둔다.*/
ㅣㅐ                likeCount.innerHTML = response.like_count;  /*응답의 카운트를 받아 변형해준다.*/
                },
                error: function (request, status, error){
                    alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);}
                
            })
        }
    }
    
    
    contents.addEventListener('click', contentsFunc);
    
})    
    
    
    
</script>

[error함수 안에서 resuest 등을 탬플릿 필터를 사용하지 않고 사용하는데, 이건 어떻게 가능한 걸까;;]