14 在线课堂

数据库模型设计

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'
  });

});