（项目）在线教育平台（八）

十、课程详情页功能

1、课程列表页面

1.1 前端页面配置

　　将前端页面course-list.html放到templates目录下，

　　课程相关的页面大致和base.html页面的机构一致，继承这个页面即可，重写block部分：

1.2 课程列表接口

　　在course/views.py文件中编写课程相关的接口：

from django.views.generic import View

# Create your views here.

class CourseListView(View):
    """课程列表页"""
    def get(self, request):
        return render(request, 'course-list.html')

　　首先在MxOnline/urls.py配置课程的一级路由：

urlpatterns = [
    path('course/', include('course.urls', namespace='course')),  # 课程
]

　　然后在course下新建urls.py文件，添加课程列表的路由：

from django.urls import path

from .views import CourseListView


app_name = 'course'

urlpatterns = [
    path('list/', CourseListView.as_view(), name='course_list'),  # 课程列表
]

　　现在在index.html页面修改跳转到公开课页面（课程列表页）的url：

　　在首页点击公开课即可跳转到课程列表页。

　　完善课程列表接口：

class CourseListView(View):
    """课程列表页"""
    def get(self, request):
        # 获取所有的课程
        all_courses = Course.objects.all()
        
        return render(request, 'course-list.html', {
            'all_courses': all_courses
        })

　　修改课程列表页面的前端显示代码：

1.3 分页功能

　　在课程列表接口中完善分页逻辑：

class CourseListView(View):
    """课程列表页"""
    def get(self, request):
        # 获取所有的课程
        all_courses = Course.objects.all()

        # 分页
        try:
            page = request.GET.get('page', 1)
        except PageNotAnInteger:
            page = 1
        p = Paginator(all_courses, 3, request=request)
        courses = p.page(page)

        return render(request, 'course-list.html', {
            'all_courses': courses
        })

　　修改课程列表页面的分页代码，在这之前在课程迭代显示的代码上需要加上object_list：

1.4 排序功能

　　在课程列表接口中完善排序的逻辑（根据学习人数和点击数排序）：

class CourseListView(View):
    """课程列表页"""
    def get(self, request):
        # 获取所有的课程
        all_courses = Course.objects.all()

        # 排序（学习人数，点击数）
        sort = request.GET.get('sort', '')
        if sort:
            if sort == 'students':
                all_courses = all_courses.order_by('-students')
            elif sort == 'hot':
                all_courses = all_courses.order_by('-click_nums')

        # 分页
        try:
            page = request.GET.get('page', 1)
        except PageNotAnInteger:
            page = 1
        p = Paginator(all_courses, 3, request=request)
        courses = p.page(page)

        return render(request, 'course-list.html', {
            'all_courses': courses,
            'sort': sort
        })

　　然后修改前端排序选项选中效果的代码：

1.5 热门课程推荐功能

　　在课程列表接口中完善热门课程推荐逻辑：

class CourseListView(View):
    """课程列表页"""
    def get(self, request):
        # 获取所有的课程
        all_courses = Course.objects.all()

        # 排序（学习人数，点击数）
        sort = request.GET.get('sort', '')
        if sort:
            if sort == 'students':
                all_courses = all_courses.order_by('-students')
            elif sort == 'hot':
                all_courses = all_courses.order_by('-click_nums')

        # 热门课程
        hot_courses = all_courses.order_by('-click_nums')[:2]

        # 分页
        try:
            page = request.GET.get('page', 1)
        except PageNotAnInteger:
            page = 1
        p = Paginator(all_courses, 3, request=request)
        courses = p.page(page)

        return render(request, 'course-list.html', {
            'all_courses': courses,
            'sort': sort,
            'hot_courses': hot_courses
        })

　　修改课程列表页面热门课程推荐显示的代码：

2、课程详情页面

2.1 前端页面配置

　　将前端页面course-detail.html放到templates目录下，

　　继承base.html页面，重写block部分：

2.2 课程详情接口

class CourseDetailView(View):
    """课程详情"""
    def get(self, request, course_id):
        return render(request, 'course-detail.html')

　　配置url：

from .views import CourseDetailView

urlpatterns = [
    re_path('course/(?P<course_id>d+)/', CourseDetailView.as_view(), name='course_detail'),  # 课程详情
]

　　修改课程列表页中点击课程进入课程详情页面的url：

　　现在点击课程之后，就可以进入课程详情页面。

　　前端显示需要有课程类别，章节数和学习这门课程的用户信息，需要在课程model中增加这三个数据的字段：

class Course(models.Model):
    """课程"""
    DEGREE_CHOICES = (
        ('cj', '初级'),
        ('zj', '中级'),
        ('gj', '高级')
    )

    name = models.CharField('课程名', max_length=50)
    desc = models.CharField('课程描述', max_length=300)
    detail = models.TextField('课程详情')
    degree = models.CharField('课程难度', choices=DEGREE_CHOICES, max_length=2)
    learn_times = models.IntegerField('学习时长（分钟数）', default=0)
    students = models.IntegerField('学习人数', default=0)
    fav_nums = models.IntegerField('收藏人数', default=0)
    click_nums = models.IntegerField('点击数', default=0)
    image = models.ImageField('封面图', upload_to='courses/%Y/%m', max_length=100)
    course_org = models.ForeignKey(CourseOrg, verbose_name='所属机构', on_delete=models.CASCADE, null=True, blank=True)
    category = models.CharField('课程类别', max_length=20, default='')
    add_time = models.DateTimeField('添加时间', default=datetime.now)

    class Meta:
        verbose_name = '课程'
        verbose_name_plural = verbose_name

    # 获取章节数
    def get_zj_nums(self):
        return self.lesson_set.all().count()

    # 获取学习用户
    def get_learn_users(self):
        return self.usercourse_set.all()[:5]

    def __str__(self):
        return self.name

　　迁移数据库。

　　完善课程详情接口：

class CourseDetailView(View):
    """课程详情"""
    def get(self, request, course_id):
        # 根据前端的课程id获取该课程
        course = Course.objects.get(id=int(course_id))

        # 只要点击该课程，点击数就加1
        course.click_nums += 1
        course.save()

        return render(request, 'course-detail.html', {
            'course': course
        })

　　修改课程详情页面数据显示的代码：

　　刷新页面，可以看到这个课程的详细信息。

　　右侧授课机构要显示机构教师的数量，所以需要在机构的model中添加一个获取教师数量的函数：

class CourseOrg(models.Model):
    """课程机构"""
    CATEGORY_CHOICES = (
        ('pxjg', '培训机构'),
        ('gx', '高校'),
        ('gr', '个人')
    )
    name = models.CharField('机构名称', max_length=50)
    category = models.CharField('机构类别', max_length=20, choices=CATEGORY_CHOICES, default='pxjg')
    desc = models.TextField('机构描述')
    students = models.IntegerField('学习人数', default=0)
    course_nums = models.IntegerField('课程数', default=0)
    click_nums = models.IntegerField('点击数', default=0)
    fav_nums = models.IntegerField('收藏数', default=0)
    image = models.ImageField('封面图', upload_to='org/%Y/%m', max_length=100)
    address = models.CharField('地址', max_length=150)
    city = models.ForeignKey(CityDict, verbose_name='所在城市', on_delete=models.CASCADE)
    add_time = models.DateTimeField('添加时间', default=datetime.now)

    class Meta:
        verbose_name = '课程机构'
        verbose_name_plural = verbose_name

    # 获取教师数量
    def get_teacher_nums(self):
        return self.teacher_set.all().count()

    def __str__(self):
        return self.name

　　修改课程详情页面右侧机构的显示代码：

　　右侧相关课程推荐，那么如何判断推荐的课程呢，需要给课程添加一个tag字段，如果该字段相同，那就推荐相同的tag的课程即可，在课程的model中添加字段：

class Course(models.Model):
    """课程"""
    DEGREE_CHOICES = (
        ('cj', '初级'),
        ('zj', '中级'),
        ('gj', '高级')
    )

    name = models.CharField('课程名', max_length=50)
    desc = models.CharField('课程描述', max_length=300)
    detail = models.TextField('课程详情')
    degree = models.CharField('课程难度', choices=DEGREE_CHOICES, max_length=2)
    learn_times = models.IntegerField('学习时长（分钟数）', default=0)
    students = models.IntegerField('学习人数', default=0)
    fav_nums = models.IntegerField('收藏人数', default=0)
    click_nums = models.IntegerField('点击数', default=0)
    image = models.ImageField('封面图', upload_to='courses/%Y/%m', max_length=100)
    course_org = models.ForeignKey(CourseOrg, verbose_name='所属机构', on_delete=models.CASCADE, null=True, blank=True)
    category = models.CharField('课程类别', max_length=20, default='')
    tag = models.CharField('标签', max_length=10, default='')
    add_time = models.DateTimeField('添加时间', default=datetime.now)

    class Meta:
        verbose_name = '课程'
        verbose_name_plural = verbose_name

    # 获取章节数
    def get_zj_nums(self):
        return self.lesson_set.all().count()

    # 获取学习用户
    def get_learn_users(self):
        return self.usercourse_set.all()[:5]

    def __str__(self):
        return self.name

　　然后在课程详情接口中添加课程推荐的逻辑：

class CourseDetailView(View):
    """课程详情"""
    def get(self, request, course_id):
        # 根据前端的课程id获取该课程
        course = Course.objects.get(id=int(course_id))

        # 只要点击该课程，点击数就加1
        course.click_nums += 1
        course.save()

        # 课程推荐，根据tag判断
        tag = course.tag
        if tag:
            relate_courses = Course.objects.filter(tag=tag)[1:3]
        else:
            relate_courses = []

        return render(request, 'course-detail.html', {
            'course': course,
            'relate_courses': relate_courses
        })

　　修改课程详情页面右侧推荐课程显示的代码：

2.3 课程和机构收藏功能

　　在课程详情接口中添加收藏的逻辑：

class CourseDetailView(View):
    """课程详情"""
    def get(self, request, course_id):
        # 根据前端的课程id获取该课程
        course = Course.objects.get(id=int(course_id))

        # 只要点击该课程，点击数就加1
        course.click_nums += 1
        course.save()

        # 课程推荐，根据tag判断
        tag = course.tag
        if tag:
            relate_courses = Course.objects.filter(tag=tag)[1:3]
        else:
            relate_courses = []

        # 课程收藏，机构收藏
        has_fav_course = False
        has_fav_org = False
        # 未登录由前端跳转到登录页面
        if request.user.is_authenticated:
            if UserFavorite.objects.filter(user=request.user, fav_id=course.id, fav_type=1):
                has_fav_course = True
            if UserFavorite.objects.filter(user=request.user, fav_id=course.course_org.id, fav_type=2):
                has_fav_org = True

        return render(request, 'course-detail.html', {
            'course': course,
            'relate_courses': relate_courses,
            'has_fav_course': has_fav_course,
            'has_fav_org': has_fav_org
        })

　　将base.html页面中的{% block custom_js %}{% endblock %}，放到最下面的位置，因为是js代码，要最后加载，然后在课程详情页面中重写ajax的js代码：

　　然后修改课程详情页面课程收藏，机构收藏的代码：