Flask для начинающих — Часть 2 пишем landing page+admin panel с редактированием контента

Спасибо за фидбек!

fetch — это метод JavaScript для выполнения HTTP-запросов, а Pydantic — это библиотека Python, используемая для валидации данных и управления настройками с помощью моделей данных на основе аннотаций типов Python. Их использование связано, но они работают на разных сторонах приложения: fetch на клиентской стороне (в браузере) и Pydantic на серверной стороне (в вашем Flask-приложении).

в целом реализация будет без pydentic.

вот пример как можно реализовать отправку с фронта на бэк с помощью JS

в моем случае отправка данных form имеет документ в даном случае отправка будет выглядеть так:

используем ту же форму в коде файла editland.html:

<form action="update_content" method="post"> <!-- Отправляем 1 сегмент блока через POST на endpoint update_content -->
  <h3><input type="text" name="short_title" value="{{ item.short_title }}"></h3> <!-- название блока в меню header -->
  <img src=".{{ item.img }}" alt="{{ item.altimg }}"> <!-- показываем изображение которое сейчас доступно -->
  <input type="file" name="img">  <!-- возможность загружать новое изображение  -->
  <p><input type="text" name="title" value="{{ item.title }}"></p> <!-- заголовок контента -->
  <p><textarea name="contenttext">{{ item.contenttext }}</textarea></p> <!-- текс контента -->
  <input type="hidden" name="id" value="{{ item.id }}"> <!-- id  контента - поле не показывается на форме -->
  <button type="submit" class="btn btn-primary">Сохранить изменения</button>
</form>

добавляем JS скрипт в самый низ html файла:

document.getElementById('myForm').addEventListener('submit', async function(event) {
    event.preventDefault();

    const formData = new FormData(this); // Сбор данных из формы
    try {
        const response = await fetch('/update_content', { // Путь к вашему эндпоинту Flask
            method: 'POST',
            body: formData // Отправка данных формы
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json(); // Предполагается, что сервер возвращает JSON
        console.log(data); // Обработка ответа сервера
    } catch (error) {
        console.error('Ошибка при отправке формы:', error);
    }
});

таким образом, нам не нужно менять код на backend Flask приложения по обработке запроса, но мы должны будем вернуть JSON в данном примере

надеюсь это поможет вам)

как дополнение:

Фронт и Бэк как отдельные инстанции

также, если вы пишите фронт на чистой ноде или например используете svelter или react
то обработчик для бэка будет отличным решением FastAPI как пример

Бэк на Flask и на фронте имеет один из модулей или блока кода на React/Svelte/Node

если вы пишите часть кода фронта на svelte или react
и хотите использовать большую часть кода для формирования фронта и серверной части на Flask
то при разработке какого-то модуля или части фронта на react svelte node... вы делаете build приложения и потом через flask подгружаете ваш build файл размещая JS и CSS в static
тут главное что при создание доп кода React или Svelte или др запускать через getElementby.ID
а во flask когда делаете разметку страниц сделать div с id
итого вы сможете встроить модуль кода в проект Flask

таким образом ваш проект работает в основном через Flask и какой-то модуль обрабатывается через билд реакта или svelte и тд

спасибо за вашу обратную связь!
+
также вы можете сверяться с исходником - тут все данные которые запускались без ошибок:

Исходный код структуры в самом конце статьи: вы можете взять тут