Описание взаимодействия передачи информации от фронта к бэку через GET и POST на Svelte и Python.
GET
JavaScript
Функция получает домен в зависимости от окружения (локальный или лайв). Она пригодится нам в дальнейшем.
let url = window.location.href.split("/");
let domain = url[0] + "//" + url[2] + '/';
if (url[2] === 'localhost') {
return domain + url[3];
}
return domain;
}
Основная функция для отправки запроса get. В ней же мы используем функцию выше для подстановки домена.
let response = await fetch(getDomain() + url);
return response.json();
}
Положим эти функции в файл main.js. Это общие функции, которые будут использоваться во всём проекте.
Svelte
На стороне Svelte мы импортируем функцию для запроса get из файла main:
Дальше мы будем обращаться к этой функции, чтобы передать нужные нам значения. Например, таким образом:
getFetch('deposit/save-user-data/'
+ deposit.user_id_time + '/'
+ deposit.time + '/'
+ deposit.date + '/'
+ deposit.deposit
);
}
На том как сюда передаются значения останавливаться не будем. Эти данные передаются в функцию через события — об этом можно узнать в статье о событиях на Svelte.
Python
На стороне питона мы используем Flask и Blueprint и получаем данные так:
@login_required
def save_user_data(user_id_time, time, date, deposit):
pass
Внутри этой функции полученные данные обрабатываете на своё усмотрение.
POST
JavaScript
Добавим в наш файл main.js функцию для отправки Post запросов:
let response = await fetch(getDomain() + url, {
method: 'POST',
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data)
});
return response.json();
}
Svelte
Точно также импортируем функцию:
Дальше мы её вызываем и передаём туда свои данные:
let data = {
'user_id_time': deposit.user_id_time,
'time': deposit.time,
'date': deposit.date,
'deposit': deposit.deposit,
'description': deposit.description
}
postFetch('deposit/save-user-data/', data);
}
Python
На python мы получаем эти данные так:
@login_required
def save_user_data():
data = request.get_json()
description = data['description']
user_id_time = data['user_id_time']
time = data['time']
date = data['date']
deposit = data['deposit']
return json.dumps('ok')
Что-то делаем с ними и если нужно возвращаем обратно. В данном пример возвращаем всегда, потому что наша JS функция после отправки всегда ждет ответа.