Задать вопрос
Natan4ik
@Natan4ik
javascript

Как получить данные о процессе выполнения от flask для Progress Bar?

Всем привет.
Перековырял весь интернет, но либо я не правильно формулирую вопрос, либо я просто слишком глупый что пропустил его.

В общем суть вопроса такова. Есть flask приложение, мне надо на страницах сделать индикацию выполнения выполнения запросов. Как ее сверстать и заставить шевелиться, моргать, светиться и прочее через js у меня вопроса нет.
Но я ни как не могу понять, как мне сделать такую логику:
1) Пользователь заполняет данные формы
2) Через JS улетает post запрос на бэкенд
3) Бэкенд принимает данные и начинает выполнять функцию my_func1, где уже начинает обрабатывать полученные с веба данные, ходить по разным базам, собирать новые данные, строить из этого всего кучу полезной информации, которую потом выведет на страницу.
4) Пока бэк занят выполнением функции my_func1, на странице должен появиться прогресс бар, который будет отображать ход выполнения функции.

Так вот сейчас у меня это реализовано следующим образом:
После нажатия пользователем на кнопку "Передать данные", вся страница затемняется и я просто показываю гифку с крутящейся полоской, пока не придет ответ от бэка.
Но этот процесс может быть достаточно длительным и иногда пользователь думает что что-то сломалось.
А если показывать нормальный прогресс бар заполняющийся по ходу выполнения функции, будет лучшее.

Но я ни как не могу понять каким образом мне получить от бэка процесс выполнения фукнции my_func1...

Надеюсь нормально и доходчиво объяснил. Если что-то не понятно - спрашивайте, уточню.
  • Вопрос задан
  • 1054 просмотра
Комментировать
Подписаться 2 Средний Комментировать
Решения вопроса 1
sergey-gornostaev
@sergey-gornostaev Куратор тега Python
Седой и строгий
Web-приложения так не работают. Обработчик должен максимально быстро возвращать ответ. Для выполнения длительных операций надо запускать фоновые процессы с помощью чего-нибудь типа Celery. Прогресс их выполнение можно было бы отдавать через websocket, но синхронный Flask для этого не подходит. Придётся обойтись поллингом через AJAX.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
NeiroNx
@NeiroNx
Программист
Нужно создать дочерний процесс с идентификатором и вернуть идентификатор, далее делать периодические запросы с указанием идентификатора и получать по нему состояние того процесса.
Ответ написан
Комментировать
Комментировать
Vova316
@Vova316
Можно сделать так:
1. В начале страницы подключить библиотеки:
spoiler

<script src="../static/js/bootstrap.js"></script>
  <script src="../static/js/bootstrap.bundle.js"></script>
  <script src="../static/js/bootstrap.bundle.min.js"></script>
  <script src="../static/jquery/jquery-3.6.0.js"></script>

2. В основной части страницы вставить прогресс-бар:
spoiler

<div class="progress" style="height: 23px;">
            <div id="r3c1" class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 0%">0</div>
          </div>

3. В конце станицы вставить скрипт, который будет каждые 0,5 сек забирать значение для прогресс-бара:
spoiler

<script>
        setInterval(
            function()
            {
                $.getJSON('/get_form',{},function(data){
                    $("#r3c1").text(data.result[2][0]);
                    $("#r3c1").css({'width':data.result[2][0]+'%'});
                });
            },
            500);
    </script>


4. Во Flask добавить декоратор:
spoiler

@app.route('/get_form')
    def get_form():
    pass
    return jsonify(result=data_form)


5. И в некоторой функции пересчитывать значение для прогресс-бара:
spoiler

def my_func(pause):
    percent = 100 / pause
     while pause != 0:
        time.sleep(1)
        pause -= 1
        data_form[2][0] = int( 100 - (pause * percent))
        return

Обратите внимание: прогресс-бар требует два параметра - надпись цифрами на шкале и саму шкалу.
Функция в пункте 5 - бесполезная и указана тупо для примера.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Работы по сайту для оптимизации
16 апр. 2024, в 08:46
500 руб./за проект
Разработка бота в Telegram (POIZON)
16 апр. 2024, в 06:30
30000 руб./за проект
Исправить ошибку в пагинации 1с-битрикс
16 апр. 2024, в 05:27
500 руб./за проект
Ещё заказы