【luffy】课程模块
目录
1. 补充 celery
1. 一台机器上运行celery的worker
在多台机器上celery的worker
worker可以运行在多台机器上，但是必须把项目代码完成copy过去
2. 公司只是想做定时任务，celery比较大，比较麻烦，一般公司会使用
pip install apscheduler
3. 如果集成到项目中，task是可以写在别的位置
有的人写在app中
4. @app.task与@shared.task 的区别
他俩作用一样，第一个需要指定app，第二个直接导入使用，直接从内存中取出来app对象
2. 课程板块相关表分析及创建
2.1 分析
1. 课程类型
免费课
实战课： Python7天入门，django从入门到精通
轻课：整一套课程的线上内容，线上+线下结合 价格更高
2. 建表思路：有个课程表，通过类型字段区分是不同的课，但是三种课的字段可能不一样
3. 每一种课设计一张表
免费课：FreeCourse
实战课：Course
轻课： LightCourse
4. 实战课分析：5表
CourseCategory 课程分类表 跟课程是一对多：一个分类下有多个实战课
Course 实战课程表
Teacher 老师表 一对多，一个老师可以录多门课程
CourseChapter 章节表 章节和课程，一对多 一个课程对多个章节
CourseSection 课时表 课时跟章节，一对多，一个章节有多个课时
5. 创建课程app，创建表，迁移表
python ../../manage.py startapp course
python manage.py makemigrations
python manage.py migrate
2.2 创建
from django.db import models
# Create your models here.
from django.db import models
from utils.models import BassModel
# 课程分类，课程，老师，章节，课时
class CourseCategory(BassModel):
"""分类"""
name = models.CharField(max_length=64, unique=True, verbose_name="分类名称")
class Meta:
db_table = "luffy_course_category"
verbose_name = "分类"
verbose_name_plural = verbose_name
def __str__(self):
return "%s" % self.name
class Course(BassModel):
"""课程"""
course_type = (
(0, '付费'),
(1, 'VIP专享'),
(2, '学位课程')
)
level_choices = (
(0, '初级'),
(1, '中级'),
(2, '高级'),
)
status_choices = (
(0, '上线'),
(1, '下线'),
(2, '预上线'),
)
name = models.CharField(max_length=128, verbose_name="课程名称")
# blank 后台管理录入可以为空，null存到数据库字段可以为空
course_img = models.ImageField(upload_to="courses", max_length=255, verbose_name="封面图片", blank=True, null=True)
# 付费类型
course_type = models.SmallIntegerField(choices=course_type, default=0, verbose_name="付费类型")
# TextField 大文本， 存html
brief = models.TextField(max_length=2048, verbose_name="详情介绍", null=True, blank=True)
# 难度等级
level = models.SmallIntegerField(choices=level_choices, default=0, verbose_name="难度等级")
# 发布日期
pub_date = models.DateField(verbose_name="发布日期", auto_now_add=True)
# 建议学习周期
period = models.IntegerField(verbose_name="建议学习周期(day)", default=7)
# 课件路径
attachment_path = models.FileField(upload_to="attachment", max_length=128, verbose_name="课件路径", blank=True,
null=True)
status = models.SmallIntegerField(choices=status_choices, default=0, verbose_name="课程状态")
# 优化字段
students = models.IntegerField(verbose_name="学习人数", default=0)
# 课程一边录，一边传
sections = models.IntegerField(verbose_name="总课时数量", default=0)
pub_sections = models.IntegerField(verbose_name="课时更新数量", default=0)
price = models.DecimalField(max_digits=6, decimal_places=2, verbose_name="课程原价", default=0)
# 关联字段
# ForeignKey的on_delete的选择：
# models.CASCADE 级联删除，用的少，除非真的要删除
# models.SET_NULL 关联字段设为空 null=True
# models.SET_DEFAULT 关联字段设为默认值 defalut='asfasd'
# models.DO_NOTHING 什么都不做， 不用强外键关联
# models.SET() 放一个函数内存地址，关联字段删除时，执行这个函数
# 外键关联的好处和坏处
# -好处在于 插入修改数据，有校验，能够保证数据不会错乱，不会出现脏数据
# -坏处在于 有校验，速度慢，数量越大，越慢，咱们可以通过程序控制不加入脏数据
# 公司内部为了效率，一般不建立外键关联，关系在 ，只是没有那条线了
# 在django中不建立外键关联，只是不创建外键，关联关系还在【关联查询】，也是使用ForeignKey，只是加一个参数，加了之后，没有约束，但你们关系还在
teacher = models.ForeignKey("Teacher", on_delete=models.DO_NOTHING, null=True, blank=True, verbose_name="授课老师",
db_constraint=False)
course_category = models.ForeignKey("CourseCategory", on_delete=models.SET_NULL, db_constraint=False, null=True,
blank=True, verbose_name="课程分类")
class Meta:
db_table = "luffy_course"
verbose_name = "课程"
verbose_name_plural = "课程"
def __str__(self):
return "%s" % self.name
class Teacher(BassModel):
"""导师"""
role_choices = (
(0, '讲师'),
(1, '导师'),
(2, '班主任'),
)
name = models.CharField(max_length=32, verbose_name="导师名")
role = models.SmallIntegerField(choices=role_choices, default=0, verbose_name="导师身份")
title = models.CharField(max_length=64, verbose_name="职位、职称")
signature = models.CharField(max_length=255, verbose_name="导师签名", help_text="导师签名", blank=True, null=True)
image = models.ImageField(upload_to="teacher", null=True, verbose_name="导师封面")
brief = models.TextField(max_length=1024, verbose_name="导师描述")
class Meta:
db_table = "luffy_teacher"
verbose_name = "导师"
verbose_name_plural = verbose_name
def __str__(self):
return "%s" % self.name
class CourseChapter(BassModel):
"""章节"""
# 跟课程一对多，一个课程多个章节，关联字段写在多的一方
# related_name='coursechapters' 反向操作时，使用的字段名，用于代替原反向查询时的’表名_set’
# 拿课程下所有章节 course.coursechapter_set.all() course.coursechapters.all()
# related_query_name='字符串' 反向查询操作时，使用的连接前缀，用于替换表名
# __ 连表查询 __表名小写__ __字符串__
course = models.ForeignKey("Course", related_name='coursechapters', on_delete=models.CASCADE, verbose_name="课程名称")
chapter = models.SmallIntegerField(verbose_name="第几章", default=1)
name = models.CharField(max_length=128, verbose_name="章节标题")
summary = models.TextField(verbose_name="章节介绍", blank=True, null=True)
pub_date = models.DateField(verbose_name="发布日期", auto_now_add=True)
class Meta:
db_table = "luffy_course_chapter"
verbose_name = "章节"
verbose_name_plural = verbose_name
def __str__(self):
# 可能会出异常
try:
return "%s:(第%s章)%s" % (self.course, self.chapter, self.name)
except Exception as e:
return "未知课程:(第%s章)%s" % (self.chapter, self.name)
class CourseSection(BassModel):
"""课时"""
section_type_choices = (
(0, '文档'),
(1, '练习'),
(2, '视频')
)
# 课时跟章节一对多，关联字段写在多的一方
chapter = models.ForeignKey("CourseChapter", related_name='coursesections', on_delete=models.CASCADE,
verbose_name="课程章节")
name = models.CharField(max_length=128, verbose_name="课时标题")
orders = models.PositiveSmallIntegerField(verbose_name="课时排序")
section_type = models.SmallIntegerField(default=2, choices=section_type_choices, verbose_name="课时种类")
section_link = models.CharField(max_length=255, blank=True, null=True, verbose_name="课时链接",
help_text="若是video，填vid,若是文档，填link")
duration = models.CharField(verbose_name="视频时长", blank=True, null=True, max_length=32)
pub_date = models.DateTimeField(verbose_name="发布时间", auto_now_add=True)
free_trail = models.BooleanField(verbose_name="是否可试看", default=False)
class Meta:
db_table = "luffy_course_section"
verbose_name = "课时"
verbose_name_plural = verbose_name
def __str__(self):
return "%s-%s" % (self.chapter, self.name)
# 表中字段不需要特别重视：只需要重视关联字段，字段多一个少一个都很正常，重视常用的几个字段即可
2.3 ForeinKey的on_delete的选择和相关参数理解
1. models.CASCADE：级联操作，如果外键对应的那条数据被删除了，那么这条数据也会被删除，用的少，除非真的要删除
2. models.PROTECT：受保护，即只要这条数据引用了外键的那条数据，那么就不能删除外键的那条数据
3. models.SET_NULL：设置为空，如果外间的那条数据被删除，那么本条数据上就将这个字段设置为空 null=Ture
4. models.SET_DEFAULT：设置默认值，如果外键的那条数据被删除，那么本条数据上将这个字段设置为默认值 defalut='默认值'
5. models.SET()：如果外键的那条数据被删除了，那么将会获取SET函数中的值作为这个外键的值
6. models.DO_NOTHING：不采取任何行为，一切全看数据库级别的约束
7. 外键关联的好处和坏处
好处在于 插入修改数据，有校验，能够保证数据不会错乱，不会出现脏数据
坏处在于 有校验，速度慢，数量越大越慢，咱们可以通过程序控制不加入任何脏数据
公司内部为了效率，一般不建立外键关联，关系在，只是没有那条线把
在django中不建立外键关联，只是不创外键，关联关系还在【关联查询】，也是使用Foregnkey,只是加了之后，没有约束但关系还在
8. 相关参数使用理解
db_table：自定义数据库的表名称
blank: 后台管理录入可以为空，
null: 存到数据库字段可以为空
default：带有默认值的参数
upload_to：重定义上传文件的路径前缀
db_constraint=False,这个就是保留跨表查询的便利(双下划线跨表查询```),但是不用约束字段
related_name：反向操作时，使用的字段名，用于代替原反向查询时的’表名_set’
如拿课程下所有章节
related_name='coursechapters'
不指定related_name：course.coursechapter_set.all()
指定related_name：course.coursechapters.all()
related_query_name='字符串' 反向查询操作时，使用的连接前缀，用于替换表名
help_text：指定说明性文本
2.4 数据录入
from django.contrib import admin
# Register your models here.
from .models import Course, CourseCategory, Teacher, CourseChapter, CourseSection
admin.site.register(Course)
admin.site.register(CourseCategory)
admin.site.register(Teacher)
admin.site.register(CourseChapter)
admin.site.register(CourseSection)
3. 前端页面
Course.vue
<template>
<div>
<Header></Header>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<Footer></Footer>
</div>
</template>
<script>
import Header from "@/components/Header"
import Footer from "@/components/Footer"
export default {
name: "Course",
components:{
Header,
Footer,
}
}
</script>
<style scoped>
</style>
FreeCourse.vue
<template>
<div class="course">
<Header></Header>
<div class="main">
<!-- 筛选条件 -->
<div class="condition">
<ul class="cate-list">
<li class="title">课程分类:</li>
<li class="this">全部</li>
<li>Python</li>
<li>Linux运维</li>
<li>Python进阶</li>
<li>开发工具</li>
<li>Go语言</li>
<li>机器学习</li>
<li>技术生涯</li>
</ul>
<div class="ordering">
<ul>
<li class="title">筛 选:</li>
<li class="default this">默认</li>
<li class="hot">人气</li>
<li class="price">价格</li>
</ul>
<p class="condition-result">共21个课程</p>
</div>
</div>
<!-- 课程列表 -->
<div class="course-list">
<div class="course-item">
<div class="course-image">
<img src="@/assets/img/course-cover.jpeg" alt="">
</div>
<div class="course-info">
<h3>Python开发21天入门 <span><img src="@/assets/img/avatar1.svg" alt="">100人已加入学习</span></h3>
<p class="teather-info">Alex 金角大王 老男孩Python教学总监 <span>共154课时/更新完成</span></p>
<ul class="lesson-list">
<li><span class="lesson-title">01 | 第1节：初识编码</span> <span class="free">免费</span></li>
<li><span class="lesson-title">01 | 第1节：初识编码初识编码</span> <span class="free">免费</span></li>
<li><span class="lesson-title">01 | 第1节：初识编码</span></li>
<li><span class="lesson-title">01 | 第1节：初识编码初识编码</span></li>
</ul>
<div class="pay-box">
<span class="discount-type">限时免费</span>
<span class="discount-price">￥0.00元</span>
<span class="original-price">原价：9.00元</span>
<span class="buy-now">立即购买</span>
</div>
</div>
</div>
<div class="course-item">
<div class="course-image">
<img src="@/assets/img/course-cover.jpeg" alt="">
</div>
<div class="course-info">
<h3>Python开发21天入门 <span><img src="@/assets/img/avatar1.svg" alt="">100人已加入学习</span></h3>
<p class="teather-info">Alex 金角大王 老男孩Python教学总监 <span>共154课时/更新完成</span></p>
<ul class="lesson-list">
<li><span class="lesson-title">01 | 第1节：初识编码</span> <span class="free">免费</span></li>
<li><span class="lesson-title">01 | 第1节：初识编码初识编码</span> <span class="free">免费</span></li>
<li><span class="lesson-title">01 | 第1节：初识编码</span></li>
<li><span class="lesson-title">01 | 第1节：初识编码初识编码</span></li>
</ul>
<div class="pay-box">
<span class="discount-type">限时免费</span>
<span class="discount-price">￥0.00元</span>
<span class="original-price">原价：9.00元</span>
<span class="buy-now">立即购买</span>
</div>
</div>
</div>
<div class="course-item">
<div class="course-image">
<img src="@/assets/img/course-cover.jpeg" alt="">
</div>
<div class="course-info">
<h3>Python开发21天入门 <span><img src="@/assets/img/avatar1.svg" alt="">100人已加入学习</span></h3>
<p class="teather-info">Alex 金角大王 老男孩Python教学总监 <span>共154课时/更新完成</span></p>
<ul class="lesson-list">
<li><span class="lesson-title">01 | 第1节：初识编码</span> <span class="free">免费</span></li>
<li><span class="lesson-title">01 | 第1节：初识编码初识编码</span> <span class="free">免费</span></li>
<li><span class="lesson-title">01 | 第1节：初识编码</span></li>
<li><span class="lesson-title">01 | 第1节：初识编码初识编码</span></li>
</ul>
<div class="pay-box">
<span class="discount-type">限时免费</span>
<span class="discount-price">￥0.00元</span>
<span class="original-price">原价：9.00元</span>
<span class="buy-now">立即购买</span>
</div>
</div>
</div>
<div class="course-item">
<div class="course-image">
<img src="@/assets/img/course-cover.jpeg" alt="">
</div>
<div class="course-info">
<h3>Python开发21天入门 <span><img src="@/assets/img/avatar1.svg" alt="">100人已加入学习</span></h3>
<p class="teather-info">Alex 金角大王 老男孩Python教学总监 <span>共154课时/更新完成</span></p>
<ul class="lesson-list">
<li><span class="lesson-title">01 | 第1节：初识编码</span> <span class="free">免费</span></li>
<li><span class="lesson-title">01 | 第1节：初识编码初识编码</span> <span class="free">免费</span></li>
<li><span class="lesson-title">01 | 第1节：初识编码</span></li>
<li><span class="lesson-title">01 | 第1节：初识编码初识编码</span></li>
</ul>
<div class="pay-box">
<span class="discount-type">限时免费</span>
<span class="discount-price">￥0.00元</span>
<span class="original-price">原价：9.00元</span>
<span class="buy-now">立即购买</span>
</div>
</div>
</div>
</div>
</div>
<Footer></Footer>
</div>
</template>
<script>
import Header from "@/components/Header"
import Footer from "@/components/Footer"
export default {
name: "FreeCourse",
data() {
return {
category: 0,
}
},
components: {
Header,
Footer,
}
}
</script>
<style scoped>
.course {
background: #f6f6f6;
}
.course .main {
width: 1100px;
margin: 35px auto 0;
}
.course .condition {
margin-bottom: 35px;
padding: 25px 30px 25px 20px;
background: #fff;
border-radius: 4px;
box-shadow: 0 2px 4px 0 #f0f0f0;
}
.course .cate-list {
border-bottom: 1px solid #333;
border-bottom-color: rgba(51, 51, 51, .05);
padding-bottom: 18px;
margin-bottom: 17px;
}
.course .cate-list::after {
content: "";
display: block;
clear: both;
}
.course .cate-list li {
float: left;
font-size: 16px;
padding: 6px 15px;
line-height: 16px;
margin-left: 14px;
position: relative;
transition: all .3s ease;
cursor: pointer;
color: #4a4a4a;
border: 1px solid transparent; /* transparent 透明 */
}
.course .cate-list .title {
color: #888;
margin-left: 0;
letter-spacing: .36px;
padding: 0;
line-height: 28px;
}
.course .cate-list .this {
color: #ffc210;
border: 1px solid #ffc210 !important;
border-radius: 30px;
}
.course .ordering::after {
content: "";
display: block;
clear: both;
}
.course .ordering ul {
float: left;
}
.course .ordering ul::after {
content: "";
display: block;
clear: both;
}
.course .ordering .condition-result {
float: right;
font-size: 14px;
color: #9b9b9b;
line-height: 28px;
}
.course .ordering ul li {
float: left;
padding: 6px 15px;
line-height: 16px;
margin-left: 14px;
position: relative;
transition: all .3s ease;
cursor: pointer;
color: #4a4a4a;
}
.course .ordering .title {
font-size: 16px;
color: #888;
letter-spacing: .36px;
margin-left: 0;
padding: 0;
line-height: 28px;
}
.course .ordering .this {
color: #ffc210;
}
.course .ordering .price {
position: relative;
}
.course .ordering .price::before,
.course .ordering .price::after {
cursor: pointer;
content: "";
display: block;
width: 0px;
height: 0px;
border: 5px solid transparent;
position: absolute;
right: 0;
}
.course .ordering .price::before {
border-bottom: 5px solid #aaa;
margin-bottom: 2px;
top: 2px;
}
.course .ordering .price::after {
border-top: 5px solid #aaa;
bottom: 2px;
}
.course .course-item:hover {
box-shadow: 4px 6px 16px rgba(0, 0, 0, .5);
}
.course .course-item {
width: 1100px;
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);
/* css3.0 过渡动画 hover 事件操作 */
transition: all .2s ease;
}
.course .course-item::after {
content: "";
display: block;
clear: both;
}
/* 顶级元素 父级元素 当前元素{} */
.course .course-item .course-image {
float: left;
width: 423px;
height: 210px;
margin-right: 30px;
}
.course .course-item .course-image img {
width: 100%;
}
.course .course-item .course-info {
float: left;
width: 596px;
}
.course-item .course-info h3 {
font-size: 26px;
color: #333;
font-weight: normal;
margin-bottom: 8px;
}
.course-item .course-info h3 span {
font-size: 14px;
color: #9b9b9b;
float: right;
margin-top: 14px;
}
.course-item .course-info h3 span img {
width: 11px;
height: auto;
margin-right: 7px;
}
.course-item .course-info .teather-info {
font-size: 14px;
color: #9b9b9b;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid #333;
border-bottom-color: rgba(51, 51, 51, .05);
}
.course-item .course-info .teather-info span {
float: right;
}
.course-item .lesson-list::after {
content: "";
display: block;
clear: both;
}
.course-item .lesson-list li {
float: left;
width: 44%;
font-size: 14px;
color: #666;
padding-left: 22px;
/* background: url("路径") 是否平铺 x轴位置 y轴位置 */
background: url("/src/assets/img/play-icon-gray.svg") no-repeat left 4px;
margin-bottom: 15px;
}
.course-item .lesson-list li .lesson-title {
/* 以下3句，文本内容过多，会自动隐藏，并显示省略符号 */
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: inline-block;
max-width: 200px;
}
.course-item .lesson-list li:hover {
background-image: url("/src/assets/img/play-icon-yellow.svg");
color: #ffc210;
}
.course-item .lesson-list li .free {
width: 34px;
height: 20px;
color: #fd7b4d;
vertical-align: super;
margin-left: 10px;
border: 1px solid #fd7b4d;
border-radius: 2px;
text-align: center;
font-size: 13px;
white-space: nowrap;
}
.course-item .lesson-list li:hover .free {
color: #ffc210;
border-color: #ffc210;
}
.course-item .pay-box::after {
content: "";
display: block;
clear: both;
}
.course-item .pay-box .discount-type {
padding: 6px 10px;
font-size: 16px;
color: #fff;
text-align: center;
margin-right: 8px;
background: #fa6240;
border: 1px solid #fa6240;
border-radius: 10px 0 10px 0;
float: left;
}
.course-item .pay-box .discount-price {
font-size: 24px;
color: #fa6240;
float: left;
}
.course-item .pay-box .original-price {
text-decoration: line-through;
font-size: 14px;
color: #9b9b9b;
margin-left: 10px;
float: left;
margin-top: 10px;
}
.course-item .pay-box .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;
text-align: center;
line-height: 38px;
}
.course-item .pay-box .buy-now:hover {
color: #fff;
background: #ffc210;
border: 1px solid #ffc210;
}
</style>
LightCourse.vue
<template>
<div class="course">
<Header></Header>
<div class="main">
<!-- 筛选条件 -->
<div class="condition">
<ul class="cate-list">
<li class="title">课程分类:</li>
<li class="this">全部</li>
<li>Python</li>
<li>Linux运维</li>
<li>Python进阶</li>
<li>开发工具</li>
<li>Go语言</li>
<li>机器学习</li>
<li>技术生涯</li>
</ul>
<div class="ordering">
<ul>
<li class="title">筛 选:</li>
<li class="default this">默认</li>
<li class="hot">人气</li>
<li class="price">价格</li>
</ul>
<p class="condition-result">共21个课程</p>
</div>
</div>
<!-- 课程列表 -->
<div class="course-list">
<div class="course-item">
<div class="course-image">
<img src="@/assets/img/course-cover.jpeg" alt="">
</div>
<div class="course-info">
<h3>Python开发21天入门 <span><img src="@/assets/img/avatar1.svg" alt="">100人已加入学习</span></h3>
<p class="teather-info">Alex 金角大王 老男孩Python教学总监 <span>共154课时/更新完成</span></p>
<ul class="lesson-list">
<li><span class="lesson-title">01 | 第1节：初识编码</span> <span class="free">免费</span></li>
<li><span class="lesson-title">01 | 第1节：初识编码初识编码</span> <span class="free">免费</span></li>
<li><span class="lesson-title">01 | 第1节：初识编码</span></li>
<li><span class="lesson-title">01 | 第1节：初识编码初识编码</span></li>
</ul>
<div class="pay-box">
<span class="discount-type">限时免费</span>
<span class="discount-price">￥0.00元</span>
<span class="original-price">原价：9.00元</span>
<span class="buy-now">立即购买</span>
</div>
</div>
</div>
<div class="course-item">
<div class="course-image">
<img src="@/assets/img/course-cover.jpeg" alt="">
</div>
<div class="course-info">
<h3>Python开发21天入门 <span><img src="@/assets/img/avatar1.svg" alt="">100人已加入学习</span></h3>
<p class="teather-info">Alex 金角大王 老男孩Python教学总监 <span>共154课时/更新完成</span></p>
<ul class="lesson-list">
<li><span class="lesson-title">01 | 第1节：初识编码</span> <span class="free">免费</span></li>
<li><span class="lesson-title">01 | 第1节：初识编码初识编码</span> <span class="free">免费</span></li>
<li><span class="lesson-title">01 | 第1节：初识编码</span></li>
<li><span class="lesson-title">01 | 第1节：初识编码初识编码</span></li>
</ul>
<div class="pay-box">
<span class="discount-type">限时免费</span>
<span class="discount-price">￥0.00元</span>
<span class="original-price">原价：9.00元</span>
<span class="buy-now">立即购买</span>
</div>
</div>
</div>
<div class="course-item">
<div class="course-image">
<img src="@/assets/img/course-cover.jpeg" alt="">
</div>
<div class="course-info">
<h3>Python开发21天入门 <span><img src="@/assets/img/avatar1.svg" alt="">100人已加入学习</span></h3>
<p class="teather-info">Alex 金角大王 老男孩Python教学总监 <span>共154课时/更新完成</span></p>
<ul class="lesson-list">
<li><span class="lesson-title">01 | 第1节：初识编码</span> <span class="free">免费</span></li>
<li><span class="lesson-title">01 | 第1节：初识编码初识编码</span> <span class="free">免费</span></li>
<li><span class="lesson-title">01 | 第1节：初识编码</span></li>
<li><span class="lesson-title">01 | 第1节：初识编码初识编码</span></li>
</ul>
<div class="pay-box">
<span class="discount-type">限时免费</span>
<span class="discount-price">￥0.00元</span>
<span class="original-price">原价：9.00元</span>
<span class="buy-now">立即购买</span>
</div>
</div>
</div>
<div class="course-item">
<div class="course-image">
<img src="@/assets/img/course-cover.jpeg" alt="">
</div>
<div class="course-info">
<h3>Python开发21天入门 <span><img src="@/assets/img/avatar1.svg" alt="">100人已加入学习</span></h3>
<p class="teather-info">Alex 金角大王 老男孩Python教学总监 <span>共154课时/更新完成</span></p>
<ul class="lesson-list">
<li><span class="lesson-title">01 | 第1节：初识编码</span> <span class="free">免费</span></li>
<li><span class="lesson-title">01 | 第1节：初识编码初识编码</span> <span class="free">免费</span></li>
<li><span class="lesson-title">01 | 第1节：初识编码</span></li>
<li><span class="lesson-title">01 | 第1节：初识编码初识编码</span></li>
</ul>
<div class="pay-box">
<span class="discount-type">限时免费</span>
<span class="discount-price">￥0.00元</span>
<span class="original-price">原价：9.00元</span>
<span class="buy-now">立即购买</span>
</div>
</div>
</div>
</div>
</div>
<Footer></Footer>
</div>
</template>
<script>
import Header from "@/components/Header"
import Footer from "@/components/Footer"
export default {
name: "FreeCourse",
data() {
return {
category: 0,
}
},
components: {
Header,
Footer,
}
}
</script>
<style scoped>
.course {
background: #f6f6f6;
}
.course .main {
width: 1100px;
margin: 35px auto 0;
}
.course .condition {
margin-bottom: 35px;
padding: 25px 30px 25px 20px;
background: #fff;
border-radius: 4px;
box-shadow: 0 2px 4px 0 #f0f0f0;
}
.course .cate-list {
border-bottom: 1px solid #333;
border-bottom-color: rgba(51, 51, 51, .05);
padding-bottom: 18px;
margin-bottom: 17px;
}
.course .cate-list::after {
content: "";
display: block;
clear: both;
}
.course .cate-list li {
float: left;
font-size: 16px;
padding: 6px 15px;
line-height: 16px;
margin-left: 14px;
position: relative;
transition: all .3s ease;
cursor: pointer;
color: #4a4a4a;
border: 1px solid transparent; /* transparent 透明 */
}
.course .cate-list .title {
color: #888;
margin-left: 0;
letter-spacing: .36px;
padding: 0;
line-height: 28px;
}
.course .cate-list .this {
color: #ffc210;
border: 1px solid #ffc210 !important;
border-radius: 30px;
}
.course .ordering::after {
content: "";
display: block;
clear: both;
}
.course .ordering ul {
float: left;
}
.course .ordering ul::after {
content: "";
display: block;
clear: both;
}
.course .ordering .condition-result {
float: right;
font-size: 14px;
color: #9b9b9b;
line-height: 28px;
}
.course .ordering ul li {
float: left;
padding: 6px 15px;
line-height: 16px;
margin-left: 14px;
position: relative;
transition: all .3s ease;
cursor: pointer;
color: #4a4a4a;
}
.course .ordering .title {
font-size: 16px;
color: #888;
letter-spacing: .36px;
margin-left: 0;
padding: 0;
line-height: 28px;
}
.course .ordering .this {
color: #ffc210;
}
.course .ordering .price {
position: relative;
}
.course .ordering .price::before,
.course .ordering .price::after {
cursor: pointer;
content: "";
display: block;
width: 0px;
height: 0px;
border: 5px solid transparent;
position: absolute;
right: 0;
}
.course .ordering .price::before {
border-bottom: 5px solid #aaa;
margin-bottom: 2px;
top: 2px;
}
.course .ordering .price::after {
border-top: 5px solid #aaa;
bottom: 2px;
}
.course .course-item:hover {
box-shadow: 4px 6px 16px rgba(0, 0, 0, .5);
}
.course .course-item {
width: 1100px;
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);
/* css3.0 过渡动画 hover 事件操作 */
transition: all .2s ease;
}
.course .course-item::after {
content: "";
display: block;
clear: both;
}
/* 顶级元素 父级元素 当前元素{} */
.course .course-item .course-image {
float: left;
width: 423px;
height: 210px;
margin-right: 30px;
}
.course .course-item .course-image img {
width: 100%;
}
.course .course-item .course-info {
float: left;
width: 596px;
}
.course-item .course-info h3 {
font-size: 26px;
color: #333;
font-weight: normal;
margin-bottom: 8px;
}
.course-item .course-info h3 span {
font-size: 14px;
color: #9b9b9b;
float: right;
margin-top: 14px;
}
.course-item .course-info h3 span img {
width: 11px;
height: auto;
margin-right: 7px;
}
.course-item .course-info .teather-info {
font-size: 14px;
color: #9b9b9b;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid #333;
border-bottom-color: rgba(51, 51, 51, .05);
}
.course-item .course-info .teather-info span {
float: right;
}
.course-item .lesson-list::after {
content: "";
display: block;
clear: both;
}
.course-item .lesson-list li {
float: left;
width: 44%;
font-size: 14px;
color: #666;
padding-left: 22px;
/* background: url("路径") 是否平铺 x轴位置 y轴位置 */
background: url("/src/assets/img/play-icon-gray.svg") no-repeat left 4px;
margin-bottom: 15px;
}
.course-item .lesson-list li .lesson-title {
/* 以下3句，文本内容过多，会自动隐藏，并显示省略符号 */
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: inline-block;
max-width: 200px;
}
.course-item .lesson-list li:hover {
background-image: url("/src/assets/img/play-icon-yellow.svg");
color: #ffc210;
}
.course-item .lesson-list li .free {
width: 34px;
height: 20px;
color: #fd7b4d;
vertical-align: super;
margin-left: 10px;
border: 1px solid #fd7b4d;
border-radius: 2px;
text-align: center;
font-size: 13px;
white-space: nowrap;
}
.course-item .lesson-list li:hover .free {
color: #ffc210;
border-color: #ffc210;
}
.course-item .pay-box::after {
content: "";
display: block;
clear: both;
}
.course-item .pay-box .discount-type {
padding: 6px 10px;
font-size: 16px;
color: #fff;
text-align: center;
margin-right: 8px;
background: #fa6240;
border: 1px solid #fa6240;
border-radius: 10px 0 10px 0;
float: left;
}
.course-item .pay-box .discount-price {
font-size: 24px;
color: #fa6240;
float: left;
}
.course-item .pay-box .original-price {
text-decoration: line-through;
font-size: 14px;
color: #9b9b9b;
margin-left: 10px;
float: left;
margin-top: 10px;
}
.course-item .pay-box .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;
text-align: center;
line-height: 38px;
}
.course-item .pay-box .buy-now:hover {
color: #fff;
background: #ffc210;
border: 1px solid #ffc210;
}
</style>
index.js
import Course from "@/views/Course";
import FreeCourse from "@/views/FreeCourse";
import LightCourse from "@/views/LightCourse";
const routes = [
{
path: '/actual-course',
name: 'course',
component: Course
},
{
path: '/free-course',
name: 'free-course',
component: FreeCourse
},
{
path: '/light-course',
name: 'light-course',
component: LightCourse
},
]
4. 课程页面接口
4.1 需求
课程分类接口
需求：查询所有课程，带分页，带排序(按order,价格，学习人数)，带过滤(按分类过滤)
4.2 课程分类接口
views.py
from django.shortcuts import render
# Create your views here.
from .models import CourseCategory, Course
from rest_framework.viewsets import GenericViewSet
from utils.views import CommonListModelMixin
from .serializer import CourseCategorySerializer
class CourseCategoryView(GenericViewSet, CommonListModelMixin):
queryset = CourseCategory.objects.all().filter(is_delete=False, is_show=True).order_by('orders')
serializer_class = CourseCategorySerializer
serializer.py
from .models import CourseCategory, Course, Teacher
from rest_framework import serializers
class CourseCategorySerializer(serializers.ModelSerializer):
class Meta:
model = CourseCategory
fields = ['id', 'name',]
urls.py
from . import views
from rest_framework.routers import SimpleRouter
router = SimpleRouter()
router.register('category', views.CourseCategoryView, 'category')
urlpatterns = [
]
urlpatterns += router.urls
# 在主路由中加 path('api/v1/course/', include('course.urls')),
4.3 所有课程接口
views.py
from django.shortcuts import render
# Create your views here.
from .models import CourseCategory, Course
from rest_framework.viewsets import GenericViewSet
from utils.views import CommonListModelMixin
from .serializer import CourseCategorySerializer,CourseSerializer
from rest_framework.mixins import ListModelMixin,RetrieveModelMixin
from .page import CommonPageNumberPagination as PageNumberPagination
from rest_framework.filters import OrderingFilter
from django_filters.rest_framework import DjangoFilterBackend
class CourseCategoryView(GenericViewSet, CommonListModelMixin):
queryset = CourseCategory.objects.all().filter(is_delete=False, is_show=True).order_by('orders')
serializer_class = CourseCategorySerializer
class CourseView(GenericViewSet,CommonListModelMixin,RetrieveModelMixin):
queryset = Course.objects.all().filter(is_delete=False,is_show=True).order_by('orders')
serializer_class = CourseSerializer
pagination_class = PageNumberPagination
filter_backends = [OrderingFilter,DjangoFilterBackend]
ordering_fields = ['orders','price','students']
# 加过滤：按课程分类过滤-- django-filter实现
filterset_fields=['course_category']
serializer.py
class TeacherSerializer(serializers.ModelSerializer):
class Meta:
model = Teacher
# fields = '__all__'
fields = ['id','name','role','title','signature','image','brief']
class CourseSerializer(serializers.ModelSerializer): # 课程列表和课程详情都用这个序列化类，序列化的字段多了好几个
# 方式三：子序列化：通过老师的序列化类来实现序列化
teacher=TeacherSerializer()
class Meta:
model = Course
# fields = ['id', 'name'] # 要序列化更多字段
fields = [
'id',
'name',
'course_img',
'price', # 课程价格
'students', # 学生数量
'pub_sections', # 发布了多少课时
'sections', # 总课时数量
'brief', # 课程介绍
'attachment_path', # 课程课件地址
'period', # 建议学习周期
'course_type_name', # 课程类型名字，表中没有这个字段，表模型中重写方法
'level_name', # 级别名字
'status_name', # 状态名字
# 'teacher_detail', # 老师 {name:xx,title:xxx}
'teacher',
'section_list', # 课时 最多4个课时 [{},{},{},{}]
] # 要序列化更多字段：图片，有多少课时，更新了多少，学生数量，价格。。。 teacher字段:{name:xx,title:asdf} 章节下的课时，最多四个课时
# 指定序列化的字段：三种方式
# 方式一：在表模型中写
# 方式二：序列化类中写
# teacher = serializers.SerializerMethodField()
# def get_teacher(self, obj):
# return {'name': obj.teacher.name, 'title': obj.teacher.title, 'image': str(obj.teacher.image)}
# 方式三：子序列化：通过老师的序列化类来实现序列化
urls.py
router.register('list', views.CourseView, 'list')
page.py
class CommonPageNumberPagination(PageNumberPagination):
page_size = 2
page_query_param = 'page'
page_size_query_param = 'size'
max_page_size = 5
