Flask显示执行进度条|极客教程

Flask显示执行进度条

在Web开发中，有时我们需要对长时间运行的任务添加进度条以提供用户反馈。Flask作为一个轻量级的Python Web框架，提供了简单的方式来显示执行进度条。本文将详细讲解如何在Flask应用中显示执行进度条。

准备工作

在开始之前，确保已经安装了Flask和必要的依赖。可以使用pip命令来安装Flask：

pip install Flask

创建Flask应用

首先，创建一个新的Flask应用。建议使用一个单独的蓝图来处理进度条更新的逻辑。创建一个名为progress.py的文件，内容如下：

from flask import Blueprint, request, jsonify

progress_bp = Blueprint('progress', __name__)

@progress_bp.route('/update_progress', methods=['POST'])
def update_progress():
    # 获取进度参数
    progress = request.json.get('progress')

    # 更新进度条
    # 这里可以根据实际需求执行相应的操作

    return jsonify({'success': True})

在主应用文件中导入这个蓝图：

from flask import Flask
from progress import progress_bp

app = Flask(__name__)
app.register_blueprint(progress_bp)

if __name__ == '__main__':
    app.run()

编写前端代码

在前端页面中，使用Ajax来发送POST请求更新进度条。假设有一个按钮点击事件，点击按钮后开始执行长时间任务，并不断发送POST请求更新进度条。前端代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Flask Progress Bar</title>
</head>
<body>
    <div id="progress-bar" style="width: 0%; height: 30px; background-color: #4CAF50;"></div>
    <button onclick="startTask()">Start Task</button>

    <script>
        function startTask() {
            var intervalId = setInterval(function() {
                // 模拟任务执行
                updateProgress();

                if (progress >= 100) {
                    clearInterval(intervalId);
                    alert('Task completed!');
                }
            }, 1000);
        }

        function updateProgress() {
            // 模拟更新进度条
            var progress = parseInt(document.getElementById('progress-bar').style.width);
            progress += 10;
            document.getElementById('progress-bar').style.width = progress + '%';

            // 发送POST请求更新进度条
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://127.0.0.1:5000/update_progress', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.send(JSON.stringify({ progress: progress }));
        }
    </script>
</body>
</html>