Flask App：函数运行时更新进度条

1个回答

Wu wuwu

2025-07-07 16:45

Python
Python

使用 Flask 框架开发的 Web 应用程序可以为用户提供丰富的交互体验。在开发过程中，我们经常会遇到需要长时间运行的函数，例如处理大量数据或执行复杂的计算任务。为了提高用户体验，我们可以使用进度条来显示函数的运行进度，让用户了解任务的完成情况。

Flask App：函数运行时更新进度条

在本文中，我们将介绍如何在 Flask 应用程序中实现函数运行时更新进度条的功能。我们将通过一个简单的案例来演示这个功能。

案例：

假设我们正在开发一个图片处理应用程序，用户可以上传图片并选择一种滤镜效果。当用户点击处理按钮后，我们的应用程序将异步处理图片并在处理完成后返回给用户。为了让用户了解图片处理的进度，我们将在界面上显示一个进度条，实时更新处理的进度。

首先，我们需要安装 Flask 和其他必要的依赖库。可以使用以下命令来安装：

pip install flask

pip install tqdm

接下来，我们创建一个名为 "app.py" 的文件，并导入必要的模块：

Python
from flask import Flask, render_template
from tqdm import tqdm
import time
app = Flask(__name__)

接下来，我们定义一个异步函数来模拟图片处理的过程。在这个函数中，我们使用 tqdm 库来显示进度条，并使用 time.sleep() 函数来模拟图片处理的耗时操作。

Python
@app.route('/process_image')
def process_image():
    def process():
        for i in tqdm(range(100)):
            time.sleep(0.1)
    return app.response_class(process(), mimetype='text/html')

在上面的代码中，我们使用了 Flask 的路由装饰器 @app.route() 来定义一个处理图片的路由。当用户访问 "/process_image" 路由时，将执行 process_image() 函数。

在 process_image() 函数中，我们定义了一个名为 process() 的嵌套函数。这个函数使用 tqdm(range(100)) 来创建一个进度条，并在每次循环中使用 time.sleep(0.1) 模拟耗时操作。

最后，我们使用 app.response_class 函数将 process() 函数返回的内容转换为 HTML 格式，并设置 mimetype 为 'text/html'。

接下来，我们需要创建一个 HTML 模板来显示进度条。在项目的根目录下，创建一个名为 "templates" 的文件夹，并在该文件夹中创建一个名为 "progress.html" 的文件。在 "progress.html" 文件中，添加以下内容：

html
<!DOCTYPE html>
<html>
<head>
    <title>Image Processing Progress</title>
    <style>
        #progress-bar {
            width: 300px;
            height: 20px;
            border: 1px solid #ccc;
        }
        #progress {
            width: 0%;
            height: 100%;
            background-color: #00aaff;
        }
    </style>
</head>
<body>
    <h1>Image Processing Progress</h1>
    <div id="progress-bar">
        <div id="progress"></div>
    </div>
    <script src="JS">https://code.jquery.com/jquery-3.3.1.min.JS</a>"></script>
    <script>
        $(document).ready(function() {
            setInterval(function() {
                $.get('/progress', function(data) {
                    $('#progress').CSS('width', data + '%');
                });
            }, 100);
        });
    </script>
</body>
</html>

在上面的代码中，我们定义了一个带有 ID 为 "progress-bar" 的进度条容器，并在其中创建一个 ID 为 "progress" 的进度条。通过使用 jQuery 的 $.get() 函数，我们可以定期向服务器发送 "/progress" 路由的请求，并将返回的进度数据更新到进度条中。

最后，我们需要定义一个用于返回进度数据的路由。在 "app.py" 文件中添加以下代码：

Python
@app.route('/progress')
def progress():
    return str(tqdm.get_progress())

在上面的代码中，我们使用 tqdm.get_progress() 函数来获取当前的进度，并将其作为字符串返回给客户端。

最后，我们在 "app.py" 文件中添加以下代码来运行应用程序：

Python
if __name__ == '__mAIn__':
    app.run(debug=True)

现在，我们可以通过运行 "app.py" 文件来启动应用程序，并在浏览器中访问 "http://localhost:5000/process_image" 地址。你将看到一个进度条，它会实时更新，直到达到 100%。

：

本文介绍了如何在 Flask 应用程序中实现函数运行时更新进度条的功能。通过使用 tqdm 库和异步函数，我们可以在长时间运行的任务中显示进度条，提高用户体验。在开发 Web 应用程序时，这个功能对于处理大量数据或执行复杂的计算任务非常有用。希望本文对你有所帮助，祝你在 Flask 应用程序开发中取得成功！

举报有用（4）分享收藏

Flask App：函数运行时更新进度条

1个回答

Wu wuwu

热门话题

相关问题