Как связать фронтенд (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'})
Может я неправильно создал структуру проекта и приложений, может еще что-то, я без понятия. Перешерстил уже половину Интернета, но похожего случая не нашел. Объясните пожалуйста, что исправить и каким образом достигнуть цели в виде сохранения данных с формы в БД. Заранее спасибо