javascript - Flask 静态进度屏幕

Question

选项 1:无 Javascript

我只想在任务运行时显示一个静态 模板，上面写着“请稍候...”。这是路由函数的简化版本:

@app.route('/import/towers/<case_id>/<filename>', methods=['GET', 'POST'])
def import_towers(case_id=None, filename=None):
    case_number = TollsCase.get_case_number(case_id)
    with open(os.path.join(app.config['UPLOAD_FOLDER'], filename), 'rb') as f:
        csv_f = csv.reader(f)
        headers = next(csv_f)
        if flask.request.method == 'POST':
            # show static progress screen here then process records in csv file
            for row in csv_f:
                # process record
            return 'success'

它不会让我在不返回的情况下使用 render_template，这会跳过我需要完成的处理。我需要它在进程运行时 显示进度屏幕，然后在完成时显示“成功”。我该怎么做？

---

选项 2:Javascript

如果无法做到这一点并且必须使用 Javascript ，那么这就是我到目前为止所尝试的方法:

在 html 之后，我在模板中有这个:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="application/javascript">
    $('form').on('submit', function() {
        $('#content').empty();
        $('#content').html('please wait...');
    })
</script>

替换内容以在提交时显示进度页面效果很好，但现在表单未提交以供服务器端处理。我尝试在表单属性中设置 data-ajax="false" 但这并没有解决问题。我还尝试在清除内容之前简单地使用 this.submit(); 但这会使其在服务器端处理时等待，从而破坏了进度/等待屏幕的意义。如果我使用 Javascript，我仍然需要为服务器端 处理提交的表单数据。

Answer 1

您可以流式传输响应以获得非常简单的进度报告。参见 the docs on streaming了解更多信息。此示例在等待 5 秒时输出完成百分比。而不是 sleep ，你会处理 csv 或任何你需要做的事情。

from flask import Flask, Response
import time

app = Flask(__name__)

@app.route('/')
def index():
    def generate():
        yield 'waiting 5 seconds\n'

        for i in range(1, 101):
            time.sleep(0.05)

            if i % 10 == 0:
                yield '{}%\n'.format(i)

        yield 'done\n'

    return Response(generate(), mimetype='text/plain')

app.run()

这会在 5 秒内输出以下内容:

waiting 5 seconds
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
done

这不是很复杂，但也只是纯文本。一个更强大的解决方案是使用 Celery 在后台运行任务并使用 ajax 请求轮询它的进度。