【Django在线教育平台】14.用户登陆后开始学习，播放课程视频

## 相关课程推荐 学习了该课程的其他用户学习的课程，选择5个进行显示 ### 课程推荐模板course-content.html ```html <div class="recent-post padding-top-20"> <h5>学习该课程的人还学习过</h5> <hr> {% for course in related_course %} {% if forloop.first %} <img class="img-responsive" title="{{ course.name }}" src="{% if course.image %}{{ course.image.url }}{% else %}{% static 'platform/images/default-course.png' %}{% endif %}" alt=""> {% endif %} <p> <b>{{ forloop.counter }}. </b><a href="{% url 'course:course_detail' course.id %}">{{ course.name }}</a> </p> {% empty %} 暂无 {% endfor %} </div> ``` ### 课程推荐视图 修改课程内筒视图，增加相关课程的显示 ```python # 课程内容---章节、视频、资源、相关推荐 class CourseContentView(View): def get(self, request, course_id): course = Course.objects.get(id=course_id) # 获取该课程的所有章节 all_lesson = course.lesson_set.all() # 获取该课程所有的下载资源 all_resource = course.courseresource_set.all() # 获取该课程所有的评论 all_comment = course.coursecomments_set.all().order_by('-add_time') comment_nums = all_comment.count() # 评论分页 try: page = request.GET.get('page', 1) except PageNotAnInteger: page = 1 # 每页显示5个 p = Paginator(all_comment, 5, request=request) all_comment_page = p.page(page) # tab选择标识，当进入分页的时候，说明已经进入评论页面，则在模板中需要active tab if request.GET.get('page'): tab_choose = 'comment' # 学习该课程的人还学过？ # 获取该课程的用户课程对应关系 all_user_course = UserCourse.objects.filter(course=course) # 获取该课程的所有用户 all_user = [user_course.user for user_course in all_user_course] # 获取这些用户在用户课程对应关系表中学习的所有课程，并排除当前课程 related_user_course = UserCourse.objects.filter(user__in=all_user).exclude(course=course) # 获取所有关联课程的id related_course_id = [user_course.course.id for user_course in related_user_course] # 获取关联课程id在课程模型中的查询集，并且按照学习人数排序，取前5个 related_course = Course.objects.filter(id__in=related_course_id).order_by('-students')[:5] print(related_course) # 标记当前页，用于页面选中active current_access_url = 'course' return render(request, 'course-content.html', locals()) ``` ## 用户登陆后可点击开始学习 点击开始学习后需要将用户和课程绑定起来，所以就需要登陆后才能点击，如果用户未登录，跳转到登录页面，登陆后跳回来 ### 访问课程内容需登录 用户未登录，不要让他能点进view 如果使用的是方法型编程可以使用装饰器`loginrequired` 而我们使用的是类。所以要继承。修改`CourseContentView(View)`视图 ```python from django.contrib.auth.mixins import LoginRequiredMixin # 课程内容---章节、视频、资源、相关推荐 class CourseContentView(LoginRequiredMixin, View): login_url = '/login/' redirect_field_name = 'next' # url参数，例如/login/?next=/course/id/1/content/ def get(self, request, course_id): # ... ``` ### 点击开始学习记录数据库 ```python # 课程内容---章节、视频、资源、相关推荐 class CourseContentView(LoginRequiredMixin, View): login_url = '/login/' redirect_field_name = 'next' # url参数，例如/login/?next=/course/id/1/content/ def get(self, request, course_id): course = Course.objects.get(id=course_id) # 查询用户和该课程是否关联，如果不存在，则创建关联 has_user_course = UserCourse.objects.filter(user=request.user, course=course) if not has_user_course: UserCourse.objects.create(user=request.user, course=course) # 然后课程的学习人数+1 course.students += 1 course.save(update_fields=['students']) # ... ``` ## 课程播放页面 这个页面与课程内容极为相似，那么是否可以共用html模板和视图呢？ ### 课程播放页面视图 直接修改`CourseContentView(LoginRequiredMixin, View)`，添加一个可选参数，用于获取视频的id ```python # 课程内容---章节、视频、资源、相关推荐 class CourseContentView(LoginRequiredMixin, View): login_url = '/login/' redirect_field_name = 'next' # url参数，例如/login/?next=/course/id/1/content/ def get(self, request, course_id, **kwargs): # kwargs 专用于获取视频id的 course = Course.objects.get(id=course_id) # 查询用户和该课程是否关联，如果不存在，则创建关联 has_user_course = UserCourse.objects.filter(user=request.user, course=course) if not has_user_course: UserCourse.objects.create(user=request.user, course=course) # 然后课程的学习人数+1 course.students += 1 course.save(update_fields=['students']) # 获取该课程的所有章节 all_lesson = course.lesson_set.all() # 获取该课程所有的下载资源 all_resource = course.courseresource_set.all() # 获取该课程所有的评论 all_comment = course.coursecomments_set.all().order_by('-add_time') comment_nums = all_comment.count() # 评论分页 try: page = request.GET.get('page', 1) except PageNotAnInteger: page = 1 # 每页显示5个 p = Paginator(all_comment, 5, request=request) all_comment_page = p.page(page) # tab选择标识，当进入分页的时候，说明已经进入评论页面，则在模板中需要active tab if request.GET.get('page'): tab_choose = 'comment' # 学习该课程的人还学过？ # 获取该课程的用户课程对应关系 all_user_course = UserCourse.objects.filter(course=course) # 获取该课程的所有用户 all_user = [user_course.user for user_course in all_user_course] # 获取这些用户在用户课程对应关系表中学习的所有课程，并排除当前课程 related_user_course = UserCourse.objects.filter(user__in=all_user).exclude(course=course) # 获取所有关联课程的id related_course_id = [user_course.course.id for user_course in related_user_course] # 获取关联课程id在课程模型中的查询集，并且按照学习人数排序，取前5个 related_course = Course.objects.filter(id__in=related_course_id).order_by('-students')[:5] # print(related_course) # ------------------------- # 处理访问video的页面 print(kwargs) show_video = False # 显示课程横幅，而不显示课程视频 video = None video_id = kwargs.get('video_id') if video_id: show_video = True # 显示课程视频播放，隐藏课程横幅 video = Video.objects.get(id=video_id) # ------------------------- # 标记当前页，用于页面选中active current_access_url = 'course' return render(request, 'course-content.html', locals()) ``` ### 课程播放url ```python from .views import CourseListView, CourseDetailView, CourseContentView, AddCommentView app_name = 'courses' urlpatterns = [ # 课程相关url path('list/', CourseListView.as_view(), name='course_list'), re_path('id/(?P<course_id>\d+)/detail/', CourseDetailView.as_view(), name="course_detail"), # 课程详情 re_path('id/(?P<course_id>\d+)/content/', CourseContentView.as_view(), name="course_content"), # 课程内容 path('add_comment/', AddCommentView.as_view(), name="add_comment"), # 添加评论，参数放在post中的 re_path('id/(?P<course_id>\d+)/video/(?P<video_id>\d+)/', CourseContentView.as_view(), name="video_content"), # 课程视频播放 ] ``` 然后访问 http://127.0.0.1:8000/course/id/1/video/1/ 即可查看播放界面 ### 课程播放模板course-content.html 直接修改课程内容模板。增加是否显示视频判断，且使用视频播放插件video-js ```html {% block css %} <!-- https://videojs.com/getting-started/ --> <link href="https://vjs.zencdn.net/7.1.0/video-js.css" rel="stylesheet"> {% endblock %} <ol class="breadcrumb"> <li><a href="#">主页</a></li> <li><a href="{% url 'course:course_list' %}">课程列表</a></li> <li><a href="{% url 'course:course_detail' course.id %}">{{ course.name }}</a></li> {% if show_video %} <li><a href="{% url 'course:course_content' course.id %}">课程内容</a></li> <li class="active">正在播放：{{ video.name }}</li> {% else %} <li class="active">内容</li> {% endif %} </ol> <div class="product-detail"> {% if show_video %} <!-- 如果是访问的视频播放页面，则显示视频框 --> <div class="product"> <video id="my-video" class="video-js vjs-fluid" controls preload="auto" width="680" height="360" poster="{% static 'platform/images/base-logo.png' %}" data-setup="{}" style="max-width: 90%; height: auto" > <source src="{{ video.url }}" type="video/mp4"></source> <p class="vjs-no-js"> 若要查看此视频，请启用JavaScript，并考虑升级到Web浏览器 <a href="https://videojs.com/html5-video-support/" target="_blank">支持HTML5视频资源</a> </p> </video> </div> {% else %} <!-- 否则显示课程介绍横幅 --> <div class="product light-gry-bg padding-left-10 padding-bottom-10 padding-top-10"> <!-- 课程基本信息 --> <h4>{{ course.name }}</h4> <ul class="row"> <!-- Step 1 --> <li class="col-sm-3"> <div class="media-left"><i class="fa fa-angle-double-up"></i></div> <div class="media-body"><span>课程难度</span> <h6>{{ course.get_degree_display }}</h6> </div> </li> <!-- Step 2 --> <li class="col-sm-3 current"> <div class="media-left"><i class="fa fa-clock-o"></i></div> <div class="media-body"><span>学习时长</span> <h6>{{ course.learn_times }}分钟</h6> </div> </li> <!-- Step 3 --> <li class="col-sm-3"> <div class="media-left"><i class="fa fa-users"></i></div> <div class="media-body"><span>学习人数</span> <h6>{{ course.students }}</h6> </div> </li> <!-- Step 4 --> <li class="col-sm-3"> <div class="media-left"><i class="fa fa-minus-square-o"></i></div> <div class="media-body"><span>课程分类</span> <h6>{{ course.category }}</h6> </div> </li> </ul> </div> {% endif %} {% block js %} <!-- 引入视频播放js --> <script src="https://vjs.zencdn.net/7.1.0/video.js"></script> {% endblock %} ``` 

明人不说暗话 领红包就是支持！！！ 来都来了，再到页面底部看下呗~ ↓ ↓ ↓

本文地址： http://blog.starmeow.cn/detail/69adc1e107f7f7d035d7baf04342e1ca/

很赞哦！ (0)