客户端请求后端发送数据
<template> <div class="course"> <Header/> <div class="main"> <!-- 筛选功能 --> <div class="top"> .... <!-- 课程列表 ---> <div class="list"> 。。。。 </div> <div class="pagination"> <!-- 必须设置page-size属性，total值的改变才会有效果 --> <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> ... .pagination{ text-align: center; margin: 20px 0px 50px 0px; } </style>
富文本即具备丰富样式格式的文本。在运营后台，运营人员需要录入课程的相关描述，可以是包含了HTML语法格式的字符串。为了快速简单的让用户能够在页面中编辑带html格式的文本，我们引入富文本编辑器。
富文本编辑器：ueditor、ckeditor、kindeditor
在INSTALLED_APPS中添加
INSTALLED_APPS = [ ... 'ckeditor', # 富文本编辑器 'ckeditor_uploader', # 富文本编辑器上传图片模块 ... ]在settings/dev.py中添加
# 富文本编辑器ckeditor配置 CKEDITOR_CONFIGS = { 'default': { 'toolbar': 'full', # 工具条功能 'height': 300, # 编辑器高度 # 'width': 300, # 编辑器宽 }, } CKEDITOR_UPLOAD_PATH = '' # 上传图片保存路径，留空则调用django的文件上传功能在总路由中添加
path(r'^ckeditor/', include('ckeditor_uploader.urls')),ckeditor提供了两种类型的Django模型类字段
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组件代码：
<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>
routers/index.js
import CourseDetail from "../components/CourseDetail" ,{ name:"CourseDetail", path: "/detail", component: CourseDetail, }
Course.vue:31行,代码:
<p class="box-title"><router-link :to="{path: '/detail',query:{id:course.id}}">{{course.name}}</router-link></p>
CourseDetail.vue:104行,接受来自课程列表的课程ID, 代码:
mounted(){ // 获取地址上面的课程ID let id = this.$route.query.id - 0; console.log(id); if( isNaN(id) || id < 1 ){ alert("非法请求!") this.$router.go(-1); } }
序列化器代码:
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()) ]
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路由，代码：
re_path(r"^chapters/$",views.CourseChapterAPIView.as_view()),效果：
使用保利威云视频服务来对视频进行加密.
官方网址: http://www.polyv.net/vod/
注意通过免费试用注册体验版账号,公司使用酷播尊享版。
开发文档地址:http://dev.polyv.net/2017/videoproduct/v-playerapi/html5player/html5-docs/
要开发播放保利威的加密视频功能,需要在用户中心->设置->API接口和加密设置.
配置视频上传加密.
上传视频并记录视频的ID
后端获取保利威的视频播放授权token,提供接口api给前端
参考文档:http://dev.polyv.net/2019/videoproduct/v-api/v-api-play/create-playsafe-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"])根据官方文档的案例,已经有其他人开源了,针对polvy的token生成的python版本了,我们可以直接拿来使用.
在utils下创建polyv.py,编写token生成工具函数
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}
在 index.html 中加载保利威视频播放器的js核心类库
<script src='https://player.polyv.net/script/polyvplayer.min.js'></script>在组件中,直接配置保利威播放器需要的参数:
<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: '06e090212218afd78ccadfcc3b954385_0', code: 'myRandomCodeValue', // 视频加密播放的配置 playsafe: function (vid, next) {// 向后端发送请求获取加密的token _this.$axios.get(_this.$settings.host+`/course/video/${vid}/`).then(function (data) { console.log(data); next(data.data.token) }) } }); }, computed: { } } </script> <style scoped> </style> 完善点击课程详情的立即试学按钮跳转到视频播放页面
<span class="btn2"><router-link :to="{path: 'player',query:{vid:'06e090212218afd78ccadfcc3b954385_0'}}">免费试学</router-link></span>
完善API接口的身份认证
后端视图代码
from rest_framework.views import APIView from rest_framework.permissions import IsAuthenticated from utils.polyv import PolyvPlayer from rest_framework.response import Response class CoursePlayerAPIView(APIView): """实际上而言,需要在播放页面保存当前访问者只能是用户,不能是游客""" permission_classes = (IsAuthenticated,) """生成保利威视频播放的token""" def get(self,request,vid): """生成token""" # 获取视频浏览者的IP remote_addr = request.META.get("REMOTE_ADDR") # user_id = request.user.id # 用户ID user_id = 1 # user_name = request.user.username # 用户名 user_name = "admin" # 引入utils下刚刚声明的保利威工具类 polyv_video = PolyvPlayer() verify_data = polyv_video.get_video_token(vid, remote_addr, user_id, user_name) return Response(verify_data["token"])
前端在请求后端提供视频加密播放的token时需要附带jwt token
Player.vue,代码:
<script> export default { name:"Player", data () { return { user_id: sessionStorage.user_id || localStorage.user_id, token: sessionStorage.token || localStorage.token, } }, methods: { }, mounted(){ let _this = this; let vid = this.$route.query.vid; var player = polyvObject('#player').videoPlayer({ wrap: '#player', width: document.documentElement.clientWidth, height: document.documentElement.clientHeight, forceH5: true, vid: vid, code: 'myRandomCodeValue', // 视频加密播放的配置 playsafe: function (vid, next) {// 向后端发送请求获取加密的token _this.$axios.get(_this.$settings.host+`/course/video/${vid}/`, // 因为本次访问的api接口设置了身份认证,所以在请求头中必须附带token值 { headers:{ // 附带已经登录用户的jwt token 提供给后端,一定不能疏忽这个空格 'Authorization':'JWT '+_this.token }, }).then(function (data) { console.log(data); next(data.data.token) }).catch(error=>{ alert("非法请求"); _this.$router.go(-1); }) } }); }, computed: { } } </script>
