также, если вы пишите фронт на чистой ноде или например используете 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 и тд
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 и тд
fetch— это метод JavaScript для выполнения HTTP-запросов, аPydantic— это библиотека Python, используемая для валидации данных и управления настройками с помощью моделей данных на основе аннотаций типов Python. Их использование связано, но они работают на разных сторонах приложения:fetchна клиентской стороне (в браузере) иPydanticна серверной стороне (в вашем Flask-приложении).в целом реализация будет без pydentic.
вот пример как можно реализовать отправку с фронта на бэк с помощью JS
в моем случае отправка данных form имеет документ в даном случае отправка будет выглядеть так:
используем ту же форму в коде файла editland.html:
добавляем JS скрипт в самый низ html файла:
таким образом, нам не нужно менять код на backend Flask приложения по обработке запроса, но мы должны будем вернуть JSON в данном примере
надеюсь это поможет вам)
Спасибо за фидбек!
flask часть 2 https://habr.com/ru/articles/784770/
flask часть 2 https://habr.com/ru/articles/784770/
flask часть 2 https://habr.com/ru/articles/784770/
flask часть 2 https://habr.com/ru/articles/784770/
quick start взял чтобы описать первую статью
дальше чтобы показать уже какие-то идеи и описать шаг за шагом что можно сделать как проект
Fast Api подходит больше для уже дальнейшего развертывания фронта отдельно
и back на fast api
Flask больше дает возможности совместить фронт и бэк сразу
для тех кто только начинает думаю что фляск поможет быстрее развернуть сайт
согласен с вами
в первой статье хотел описать как начать работать
и завести фреймворк чтобы он начал работать
дальше уже в планах описать дополнительные идеи как и что настраивать и описать
спасибо за ваш комментарий
учту дополнительную структуру шаг за шагом для сл статьи
для начинающих всегда Hello World для знакомства как установить
дальше уже идея описать как и что можно создать и описать доп решения и идеи