Django 的后端和前端实现整个页面动态进度条

这个示例代码将基于Django 3和Bootstrap 4实现在前端页面中动态显示进度条。

首先，创建一个新的Django项目并创建一个名为“ simpleProgressBar”的新应用程序。

在settings.py中，将'applications'应用程序添加到INSTALLED_APPS列表中，以便Django可以找到该应用程序。

在simpleProgressBar应用程序的根目录中，创建一个名为'views.py'的新文件，该文件将包含我们的视图代码。

在视图中，我们将定义一个新的函数来处理GET请求，该请求将返回一个指定的HTML模板，该模板将显示在浏览器中。

#simpleProgressBar/views.py
from django.shortcuts import render

def progress_bar(request):
    return render(request, 'progress_bar.html')

接下来，我们将在simpleProgressBar应用程序的根目录中创建一个名为“urls.py”的新文件。该文件将包含我们的URL映射代码。

#simpleProgressBar/urls.py
from django.urls import path
from .views import progress_bar

urlpatterns = [
    path('', progress_bar, name='progress_bar'),
]

我们需要在Django项目的根目录中播放templates目录并创建一个名为'progress_bar.html'的新文件。该文件将包含我们的HTML代码。

{% extends 'base.html' %}

{% block content %}
    

        

            

                
Upload your File
                

                  

                
                

                

                    {% csrf_token %}
                    

                      
                      Choose file
                    
                    


                    Upload
                
            
        
    
{% endblock %}

{% block scripts %}
    
    
{% endblock %}

在这个HTML模板中，我们使用了Bootstrap 4，并创建了一个上传文件的表单，其中包括一个动态进度条。当表单被提交时，它将通过Ajax发送请求，其中包含文件信息并显示上传进度。

最后，我们需要更新Django项目的urls.py文件以包含我们的应用程序路由，如下所示：

#app/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('simpleProgressBar.urls')),
]

现在我们可以在浏览器中访问应用程序，并上传文件。当文件上传时，进度条将在页面上显示，直到上传完成。