基于django的视频点播网站开发-step9-后台视频管理功能

约定不等于承诺〃 2022-02-13 00:37 258阅读 0赞

从本讲开始，我们开始视频管理功能的开发，视频管理包括视频上传、视频列表、视频编辑、视频删除。另外还有视频分类的功能，会一同讲解。这一讲非常重要，因为你将学习到一些之前没有学过的技术，比如大文件上传技术。

### 视频上传 ###

我们先来实现视频的上传，视频的上传采用的是分块上传的策略，并用了分块上传类库：django\_chunked\_upload，使用该类库，再配合前端上传js库（jquery.fileupload.js），即可完美的实现文件的分块上传功能。

照例先编写添加视频的路由

添加视频，当然需要上传视频的页面，我们的页面是video\_add路由来显示，通过urls .py中指定

path('video_add/', views.AddVideoView.as_view(), name='video_add'),

AddViewView仅仅用来显示上传页面，它的代码很简单

class AddVideoView(SuperUserRequiredMixin, TemplateView):
        template_name = 'myadmin/video_add.html'

只是继承了TemplateView来显示myadmin/video\_add.html

myadmin/video\_add.html中实现了上传视频的全过程，视频的上传采用的是分块上传的策略，前端使用的是js上传库（jquery.fileupload.js），后端使用的是django\_chunked\_upload，上传的逻辑是这样的：前端先选择一个文件，通过jquery.fileupload.js中的$.fileupload()方法来上传文件，后端接收到后分批返回已上传块的进度，前端根据进度来更新界面。由于上传前需要做一些校验的操作，代码较复杂，所以我们把上传的代码封装到了一个js中:static/js/myadmin/video\_upload.js，主要的代码如下：

$("#chunked_upload").fileupload({
      url: api_chunked_uplad,
      dataType: "json",
      maxChunkSize: 100000, // Chunks of 100 kB
      formData: form_data,
      add: function(e, data) { // Called before starting upload
        var fileSize = data.originalFiles[0]['size'];
        var type = data.originalFiles[0]['type']; 
    
        if(fileSize > 100000000){
            alert('文件太大了，请上传100M以内的文件');
            return;
        }
    
        if(!type.startsWith("video/")){
            alert('视频格式不正确');
            return;
        }
     
        form_data.splice(1);
        calculate_md5(data.files[0], 100000);  // Again, chunks of 100 kB
        data.submit();
    
        $('#progress_label').on('click', false);
        $('#progress_layout').show()
    
      },
      chunkdone: function (e, data) { // Called after uploading each chunk
        if (form_data.length < 2) {
          form_data.push(
            {"name": "upload_id", "value": data.result.upload_id}
          );
        }
        var progress = parseInt(data.loaded / data.total * 100.0, 10);
        console.log(progress);
        if(progress > lastprogress){
            lastprogress = progress
            $('#upload_progress').progress({
                percent: progress
            });
        }
      },
      done: function (e, data) { // Called when the file has completely uploaded
        $.ajax({
          type: "POST",
          url: api_chunked_upload_complete,
          data: {
            csrfmiddlewaretoken: csrf,
            upload_id: data.result.upload_id,
            md5: md5
          },
          dataType: "json",
          success: function(data) {
            console.log(data)
            $('#upload_label').text('上传成功');
            $('#upload_progress').progress({
                percent: 100
            });
            $('#next_layout').show();
            $('#next').click(function(){
                window.location = '/myadmin/video_publish/' + data.video_id
            });
          }
        });
      },
    });

在$.fileupload()方法中，有一个回调方法chunkdone()，该方法是用来更新进度的，告诉前端已经上传了多少字节。另外还有一个回调方法done()，该方法表示上传完毕，前端可在里面做一些额外的事情。

上传完毕后，调用了一个接口api\_chunked\_upload\_complete，来给后端发送一个回执：我已上传完毕。

api\_chunked\_upload和api\_chunked\_upload\_complete的路由是

path('chunked_upload/',  views.MyChunkedUploadView.as_view(), name='api_chunked_upload'),
    path('chunked_upload_complete/', views.MyChunkedUploadCompleteView.as_view(),name='api_chunked_upload_complete'),

在MyChunkedUploadCompleteView中，我们在利用Video模型创建了这条视频

class MyChunkedUploadCompleteView(ChunkedUploadCompleteView):
        model = MyChunkedUpload
     
        def get_response_data(self, chunked_upload, request):
            video = Video.objects.create(file=chunked_upload.file)
            return {'code': 0, 'video_id': video.id, 'msg': 'success'}

**上传完毕效果如下**  
![1688a193937d99d4_w_1000_h_577_f_png_s_89157][]

然后用户点击下一步，进入video\_publish页面，开始发布前的资料填写

video\_publish的路由是

path('video_publish/<int:pk>/', views.VideoPublishView.as_view(), name='video_publish'),

video\_publish的视图类是VideoPublishView，它的代码如下

class VideoPublishView(SuperUserRequiredMixin, generic.UpdateView):
        model = Video
        form_class = VideoPublishForm
        template_name = 'myadmin/video_publish.html'
    
        def get_context_data(self, **kwargs):
            context = super(VideoPublishView, self).get_context_data(**kwargs)
            clf_list = Classification.objects.all().values()
            clf_data = {'clf_list':clf_list}
            context.update(clf_data)
            return context
    
        def get_success_url(self):
            return reverse('myadmin:video_publish_success')

对应的页面是myadmin/video\_publish.html

就是下面这个页面

![1688a204011b42f4_w_1000_h_727_f_png_s_128275][]

要填写的视频资料有视频标题、描述、分类、封面，

其中分类是通过get\_context\_data()带过来的，

填写后，点击**发布**，django将通过UpdateView自动为你更新视频信息。并通过get\_success\_url跳转到成功页面myadmin:video\_publish\_success，它的路由是

path('video_publish_success/', views.VideoPublishSuccessView.as_view(), name='video_publish_success'),

对应VideoPublishSuccessView是

class VideoPublishSuccessView(generic.TemplateView):
        template_name = 'myadmin/video_publish_success.html'

如下

![1688a25848cddfc0_w_1302_h_774_f_png_s_74976][]

我们点击**视频列表**即可查看视频

### 视频列表 ###

视频列表的路由是

path('video_list/', views.VideoListView.as_view(), name='video_list'),

对应的视图类是VideoListView

class VideoListView(AdminUserRequiredMixin, generic.ListView):
        model = Video
        template_name = 'myadmin/video_list.html'
        context_object_name = 'video_list'
        paginate_by = 10
        q = ''
    
        def get_context_data(self, *, object_list=None, **kwargs):
            context = super(VideoListView, self).get_context_data(**kwargs)
            paginator = context.get('paginator')
            page = context.get('page_obj')
            page_list = get_page_list(paginator, page)
            context['page_list'] = page_list
            context['q'] = self.q
            return context
    
        def get_queryset(self):
            self.q = self.request.GET.get("q", "")
            return Video.objects.get_search_list(self.q)

这里继承了ListView来显示视频列表，并通过get\_queryset实现了搜索功能，通过get\_context\_data()实现了分页功能。

最后展示效果如下

![1688a2a1bc2cfb36_w_1000_h_519_f_png_s_187524][]

你可能会发现，页面中还有编辑和删除的功能。编辑呢，是对单个视频对资料进行更新，删除即删除本条视频和视频文件。

### 视频编辑 ###

我们先实现编辑功能，路由是

path('video_edit/<int:pk>/', views.VideoEditView.as_view(), name='video_edit'),

对应对视图类是VideoEditView，这个视图类是需要传递主键的。

class VideoEditView(SuperUserRequiredMixin, generic.UpdateView):
        model = Video
        form_class = VideoEditForm
        template_name = 'myadmin/video_edit.html'
    
        def get_context_data(self, **kwargs):
            context = super(VideoEditView, self).get_context_data(**kwargs)
            clf_list = Classification.objects.all().values()
            clf_data = {'clf_list':clf_list}
            context.update(clf_data)
            return context
    
        def get_success_url(self):
            messages.success(self.request, "保存成功")
            return reverse('myadmin:video_edit', kwargs={'pk': self.kwargs['pk']})

其实编辑页面和发布页面很相似，都是继承UpdateView视图类，并在get\_context\_data()里面传递分类信息。最终成功后通过`messages.success(self.request, "保存成功")`消息告之前端。

### 视频删除 ###

删除功能就更加简单了。路由是

path('video_delete/', views.video_delete, name='video_delete'),

这里通过video\_delete函数来实现，前端通过ajax（ajax代码位于static/js/myadmin/video\_list.js）调用这个函数。

@ajax_required
    @require_http_methods(["POST"])
    def video_delete(request): 
        video_id = request.POST['video_id']
        instance = Video.objects.get(id=video_id)
        instance.delete()
        return JsonResponse({"code": 0, "msg": "success"})

获取该视频，然后instance.delete()删除之。

### 视频分类 ###

分类管理功能包括分类的增删改查。

增删改查的路由是

path('classification_add/', views.ClassificationAddView.as_view(), name='classification_add'),
    path('classification_list/', views.ClassificationListView.as_view(), name='classification_list'),
    path('classification_edit/<int:pk>/', views.ClassificationEditView.as_view(), name='classification_edit'),
    path('classification_delete/', views.classification_delete, name='classification_delete'),

先来看分类添加的功能

分类添加是通过ClassificationAddView视图类来实现的，代码如下

class ClassificationAddView(SuperUserRequiredMixin, generic.View):
        def get(self, request):
            form = ClassificationAddForm()
            return render(self.request, 'myadmin/classification_add.html', {'form': form})
    
        def post(self, request):
            form = ClassificationAddForm(data=request.POST)
            if form.is_valid():
                form.save(commit=True)
                return render(self.request, 'myadmin/classification_add_success.html')
            return render(self.request, 'myadmin/classification_add.html', {'form': form})

此处是通过get和post一同来实现的，get()负责展示界面，post()负责逻辑判断。在post()中，直接调用form.save来保存记录，然后跳转到成功页myadmin/classification\_add\_success.html。

**分类添加**  
![1688fa85e30359ac_w_1000_h_487_f_png_s_69974][]

**添加成功**  
![1688fa780ff29978_w_1000_h_450_f_png_s_62746][]

然后点击视频列表，即可查看列表，视频列表的视图类是ClassificationListView，即

class ClassificationListView(AdminUserRequiredMixin, generic.ListView):
        model = Classification
        template_name = 'myadmin/classification_list.html'
        context_object_name = 'classification_list'
        paginate_by = 10
        q = ''
    
        def get_context_data(self, *, object_list=None, **kwargs):
            context = super(ClassificationListView, self).get_context_data(**kwargs)
            paginator = context.get('paginator')
            page = context.get('page_obj')
            page_list = get_page_list(paginator, page)
            context['page_list'] = page_list
            context['q'] = self.q
            return context
    
        def get_queryset(self):
            self.q = self.request.GET.get("q", "")
            return Classification.objects.filter(title__contains=self.q)

继承ListView来显示列表，通过get\_queryset()来实现搜索功能，通过get\_context\_data()来实现分页功能，通过template\_name来指定模板

效果如下

![1688fafb9fa33fe9_w_1000_h_487_f_png_s_99961][]

接着来实现编辑和删除功能。

编辑对应的视图类是ClassificationEditView，它的实现超级简单，继承UpdateView即可。

class ClassificationEditView(SuperUserRequiredMixin, generic.UpdateView):
        model = Classification
        form_class = ClassificationEditForm
        template_name = 'myadmin/classification_edit.html'
    
        def get_success_url(self):
            messages.success(self.request, "保存成功")
            return reverse('myadmin:classification_edit', kwargs={'pk': self.kwargs['pk']})

编辑页面和添加页面很相似，这里就不贴图了。

最后是删除功能，是通过ajax来实现的，ajax代码位于static/js/myadmin/classification\_list.js，在ajax中，通过调用删除接口classification\_delete来实现删除功能，

接口classification\_delete的代码：

@ajax_required
    @require_http_methods(["POST"])
    def classification_delete(request):
        classification_id = request.POST['classification_id']
        instance = Classification.objects.get(id=classification_id)
        instance.delete()
        return JsonResponse({"code": 0, "msg": "success"})

功能略多，同学们可根据自身情况，根据[后台demo地址][demo]的演示来一步步学习。

[1688a193937d99d4_w_1000_h_577_f_png_s_89157]: https://user-gold-cdn.xitu.io/2019/1/26/1688a193937d99d4?w=1000&h=577&f=png&s=89157
[1688a204011b42f4_w_1000_h_727_f_png_s_128275]: https://user-gold-cdn.xitu.io/2019/1/26/1688a204011b42f4?w=1000&h=727&f=png&s=128275
[1688a25848cddfc0_w_1302_h_774_f_png_s_74976]: https://user-gold-cdn.xitu.io/2019/1/26/1688a25848cddfc0?w=1302&h=774&f=png&s=74976
[1688a2a1bc2cfb36_w_1000_h_519_f_png_s_187524]: https://user-gold-cdn.xitu.io/2019/1/26/1688a2a1bc2cfb36?w=1000&h=519&f=png&s=187524
[1688fa85e30359ac_w_1000_h_487_f_png_s_69974]: https://user-gold-cdn.xitu.io/2019/1/27/1688fa85e30359ac?w=1000&h=487&f=png&s=69974
[1688fa780ff29978_w_1000_h_450_f_png_s_62746]: https://user-gold-cdn.xitu.io/2019/1/27/1688fa780ff29978?w=1000&h=450&f=png&s=62746
[1688fafb9fa33fe9_w_1000_h_487_f_png_s_99961]: https://user-gold-cdn.xitu.io/2019/1/27/1688fafb9fa33fe9?w=1000&h=487&f=png&s=99961
[demo]: https://v.mypython.me/myadmin