Python + Svelte — post и get запросы

Admin Flask, Python, Svelte

Описание взаимодействия передачи информации от фронта к бэку через GET и POST на Svelte и Python.

GET

JavaScript

Функция получает домен в зависимости от окружения (локальный или лайв). Она пригодится нам в дальнейшем.

export function getDomain() {
    let url = window.location.href.split("/");
    let domain = url[0] + "//" + url[2] + '/';

    if (url[2] === 'localhost') {
        return domain + url[3];
    }

    return domain;
}

Основная функция для отправки запроса get. В ней же мы используем функцию выше для подстановки домена.

export async function getFetch(url) {
    let response = await fetch(getDomain() + url);
    return response.json();
}

Положим эти функции в файл main.js. Это общие функции, которые будут использоваться во всём проекте.

Svelte

На стороне Svelte мы импортируем функцию для запроса get из файла main:

import {getFetch} from '../main';

Дальше мы будем обращаться к этой функции, чтобы передать нужные нам значения. Например, таким образом:

function saveUsersData(deposit) {
    getFetch('deposit/save-user-data/'
            + deposit.user_id_time + '/'
            + deposit.time + '/'
            + deposit.date + '/'
            + deposit.deposit
    );
}

На том как сюда передаются значения останавливаться не будем. Эти данные передаются в функцию через события — об этом можно узнать в статье о событиях на Svelte.

Python

На стороне питона мы используем Flask и Blueprint и получаем данные так:

@deposit_bp.route('/save-user-data/<user_id_time>/<time>/<date>/<deposit>', methods=['GET'])
@login_required
def save_user_data(user_id_time, time, date, deposit):
   pass

Внутри этой функции полученные данные обрабатываете на своё усмотрение.

POST

JavaScript

Добавим в наш файл main.js функцию для отправки Post запросов:

export async function postFetch(url, data) {
    let response = await fetch(getDomain() + url, {
            method: 'POST',
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(data)
        });
    return response.json();
}

Svelte

Точно также импортируем функцию:

import {postFetch} from '../main';

Дальше мы её вызываем и передаём туда свои данные:

function saveUsersData(deposit) {
    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 мы получаем эти данные так:

@deposit_bp.route('/save-user-data/', methods=['POST'])
@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 функция после отправки всегда ждет ответа.

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"Python + Svelte — post и get запросы"