Как связать фронтенд (JSX) с бэкендом (Django) и сохранить данные формы в базе данных?

Всем привет, я относительно недавно начал изучать программирование. Дошел до момента, когда нужно сохранять данные из формы регистрации в БД и уперся в тупик, ведь впервые сталкиваюсь с такой задачей. Форму регистрации уже написал (фронтент на JSX), теперь мне нужно настроить, чтобы при нажатии на кнопку "Зарегистрироваться", введенные данные отправлялись через бэкенд (Джанго) в БД (таблицы я также настроил).

У меня в Джанго-проекте имеются разные Джанго-приложения, которые отвечают за различный функционал. То есть являются модулями. Данные фронтенд (JSX) и бэкенд (Джанго) для регистрационной формы, являются также одним из приложений внутри проекта. Их пути: D:\Test\Test\users_registration\frontend\react_registration\src (фронт на JSX) D:\Test\Test\users_registration\backend\django_registration (джанго-приложение для бэкенда с файлами: init.py, admin.py, apps.py, models.py, tests.py, views.py, но файл urls.py отсутствует).

Собственно, проблема в том, что я без понятия, каким образом мне связать фронт с бэкендом, а бэкенд с БД. Так, в JSX я написал:

  const sendDataToBackend = async () => {
    const dataToSend = {
      user_name: name,
      surname: surname,
      birthday: `${selectedYear}-${selectedMonth}-${selectedDay}`,
      email: email2,
      password: password2,
      gender: selectedGender,
    };

    try {
      const response = await fetch('http://my-backend-url/save_user_data/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(dataToSend),
      });

      const responseData = await response.json();

      if (responseData.status === 'success') {
        console.log('Данные успешно сохранены в БД');
      } else {
        console.error('Ошибка при сохранении данных:', responseData.message);
      }
    } catch (error) {
      console.error('Ошибка сети:', error);
    }
  };

  const handleRegisterButtonClick = () => {
    sendDataToBackend();
  };

, но в строке const response = await fetch('http://my-backend-url/save_user_data/', { путь не является правильным (взял с примера какого-то), так как в этом примере человек запускал по данному адресу localhost, но мне данный способ не подходит, ведь manage.py имеется только в проекте, а в приложениях нет. Поэтому при выполнении команды python manage.py runserver у меня запускается localhost проекта, который не имеет отношения к форме регистрации.

Django файл models.py

class UserInfo(models.Model):
    id_user = models.AutoField(primary_key=True)
    user_name = models.CharField(max_length=255)
    user_surname = models.CharField(max_length=255)
    user_birthday = models.DateField()
    user_email = models.EmailField()
    user_password = models.CharField(max_length=255)
    GENDER_CHOICES = [
            ('Male', 'Мужской'),
            ('Female', 'Женский'),
            ('Other', 'Другой'),
        ]
    user_gender = models.CharField(max_length=10, choices=GENDER_CHOICES)

и views.py:

@csrf_exempt
def save_user_data(request):
    if request.method == 'POST':
        data = json.loads(request.body.decode('utf-8'))
        user_info = UserInfo(
            user_name=data['name'],
            user_surname=data['surname'],
            user_birthday=data['birthday'],
            user_email=data['email'],
            user_password=data['password'],
            user_gender=data['gender'],
        )
        user_info.save()
        return JsonResponse({'status': 'success'})
    else:
        return JsonResponse({'status': 'error', 'message': 'Invalid request method'})

Может я неправильно создал структуру проекта и приложений, может еще что-то, я без понятия. Перешерстил уже половину Интернета, но похожего случая не нашел. Объясните пожалуйста, что исправить и каким образом достигнуть цели в виде сохранения данных с формы в БД. Заранее спасибо


Ответы (0 шт):