课程列表页
分页显示数据
rest_framework 里面封装了有分页功能的组件,直接可以拿来即用
在courses/views.py 中新建一个分页器类 (类的嵌套)
from rest_framework.pagination import PageNumberPagination class StandardPageNumberPagination(PageNumberPagination): page_size_query_param = 'page_size' max_page_size = 1 class CourseAPIView(ListAPIView): queryset = Course.objects.filter(status=0).order_by("-orders","-students") # 设置过滤的字段 filter_fields = ('course_category',) serializer_class = CourseSerializer filter_backends = [OrderingFilter] ordering_fields = ('id', 'students', 'price', 'course_category') pagination_class = StandardPageNumberPagination
客户端请求后端发送数据
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<template> <div class="course"> <Header/> <div class="main"> <!-- 筛选功能 --> <div class="top"> <ul class="condition condition1"> <li class="cate-condition">课程分类:</li> <li class="item" :class="query_params.course_category===0?'current':''" @click="query_params.course_category=0">全部 </li> <li :class="query_params.course_category===catetory.id?'current':''" @click="query_params.course_category=catetory.id" v-for="catetory in catetory_list" :data-key="catetory.id" class="item">{{catetory.name}} </li> </ul> <ul class="condition condition2"> <li class="cate-condition">筛 选:</li> <li class="item" :class="(query_params.ordering==='-id' || query_params.ordering==='id')?'current':''" @click="select_ordering('id')">默认 </li> <li class="item" :class="(query_params.ordering==='-students' || query_params.ordering==='students')?'current':''" @click="select_ordering('students')">人气 </li> <li class="item" :class="query_params.ordering==='price'?'current price':(query_params.ordering==='-price'?'current price2':'')" @click="select_ordering('price')">价格 </li> <li class="course-length">共21个课程</li> </ul> </div> <!-- 课程列表 ---> <div class="list"> <ul> <li class="course-item" v-for="course in course_list"> <router-link :to="{path: '/detail',query:{id:course.id}}" class="course-link"> <div class="course-cover"> <img :src="course.course_img" alt=""> </div> <div class="course-info"> <div class="course-title"> <h3>{{course.name}}</h3> <span>{{course.students}}人已加入学习</span> </div> <p class="teacher"> <span class="info">{{course.teacher.name}} {{course.teacher.title}}</span> <span class="lesson">共{{course.lessons}}课时/{{course.lessons===course.pub_lessons?'更新完成':('已更新'+course.pub_lessons+"课时")}}</span> </p> <ul class="lesson-list"> <li v-for="lesson,key in course.lesson_list"> <p class="lesson-title">0{{key+1}} | {{lesson.name}}</p> <span v-if="lesson.free_trail" class="free">免费</span> </li> </ul> <div class="buy-info"> <span class="discount">限时免费</span> <span class="present-price">¥0.00元</span> <span class="original-price">原价:{{course.price}}元</span> <button class="buy-now">立即购买</button> </div> </div> </router-link> </li> </ul> </div> <div class="pagination"> <el-pagination @current-change="handleCurrentChange" :current-page="query_params.current_page" background layout="prev, pager, next" :page-size="course_page_size" :total="course_count"> </el-pagination> </div> </div> <Footer/> </div> </template> <script> import Header from "./common/Header" import Footer from "./common/Footer" export default { name: "Course", data() { return { catetory_list: [], course_list: [], course_count: 0, course_page_size: 1, query_params: { course_category: 0, ordering: "-id", current_page: 1, } } }, watch: { // 每次点击不同课程时,要重新获取课程列表 "query_params.course_category": function () { this.get_course_list(); // 当切换分类的时候,重置页码 this.query_params.current_page = 1; }, "query_params.ordering": function () { // 当切换排序条件的时候,重置页码 // this.query_params.current_page = 1; this.get_course_list(); }, "query_params.current_page": function () { this.get_course_list(); } }, components: {Header, Footer}, created() { // 获取课程分类 this.$axios.get(this.$settings.Host + "/courses/cate/").then(response => { this.catetory_list = response.data }).catch(error => { console.log(error.response) }); // 获取课程信息 this.get_course_list() }, methods: { select_ordering(selector) { // 默认排序 if (this.query_params.ordering === ('-' + selector)) { this.query_params.ordering = selector; } else { this.query_params.ordering = '-' + selector; } }, get_course_list() { let query_params = { ordering: this.query_params.ordering, page: this.query_params.current_page, }; if (this.query_params.course_category !== 0) { query_params.course_category = this.query_params.course_category; } this.$axios.get(this.$settings.Host + "/courses/list/", { params: query_params }).then(response => { // 课程列表 this.course_list = response.data.results; // 课程总数量 this.course_count = response.data.count; }).catch(error => { console.log(error.response) }); }, handleCurrentChange(page) { // 页码发生改变 this.query_params.current_page = page; } } } </script> <style scoped> .main { width: 1100px; height: auto; margin: 0 auto; padding-top: 35px; } .main .top { margin-bottom: 35px; padding: 25px 30px 25px 20px; background: #fff; border-radius: 4px; box-shadow: 0 2px 4px 0 #f0f0f0; } .condition { border-bottom: 1px solid #333; border-bottom-color: rgba(51, 51, 51, .05); padding-bottom: 18px; margin-bottom: 17px; overflow: hidden; } .condition li { float: left; } .condition .cate-condition { color: #888; font-size: 16px; } .condition .item { padding: 6px 16px; line-height: 16px; margin-left: 14px; position: relative; transition: all .3s ease; border: 1px solid transparent; /* transparent 透明 */ cursor: pointer; color: #4a4a4a; } .condition1 .current { color: #ffc210; border: 1px solid #ffc210 !important; border-radius: 30px; } .condition2 .current { color: #ffc210; } .condition .price:before { content: ""; width: 0; border: 5px solid transparent; border-top-color: #d8d8d8; position: absolute; right: 0; bottom: 2.5px; } .condition .price2:before { content: ""; width: 0; border: 5px solid transparent; position: absolute; right: 0; bottom: 2.5px; border-top-color: #ffc210; } .condition .price2:after { content: ""; width: 0; border: 5px solid transparent; position: absolute; right: 0; top: 2.5px; border-bottom-color: #d8d8d8; } .condition .price:after { content: ""; width: 0; border: 5px solid transparent; border-bottom-color: #ffc210; position: absolute; right: 0; top: 2.5px; } .condition2 .course-length { float: right; font-size: 14px; color: #9b9b9b; } .course-item { background: #fff; padding: 20px 30px 20px 20px; margin-bottom: 35px; border-radius: 2px; cursor: pointer; box-shadow: 2px 3px 16px rgba(0, 0, 0, .1); transition: all .2s ease; overflow: hidden; cursor: pointer; } .course-link { overflow: hidden; } .course-cover { width: 423px; height: 210px; margin-right: 30px; float: left; } .course-info { width: 597px; float: left; } .course-title { margin-bottom: 8px; overflow: hidden; } .course-title h3 { font-size: 26px; color: #333; float: left; } .course-title span { float: right; font-size: 14px; color: #9b9b9b; margin-top: 12px; text-indent: 1em; /* 缩进 2字符宽度 */ background: url("../assets/people.svg") no-repeat 0px 3px; } .teacher { justify-content: space-between; font-size: 14px; color: #9b9b9b; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #333; border-bottom-color: rgba(51, 51, 51, .05); } .teacher .lesson { float: right; } .lesson-list { overflow: hidden; } .lesson-list li { width: 49%; margin-bottom: 15px; cursor: pointer; float: left; margin-right: 1%; } .lesson-list li .player { width: 16px; height: 16px; vertical-align: text-bottom; } .lesson-list li .lesson-title { display: inline-block; max-width: 227px; text-overflow: ellipsis; /* 如果字体太多超出元素的宽度,则添加省略符号 */ color: #666; overflow: hidden; white-space: nowrap; font-size: 14px; vertical-align: text-bottom; /* 文本的垂直对齐方式: text-botton 文本底部对齐 */ text-indent: 1.5em; background: url(../../static/player.svg) no-repeat 0px 3px; } .lesson-list .free { width: 34px; height: 20px; color: #fd7b4d; margin-left: 10px; border: 1px solid #fd7b4d; border-radius: 2px; text-align: center; font-size: 13px; white-space: nowrap; } .lesson-list li:hover .lesson-title { color: #ffc210; background-image: url(../../static/player2.svg); } .lesson-list li:hover .free { border-color: #ffc210; color: #ffc210; } .buy-info .discount { padding: 0px 10px; font-size: 16px; color: #fff; display: inline-block; height: 36px; text-align: center; margin-right: 8px; background: #fa6240; border: 1px solid #fa6240; border-radius: 10px 0 10px 0; line-height: 36px; } .present-price { font-size: 24px; color: #fa6240; } .original-price { text-decoration: line-through; font-size: 14px; color: #9b9b9b; margin-left: 10px; } .buy-now { width: 120px; height: 38px; background: transparent; color: #fa6240; font-size: 16px; border: 1px solid #fd7b4d; border-radius: 3px; transition: all .2s ease-in-out; /* 过渡动画 */ float: right; margin-top: 5px; } .buy-now:hover { color: #fff; background: #ffc210; border: 1px solid #ffc210; cursor: pointer; } .pagination { text-align: center; margin: 20px 0px 50px 0px; } </style>
CKEditor富文本编辑器
富文本编辑器:ueditor、ckeditor、kindeditor
pip install django-ckeditor
2. 添加应用
INSTALLED_APPS = [ ... 'ckeditor', # 富文本编辑器 'ckeditor_uploader', # 富文本编辑器上传图片模块 ... ]
3. 添加CKEditor设置
# 富文本编辑器ckeditor配置 CKEDITOR_CONFIGS = { 'default': { 'toolbar': 'full', # 工具条功能 'height': 300, # 编辑器高度 # 'width': 300, # 编辑器宽 }, } CKEDITOR_UPLOAD_PATH = '' # 上传图片保存路径,留空则调用django的文件上传功能
4. 添加ckeditor路由
path(r'^ckeditor/', include('ckeditor_uploader.urls')),
5. 为模型类添加字段
-
ckeditor.fields.RichTextField
不支持上传文件的富文本字段 -
ckeditor_uploader.fields.RichTextUploadingField
支持上传文件的富文本字段\
修改course/models.py里面的字段信息,记得要重新数据迁移
from ckeditor_uploader.fields import RichTextUploadingField class Course(models.Model): """ 专题课程 """ ... brief = RichTextUploadingField(max_length=2048, verbose_name="课程概述", null=True, blank=True)
课程详情页显示
因为接下来的组件中使用了vue-video视频播放组件,所以我们需要先预安装。
安装依赖 (前端)
npm install vue-video-player --save
在main.js中注册加载组件 require('video.js/dist/video-js.css'); require('vue-video-player/src/custom-theme.css'); import VideoPlayer from 'vue-video-player' Vue.use(VideoPlayer);
Detail.vue组件(模板)代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<template> <div class="detail"> <Header></Header> <div class="warp"> <div class="course-info"> <div class="warp-left" style="width: 690px;height: 388px;background-color: #000;"> </div> <div class="warp-right"> <h3 class="course-title">Python开发21天入门</h3> <p class="course-data">37400人在学 课程总时长:154课时/30小时 难度:初级</p> <div class="preferential"> <p class="price-service">限时免费</p> <p class="timer">距离结束:仅剩 28天 14小时 10分 <span>57</span> 秒</p> </div> <p class="course-price"> <span>活动价</span> <span class="real-price">¥0.00</span> <span class="old-price">¥9.00</span> </p> <div class="buy-course"> <p class="buy-btn"> <span class="btn1">立即购买</span> <span class="btn2">免费试学</span> </p> <p class="add-cart"> <img src="../../static/images/cart.svg" alt="">加入购物车 </p> </div> </div> </div> <div class="course-tab"> <ul> <li class="active">详情介绍</li> <li>课程章节 <span>(试学)</span></li> <li>用户评论 (83)</li> <li>常见问题</li> </ul> </div> <div class="course-section"> <section class="course-section-left"> <img src="../../static/images/21天01_1547098127.6672518.jpeg" alt=""> </section> </div> </div> <Footer></Footer> </div> </template> <script> import Header from "./common/Header" import Footer from "./common/Footer" export default { name: 'CourseDetail', data(){ return { } }, components:{ Header, Footer, }, methods:{ }, created(){ } }; </script> <style scoped> .detail{ margin-top: 80px; } .course-info{ padding-top: 30px; width:1200px; height: 388px; margin: auto; } .warp-left,.warp-right{ float: left; } .warp-right{ height: 388px; position: relative; } .course-title{ font-size: 20px; color: #333; padding: 10px 23px; letter-spacing: .45px; font-weight: normal; } .course-data{ padding-left: 23px; padding-right: 23px; padding-bottom: 16px; font-size: 14px; color: #9b9b9b; } .preferential{ width: 100%; height: auto; background: #fa6240; font-size: 14px; color: #4a4a4a; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; padding: 10px 23px; } .price-service{ font-size: 16px; color: #fff; letter-spacing: .36px; } .timer{ font-size: 14px; color: #fff; } .course-price{ width: 100%; background: #fff; height: auto; font-size: 14px; color: #4a4a4a; display: -ms-flexbox; display: flex; -ms-flex-align: end; align-items: flex-end; padding: 5px 23px; } .real-price{ font-size: 26px; color: #fa6240; margin-left: 10px; display: inline-block; margin-bottom: -5px; } .old-price{ font-size: 14px; color: #9b9b9b; margin-left: 10px; text-decoration: line-through; } .buy-course{ position: absolute; left: 0; bottom: 20px; width: 100%; height: auto; -ms-flex-pack: justify; justify-content: space-between; padding-left: 23px; padding-right: 23px; } .buy-btn{ float: left; } .buy-btn .btn1{ display: inline-block; width: 125px; height: 40px; background: #ffc210; border-radius: 4px; color: #fff; cursor: pointer; margin-right: 15px; text-align: center; vertical-align: middle; line-height: 40px; } .buy-btn .btn2{ width: 125px; height: 40px; border-radius: 4px; cursor: pointer; margin-right: 15px; display: inline-block; background: #fff; color: #ffc210; border: 1px solid #ffc210; text-align: center; vertical-align: middle; line-height: 40px; } .add-cart{ font-size: 14px; color: #ffc210; text-align: center; cursor: pointer; float: right; margin-top: 10px; } .add-cart img{ width: 20px; height: auto; margin-right: 7px; } .course-tab{ width: 100%; height: auto; background: #fff; margin-bottom: 30px; box-shadow: 0 2px 4px 0 #f0f0f0; } .course-tab>ul{ padding: 0; margin: 0 auto; list-style: none; width: 1200px; height: auto; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; color: #4a4a4a; } .course-tab>ul>li{ margin-right: 15px; padding: 26px 20px 16px; font-size: 17px; cursor: pointer; } .course-tab>ul>.active{ color: #ffc210; border-bottom: 2px solid #ffc210; } .course-section{ background: #FAFAFA; overflow: hidden; padding-bottom: 40px; width: 1200px; height: auto; margin: 0 auto; } .course-section-left{ width: 880px; height: auto; padding: 20px; background: #fff; float: left; box-sizing: border-box; overflow: hidden; position: relative; box-shadow: 0 2px 4px 0 #f0f0f0; } </style>
注册路由
import CourseDetail from "../components/Detail" ,{ name:"Detail", path: "/detail", component: Detail, }
Course.vue,代码:
<p class="box-title"><router-link :to="{path: '/detail',query:{id:course.id}}">{{course.name}}</router-link></p>
后端提供课程详情页数据接口
class TeacherDetailModelSerializer(serializers.ModelSerializer): class Meta: model = Teacher fields = ("id","name","title","role","signature","image","brief") class CourseDetailModelSerializer(serializers.ModelSerializer): """课程详情页的序列化器""" teacher = TeacherDetailModelSerializer() class Meta: model = Course fields = ("id","name","course_img","students","lessons","pub_lessons","price","teacher","course_level","brief")
视图代码:
from rest_framework.generics import RetrieveAPIView from .serializers import CourseDetailModelSerializer class CourseDeitalAPIView(RetrieveAPIView): queryset = Course.objects.filter(is_delete=False, is_show=True).order_by("orders") serializer_class = CourseDetailModelSerializer
路由代码:
from django.urls import path, re_path from . import views urlpatterns = [ re_path(r"detail/(?P<pk>\d+)",views.CourseDetailAPIView.as_view()) ]
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<template> <div class="detail"> <Header/> <div class="main"> <div class="course-info"> <div class="wrap-left"> <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" > </video-player> </div> <div class="wrap-right"> <h3 class="course-name">{{course.name}}</h3> <p class="data">{{course.students}}人在学 课程总时长:{{course.lessons}}课时/{{course.lessons==course.pub_lessons?'更新完成':('已更新'+course.pub_lessons+"课程")}} 难度:{{course.course_level}}</p> <div class="sale-time"> <p class="sale-type">限时免费</p> <p class="expire">距离结束:仅剩 01天 04小时 33分 <span class="second">08</span> 秒</p> </div> <p class="course-price"> <span>活动价</span> <span class="discount">¥0.00</span> <span class="original">¥{{course.price}}</span> </p> <div class="buy"> <div class="buy-btn"> <button class="buy-now">立即购买</button> <button class="free">免费试学</button> </div> <div class="add-cart"><img src="@/assets/cart-yellow.svg" alt="">加入购物车</div> </div> </div> </div> <div class="course-tab"> <ul class="tab-list"> <li :class="tabIndex==1?'active':''" @click="tabIndex=1">详情介绍</li> <li :class="tabIndex==2?'active':''" @click="tabIndex=2">课程章节 <span :class="tabIndex!=2?'free':''">(试学)</span></li> <li :class="tabIndex==3?'active':''" @click="tabIndex=3">用户评论 (42)</li> <li :class="tabIndex==4?'active':''" @click="tabIndex=4">常见问题</li> </ul> </div> <div class="course-content"> <div class="course-tab-list"> <div class="tab-item" v-if="tabIndex==1"> <div v-html="course.brief"></div> </div> <div class="tab-item" v-if="tabIndex==2"> <div class="tab-item-title"> <p class="chapter">课程章节</p> <p class="chapter-length">共11章 147个课时</p> </div> <div class="chapter-item"> <p class="chapter-title"><img src="@/assets/1.svg" alt="">第1章·Linux硬件基础</p> <ul class="lesson-list"> <li class="lesson-item"> <p class="name"><span class="index">1-1</span> 课程介绍-学习流程<span class="free">免费</span></p> <p class="time">07:30 <img src="@/assets/chapter-player.svg"></p> <button class="try">立即试学</button> </li> <li class="lesson-item"> <p class="name"><span class="index">1-2</span> 服务器硬件-详解<span class="free">免费</span></p> <p class="time">07:30 <img src="@/assets/chapter-player.svg"></p> <button class="try">立即试学</button> </li> </ul> </div> <div class="chapter-item"> <p class="chapter-title"><img src="@/assets/1.svg" alt="">第2章·Linux发展过程</p> <ul class="lesson-list"> <li class="lesson-item"> <p class="name"><span class="index">2-1</span> 操作系统组成-Linux发展过程</p> <p class="time">07:30 <img src="@/assets/chapter-player.svg"></p> <button class="try">立即购买</button> </li> <li class="lesson-item"> <p class="name"><span class="index">2-2</span> 自由软件-GNU-GPL核心讲解</p> <p class="time">07:30 <img src="@/assets/chapter-player.svg"></p> <button class="try">立即购买</button> </li> </ul> </div> </div> <div class="tab-item" v-if="tabIndex==3"> 用户评论 </div> <div class="tab-item" v-if="tabIndex==4"> 常见问题 </div> </div> <div class="course-side"> <div class="teacher-info"> <h4 class="side-title"><span>授课老师</span></h4> <div class="teacher-content"> <div class="cont1"> <img :src="course.teacher.image"> <div class="name"> <p class="teacher-name">{{course.teacher.name}} {{course.teacher.title}}</p> <p class="teacher-title">{{course.teacher.signature}}</p> </div> </div> <p class="narrative" >Linux运维技术专家,老男孩Linux金牌讲师,讲课风趣幽默、深入浅出、声音洪亮到爆炸</p> </div> </div> </div> </div> </div> <Footer/> </div> </template> <script> import Header from "./common/Header" import Footer from "./common/Footer" import {videoPlayer} from 'vue-video-player'; export default { name: "Detail", data(){ return { tabIndex:1, // 当前选项卡显示的下标 course_id:0, // 当前页面对应的课程ID course: { teacher: {}, }, // 课程详情信息 playerOptions: { playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度 autoplay: false, //如果true,则自动播放 muted: false, // 默认情况下将会消除任何音频。 loop: false, // 循环播放 preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持) language: 'zh-CN', aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3") fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。 sources: [{ // 播放资源和资源格式 type: "video/mp4", src: "http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4" //你的视频地址(必填) }], poster: "../static/courses/675076.jpeg", //视频封面图 width: document.documentElement.clientWidth, // 默认视频全屏时的最大宽度 notSupportedMessage: '此视频暂无法播放,请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。 } } }, watch:{ course(data){ while(data.brief.search(`"/media`) != -1 ){ data.brief = data.brief.replace(`"/media`,`"${this.$settings.Host}/media`) } }, tabIndex(){ if(tabIndex==2){ //获取当前课程对应的章节列表和课时列表 } } }, created(){ // 获取当前课程ID this.course_id = this.$route.query.id - 0; // 判断ID基本有效性 let _this = this; if( isNaN(this.course_id) || this.course_id < 1 ){ _this.$alert("无效的课程ID!","错误",{ callback(){ _this.$router.go(-1); }}); } // 发送请求获取后端课程数据 this.$axios.get(this.$settings.Host+`/courses/detail/${this.course_id}/`).then(response=>{ this.course = response.data; // 修改视频中的封面图片 this.playerOptions.poster = this.course.course_img; }).catch(error=>{ console.log(error.response) }); }, methods: { // 视频播放事件 onPlayerPlay(player) { alert("play"); }, // 视频暂停播放事件 onPlayerPause(player){ alert("pause"); }, // 视频插件初始化 player() { return this.$refs.videoPlayer.player; } }, components:{ Header, Footer, videoPlayer, } } </script>
courses/serializers.py,序列化器,代码:
from .models import CourseLesson class CourseLessonModelSerializer(serializers.ModelSerializer): """课程课时""" class Meta: model = CourseLesson fields = ["id","name","duration","free_trail"] from .models import CourseChapter class CourseChapterModelSerializer(serializers.ModelSerializer): """课程章节""" coursesections = CourseLessonModelSerializer(many=True) class Meta: model = CourseChapter fields = ("id","name","coursesections","chapter")
courses/views.py视图,代码:
from rest_framework.generics import ListAPIView from .serializers import CourseChapterModelSerializer from .models import CourseChapter class CourseChapterAPIView(ListAPIView): """课程章节信息""" queryset = CourseChapter.objects.filter(is_delete=False, is_show=True).order_by("orders") serializer_class = CourseChapterModelSerializer filter_backends = [DjangoFilterBackend] filter_fields = ['course']
courses/urls.py路由,代码:
path(r"chapters/",views.CourseChapterAPIView.as_view()),
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<template> <div class="detail"> <Header/> <div class="main"> <div class="course-info"> <div class="wrap-left"> <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" > </video-player> </div> <div class="wrap-right"> <h3 class="course-name">{{course.name}}</h3> <p class="data">{{course.students}}人在学 课程总时长:{{course.lessons}}课时/{{course.lessons==course.pub_lessons?'更新完成':('已更新'+course.pub_lessons+"课程")}} 难度:{{course.course_level}}</p> <div class="sale-time"> <p class="sale-type">限时免费</p> <p class="expire">距离结束:仅剩 01天 04小时 33分 <span class="second">08</span> 秒</p> </div> <p class="course-price"> <span>活动价</span> <span class="discount">¥0.00</span> <span class="original">¥{{course.price}}</span> </p> <div class="buy"> <div class="buy-btn"> <button class="buy-now">立即购买</button> <button class="free">免费试学</button> </div> <div class="add-cart"><img src="@/assets/cart-yellow.svg" alt="">加入购物车</div> </div> </div> </div> <div class="course-tab"> <ul class="tab-list"> <li :class="tabIndex==1?'active':''" @click="tabIndex=1">详情介绍</li> <li :class="tabIndex==2?'active':''" @click="tabIndex=2">课程章节 <span :class="tabIndex!=2?'free':''">(试学)</span></li> <li :class="tabIndex==3?'active':''" @click="tabIndex=3">用户评论 (42)</li> <li :class="tabIndex==4?'active':''" @click="tabIndex=4">常见问题</li> </ul> </div> <div class="course-content"> <div class="course-tab-list"> <div class="tab-item" v-if="tabIndex==1"> <div v-html="course.brief"></div> </div> <div class="tab-item" v-if="tabIndex==2"> <div class="tab-item-title"> <p class="chapter">课程章节</p> <p class="chapter-length">共{{chapter_list.length}}章 147个课时</p> </div> <div class="chapter-item" v-for="chapter in chapter_list"> <p class="chapter-title"><img src="@/assets/1.svg" alt="">第{{chapter.chapter}}章·{{chapter.name}}</p> <ul class="lesson-list"> <li class="lesson-item" v-for="lesson in chapter.coursesections"> <p class="name"><span class="index">{{chapter.chapter}}-{{lesson.id}}</span> {{lesson.name}}<span class="free" v-if="lesson.free_trail">免费</span></p> <p class="time">{{lesson.duration}} <img src="@/assets/chapter-player.svg"></p> <button class="try" v-if="lesson.free_trail">立即试学</button> <button class="try" v-else>立即购买</button> </li> </ul> </div> </div> <div class="tab-item" v-if="tabIndex==3"> 用户评论 </div> <div class="tab-item" v-if="tabIndex==4"> 常见问题 </div> </div> <div class="course-side"> <div class="teacher-info"> <h4 class="side-title"><span>授课老师</span></h4> <div class="teacher-content"> <div class="cont1"> <img :src="course.teacher.image"> <div class="name"> <p class="teacher-name">{{course.teacher.name}} {{course.teacher.title}}</p> <p class="teacher-title">{{course.teacher.signature}}</p> </div> </div> <p class="narrative" >Linux运维技术专家,老男孩Linux金牌讲师,讲课风趣幽默、深入浅出、声音洪亮到爆炸</p> </div> </div> </div> </div> </div> <Footer/> </div> </template> <script> import Header from "./common/Header" import Footer from "./common/Footer" import {videoPlayer} from 'vue-video-player'; export default { name: "Detail", data(){ return { tabIndex:1, // 当前选项卡显示的下标 course_id:0, // 当前页面对应的课程ID course: { teacher: {}, }, // 课程详情信息 chapter_list:{}, playerOptions: { playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度 autoplay: false, //如果true,则自动播放 muted: false, // 默认情况下将会消除任何音频。 loop: false, // 循环播放 preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持) language: 'zh-CN', aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3") fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。 sources: [{ // 播放资源和资源格式 type: "video/mp4", src: "http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4" //你的视频地址(必填) }], poster: "../static/courses/675076.jpeg", //视频封面图 width: document.documentElement.clientWidth, // 默认视频全屏时的最大宽度 notSupportedMessage: '此视频暂无法播放,请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。 } } }, watch:{ course(data){ while(data.brief.search(`"/media`) != -1 ){ data.brief = data.brief.replace(`"/media`,`"${this.$settings.Host}/media`) } }, tabIndex(data){ if(data==2){ //获取当前课程对应的章节列表和课时列表 this.$axios.get(`${this.$settings.Host}/courses/chapters/?course=${this.course_id}`).then(response=>{ this.chapter_list = response.data; }).catch(error=>{ console.log(error.response) }) } } }, created(){ // 获取当前课程ID this.course_id = this.$route.query.id - 0; // 判断ID基本有效性 let _this = this; if( isNaN(this.course_id) || this.course_id < 1 ){ _this.$alert("无效的课程ID!","错误",{ callback(){ _this.$router.go(-1); }}); } // 发送请求获取后端课程数据 this.$axios.get(this.$settings.Host+`/courses/detail/${this.course_id}/`).then(response=>{ this.course = response.data; // 修改视频中的封面图片 this.playerOptions.poster = this.course.course_img; }).catch(error=>{ console.log(error.response) }); }, methods: { // 视频播放事件 onPlayerPlay(player) { alert("play"); }, // 视频暂停播放事件 onPlayerPause(player){ alert("pause"); }, // 视频插件初始化 player() { return this.$refs.videoPlayer.player; } }, components:{ Header, Footer, videoPlayer, } } </script>
Detail的前端代码
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<template> <div class="detail"> <Header/> <div class="main"> <div class="course-info"> <div class="wrap-left"> <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" > </video-player> </div> <div class="wrap-right"> <h3 class="course-name">{{course.name}}</h3> <p class="data">{{course.students}}人在学 课程总时长:{{course.lessons}}课时/{{course.lessons==course.pub_lessons?'更新完成':('已更新'+course.pub_lessons+"课程")}} 难度:{{course.course_level}}</p> <div class="sale-time"> <p class="sale-type">限时免费</p> <p class="expire">距离结束:仅剩 01天 04小时 33分 <span class="second">08</span> 秒</p> </div> <p class="course-price"> <span>活动价</span> <span class="discount">¥0.00</span> <span class="original">¥{{course.price}}</span> </p> <div class="buy"> <div class="buy-btn"> <button class="buy-now">立即购买</button> <button class="free">免费试学</button> </div> <div class="add-cart"><img src="@/assets/cart-yellow.svg" alt="">加入购物车</div> </div> </div> </div> <div class="course-tab"> <ul class="tab-list"> <li :class="tabIndex==1?'active':''" @click="tabIndex=1">详情介绍</li> <li :class="tabIndex==2?'active':''" @click="tabIndex=2">课程章节 <span :class="tabIndex!=2?'free':''">(试学)</span></li> <li :class="tabIndex==3?'active':''" @click="tabIndex=3">用户评论 (42)</li> <li :class="tabIndex==4?'active':''" @click="tabIndex=4">常见问题</li> </ul> </div> <div class="course-content"> <div class="course-tab-list"> <div class="tab-item" v-if="tabIndex==1"> <div v-html="course.brief"></div> </div> <div class="tab-item" v-if="tabIndex==2"> <div class="tab-item-title"> <p class="chapter">课程章节</p> <p class="chapter-length">共{{chapter_list.length}}章 147个课时</p> </div> <div class="chapter-item" v-for="chapter in chapter_list"> <p class="chapter-title"><img src="@/assets/1.svg" alt="">第{{chapter.chapter}}章·{{chapter.name}}</p> <ul class="lesson-list"> <li class="lesson-item" v-for="lesson in chapter.coursesections"> <p class="name"><span class="index">{{chapter.chapter}}-{{lesson.id}}</span> {{lesson.name}}<span class="free" v-if="lesson.free_trail">免费</span></p> <p class="time">{{lesson.duration}} <img src="@/assets/chapter-player.svg"></p> <button class="try" v-if="lesson.free_trail"><router-link :to="{path: '/player',query:{'vid':lesson.section_link}}">立即试学</router-link></button> <button class="try" v-else>立即购买</button> </li> </ul> </div> </div> <div class="tab-item" v-if="tabIndex==3"> 用户评论 </div> <div class="tab-item" v-if="tabIndex==4"> 常见问题 </div> </div> <div class="course-side"> <div class="teacher-info"> <h4 class="side-title"><span>授课老师</span></h4> <div class="teacher-content"> <div class="cont1"> <img :src="course.teacher.image"> <div class="name"> <p class="teacher-name">{{course.teacher.name}} {{course.teacher.title}}</p> <p class="teacher-title">{{course.teacher.signature}}</p> </div> </div> <p class="narrative" >{{course.teacher.brief}}</p> </div> </div> </div> </div> </div> <Footer/> </div> </template> <script> import Header from "./common/Header" import Footer from "./common/Footer" import {videoPlayer} from 'vue-video-player'; export default { name: "Detail", data(){ return { tabIndex:1, // 当前选项卡显示的下标 course_id:0, // 当前页面对应的课程ID course: { teacher: {}, }, // 课程详情信息 chapter_list:{}, playerOptions: { playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度 autoplay: false, //如果true,则自动播放 muted: false, // 默认情况下将会消除任何音频。 loop: false, // 循环播放 preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持) language: 'zh-CN', aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3") fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。 sources: [{ // 播放资源和资源格式 type: "video/mp4", src: "http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4" //你的视频地址(必填) }], poster: "../static/courses/675076.jpeg", //视频封面图 width: document.documentElement.clientWidth, // 默认视频全屏时的最大宽度 notSupportedMessage: '此视频暂无法播放,请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。 } } }, watch:{ course(data){ // 替换视频地址 console.log(data) console.log(this.playerOptions.sources[0].src) this.playerOptions.sources[0].src = data.video; // 替换视频封面 this.playerOptions.poster = data.course_img; // 替换科恒信息中的详情介绍里面的图片路径 while(data.brief.search(`"/media`) != -1 ){ data.brief = data.brief.replace(`"/media`,`"${this.$settings.Host}/media`) } }, tabIndex(data){ if(data==2){ //获取当前课程对应的章节列表和课时列表 this.$axios.get(`${this.$settings.Host}/courses/chapters/?course=${this.course_id}`).then(response=>{ this.chapter_list = response.data; }).catch(error=>{ console.log(error.response) }) } } }, created(){ // 获取当前课程ID this.course_id = this.$route.query.id - 0; // 判断ID基本有效性 let _this = this; if( isNaN(this.course_id) || this.course_id < 1 ){ _this.$alert("无效的课程ID!","错误",{ callback(){ _this.$router.go(-1); }}); } // 发送请求获取后端课程数据 this.$axios.get(this.$settings.Host+`/courses/detail/${this.course_id}/`).then(response=>{ this.course = response.data; // 修改视频中的封面图片 this.playerOptions.poster = this.course.course_img; }).catch(error=>{ console.log(error.response) }); }, methods: { // 视频播放事件 onPlayerPlay(player) { alert("play"); }, // 视频暂停播放事件 onPlayerPause(player){ alert("pause"); }, // 视频插件初始化 player() { return this.$refs.videoPlayer.player; } }, components:{ Header, Footer, videoPlayer, } } </script> <style scoped> .main{ background: #fff; padding-top: 30px; } .course-info{ width: 1200px; margin: 0 auto; overflow: hidden; } .wrap-left{ float: left; width: 690px; height: 388px; background-color: #000; } .wrap-right{ float: left; position: relative; height: 388px; } .course-name{ font-size: 20px; color: #333; padding: 10px 23px; letter-spacing: .45px; } .data{ padding-left: 23px; padding-right: 23px; padding-bottom: 16px; font-size: 14px; color: #9b9b9b; } .sale-time{ width: 464px; background: #fa6240; font-size: 14px; color: #4a4a4a; padding: 10px 23px; overflow: hidden; } .sale-type { font-size: 16px; color: #fff; letter-spacing: .36px; float: left; } .sale-time .expire{ font-size: 14px; color: #fff; float: right; } .sale-time .expire .second{ width: 24px; display: inline-block; background: #fafafa; color: #5e5e5e; padding: 6px 0; text-align: center; } .course-price{ background: #fff; font-size: 14px; color: #4a4a4a; padding: 5px 23px; } .discount{ font-size: 26px; color: #fa6240; margin-left: 10px; display: inline-block; margin-bottom: -5px; } .original{ font-size: 14px; color: #9b9b9b; margin-left: 10px; text-decoration: line-through; } .buy{ width: 464px; padding: 0px 23px; position: absolute; left: 0; bottom: 20px; overflow: hidden; } .buy .buy-btn{ float: left; } .buy .buy-now{ width: 125px; height: 40px; border: 0; background: #ffc210; border-radius: 4px; color: #fff; cursor: pointer; margin-right: 15px; outline: none; } .buy .free{ width: 125px; height: 40px; border-radius: 4px; cursor: pointer; margin-right: 15px; background: #fff; color: #ffc210; border: 1px solid #ffc210; } .add-cart{ float: right; font-size: 14px; color: #ffc210; text-align: center; cursor: pointer; margin-top: 10px; } .add-cart img{ width: 20px; height: 18px; margin-right: 7px; vertical-align: middle; } .course-tab{ width: 100%; background: #fff; margin-bottom: 30px; box-shadow: 0 2px 4px 0 #f0f0f0; } .course-tab .tab-list{ width: 1200px; margin: auto; color: #4a4a4a; overflow: hidden; } .tab-list li{ float: left; margin-right: 15px; padding: 26px 20px 16px; font-size: 17px; cursor: pointer; } .tab-list .active{ color: #ffc210; border-bottom: 2px solid #ffc210; } .tab-list .free{ color: #fb7c55; } .course-content{ width: 1200px; margin: 0 auto; background: #FAFAFA; overflow: hidden; padding-bottom: 40px; } .course-tab-list{ width: 880px; height: auto; padding: 20px; background: #fff; float: left; box-sizing: border-box; overflow: hidden; position: relative; box-shadow: 0 2px 4px 0 #f0f0f0; } .tab-item{ width: 880px; background: #fff; padding-bottom: 20px; box-shadow: 0 2px 4px 0 #f0f0f0; } .tab-item-title{ justify-content: space-between; padding: 25px 20px 11px; border-radius: 4px; margin-bottom: 20px; border-bottom: 1px solid #333; border-bottom-color: rgba(51,51,51,.05); overflow: hidden; } .chapter{ font-size: 17px; color: #4a4a4a; float: left; } .chapter-length{ float: right; font-size: 14px; color: #9b9b9b; letter-spacing: .19px; } .chapter-title{ font-size: 16px; color: #4a4a4a; letter-spacing: .26px; padding: 12px; background: #eee; border-radius: 2px; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; } .chapter-title img{ width: 18px; height: 18px; margin-right: 7px; vertical-align: middle; } .lesson-list{ padding:0 20px; } .lesson-list .lesson-item{ padding: 15px 20px 15px 36px; cursor: pointer; justify-content: space-between; position: relative; overflow: hidden; } .lesson-item .name{ font-size: 14px; color: #666; float: left; } .lesson-item .index{ margin-right: 5px; } .lesson-item .free{ font-size: 12px; color: #fff; letter-spacing: .19px; background: #ffc210; border-radius: 100px; padding: 1px 9px; margin-left: 10px; } .lesson-item .time{ font-size: 14px; color: #666; letter-spacing: .23px; opacity: 1; transition: all .15s ease-in-out; float: right; } .lesson-item .time img{ width: 18px; height: 18px; margin-left: 15px; vertical-align: text-bottom; } .lesson-item .try{ width: 86px; height: 28px; background: #ffc210; border-radius: 4px; font-size: 14px; color: #fff; position: absolute; right: 20px; top: 10px; opacity: 0; transition: all .2s ease-in-out; cursor: pointer; outline: none; border: none; } .lesson-item:hover{ background: #fcf7ef; box-shadow: 0 0 0 0 #f3f3f3; } .lesson-item:hover .name{ color: #333; } .lesson-item:hover .try{ opacity: 1; } .course-side{ width: 300px; height: auto; margin-left: 20px; float: right; } .teacher-info{ background: #fff; margin-bottom: 20px; box-shadow: 0 2px 4px 0 #f0f0f0; } .side-title{ font-weight: normal; font-size: 17px; color: #4a4a4a; padding: 18px 14px; border-bottom: 1px solid #333; border-bottom-color: rgba(51,51,51,.05); } .side-title span{ display: inline-block; border-left: 2px solid #ffc210; padding-left: 12px; } .teacher-content{ padding: 30px 20px; box-sizing: border-box; } .teacher-content .cont1{ margin-bottom: 12px; overflow: hidden; } .teacher-content .cont1 img{ width: 54px; height: 54px; margin-right: 12px; float: left; } .teacher-content .cont1 .name{ float: right; } .teacher-content .cont1 .teacher-name{ width: 188px; font-size: 16px; color: #4a4a4a; padding-bottom: 4px; } .teacher-content .cont1 .teacher-title{ width: 188px; font-size: 13px; color: #9b9b9b; white-space: nowrap; } .teacher-content .narrative{ font-size: 14px; color: #666; line-height: 24px; } </style>
视频播放
项目中有两种视频:收费视频[需要加密]和免费视频
官方网址: http://www.polyv.net/vod/
注意:
开发时通过
免费试用
注册体验版账号公司使用酷播尊享版
开发文档地址:http://dev.polyv.net/2017/videoproduct/v-playerapi/html5player/html5-docs/
要开发播放保利威的加密视频功能,需要在用户中心->设置->API接口和加密设置.
http://my.polyv.net/secure/setting/api
配置视频上传加密.
上传视频并记录视频的VID
参考文档:http://dev.polyv.net/2019/videoproduct/v-api/v-api-play/create-playsafe-token/
根据官方文档的案例,已经有其他人开源了,针对polvy的token生成的python版本了,我们可以直接拿来使用.
在libs下创建polyv.py,编写token生成工具函数
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
from django.conf import settings import time import requests import hashlib class PolyvPlayer(object): userId = settings.POLYV_CONFIG['userId'] secretkey = settings.POLYV_CONFIG['secretkey'] def tomd5(self, value): """取md5值""" return hashlib.md5(value.encode()).hexdigest() # 获取视频数据的token def get_video_token(self, videoId, viewerIp, viewerId=None, viewerName='', extraParams='HTML5'): """ :param videoId: 视频id :param viewerId: 看视频用户id :param viewerIp: 看视频用户ip :param viewerName: 看视频用户昵称 :param extraParams: 扩展参数 :param sign: 加密的sign :return: 返回点播的视频的token """ ts = int(time.time() * 1000) # 时间戳 plain = { "userId": self.userId, 'videoId': videoId, 'ts': ts, 'viewerId': viewerId, 'viewerIp': viewerIp, 'viewerName': viewerName, 'extraParams': extraParams } # 按照ASCKII升序 key + value + key + value... + value 拼接 plain_sorted = {} key_temp = sorted(plain) for key in key_temp: plain_sorted[key] = plain[key] print(plain_sorted) plain_string = '' for k, v in plain_sorted.items(): plain_string += str(k) + str(v) print(plain_string) sign_data = self.secretkey + plain_string + self.secretkey # 取sign_data的md5的大写 sign = self.tomd5(sign_data).upper() # 新的带有sign的字典 plain.update({'sign': sign}) result = requests.post( url='https://hls.videocc.net/service/v1/token', headers={"Content-type": "application/x-www-form-urlencoded"}, data=plain ).json() data = {} if isinstance(result, str) else result.get("data", {}) return {"token": data}
配置文件settings/dev.py,代码
# 保利威视频加密服务 POLYV_CONFIG = { "userId":"注册获取", "secretkey":"注册获取", "servicesUrl":"https://hls.videocc.net/service/v1/token", }
视图代码:
from rest_framework.response import Response from luffy.utils.polyv import PolyvPlayer from rest_framework.views import APIView class PolyvAPIView(APIView): def get(self, request): vid = request.query_params.get("vid") remote_addr = request.META.get("REMOTE_ADDR") user_id = 1 # 测试使用 user_name = "test" # 测试使用 polyv_video = PolyvPlayer() verify_data = polyv_video.get_video_token(vid, remote_addr, user_id, user_name) return Response(verify_data["token"])
路由代码:
path(r"polyv/token/",views.PolyvAPIView.as_view()),
客户端请求token并播放视频
在 vue项目的入口文件index.html 中加载保利威视频播放器的js核心类库
<script src='https://player.polyv.net/script/polyvplayer.min.js'></script>
创建视频播放页面的组件Player.vue,组件中直接配置保利威播放器需要的参数。
Player.vue,代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<template> <div class="player"> <div id="player"></div> </div> </template> <script> export default { name:"Player", data () { return { } }, methods: { }, mounted(){ let _this = this; var player = polyvObject('#player').videoPlayer({ wrap: '#player', width: document.documentElement.clientWidth, // 宽度 height: document.documentElement.clientHeight, // 高度 forceH5: true, vid: '62dc475e3f09b6db69447011eed4415a_6', code: '骑士3期', // 一般是用户昵称 // 视频加密播放的配置 playsafe: function (vid, next) { // 向后端发送请求获取加密的token _this.$axios.get(_this.$settings.Host+`/courses/polyv/token/`,{ params:{ vid: "62dc475e3f09b6db69447011eed4415a_6", } }).then(function (response) { console.log(response); next(response.data.token); }) } }); }, computed: { } } </script> <style scoped> </style>
前端路由,代码:
{
name:"Player",
path:"/player",
component: Player,
},
Detail.vue,代码:
课时章节:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<button class="try" v-if="lesson.free_trail"><router-link :to="{path: '/player',query:{'vid':lesson.section_link}}">立即试学</router-link></button>
Player.vue,代码:
获取vid视频ID
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<template> <div class="player"> <div id="player"></div> </div> </template> <script> export default { name:"Player", data () { return { } }, methods: { }, mounted(){ let _this = this; let video_id = this.$route.query.vid; var player = polyvObject('#player').videoPlayer({ wrap: '#player', width: document.documentElement.clientWidth, // 宽度 height: document.documentElement.clientHeight, // 高度 forceH5: true, vid:video_id, // vid:vid,的简写 code: '骑士3期', // 一般是用户昵称 // 视频加密播放的配置 playsafe: function (vid, next) { // 向后端发送请求获取加密的token _this.$axios.get(_this.$settings.Host+`/courses/polyv/token/`,{ params:{ vid:video_id, } }).then(function (response) { console.log(response); next(response.data.token); }) } }); }, computed: { } } </script> <style scoped> </style>
完善API接口的身份认证
试学必须在用户登录以后才能进行,所以后端的tokenAPI接口必须保证用户登陆以后,
所以后端视图代码中增加对jwt token的识别认证,代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
from rest_framework.views import APIView from luffy.libs.polyv import PolyvPlayer from rest_framework.response import Response from rest_framework.permissions import IsAuthenticated class PolyvAPIView(APIView): """生成播放视频的playsafetoken""" """播放页面的当前访问者只能是用户,不能是游客""" permission_classes = (IsAuthenticated,) def get(self,request): # 获取客户端要播放的视频vid vid = request.query_params.get("vid") # 获取客户端的IP地址 remote_addr = request.META.get("REMOTE_ADDR") # 获取用户的ID和用户名[测试] user_id = request.user.id user_name = request.user.username # 生成token polyv = PolyvPlayer() data = polyv.get_video_token(vid, remote_addr,user_id, user_name) return Response(data["token"])
前端在请求后端提供视频加密播放的token时需要附带 jwt token
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<template> <div class="player"> <div id="player"></div> </div> </template> <script> export default { name:"Player", data () { return { token: sessionStorage.token || localStorage.token, user_id: sessionStorage.user_id || localStorage.user_id, user_name: sessionStorage.user_name || localStorage.user_name, } }, methods: { }, created(){ // 判断用户用户是否已经登录了 if(!this.token){ let _this = this; this.$alert("对不起,您尚未登录!请登录!","警告",{ callback(){ _this.$router.push("/login"); } }) } }, mounted(){ let _this = this; let video_id = this.$route.query.vid; var player = polyvObject('#player').videoPlayer({ wrap: '#player', width: document.documentElement.clientWidth, // 宽度 height: document.documentElement.clientHeight, // 高度 forceH5: true, vid:video_id, // vid:vid,的简写 code: _this.user_name, // 跑马灯的显示信息,一般是用户昵称 // 视频加密播放的配置 playsafe: function (vid, next) { // 向后端发送请求获取加密的token _this.$axios.get(_this.$settings.Host+`/courses/polyv/token/`,{ // 附带jwt token headers:{ // 注意下方的空格!!! "Authorization":"jwt " + _this.token }, params:{ vid:video_id, } }).then(function (response) { console.log(response); next(response.data.token); }) } }); }, computed: { } } </script> <style scoped> </style>
from ckeditor_uploader.fields import RichTextUploadingField class Course(BaseModel): """ 专题课程 """ video = models.FileField(upload_to="video", null=True,blank=True,default=None, verbose_name="封面视频")
执行数据迁移
python manage.py makemigrations
python manage.py migrate
watch:{
course(data){
// 替换视频地址
this.playerOptions.sources[0].src = data.video;
// 替换视频封面
this.playerOptions.poster = data.course_img;
// 替换科恒信息中的详情介绍里面的图片路径
while(data.brief.search(`"/media`) != -1 ){
data.brief = data.brief.replace(`"/media`,`"${this.$settings.Host}/media`)
}
},