[Django] 팔로우 언팔로우

urls.py

urlpatterns = [
		...
        path('following/<int:to_user_id>/',views.following,name="following"),
   		path('unFollowing/<int:to_user_id>/',views.unFollowing,name="unFollowing"),
]

 

 

views.py

#팔로우 목록
@login_required(login_url="common:login")
def follow_list(request,user_id):
    follow = get_object_or_404(Follow,user_id=user_id)
    userList = User.objects.exclude(pk=request.user.pk)#자기자신을 재외하고 불러옴
    
    context = {"follow" : follow , "userList" : userList}
    
    return render(request,"common/follow_list.html",context)
    
    
    
#팔로우
@login_required(login_url="common:login")
def following(request,to_user_id):
    to_user = get_object_or_404(User,pk = to_user_id)
    followUser = get_object_or_404(Follow,user = request.user)
    
    followUser.to_user.add(to_user)
    
    
    return redirect('common:follow_list',user_id = request.user.id)
    
#언팔로우
@login_required(login_url="common:login")
def unFollowing(request,to_user_id):
    to_user = get_object_or_404(User,pk = to_user_id)
    followUser = get_object_or_404(Follow,user = request.user)
    
    followUser.to_user.remove(to_user)
    
    return redirect('common:follow_list',user_id = request.user.id)

 

follow_list.html

{% extends 'base/base.html' %}
{% load board_filter %}
{% block content %}


<div class="container my-3" >
    <div class = "row">
        <div  class ="col-xs-8 col-sm-6">
            <table class="table">
                <thead>
                    <tr class="text-center table-dark">
                        <th>친구</th>     
                    </tr>
                </thead>
                <tbody>
                    {% if follow%}
                        
                    {%for user in follow.to_user.all%}
                    <tr class-"text-start">
                        <td>{{user.profile.nickname}}
                            <a href = "{% url 'common:unFollowing' to_user_id=user.id %}" data-url = :"{% url 'common:unFollowing' to_user_id=user.id %}"
                            class="unFollower btn btn-outline-secondary">
                            삭제
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                    {% else %}
                    <tr>
                        <td colspan="4">친구가 없습니다.</td>
                    </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>      
        <div  class ="col-xs-4 col-sm-6">
            


            <table class="table">
                <thead>
                    <tr class="text-center table-dark">
                        <th>친구추가</th>     
                    </tr>
                </thead>
                <tbody>
                    {% if userList%}
                    {%for to_user in userList.all%}
                    <tr class-"text-start">
                        <td>{{to_user.profile.nickname}}
                            <a href = "{% url 'common:following' to_user_id=to_user.id %}" data-url = :"{% url 'common:following' to_user_id=to_user.id %}"
                            class="follower btn btn-outline-secondary">
                            추가
                            </a>
                        </td>
                        
                    </tr>
                    {% endfor %}
                    {% else %}
                    <tr>
                        <td colspan="4">친구가 없습니다.</td>
                    </tr>
                    {% endif %}
                </tbody>
            </table>
        


        </div>
    </div>
</div>
{% endblock %}


{% block script %}
<script type='text/javascript'>
const follower_elements = document.getElementsByClassName("follower");
Array.from(follower_elements).forEach(function(element){
    element.addEventListener('click',function(){
        if(confirm("팔로우 하시겠습니까?")){
            location.href = this.dataset.uri;
        };
    });
});

const unfollower_elements = document.getElementsByClassName("unFollower");
Array.from(unfollower_elements).forEach(function(element){
    element.addEventListener('click',function(){
        if(confirm("삭제 하시겠습니까?")){
            location.href = this.dataset.uri;
        };
    });
});
</script>
{% endblock %}

 

실행화면