Django 进度条|极客教程

Django 进度条

简介

Django 是一个使用 Python 编写的开源 Web 应用框架，它可以帮助开发人员快速构建高质量的网站和 Web 应用程序。在一些长时间执行的任务中，为了提升用户体验，我们可能需要使用进度条来显示任务的执行进度。本文将详细介绍在 Django 中实现进度条的方法。

原理

要实现进度条，我们首先需要知道任务的总体执行进度，并能够根据任务的当前进度来更新进度条。在 Django 中，可以使用异步任务和前端 WebSocket 技术来实现这一功能。

具体来说，我们可以使用 Django 的异步任务队列（如 Celery）来执行耗时的任务。在任务的执行过程中，我们可以通过发送消息给前端来更新进度条的进度，而不需要刷新整个页面。在前端，我们可以使用 WebSocket 来监听消息，并根据收到的消息来更新进度条的显示。

实现步骤

步骤1：设置环境

首先，我们需要确保 Django 环境已经正确安装并且项目已经创建。在项目根目录下打开终端，执行以下命令安装 Celery 和 Django Channels：

pip install celery channels

步骤2：创建任务

在 Django 项目中创建一个任务，用来模拟一个耗时的操作。例如，我们创建一个任务来处理一些数据，并将总体执行进度保存在 Redis 中：

from celery import shared_task
from django.core.cache import cache

@shared_task
def long_running_task():
    # 模拟一个耗时的操作
    total = 100
    current = 0

    for i in range(total):
        # 处理数据...
        current += 1
        # 更新进度
        cache.set('progress', current)

步骤3：创建 WebSocket 通道

在 Django 项目中创建一个 WebSocket 通道，用来实现与前端的实时通信。以下是一个简单的示例：

from channels.generic.websocket import AsyncWebsocketConsumer

class ProgressConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        await self.accept()

        # 监听进度更新
        while True:
            progress = cache.get('progress')
            await self.send(text_data=progress)

            # 每1秒更新一次
            await asyncio.sleep(1)

步骤4：配置路由

在 Django 项目的路由配置中，将 WebSocket 通道与 URL 对应起来。例如，在 urls.py 中添加以下代码：

from django.urls import path
from .consumers import ProgressConsumer

websocket_urlpatterns = [
    path('ws/progress/', ProgressConsumer.as_asgi()),
]

步骤5：启动异步任务和 WebSocket 服务

在终端中执行以下命令，启动异步任务和 WebSocket 服务：

celery -A myproject worker --loglevel=info
daphne myproject.asgi:application --port 8001

步骤6：前端页面

在前端页面中使用 JavaScript 和 WebSocket 技术来实现进度条的更新。以下是一个简单的示例：

var progressSocket = new WebSocket('ws://localhost:8001/ws/progress/');

progressSocket.onmessage = function(e) {
    var progress = parseInt(e.data);
    updateProgressBar(progress);
};

function updateProgressBar(progress) {
    var progressBar = document.getElementById('progress-bar');
    progressBar.style.width = progress + '%';
}