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 запросы"