十、课程详情页功能
1、课程列表页面
1.1 前端页面配置
将前端页面course-list.html放到templates目录下，
课程相关的页面大致和base.html页面的机构一致，继承这个页面即可，重写block部分：
1.2 课程列表接口
在course/views.py文件中编写课程相关的接口：
1 from django.views.generic import View 2 3 # Create your views here. 4 5 class CourseListView(View): 6 """课程列表页""" 7 def get(self, request): 8 return render(request, 'course-list.html')
首先在MxOnline/urls.py配置课程的一级路由：
1 urlpatterns = [ 2 path('course/', include('course.urls', namespace='course')), # 课程 3 ]
然后在course下新建urls.py文件，添加课程列表的路由：
1 from django.urls import path 2 3 from .views import CourseListView 4 5 6 app_name = 'course' 7 8 urlpatterns = [ 9 path('list/', CourseListView.as_view(), name='course_list'), # 课程列表 10 ]
现在在index.html页面修改跳转到公开课页面（课程列表页）的url：
在首页点击公开课即可跳转到课程列表页。
完善课程列表接口：
1 class CourseListView(View): 2 """课程列表页""" 3 def get(self, request): 4 # 获取所有的课程 5 all_courses = Course.objects.all() 6 7 return render(request, 'course-list.html', { 8 'all_courses': all_courses 9 })
修改课程列表页面的前端显示代码：
1.3 分页功能
在课程列表接口中完善分页逻辑：
1 class CourseListView(View): 2 """课程列表页""" 3 def get(self, request): 4 # 获取所有的课程 5 all_courses = Course.objects.all() 6 7 # 分页 8 try: 9 page = request.GET.get('page', 1) 10 except PageNotAnInteger: 11 page = 1 12 p = Paginator(all_courses, 3, request=request) 13 courses = p.page(page) 14 15 return render(request, 'course-list.html', { 16 'all_courses': courses 17 })
修改课程列表页面的分页代码，在这之前在课程迭代显示的代码上需要加上object_list：
1.4 排序功能
在课程列表接口中完善排序的逻辑（根据学习人数和点击数排序）：
1 class CourseListView(View): 2 """课程列表页""" 3 def get(self, request): 4 # 获取所有的课程 5 all_courses = Course.objects.all() 6 7 # 排序（学习人数，点击数） 8 sort = request.GET.get('sort', '') 9 if sort: 10 if sort == 'students': 11 all_courses = all_courses.order_by('-students') 12 elif sort == 'hot': 13 all_courses = all_courses.order_by('-click_nums') 14 15 # 分页 16 try: 17 page = request.GET.get('page', 1) 18 except PageNotAnInteger: 19 page = 1 20 p = Paginator(all_courses, 3, request=request) 21 courses = p.page(page) 22 23 return render(request, 'course-list.html', { 24 'all_courses': courses, 25 'sort': sort 26 })
然后修改前端排序选项选中效果的代码：
1.5 热门课程推荐功能
在课程列表接口中完善热门课程推荐逻辑：
1 class CourseListView(View): 2 """课程列表页""" 3 def get(self, request): 4 # 获取所有的课程 5 all_courses = Course.objects.all() 6 7 # 排序（学习人数，点击数） 8 sort = request.GET.get('sort', '') 9 if sort: 10 if sort == 'students': 11 all_courses = all_courses.order_by('-students') 12 elif sort == 'hot': 13 all_courses = all_courses.order_by('-click_nums') 14 15 # 热门课程 16 hot_courses = all_courses.order_by('-click_nums')[:2] 17 18 # 分页 19 try: 20 page = request.GET.get('page', 1) 21 except PageNotAnInteger: 22 page = 1 23 p = Paginator(all_courses, 3, request=request) 24 courses = p.page(page) 25 26 return render(request, 'course-list.html', { 27 'all_courses': courses, 28 'sort': sort, 29 'hot_courses': hot_courses 30 })
修改课程列表页面热门课程推荐显示的代码：
2、课程详情页面
2.1 前端页面配置
将前端页面course-detail.html放到templates目录下，
继承base.html页面，重写block部分：
2.2 课程详情接口
1 class CourseDetailView(View): 2 """课程详情""" 3 def get(self, request, course_id): 4 return render(request, 'course-detail.html')
配置url：
1 from .views import CourseDetailView 2 3 urlpatterns = [ 4 re_path('course/(?P<course_id>d+)/', CourseDetailView.as_view(), name='course_detail'), # 课程详情 5 ]
修改课程列表页中点击课程进入课程详情页面的url：
现在点击课程之后，就可以进入课程详情页面。
前端显示需要有课程类别，章节数和学习这门课程的用户信息，需要在课程model中增加这三个数据的字段：
1 class Course(models.Model): 2 """课程""" 3 DEGREE_CHOICES = ( 4 ('cj', '初级'), 5 ('zj', '中级'), 6 ('gj', '高级') 7 ) 8 9 name = models.CharField('课程名', max_length=50) 10 desc = models.CharField('课程描述', max_length=300) 11 detail = models.TextField('课程详情') 12 degree = models.CharField('课程难度', choices=DEGREE_CHOICES, max_length=2) 13 learn_times = models.IntegerField('学习时长（分钟数）', default=0) 14 students = models.IntegerField('学习人数', default=0) 15 fav_nums = models.IntegerField('收藏人数', default=0) 16 click_nums = models.IntegerField('点击数', default=0) 17 image = models.ImageField('封面图', upload_to='courses/%Y/%m', max_length=100) 18 course_org = models.ForeignKey(CourseOrg, verbose_name='所属机构', on_delete=models.CASCADE, null=True, blank=True) 19 category = models.CharField('课程类别', max_length=20, default='') 20 add_time = models.DateTimeField('添加时间', default=datetime.now) 21 22 class Meta: 23 verbose_name = '课程' 24 verbose_name_plural = verbose_name 25 26 # 获取章节数 27 def get_zj_nums(self): 28 return self.lesson_set.all().count() 29 30 # 获取学习用户 31 def get_learn_users(self): 32 return self.usercourse_set.all()[:5] 33 34 def __str__(self): 35 return self.name
迁移数据库。
完善课程详情接口：
1 class CourseDetailView(View): 2 """课程详情""" 3 def get(self, request, course_id): 4 # 根据前端的课程id获取该课程 5 course = Course.objects.get(id=int(course_id)) 6 7 # 只要点击该课程，点击数就加1 8 course.click_nums += 1 9 course.save() 10 11 return render(request, 'course-detail.html', { 12 'course': course 13 })
修改课程详情页面数据显示的代码：
刷新页面，可以看到这个课程的详细信息。
右侧授课机构要显示机构教师的数量，所以需要在机构的model中添加一个获取教师数量的函数：
1 class CourseOrg(models.Model): 2 """课程机构""" 3 CATEGORY_CHOICES = ( 4 ('pxjg', '培训机构'), 5 ('gx', '高校'), 6 ('gr', '个人') 7 ) 8 name = models.CharField('机构名称', max_length=50) 9 category = models.CharField('机构类别', max_length=20, choices=CATEGORY_CHOICES, default='pxjg') 10 desc = models.TextField('机构描述') 11 students = models.IntegerField('学习人数', default=0) 12 course_nums = models.IntegerField('课程数', default=0) 13 click_nums = models.IntegerField('点击数', default=0) 14 fav_nums = models.IntegerField('收藏数', default=0) 15 image = models.ImageField('封面图', upload_to='org/%Y/%m', max_length=100) 16 address = models.CharField('地址', max_length=150) 17 city = models.ForeignKey(CityDict, verbose_name='所在城市', on_delete=models.CASCADE) 18 add_time = models.DateTimeField('添加时间', default=datetime.now) 19 20 class Meta: 21 verbose_name = '课程机构' 22 verbose_name_plural = verbose_name 23 24 # 获取教师数量 25 def get_teacher_nums(self): 26 return self.teacher_set.all().count() 27 28 def __str__(self): 29 return self.name
修改课程详情页面右侧机构的显示代码：
右侧相关课程推荐，那么如何判断推荐的课程呢，需要给课程添加一个tag字段，如果该字段相同，那就推荐相同的tag的课程即可，在课程的model中添加字段：
1 class Course(models.Model): 2 """课程""" 3 DEGREE_CHOICES = ( 4 ('cj', '初级'), 5 ('zj', '中级'), 6 ('gj', '高级') 7 ) 8 9 name = models.CharField('课程名', max_length=50) 10 desc = models.CharField('课程描述', max_length=300) 11 detail = models.TextField('课程详情') 12 degree = models.CharField('课程难度', choices=DEGREE_CHOICES, max_length=2) 13 learn_times = models.IntegerField('学习时长（分钟数）', default=0) 14 students = models.IntegerField('学习人数', default=0) 15 fav_nums = models.IntegerField('收藏人数', default=0) 16 click_nums = models.IntegerField('点击数', default=0) 17 image = models.ImageField('封面图', upload_to='courses/%Y/%m', max_length=100) 18 course_org = models.ForeignKey(CourseOrg, verbose_name='所属机构', on_delete=models.CASCADE, null=True, blank=True) 19 category = models.CharField('课程类别', max_length=20, default='') 20 tag = models.CharField('标签', max_length=10, default='') 21 add_time = models.DateTimeField('添加时间', default=datetime.now) 22 23 class Meta: 24 verbose_name = '课程' 25 verbose_name_plural = verbose_name 26 27 # 获取章节数 28 def get_zj_nums(self): 29 return self.lesson_set.all().count() 30 31 # 获取学习用户 32 def get_learn_users(self): 33 return self.usercourse_set.all()[:5] 34 35 def __str__(self): 36 return self.name
然后在课程详情接口中添加课程推荐的逻辑：
1 class CourseDetailView(View): 2 """课程详情""" 3 def get(self, request, course_id): 4 # 根据前端的课程id获取该课程 5 course = Course.objects.get(id=int(course_id)) 6 7 # 只要点击该课程，点击数就加1 8 course.click_nums += 1 9 course.save() 10 11 # 课程推荐，根据tag判断 12 tag = course.tag 13 if tag: 14 relate_courses = Course.objects.filter(tag=tag)[1:3] 15 else: 16 relate_courses = [] 17 18 return render(request, 'course-detail.html', { 19 'course': course, 20 'relate_courses': relate_courses 21 })
修改课程详情页面右侧推荐课程显示的代码：
2.3 课程和机构收藏功能
在课程详情接口中添加收藏的逻辑：
1 class CourseDetailView(View): 2 """课程详情""" 3 def get(self, request, course_id): 4 # 根据前端的课程id获取该课程 5 course = Course.objects.get(id=int(course_id)) 6 7 # 只要点击该课程，点击数就加1 8 course.click_nums += 1 9 course.save() 10 11 # 课程推荐，根据tag判断 12 tag = course.tag 13 if tag: 14 relate_courses = Course.objects.filter(tag=tag)[1:3] 15 else: 16 relate_courses = [] 17 18 # 课程收藏，机构收藏 19 has_fav_course = False 20 has_fav_org = False 21 # 未登录由前端跳转到登录页面 22 if request.user.is_authenticated: 23 if UserFavorite.objects.filter(user=request.user, fav_id=course.id, fav_type=1): 24 has_fav_course = True 25 if UserFavorite.objects.filter(user=request.user, fav_id=course.course_org.id, fav_type=2): 26 has_fav_org = True 27 28 return render(request, 'course-detail.html', { 29 'course': course, 30 'relate_courses': relate_courses, 31 'has_fav_course': has_fav_course, 32 'has_fav_org': has_fav_org 33 })
将base.html页面中的{% block custom_js %}{% endblock %}，放到最下面的位置，因为是js代码，要最后加载，然后在课程详情页面中重写ajax的js代码：
然后修改课程详情页面课程收藏，机构收藏的代码：
