20、Django实战第20天：课程详情页

1、把course-detail.html复制到templates目录下

2、编辑course-detail.html，分析页面，继承base.html

3、编辑courses.views

....

class CourseDetailView(View):
    def get(self, request, course_id):
        return render(request, 'course-detail.html', {})

4、创建一个url，编辑courses.urls.py

...
from .views  CourseDetailView


urlpatterns = [
    ...
    url(r'^detail/(?P<course_id>\d+)/$', CourseDetailView.as_view(), name='course_detail'),

]　

5、现在去课程列表页，把进入课程详情的连接改下

现在，我们在课程列表页点击课程，就能够进入课程详情页了，只是里面的内容我们还没有进行动态展示，下面来完成

 

分析页面，先完成第一部分

编辑courses.views.py

class CourseDetailView(View):
    def get(self, request, course_id):
        course = Course.objects.get(id=course_id)   #根据课程id参数查询到课程
        return render(request, 'course-detail.html', {
            "course": course,
        })

前端展示

现在主要是"章节数"，"学习用户"该如何获取？可以在数据模型写个方法获取（Django外键反向取出数据）

class Course(models.Model):
    name = models.CharField(max_length=50, verbose_name='课程名')
    course_org = models.ForeignKey(CourseOrg, verbose_name='课程机构')
    desc = models.CharField(max_length=300, verbose_name='课程描述')
    details = models.TextField(verbose_name='课程详情')
    degree = models.CharField(verbose_name='课程难度', choices=(('cj', '初级'), ('zj', '中级'), ('gj', '高级')), max_length=2)
    learn_times = models.IntegerField(default=0, verbose_name='学习时长（分钟）')
    students = models.IntegerField(default=0, verbose_name='学习人数')
    fav_nums = models.IntegerField(default=0, verbose_name='收藏人数')
    image = models.ImageField(upload_to='courses/%Y/%m', verbose_name='封面图', max_length=100)
    click_nums = models.IntegerField(default=0, verbose_name='点击数')
    category = models.CharField(max_length=20, default='', verbose_name=u'课程类别')
    add_time = models.DateTimeField(default=datetime.now, verbose_name='添加时间')

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

    def get_lesson_nums(self):
        """获取章节数"""
        return self.lesson_set.count()

    def get_learn_students(self):
        """获取3个学习用户"""
        return self.usercourse_set.all()[:3]

    def __str__(self):
        return self.name

现在前端就可以取出这两项了　　

 

完成第二部分：授课机构

教师数和前面一样，因为Teacher表有外键关联到机构，因此我们可以通过机构来反向获取到教师数

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

    class Meta:
        verbose_name = '课程机构'
        verbose_name_plural = verbose_name
    
    def get_teacher_nums(self):
        """获取机构教师数"""
        return self.teacher_set.count()

    def __str__(self):
        return self.name

前端动态数据展示

 

完成第三部分：相关课程推荐

要实现相关课程推荐，我们可以在课程那里添加个字段（tag）,然后根据tag筛选出相关课程

①、编辑courses.models.py，在Course下添加tag字段

②数据结构同步到数据库

③编辑courses.views

class CourseDetailView(View):
    def get(self, request, course_id):
        course = Course.objects.get(id=course_id)
        
        # 进入详情页面，增加1次点击量
        course.click_nums += 1
        
        # 相关课程推荐
        tag = course.tag
        if tag:
            relate_courses = Course.objects.filter(tag=tag)[:2]
        else:
            relate_courses = []
        
        return render(request, 'course-detail.html', {
            "course": course,
            "relate_courses": relate_courses,
        })

前端动态展示数据

把课程详情部分改掉

 

第四部分：收藏功能

收藏功能可以直接使用之前在课程机构那里定义的接口

编辑course-detail.html下面的js

编辑courses.views.py

...
from operation.models import UserFavorite



class CourseDetailView(View):
    def get(self, request, course_id):
        course = Course.objects.get(id=course_id)

        # 进入详情页面，增加1次点击量
        course.click_nums += 1

        # 相关课程推荐
        tag = course.tag
        if tag:
            relate_courses = Course.objects.filter(tag=tag)[:2]
        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=1):
                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 %}放到body最后面