实现Django动态关注/取消关注按钮及粉丝数更新功能求助

要实现关注按钮的动态交互和粉丝数实时更新，需要结合后端AJAX接口和前端DOM操作来完成，以下是具体实现步骤：

1. 后端：调整关注视图以支持AJAX请求 #

修改views.py中的follow视图，使其处理POST请求并返回JSON格式的更新数据，替代原页面跳转逻辑：

from django.http import JsonResponse
from django.contrib.auth.decorators import login_required
from .models import FollowersCount, User  # 根据你的用户模型调整导入

@login_required
def follow(request):
    if request.method != 'POST':
        return JsonResponse({'error': '仅支持POST请求'}, status=400)
    
    follower = request.user
    user_id = request.POST.get('user_id')
    
    try:
        following = User.objects.get(id=user_id)
    except User.DoesNotExist:
        return JsonResponse({'error': '用户不存在'}, status=404)
    
    # 判断当前用户是否已关注目标用户
    is_following = FollowersCount.objects.filter(follower=follower, following=following).exists()
    
    if is_following:
        # 取消关注：删除关联记录
        FollowersCount.objects.filter(follower=follower, following=following).delete()
        button_text = '关注'
    else:
        # 添加关注：创建关联记录
        FollowersCount.objects.create(follower=follower, following=following)
        button_text = '取消关注'
    
    # 获取更新后的粉丝数
    updated_follower_count = FollowersCount.objects.filter(following=following).count()
    
    return JsonResponse({
        'button_text': button_text,
        'follower_count': updated_follower_count
    })

确保urls.py中的路由配置正确：

path('follow/', views.follow, name='follow'),

2. 前端：添加动态交互逻辑 #

在profile.html中给按钮和粉丝数元素添加标识，并编写JavaScript实现AJAX请求和DOM更新：

HTML部分（调整现有代码） #

<div class="profile-stats">
    <span id="follower-count">{{ follower_count }}</span> 粉丝
    <!-- 给按钮添加ID和存储目标用户ID的data属性 -->
    <button id="follow-btn" data-user-id="{{ target_user.id }}">{{ button_text }}</button>
</div>

注：target_user是当前访问的用户对象，follower_count需要在渲染profile页面的视图中传递（比如通过FollowersCount.objects.filter(following=target_user).count()获取）

JavaScript部分（放在页面底部或单独JS文件） #

// 监听关注按钮点击事件
document.getElementById('follow-btn').addEventListener('click', function(e) {
    e.preventDefault();
    
    const btn = this;
    const targetUserId = btn.getAttribute('data-user-id');
    const followerCountEl = document.getElementById('follower-count');
    
    // 发送AJAX请求
    fetch('{% url "follow" %}', {
        method: 'POST',
        headers: {
            'X-CSRFToken': '{{ csrf_token }}',  // Django必须的CSRF令牌
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ user_id: targetUserId })
    })
    .then(response => response.json())
    .then(data => {
        if (!data.error) {
            // 更新按钮文本和粉丝数
            btn.textContent = data.button_text;
            followerCountEl.textContent = data.follower_count;
        } else {
            console.error('操作失败：', data.error);
        }
    })
    .catch(error => console.error('请求出错：', error));
});

3. 补充：完善profile页面渲染逻辑 #

确保渲染profile页面的视图传递follower_count和button_text变量：

def profile(request, user_id):
    target_user = User.objects.get(id=user_id)
    # 计算当前用户的粉丝数
    follower_count = FollowersCount.objects.filter(following=target_user).count()
    # 判断当前登录用户是否已关注目标用户
    is_following = FollowersCount.objects.filter(follower=request.user, following=target_user).exists()
    button_text = '取消关注' if is_following else '关注'
    
    return render(request, 'profile.html', {
        'target_user': target_user,
        'follower_count': follower_count,
        'button_text': button_text
    })

内容的提问来源于stack exchange，提问作者Vijay Krishna Narsingoju