Связывание кода JavaScript с базой данных Django при нажатии на кнопку

Меня попросили поработать над сетевым сайтом, который похож на Twitter. Я работаю с HTML, CSS, Javascript на стороне клиента и Django на стороне сервера. Я пытаюсь установить связь между Javascript и Django, используя JSON и fetch, поскольку я хочу создать кнопку в профиле каждого пользователя, которая при нажатии на нее зарегистрированным пользователем, заставляет зарегистрированного пользователя следовать за профилем, что сохраняется в базе данных django как модель, содержащая последователя (follower) и пользователя, за которым следуют (following), но при нажатии на кнопку follow (в user.html) она не сохраняет никаких данных в базе данных

в models.py:

class follow(models.Model):
    follower = models.ForeignKey("User",on_delete=models.CASCADE, related_name="follower")
    following = models.ForeignKey("User",on_delete=models.CASCADE, related_name="following")

в файле user.html (содержит скрипт):

<html>
    <head>
        <script>
            document.addEventListener('DOMContentLoaded',function(){
                document.querySelectorAll('input').forEach(input =>{
                    input.addEventListener('click', function(){
                        console.log(input.id);
                        let follow_username = input.id
                        fetch('/follow/'+ follow_id, {
                            method:'PUT',
                            body: JSON.stringify({
                                follow: true
                            })
                        })
                    })
                } 
                )
                });
        </script>
    </head>
    <body>
        <h2>{{x.username}}</h2>
<form>
    {% csrf_token %}
<input type="submit" value="follow" name ="follow" id={{x.username}}>
</form>
    </body>
</html>

в urls.py:

from django.urls import path

from . import views

urlpatterns = [
            path("follow/<str:name>", views.Users, name="follow")
]

в файле views.py:

def Users(request, name):
    x = User.objects.get(username = name)
    if request.method == 'PUT':
        data = json.loads(request.body)
        if data.get('follow') is not None:
            user = request.user
            anotherr = User.objects.filter(username = name)
            another = User.objects.get(username = anotherr).id
            follow.objects.create(follower = user, following = another)
    return render (request, "network/user.html",{"x":x})

при нажатии на кнопку follow, которая присутствует в user.html, данные в базе данных не создаются. так в чем же проблема?

Я выскажу свои предположения о том, что происходит... Просто неправильный синтаксис и неопределенные переменные

View

  1. another / anotherr нет, просто используйте x вы уже получаете пользователя в верхней части представления
  2. get_or_create не позволит вам иметь дубликаты или следовать за кем-то дважды (в целом хорошая идея)
  3. Prints - это только отладка, удалите после того, как убедитесь, что все работает
    4. . 
def Users(request, name):
    x = User.objects.get(username=name)
    
    if request.method == 'PUT':
        print('we\'ve hit put')

        data = json.loads(request.body)

        if data.get('follow') is not None:
            print('in follow')

            # Note: [User Obj Itself]
            #   follower = request.user  (is: <User Obj>)
            #   following = x            (is: <User Obj>)

            followObj, createdBool = follow.objects.get_or_create(follower=request.user, following=x)

            print('followObj', followObj)
            print('created?', createdBool)
        
        print('past follow')

    print('about to render')
    return render (request, "network/user.html",{"x":x})

Шаблон

  1. Не знаю, что такое follow_id, просто используйте input.id
<html>
    <head>
        <script>
            document.addEventListener('DOMContentLoaded',function(){
                document.querySelectorAll('input').forEach(input =>{
                    input.addEventListener('click', function(){
                        
                        // this should be true
                        console.log(input.id == '{{x.username}}');


                        console.log('Fetch Url:\t' + '/follow/'+ input.id);

                        fetch('/follow/'+ input.id, {
                            method:'PUT',
                            body: JSON.stringify({
                                follow: true
                            })
                        })
                    })
                } 
                )
            });
        </script>
    </head>
    <body>
        <h2>{{x.username}}</h2>
        <form>
            {% csrf_token %}
            <input type="submit" value="follow" name ="follow" id={{x.username}}>
        </form>
    </body>
</html>

Если это не работает, скажите мне, что print или console.log попало или не попало - это действительно поможет сузить проблему еще больше

Вернуться на верх