Как отобразить сообщение о загрузке при выполнении фоновой операции в flask?

Question

У меня следующая ситуация:

index. html file:

 <div class="col-xl-3 col-md-6">
   <div class="card bg-primary text-white mb-4">
     <div class="card-body">Prima alimentazione</div>
      <div class="card-footer d-flex align-items-center justify-content-between">
       <a id= 'firstAlimentazione' class="small text-white stretched-link">View Details</a>
        <div class="small text-white"><i class="fas fa-angle-right"></i></div>
         </div>
       </div>
    </div>

, к которому подключена следующая функция ajax

$(function() {
          $('a#firstAlimentazione').bind('click', function() {
            $.getJSON('/firstScript',
                function(data) {

            });
            return false;
          });
});

который вызывает следующий python код

# background process happening without any refreshing
@app.route('/firstScript')
def firstScript():
    storage = restore_value()
    hostname = storage.get(1)
    port = storage.get(2)
    db_name = storage.get(3)
    name_tab = storage.get(4)
    directory_to_load = storage.get(5)
    directory_log = storage.get(6)
    print(os.system("python3 FirstSupply/script.py " + hostname+" "+port+" "+db_name+" "+name_tab+" "+directory_to_load+" " + directory_log))
    return "nothing"

, поскольку "python3 скрипт" может занять несколько минут до завершения sh, я хотел бы показать предупреждение, указывающее на загрузку операции и последующее прекращение.

Как я могу это сделать?

Answer 1

Вот подход, который я использовал в моем Flask проекте.

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

{% include "loading-modal.html" %}

Содержание может быть любым, что вы хотите. Это может быть просто сообщение / предупреждение или какая-то анимация. Я включил ссылки внизу простых анимаций.

Стиль этого загрузчика будет включать:

display: none;

Таким образом, загрузчик не отображается для пользователя. Затем при запуске функции ajax я сделаю загрузчик видимым примерно следующим образом:

var loader = document.getElementById('loading-bg');
loader.style.display = 'block';

Это сделает загрузчик видимым до тех пор, пока я снова не спрячу его или перенаправлю пользователя на любую страницу. они идут к следующему. Я не буду прятать модал снова, пока все, что происходит в фоновом режиме, не вернет результат моей функции ajax.

Этот подход предполагает, что вам не нужно предоставлять какую-то индикацию прогресса. для пользователя, или что вы не можете, потому что вы не можете знать, сколько времени это займет. Это также предполагает, что ваш пользователь не может взаимодействовать с экраном во время работы этого скрипта, потому что я обычно ставлю прозрачность на содержание страницы, которая блокирует все содержимое.

Если вы хотите, чтобы ваш загрузчик включал некоторые Анимация, вот что я использовал раньше:

https://tobiasahlin.com/spinkit/ https://github.com/tobiasahlin/SpinKit

Надеюсь, это поможет.