文章目录
数据库模型设计
apps/course/models.py
from django.db import models
from utils.models import ModelBase
class Teacher(ModelBase):
"""
"""
name = models.CharField(max_length=150,verbose_name='讲师姓名',help_text='讲师姓名')
positional_title = models.CharField(max_length=150,verbose_name='职称',help_text='职称')
profile = models.TextField(verbose_name='简介',help_text='简介')
avatar_url = models.URLField(default='',verbose_name='头像url',help_text='头像url')
class Meta:
db_table = 'tb_teachers' #指明数据库表名
verbose_name = '讲师' #在 admin 站点中显示的名称
verbose_name_plural = verbose_name #显示的复数名称
def __str__(self):
return self.name
class CourseCategory(ModelBase):
"""
"""
name = models.CharField(max_length=100,verbose_name='课程分类名',help_text='课程分类名')
class Meta:
db_table = 'tb_course_category'
verbose_name = '课程分类'
verbose_name_plural = verbose_name
def __str__(self):
return self.name
class Course(ModelBase):
"""
"""
title = models.CharField(max_length=150,verbose_name='课程名',help_text='课程名')
cover_url = models.URLField(verbose_name='课程封面图url',help_text='课程封面图url')
video_url = models.URLField(verbose_name='课程视频url',help_text='课程视频url')
duration = models.FloatField(default=0.0,verbose_name='课程时长',help_text='课程时长')
profile = models.TextField(null=True,blank=True,verbose_name='课程简介',help_text='课程简介')
outline = models.TextField(null=True,blank=True,verbose_name='课程大纲',help_text='课程大纲')
teacher = models.ForeignKey(Teacher,on_delete=models.SET_NULL,null=True,blank=True)
category = models.ForeignKey(CourseCategory,on_delete=models.SET_NULL,null=True,blank=True)
class Meta:
db_table = 'tb_course'
verbose_name = '课程'
verbose_name_plural = verbose_name
def __str__(self):
return self.title
百度云 VOD 点播功能
简介
- 百度云 VOD(Video On Demand)是百度云 BCE(Baidu Cloud Engine)提供的面向音视频点播的 PaaS(Platform as a Service)服务平台,为开发者提供音视频文件的存储,管理及播放服务
- 无需了解音视频存储,转码,加密,分发,播放等技术细节,即可快速搭建安全可靠,高可定制的点播平台和应用
注册登录上传视频
- 打开百度云:
- 打开百度云:https://cloud.baidu.com/
- 可以使用已有的百度云盘账号登录
- 实名认证或者下载百度云APP到手机中,使用刷脸认证
- 认证成功之后,会赠送55元的VOD视频点播券
- 开通视频点播VOD服务
- 上传测试视频文件
- 经本人尝试和大家一致认为,用 chrome 浏览器不容易上传,我上传了十多次没成功,过一天无意间上传成功,如果上传不成功,建议换个浏览器试试
后端功能实现
apps/course/views.py
import logging
from django.shortcuts import render
from django.http import Http404
from django.views import View
from apps.course import models
# Create your views here.
logger = logging.getLogger('django')
def course_list(request):
"""
缩略图,标题,讲师,职称
:param request:
:return:
"""
courses = models.Course.objects.select_related('teacher').only('title','cover_url','teacher__name',\
'teacher__positional_title').filter(is_delete=False)
return render(request,'course/course.html',locals())
class CourseDetailView(View):
"""
/course/<int:course_id>
"""
def get(self,request,course_id):
try:
course = models.Course.objects.select_related('teacher').only('title','cover_url','video_url',\
'profile','outline','teacher__name','teacher__avatar_url','teacher__positional_title',\
'teacher__profile').filter(is_delete=False,id=course_id).first()
return render(request,'course/course_detail.html',locals())
except models.Course.DoesNotExist as e:
logger.info('当前课程出现如下异常:\n{}'.format(e))
raise Http404('此课程不存在!')
apps/course/urls.py
from django.urls import path
from apps.course import views
app_name = 'course'
urlpatterns = [
path('',views.course_list,name='index'),
path('<int:course_id>/',views.CourseDetailView.as_view(),name='course_detail'),
]
别忘了数据迁移 makemigrations 和 migrate
将测试数据导入数据库
# 在mysql数据库中添加你们自己的测试数据(如下数据仅仅是案例,不能正常导入)
insert into tb_teachers (name, positional_title, profile, avatar_url, create_time, update_time, is_delete) values
('Taka', 'python高级讲师', '讲师简介', '/media/taka.jpg', now(), now(), 0);
insert into tb_course_category (name, create_time, update_time, is_delete) values
('python基础', now(), now(), 0),
('python高级', now(), now(), 0),
('python框架', now(), now(), 0);
insert into tb_course (title, cover_url, video_url, duration, `profile`, outline, teacher_id, category_id, create_time, update_time, is_delete) values
('Creating Python Virtualenv on PyCharm',)
('你的测试视频1名称', '你的测试视频缩略图URL', '你的测试视频URL', 10.5, '你的测试视频简介', '你的视频大纲', 1, 2, now(), now(), 0),
('你的测试视频2名称', '你的测试视频缩略图URL', '你的测试视频URL', '你的测试视频时长为浮点型', '你的测试视频简介', '你的视频大纲', 1, 2, now(), now(), 0);
前端功能实现
templates/course/course.html
{% extends 'base/base.html' %}
{% load static %}
{% block title %}
在线课堂
{% endblock %}
{% block link %}
<link rel="stylesheet" href="../../static/css/course/course.css">
{% endblock %}
{% block main_start %}
<main id="course-container">
<div class="w1200">
<ul class="course-list">
{% for one_course in courses %}
<li class="course-item">
<a href="{% url 'course:course_detail' one_course.id %}">
{# <a href="#">#}
<img class="course-img" src="{{ one_course.cover_url }}"
alt="{{ one_course.title }}">
<div class="course-content">
<p class="course-info">{{ one_course.title }}</p>
<p class="course-author">{{ one_course.teacher.name }}({{ one_course.teacher.positional_title }})</p>
<p class="course-price free">免费</p>
</div>
</a>
</li>
{% endfor %}
</ul>
</div>
</main>
{% endblock %}
templates/course/course_detail.html
{% extends 'base/base.html' %}
{% load static %}
{% block title %}
课程详情
{% endblock %}
{% block link %}
<link rel="stylesheet" href="../../static/css/course/course_detail.css">
{% endblock %}
{% block main_start %}
<!-- main-contain start -->
<main id="main">
<div class="w1200">
<div class="course-contain">
<div class="course-top-contain">
<h4 class="course-title">{{ course.title }}</h4>
<div class="course-other clearfix">
<div class="share-list">
<span>分享至:</span>
<i class="PyWhich py-weibo"></i>
</div>
<div class="buy-list">
<span class="price">免费</span>
</div>
</div>
</div>
<div class="course-video" id="course-video">
<span class="course-data" style="display: none;" data-video-url="{{ course.video_url }}"
data-cover-url="{{ course.cover_url }}">
</span>
</div>
<div class="course-bottom-contain">
<div class="course-detail-list">
<div class="course-item clearfix">
<h5 class="course-title">{{ course.teacher.name }}</h5>
<div class="teacher-box clearfix">
<img src="{{ course.teacher.avatar_url }}" alt="{{ course.teacher.name }}"
title="{{ course.teacher.name }}" class="teacher-avatar">
<div class="teacher-info">
<p class="teacher-name">{{ course.teacher.name }}</p>
<p class="teacher-identify">{{ course.teacher.positional_title }}</p>
</div>
</div>
<div class="item-content">
{{ course.teacher.profile }}
</div>
</div>
<div class="course-item clearfix">
<h5 class="course-title">课程简介</h5>
<div class="item-content">
{{ course.profile }}
</div>
</div>
<div class="course-item clearfix">
<h5 class="course-title">课程大纲</h5>
<div class="item-content">
<p>{{ course.outline }}</p>
</div>
</div>
<div class="course-item clearfix">
<h5 class="course-title">帮助中心</h5>
<div class="item-content">
<p>1. 购买后的课程在线可反复观看学习,视频有效期以具体课程信息为准。 </p>
<p>2. 课程暂不支持下载观看,均为在线观看视频。 </p>
<p>3. 课程一经购买,不可转让、不可退款;仅限购买账号观看。</p>
<p>4. 如有问题请咨询客服: 400-1567-315 </p>
</div>
</div>
<div class="course-item clearfix">
<h5 class="course-title">关于潭州课堂</h5>
<div class="item-content">
湖南潭州教育网络科技有限公司拥有千余人的优秀师资团队,是一家师资丰富、教育产品类别众多的在线培训公司。公司总部座落于美丽的星城长沙,2015年9月正式入驻芯城科技园目前拥有近两万平米办公面积。
在潭州学习的学员已突破1000万人次在线学员覆盖全球,包括中国、加拿大、日本、美国、韩国等诸多国家。
</div>
</div>
</div>
<div class="course-side">
<h4 class="side-title">推荐课程</h4>
</div>
</div>
</div>
</div>
</main>
<!-- main-contain end -->
{% endblock %}
{% block script %}
<script src="https://cdn.bdstatic.com/jwplayer/latest/cyberplayer.js"></script>
<script src="{% static 'js/course/course_detail.js' %}"></script>
{% endblock %}
static/js/course/course_detail.js
$(function () {
let $course_data = $(".course-data");
let sVideoUrl = $course_data.data('video-url');
let sCoverUrl = $course_data.data('cover-url');
let player = cyberplayer("course-video").setup({
width: '100%',
height: 650,
file: sVideoUrl,
image: sCoverUrl,
autostart: false,
stretching: "uniform",
repeat: false,
volume: 100,
controls: true,
ak: '换成百度云上面自己的用户 ID'
});
});