Flask

2024-05-21 02:32| 来源: 网络整理| 查看: 265

Flask-python-前端实时显示后端处理进度

Flask 是一个轻量级的 Python Web 开发框架，它基于 Werkzeug WSGI 工具箱和 Jinja2 模板引擎。它被广泛应用于构建 Web 应用程序，并且非常适合构建小型项目或原型开发。在使用 Flask 构建的应用程序中，我们有时需要在前端页面实时地显示后端处理的进度。本文将介绍如何使用 Flask 和一些相关的技术实现这个功能。

为什么需要实时显示后端处理进度？

在一些特定的场景中，后端处理任务可能会非常耗时，这时用户可能需要了解任务的进展情况。比如，一个图片处理网站，用户上传一张大图片后，后端需要将图片进行压缩、裁剪、添加水印等处理，这个过程可能需要几分钟甚至更长的时间。如果用户没有任何反馈，他们可能会认为任务出错或者卡住了。因此，在这种情况下，我们需要实时地将后端的处理进度反馈给用户。

前端技术选型

要实现前端实时显示后端处理进度，我们需要选择一个适合的前端技术。由于实时显示进度属于实时通信的一种，我们可以选择使用 WebSocket 技术。WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它可以在客户端和服务器之间建立一个持久连接，以便双方可以随时发送数据。WebSocket 与传统的 HTTP 请求-响应模式不同，它允许服务器主动推送数据给客户端，从而实现实时通信。在本文中，我们将使用 JavaScript 的 WebSocket 对象来实现前端与后端的实时通信。

后端代码实现

首先，我们需要创建一个基于 Flask 的后端服务。我们可以使用 Flask 提供的 flask 模块来创建一个应用程序，并使用装饰器 @app.route 来定义路由。在这个例子中，我们将创建一个 /progress 路由，用于返回后端的处理进度。

from flask import Flask, jsonify from flask_cors import CORS import time app = Flask(__name__) CORS(app) # 解决跨域问题 @app.route('/progress') def get_progress(): # 模拟后端处理任务，每秒增加 10% for i in range(11): time.sleep(1) progress = i * 10 # 使用 WebSocket 推送进度给前端 # ... return jsonify(progress=100)

在上面的代码中，我们使用 time.sleep(1) 模拟后端的处理任务，每秒增加 10% 的进度。在实际应用中，你可以根据实际需求修改这部分代码。

前端代码实现 HTML 和 JavaScript

在前端页面中，我们需要使用 JavaScript 来实现与后端的实时通信，并将进度显示在页面上。首先，我们需要在 HTML 中引入 WebSocket 对象，然后创建一个 WebSocket 连接，并通过该连接接收后端推送的数据。

实时显示后端处理进度实时显示后端处理进度 // 创建 WebSocket 连接 const socket = new WebSocket('ws://localhost:5000/ws'); // 监听 WebSocket 连接打开事件 socket.onopen = function(event) { console.log('WebSocket connection opened'); }; // 监听 WebSocket 连接关闭事件 socket.onclose = function(event) { console.log('WebSocket connection closed'); }; // 监听 WebSocket 接收到消息事件 socket.onmessage = function(event) { const data = JSON.parse(event.data); const progress = data.progress; document.getElementById('progress').innerText = `处理进度：${progress}%`; };

在上面的代码中，我们创建了一个 WebSocket 连接 `const socket =

【本文地址】

公司简介

联系我们