(项目)在线教育平台(八)

2018-11-20 03:25:57来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

十、课程详情页功能

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代码:

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Python学习路线,你也可以掌握

下一篇:Python字符串常用方法(一)