路飞项目整体路程(六)

一、课程板块相关表分析及创建

	课程类型: 免费课-实战课-轻课
	
		CourseCategory  课程分类表   跟课程是一对多:一个分类下有多个实战课
		Course          实战课程表   
	    Teacher         老师表       一对多,一个老师可以录多门课程
	    CourseChapter   章节表       章节和课程,一对多 一个课程对多个章节
	    CourseSection   课时表       课时跟章节,一对多,一个章节有多个课时
	
	创建课程app 创建表 迁移表
		python manage.py startapp course
		python manage.py makemigrations
		python manage.py migrate
from django.db import models
from utils.models import BaseModel

class CourseCategory(BaseModel):
    """分类"""
    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(BaseModel):
    """课程"""
    course_type = (
        (0, '付费'),
        (1, 'VIP专享'),
        (2, '学位课程')
    )
    level_choices = (
        (0, '初级'),
        (1, '中级'),
        (2, '高级'),
    )
    status_choices = (
        (0, '上线'),
        (1, '下线'),
        (2, '预上线'),
    )
    name = models.CharField(max_length=128, verbose_name="课程名称")
    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="付费类型")
    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)

    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(BaseModel):
    """导师"""
    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(BaseModel):
    """章节"""
    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(BaseModel):
    """课时"""
    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)

二、课程板块数据录入

1)老师表

-- 老师表--
INSERT INTO luffy_teacher(id, orders, is_show, is_delete, created_time, updated_time, name, role, title, signature, image, brief) VALUES (1, 1, 1, 0, '2019-07-14 13:44:19.661327', '2019-07-14 13:46:54.246271', 'Alex', 1, '老男孩Python教学总监', '金角大王', 'teacher/alex_icon.png', '老男孩教育CTO & CO-FOUNDER 国内知名PYTHON语言推广者 51CTO学院2016\2017年度最受学员喜爱10大讲师之一 多款开源软件作者 曾任职公安部、飞信、中金公司、NOKIA中国研究院、华尔街英语、ADVENT、汽车之家等公司');

INSERT INTO luffy_teacher(id, orders, is_show, is_delete, created_time, updated_time, name, role, title, signature, image, brief) VALUES (2, 2, 1, 0, '2019-07-14 13:45:25.092902', '2019-07-14 13:45:25.092936', 'Mjj', 0, '前美团前端项目组架构师', NULL, 'teacher/mjj_icon.png', '是马JJ老师, 一个集美貌与才华于一身的男人,搞过几年IOS,又转了前端开发几年,曾就职于美团网任高级前端开发,后来因为不同意王兴(美团老板)的战略布局而出家做老师去了,有丰富的教学经验,开起车来也毫不含糊。一直专注在前端的前沿技术领域。同时,爱好抽烟、喝酒、烫头(锡纸烫)。 我的最爱是前端,因为前端妹子多。');

INSERT INTO luffy_teacher(id, orders, is_show, is_delete, created_time, updated_time, name, role, title, signature, image, brief) VALUES (3, 3, 1, 0, '2019-07-14 13:46:21.997846', '2019-07-14 13:46:21.997880', 'Lyy', 0, '老男孩Linux学科带头人', NULL, 'teacher/lyy_icon.png', 'Linux运维技术专家,老男孩Linux金牌讲师,讲课风趣幽默、深入浅出、声音洪亮到爆炸');

2)课程分类表

--  课程表--
INSERT INTO luffy_course(id, orders, is_show, is_delete, created_time, updated_time, name, course_img, course_type, brief, level, pub_date, period, attachment_path, status, students, sections, pub_sections, price, course_category_id, teacher_id) VALUES (1, 1, 1, 0, '2019-07-14 13:54:33.095201', '2019-07-14 13:54:33.095238', 'Python开发21天入门', 'courses/alex_python.png', 0, 'Python从入门到入土&&&Python从入门到入土&&&Python从入门到入土&&&Python从入门到入土&&&Python从入门到入土&&&Python从入门到入土&&&Python从入门到入土&&&Python从入门到入土&&&Python从入门到入土&&&Python从入门到入土&&&Python从入门到入土&&&Python从入门到入土', 0, '2019-07-14', 21, '', 0, 231, 120, 120, 0.00, 1, 1);
INSERT INTO luffy_course(id, orders, is_show, is_delete, created_time, updated_time, name, course_img, course_type, brief, level, pub_date, period, attachment_path, status, students, sections, pub_sections, price, course_category_id, teacher_id) VALUES (2, 2, 1, 0, '2019-07-14 13:56:05.051103', '2019-07-14 13:56:05.051142', 'Python项目实战', 'courses/mjj_python.png', 0, '', 1, '2019-07-14', 30, '', 0, 340, 120, 120, 99.00, 1, 2);
INSERT INTO luffy_course(id, orders, is_show, is_delete, created_time, updated_time, name, course_img, course_type, brief, level, pub_date, period, attachment_path, status, students, sections, pub_sections, price, course_category_id, teacher_id) VALUES (3, 3, 1, 0, '2019-07-14 13:57:21.190053', '2019-07-14 13:57:21.190095', 'Linux系统基础5周入门精讲', 'courses/lyy_linux.png', 0, '', 0, '2019-07-14', 25, '', 0, 219, 100, 100, 39.00, 2, 3);
INSERT INTO `luffy_course` VALUES ('4', '2022-04-28 12:06:36.564933', '2022-04-28 12:36:04.812789', '0', '1', '4', 'DRF从入门到放弃', 'courses/drf.png', '0', 'drf很牛逼', '4', '2022-04-28', '7', '', '0', '399', '0', '0', '77.00', '1', '1');
INSERT INTO `luffy_course` VALUES ('5', '2022-04-28 12:35:44.319734', '2022-04-28 12:35:44.319757', '0', '1', '5', 'Go语言从入门到入坑', 'courses/msbd.png', '0', 'Go语言从入门到入坑Go语言从入门到入坑Go语言从入门到入坑Go语言从入门到入坑', '0', '2022-04-28', '20', '', '0', '30', '200', '100', '66.00', '3', '1');
INSERT INTO `luffy_course` VALUES ('6', '2022-04-28 12:39:55.562716', '2022-04-28 12:39:55.562741', '0', '1', '6', 'Go语言微服务', 'courses/celery.png', '0', 'Go语言微服务Go语言微服务Go语言微服务Go语言微服务', '4', '2022-04-28', '7', '', '0', '122', '0', '0', '299.00', '3', '2');

3)课程分类表

-- 分类表--
INSERT INTO luffy_course_category(id, orders, is_show, is_delete, created_time, updated_time, name) VALUES (1, 1, 1, 0, '2019-07-14 13:40:58.690413', '2019-07-14 13:40:58.690477', 'Python');
INSERT INTO luffy_course_category(id, orders, is_show, is_delete, created_time, updated_time, name) VALUES (2, 2, 1, 0, '2019-07-14 13:41:08.249735', '2019-07-14 13:41:08.249817', 'Linux');
INSERT INTO `luffy_course_category` VALUES ('3', '2022-04-28 12:07:33.314057', '2022-04-28 12:07:33.314088', '0', '1', '3', 'Go语言');

4)章节表

-- 课程章节--
INSERT INTO luffy_course_chapter(id, orders, is_show, is_delete, created_time, updated_time, chapter, name, summary, pub_date, course_id) VALUES (1, 1, 1, 0, '2019-07-14 13:58:34.867005', '2019-07-14 14:00:58.276541', 1, '计算机原理', '', '2019-07-14', 1);
INSERT INTO luffy_course_chapter(id, orders, is_show, is_delete, created_time, updated_time, chapter, name, summary, pub_date, course_id) VALUES (2, 2, 1, 0, '2019-07-14 13:58:48.051543', '2019-07-14 14:01:22.024206', 2, '环境搭建', '', '2019-07-14', 1);
INSERT INTO luffy_course_chapter(id, orders, is_show, is_delete, created_time, updated_time, chapter, name, summary, pub_date, course_id) VALUES (3, 3, 1, 0, '2019-07-14 13:59:09.878183', '2019-07-14 14:01:40.048608', 1, '项目创建', '', '2019-07-14', 2);
INSERT INTO luffy_course_chapter(id, orders, is_show, is_delete, created_time, updated_time, chapter, name, summary, pub_date, course_id) VALUES (4, 4, 1, 0, '2019-07-14 13:59:37.448626', '2019-07-14 14:01:58.709652', 1, 'Linux环境创建', '', '2019-07-14', 3);
INSERT INTO `luffy_course_chapter` VALUES ('5', '2022-04-28 12:08:36.679922', '2022-04-28 12:08:36.680014', '0', '1', '2', '2', 'Linux5周第二章', 'Linux5周第二章Linux5周第二章Linux5周第二章Linux5周第二章Linux5周第二章', '2022-04-28', '3');
INSERT INTO `luffy_course_chapter` VALUES ('6', '2022-04-28 12:09:19.324504', '2022-04-28 12:09:19.324533', '0', '1', '2', '2', 'py实战项目第二章', 'py实战项目第二章py实战项目第二章py实战项目第二章py实战项目第二章', '2022-04-28', '2');
INSERT INTO `luffy_course_chapter` VALUES ('7', '2022-04-28 12:09:32.532905', '2022-04-29 10:11:57.546455', '0', '1', '3', '3', 'py实战项目第三章', 'py实战项目第三章py实战项目第三章py实战项目第三章', '2022-04-28', '2');
INSERT INTO `luffy_course_chapter` VALUES ('8', '2022-04-28 12:09:55.496622', '2022-04-28 12:09:55.496686', '0', '1', '1', '1', 'drf入门1', 'drf入门1drf入门1drf入门1', '2022-04-28', '4');
INSERT INTO `luffy_course_chapter` VALUES ('9', '2022-04-28 12:10:08.490618', '2022-04-28 12:10:08.490642', '0', '1', '2', '2', 'drf入门2', 'drf入门drf入门1drf入门1drf入门1drf入门1', '2022-04-28', '4');
INSERT INTO `luffy_course_chapter` VALUES ('10', '2022-04-28 12:10:22.088684', '2022-04-28 12:10:22.088710', '0', '1', '3', '3', 'drf入门3', 'drf入门1drf入门1drf入门1drf入门1drf入门1drf入门1', '2022-04-28', '4');
INSERT INTO `luffy_course_chapter` VALUES ('11', '2022-04-28 12:10:33.564141', '2022-04-28 12:10:33.564177', '0', '1', '4', '4', 'drf入门4', 'drf入门1drf入门1drf入门1drf入门1', '2022-04-28', '4');
INSERT INTO `luffy_course_chapter` VALUES ('12', '2022-04-28 12:10:43.242918', '2022-04-28 12:10:43.242947', '0', '1', '5', '5', 'drf入门5', 'drf入门1drf入门1drf入门1drf入门1', '2022-04-28', '4');
INSERT INTO `luffy_course_chapter` VALUES ('13', '2022-04-28 12:36:58.508995', '2022-04-28 12:36:58.509020', '0', '1', '1', '1', 'go第一章', 'go第一章', '2022-04-28', '5');
INSERT INTO `luffy_course_chapter` VALUES ('14', '2022-04-28 12:37:08.588265', '2022-04-28 12:37:08.588287', '0', '1', '2', '2', 'go第二章', 'go第一章go第一章go第一章', '2022-04-28', '5');
INSERT INTO `luffy_course_chapter` VALUES ('15', '2022-04-28 12:37:19.219405', '2022-04-28 12:37:19.219426', '0', '1', '3', '3', 'go第三章', 'go第一章go第一章go第一章', '2022-04-28', '5');
INSERT INTO `luffy_course_chapter` VALUES ('16', '2022-04-28 12:40:11.445750', '2022-04-28 12:40:11.445774', '0', '1', '1', '1', '微服务第一章', '微服务第一章', '2022-04-28', '6');
INSERT INTO `luffy_course_chapter` VALUES ('17', '2022-04-28 12:40:22.811647', '2022-04-28 12:40:22.811670', '0', '1', '2', '2', '微服务第二章', '微服务第二章微服务第二章微服务第二章', '2022-04-28', '6');

5)课时表

-- 课时表 --
INSERT INTO luffy_course_Section(id, is_show, is_delete, created_time, updated_time, name, orders, section_type, section_link, duration, pub_date, free_trail, chapter_id) VALUES (1, 1, 0, '2019-07-14 14:02:33.779098', '2019-07-14 14:02:33.779135', '计算机原理上', 1, 2, NULL, NULL, '2019-07-14 14:02:33.779193', 1, 1);
INSERT INTO luffy_course_Section(id, is_show, is_delete, created_time, updated_time, name, orders, section_type, section_link, duration, pub_date, free_trail, chapter_id) VALUES (2, 1, 0, '2019-07-14 14:02:56.657134', '2019-07-14 14:02:56.657173', '计算机原理下', 2, 2, NULL, NULL, '2019-07-14 14:02:56.657227', 1, 1);
INSERT INTO luffy_course_Section(id, is_show, is_delete, created_time, updated_time, name, orders, section_type, section_link, duration, pub_date, free_trail, chapter_id) VALUES (3, 1, 0, '2019-07-14 14:03:20.493324', '2019-07-14 14:03:52.329394', '环境搭建上', 1, 2, NULL, NULL, '2019-07-14 14:03:20.493420', 0, 2);
INSERT INTO luffy_course_Section(id, is_show, is_delete, created_time, updated_time, name, orders, section_type, section_link, duration, pub_date, free_trail, chapter_id) VALUES (4, 1, 0, '2019-07-14 14:03:36.472742', '2019-07-14 14:03:36.472779', '环境搭建下', 2, 2, NULL, NULL, '2019-07-14 14:03:36.472831', 0, 2);
INSERT INTO luffy_course_Section(id, is_show, is_delete, created_time, updated_time, name, orders, section_type, section_link, duration, pub_date, free_trail, chapter_id) VALUES (5, 1, 0, '2019-07-14 14:04:19.338153', '2019-07-14 14:04:19.338192', 'web项目的创建', 1, 2, NULL, NULL, '2019-07-14 14:04:19.338252', 1, 3);
INSERT INTO luffy_course_Section(id, is_show, is_delete, created_time, updated_time, name, orders, section_type, section_link, duration, pub_date, free_trail, chapter_id) VALUES (6, 1, 0, '2019-07-14 14:04:52.895855', '2019-07-14 14:04:52.895890', 'Linux的环境搭建', 1, 2, NULL, NULL, '2019-07-14 14:04:52.895942', 1, 4);
INSERT INTO `luffy_course_section` VALUES ('7', '2022-04-28 12:12:01.304920', '2022-04-28 12:12:01.304994', '0', '1', '文件操作', '2', '2', null, null, '2022-04-28 12:12:01.305074', '0', '5');
INSERT INTO `luffy_course_section` VALUES ('8', '2022-04-28 12:12:11.287759', '2022-04-28 12:12:11.287884', '0', '1', '软件操作', '2', '2', null, null, '2022-04-28 12:12:11.288079', '0', '5');
INSERT INTO `luffy_course_section` VALUES ('9', '2022-04-28 12:12:26.326077', '2022-04-28 12:12:26.326112', '0', '1', '请求响应', '1', '2', null, null, '2022-04-28 12:12:26.326174', '0', '8');
INSERT INTO `luffy_course_section` VALUES ('10', '2022-04-28 12:12:36.364356', '2022-04-28 12:12:36.364391', '0', '1', '序列化类', '2', '2', null, null, '2022-04-28 12:12:36.364446', '0', '8');
INSERT INTO `luffy_course_section` VALUES ('11', '2022-04-28 12:12:48.306119', '2022-04-28 12:12:48.306187', '0', '1', '三大认证', '1', '2', null, null, '2022-04-28 12:12:48.306396', '0', '9');
INSERT INTO `luffy_course_section` VALUES ('12', '2022-04-28 12:13:06.882558', '2022-04-28 12:13:06.882620', '0', '1', '认证', '2', '2', null, null, '2022-04-28 12:13:06.882826', '0', '9');
INSERT INTO `luffy_course_section` VALUES ('13', '2022-04-28 12:13:15.799043', '2022-04-28 12:13:15.799084', '0', '1', 'jwt认证', '1', '2', null, null, '2022-04-28 12:13:15.799146', '0', '10');
INSERT INTO `luffy_course_section` VALUES ('14', '2022-04-28 12:13:27.852981', '2022-04-28 12:13:27.853011', '0', '1', 'jwt认证2', '3', '2', null, null, '2022-04-28 12:13:27.853066', '0', '10');
INSERT INTO `luffy_course_section` VALUES ('15', '2022-04-28 12:13:37.292779', '2022-04-28 12:13:37.292806', '0', '1', '后台管理', '1', '2', null, null, '2022-04-28 12:13:37.292855', '0', '11');
INSERT INTO `luffy_course_section` VALUES ('16', '2022-04-28 12:13:51.194585', '2022-04-28 12:13:51.194612', '0', '1', '后台管理2', '2', '2', null, null, '2022-04-28 12:13:51.194660', '0', '11');
INSERT INTO `luffy_course_section` VALUES ('17', '2022-04-28 12:14:05.334836', '2022-04-28 12:14:05.334902', '0', '1', 'rbac1', '1', '2', null, null, '2022-04-28 12:14:05.335053', '0', '12');
INSERT INTO `luffy_course_section` VALUES ('18', '2022-04-28 12:14:14.039605', '2022-04-28 12:14:14.039770', '0', '1', 'rbac2', '2', '2', null, null, '2022-04-28 12:14:14.039895', '0', '12');
INSERT INTO `luffy_course_section` VALUES ('19', '2022-04-28 12:37:34.682049', '2022-04-28 12:37:34.682072', '0', '1', '环境搭建', '1', '2', null, null, '2022-04-28 12:37:34.682116', '0', '13');
INSERT INTO `luffy_course_section` VALUES ('20', '2022-04-28 12:37:46.317414', '2022-04-28 12:37:46.317440', '0', '1', '第一个helloworld', '2', '2', null, null, '2022-04-28 12:37:46.317483', '0', '13');
INSERT INTO `luffy_course_section` VALUES ('21', '2022-04-28 12:37:54.200236', '2022-04-28 12:37:54.200257', '0', '1', '变量定义', '1', '2', null, null, '2022-04-28 12:37:54.200297', '0', '14');
INSERT INTO `luffy_course_section` VALUES ('22', '2022-04-28 12:38:03.465663', '2022-04-28 12:38:03.465686', '0', '1', '常量', '2', '2', null, null, '2022-04-28 12:38:03.465731', '0', '14');
INSERT INTO `luffy_course_section` VALUES ('23', '2022-04-28 12:38:13.144613', '2022-04-28 12:38:13.144636', '0', '1', 'go结构体', '1', '2', null, null, '2022-04-28 12:38:13.144679', '0', '15');
INSERT INTO `luffy_course_section` VALUES ('24', '2022-04-28 12:38:26.312273', '2022-04-28 12:38:26.312306', '0', '1', 'go接口', '2', '2', null, null, '2022-04-28 12:38:26.312380', '0', '15');
INSERT INTO `luffy_course_section` VALUES ('25', '2022-04-28 12:40:36.531566', '2022-04-29 10:12:42.497098', '0', '1', '微服务第一章第一课时', '1', '2', null, null, '2022-04-28 12:40:36.531625', '1', '16');
INSERT INTO `luffy_course_section` VALUES ('26', '2022-04-28 12:40:45.120568', '2022-04-28 12:41:14.341536', '0', '1', '微服务第一章第二课时', '2', '2', null, null, '2022-04-28 12:40:45.120627', '0', '16');
INSERT INTO `luffy_course_section` VALUES ('27', '2022-04-28 12:40:57.477026', '2022-04-28 12:40:57.477048', '0', '1', '微服务第二章第一课时', '1', '2', null, null, '2022-04-28 12:40:57.477088', '0', '17');
INSERT INTO `luffy_course_section` VALUES ('28', '2022-04-28 12:41:04.673613', '2022-04-28 12:41:04.673634', '0', '1', '微服务第二章第二课时', '2', '2', null, null, '2022-04-28 12:41:04.673673', '0', '17');

三、课程列表页前端

1)免费课

<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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</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>

2)轻课

<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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</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>

3)实战课

<template>
  <div>
    <Header></Header>
    <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>

4)配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Course from "@/views/Course";
import FreeCourse from "@/views/FreeCourse";
import LightCourse from "@/views/LightCourse";

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/actual-course',
    name: 'actual-course',
    component: Course
  },
  {
    path: '/free-course',
    name: 'free-course',
    component: FreeCourse
  },
  {
    path: '/light-course',
    name: 'light-course',
    component: LightCourse
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

四、课程页面+课程详情页接口

1)课程分类接口

urls.py

from django.contrib import admin
from django.urls import path, re_path
from home import views
from django.views.static import serve
from django.conf import settings
from . import views
from rest_framework.routers import SimpleRouter

router = SimpleRouter()
router.register('category', views.CourseCategoryView, 'category')

urlpatterns = [
]
urlpatterns += router.urls


'''不要忘记总路由分发!!!!'''

serializer.py

class CourseCategorySerializer(serializers.ModelSerializer):
    class Meta:
        model = CourseCategory
        fields = ['id', 'name']

views.py

class CourseCategoryView(GenericViewSet, CommonListModelMixin):
    queryset = CourseCategory.objects.all().filter(is_delete=False, is_show=True).order_by('orders')
    serializer_class = CourseCategorySerializer

2)所有课程接口+课程详情页接口

serializer.py

from rest_framework import serializers
from .models import Teacher, Course, CourseCategory

class TeacherSerializer(serializers.ModelSerializer):
    class Meta:
        model = Teacher
        fields = ['id', 'name', 'role', 'title', 'signature', 'image', 'brief']

class CourseSerializer(serializers.ModelSerializer):
    teacher = TeacherSerializer()

    class Meta:
        model = Course
        fields = ['id', 'name', 'course_img', 'price', 'students', 'pub_sections', 'sections',
                  'brief', 'attachment_path', 'period', 'course_type_name', 'level_name', 'status_name', 'teacher',  'section_list'
                  ]

views.py

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']

urls.py

router.register('list', views.CourseView, 'list')

models.py

class Course(BaseModel):
    """课程"""
    course_type = (
        (0, '付费'),
        (1, 'VIP专享'),
        (2, '学位课程')
    )
    level_choices = (
        (0, '初级'),
        (1, '中级'),
        (2, '高级'),
    )
    status_choices = (
        (0, '上线'),
        (1, '下线'),
        (2, '预上线'),
    )
    name = models.CharField(max_length=128, verbose_name="课程名称")
    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="付费类型")
    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)

    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

    def course_type_name(self):
        return self.get_course_type_display()

    def level_name(self):
        return self.get_level_display()

    def status_name(self):
        return self.get_status_display()

    def section_list(self):
        section_list = []
        course_chapter_list = self.coursechapters.all()
        for chapter in course_chapter_list:
            course_section_list = chapter.coursesections.all()
            for section in course_section_list:
                section_list.append({
                    'id': section.id,
                    'name': section.name,
                    'section_link': section.section_link,
                    'duration': section.duration,
                    'free_trail': section.free_trail,
                })
            if len(section_list) >= 4:
                return section_list
        return section_list
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LoisMay

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值