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

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

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

视频上传

我们先来实现视频的上传,视频的上传采用的是分块上传的策略,并用了分块上传类库: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'}

上传完毕效果如下

然后用户点击下一步,进入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

就是下面这个页面

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

其中分类是通过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'

如下

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

视频列表

视频列表的路由是

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()实现了分页功能。

最后展示效果如下

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

视频编辑

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

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。

分类添加

添加成功

然后点击视频列表,即可查看列表,视频列表的视图类是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来指定模板

效果如下

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

编辑对应的视图类是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地址的演示来一步步学习。

目录
相关文章
|
3月前
|
搜索推荐 算法 前端开发
美食物管理与推荐系统Python+Django网站开发+协同过滤推荐算法应用【计算机课设项目推荐】
美食物管理与推荐系统Python+Django网站开发+协同过滤推荐算法应用【计算机课设项目推荐】
96 4
美食物管理与推荐系统Python+Django网站开发+协同过滤推荐算法应用【计算机课设项目推荐】
|
3月前
|
Python
百度搜索:蓝易云【Django自带的Admin后台中如何获取当前登录用户】
在上面的代码中,`@staff_member_required`装饰器确保只有管理员可以访问 `my_custom_view`视图,而 `@login_required`装饰器确保只有登录的用户可以访问该视图。然后,可以使用 `request.user.username`获取当前登录用户的用户名,并将其传递到模板中进行显示或其他操作。
33 3
|
4月前
|
算法 Java Python
Python【算法中心 01】Web框架Django入门(安装+项目创建+应用创建+服务启动)Python搭建算法中心后台实例分享
Python【算法中心 01】Web框架Django入门(安装+项目创建+应用创建+服务启动)Python搭建算法中心后台实例分享
47 0
|
4月前
|
编解码 缓存 安全
视频点播这边在执行 HLS标准加密 转码后的视频,在解密播放上有些技术问题视频点播这边在执行 HLS标准加密 转码后的视频,在解密播放上有些技术问题
视频点播这边在执行 HLS标准加密 转码后的视频,在解密播放上有些技术问题视频点播这边在执行 HLS标准加密 转码后的视频,在解密播放上有些技术问题
138 1
|
4月前
|
XML 应用服务中间件 nginx
关于nginx部署Django 后台样式丢失
关于nginx部署Django 后台样式丢失
56 0
|
5月前
|
前端开发 数据库 UED
为什么 Django 后台管理系统那么“丑”?
为什么 Django 后台管理系统那么“丑”?
|
9月前
|
SQL 前端开发 JavaScript
基于python的视频点播网站(python+django+vue开发的视频点播网站-视频管理系统)
平台采用B/S结构,后端采用主流的Python语言进行开发,前端采用主流的Vue.js进行开发。
180 0
|
SQL XML 前端开发
基于Django的电子商务网站开发(连载40)
顾翔老师开发的bugreport2script开源了,希望大家多提建议。文件在https://github.com/xianggu625/bug2testscript, 主文件是:zentao.py 。bugreport是禅道,script是python3+selenium 3,按照规则在禅道上书写的bugreport可由zentao.py程序生成py测试脚本。
89 0
|
安全 测试技术 Python
基于Django的电子商务网站开发(连载39)
顾翔老师开发的bugreport2script开源了,希望大家多提建议。文件在https://github.com/xianggu625/bug2testscript, 主文件是:zentao.py 。bugreport是禅道,script是python3+selenium 3,按照规则在禅道上书写的bugreport可由zentao.py程序生成py测试脚本。
50 0
基于Django的电子商务网站开发(连载39)
|
测试技术 Python
基于Django的电子商务网站开发(连载38)
顾翔老师开发的bugreport2script开源了,希望大家多提建议。文件在https://github.com/xianggu625/bug2testscript, 主文件是:zentao.py 。bugreport是禅道,script是python3+selenium 3,按照规则在禅道上书写的bugreport可由zentao.py程序生成py测试脚本。
57 0