mxonline实战12, 课程评论，相关课程推荐，课程视频页

 

对应github地址：第12天

 

一. 课程评论

 

1. 创建URL, VIEW

courses/views.py -> Course

 

courses/urls.py中新加

 

2. 使用模板改写course-comments.html

有额外的css，所以需要用到{% block custom_css %}；主体内容部分是<div id=main>

 

3. 修改course-video.html页面，使点击"评论","章节"可成功跳转到相应页面，同样的在course-comments.html页面也做相应操作

 

4. course-comments.html中的资料下载和讲师提示和course-video.html页面是一样的，做相同操作即可

 

 

5. 发表评论功能，使用ajax操作，如果发布成功就会刷新页面

5.1 新建view，URL；需要注意的是这里的course_id是从ajax中传来的，是字符串，需要用int()转变为整型

对应URL，这里不需要course_id了，因为已经放在前端的ajax中了

 

5.2 把ajax放在course-comment.html的{% block custom_js %}块中

{% block custom_js %}

    <script type="text/javascript">

    //添加评论

    $(document).ready(function() {

        $('#js-pl-submit').on('click', function () {

            var comments = $("#js-pl-textarea").val()

            if (comments == "") {

                alert("评论不能为空")

                return

            }

            $.ajax({

                cache: false,

                type: "POST",

                url: "{% url 'course:add_comment' %}",

                data: {'course_id': {{ course.id }}, 'comments': comments},

                async: true,

                beforeSend: function (xhr, settings) {

                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");

                },

                success: function (data) {

                    if (data.status == 'fail') {

                        if (data.msg == '用户未登录') {

                            window.location.href = "/login/";

                        } else {

                            alert(data.msg)

                        }

 

                    } else if (data.status == 'success') {

                        window.location.reload();//刷新当前页面.

                    }

                },

            });

        });

    });

 

</script>

{% endblock %}

 

5.3 显示评论内容，用一个for循环来显示评论

需要注意的是{{ user_comments.user.nick_name }} 这里的nick_name是UserProfile中的字段，也可以写为username，因为UserProfile继承了AbstractUser，AbstractUser有username字段

 

 

 

 

二. 相关课程推荐

就是页面右下角“该课的同学还学过的”的部分，这部分在课程章节页面和课程评论页面都有，下面以课程章节页面为例，课程评论页做相同操作

 

1. 首先在courses/views.py->CourseInfoView中添加代码如下，需要导入用户课程表operation/models.py->UserCourse

 

注意user_id__in=user_ids中的双下划线

补充内容：django中双下划线的使用方法

__exact        精确等于 like 'aaa'

__iexact    精确等于 忽略大小写 ilike 'aaa'

__contains    包含 like '%aaa%'

__icontains    包含 忽略大小写 ilike '%aaa%'，但是对于sqlite来说，contains的作用效果等同于icontains。

__gt    大于

__gte    大于等于

__lt    小于

__lte    小于等于

__in     存在于一个list范围内

__startswith   以...开头

__istartswith   以...开头 忽略大小写

__endswith     以...结尾

__iendswith    以...结尾，忽略大小写

__range    在...范围内

__year       日期字段的年份

__month    日期字段的月份

__day        日期字段的日

__isnull=True/False

__isnull=True 与 __exact=None的区别

 

 

 

2. 相关课程的跳转

course-video.html中搜索"该课的同学还学过", 找到相关代码

 

3. 用户和课程绑定起来

 

3.1 用户未登陆，不能让他在课程详情页点击"开始学习"进入课程章节页面

在apps/utils中新建mixin_utils.py

然后修改让CourseInfoView继承LoginRequiredMixin，继承2个类的话，从左到右依次继承

 

3.2 查询用户和课程关联情况

在CourseInfoView中添加如下代码

 

 

 

三. 课程视频页

 

1. 拷贝course-play.html到templates，并且把vedio.min.js和vedio-js.min.css放在css和js文件夹中

课程视频页和课程章节页很相似，除了多了一个视频播放窗口和相应的css, js样式，代码如下

 

其中src中的地址为七牛云上的视频上传后，自动生成的访问地址，可把该地址放在后台便于用模板标签{{video.url}}动态访问

 

<link rel="stylesheet" type="text/css" href="../css/video-js.min.css">
<script src="../js/video.min.js" type="text/javascript"></script>
 
<style>
    .video-js .vjs-big-play-button{
        top: 50%;
        left: 50%;
    }
</style>

 

 

2. 可直接拷贝course-video.html页面内容，然后修改不同的

把{% block content %}中的<div class="course-infos">代码块删除，替换为上面视频播放窗口的代码

 

3. 编写URL和view

courses/urls.py

courses/views.py

class VideoPlayView(View):
    def get(self, request, video_id):
        video = Video.objects.get(id=video_id)
        # 找到对应的course
        course = video.lesson.course

        # 查询用户是否已关联该课程
        user_courses = UserCourse.objects.filter(user=request.user, course=course)
        if not user_courses:
            user_course = UserCourse(user=request.user, course=course)
            user_course.save()
        # 取出这门课的用户课程表
        user_courses = UserCourse.objects.filter(course=course)
        # 取出用户课程表中的所有用户ID
        user_ids = [user_course.user.id for user_course in user_courses]
        # 取到这些用户的所有课程
        all_user_courses = UserCourse.objects.filter(user_id__in=user_ids)
        # 取出上面用户课程表中所有课程id
        course_ids = [user_course.course.id for user_course in all_user_courses]
        # 获取学过该课程的用户还学过的其他课程
        relate_courses = Course.objects.filter(id__in=course_ids).order_by("-click_nums")
        all_resources = CourseResource.objects.filter(course=course)
        return render(request, "course-play.html", {
            "course": course,
            "all_resources": all_resources,
            "relate_courses": relate_courses,
            "video": video,
        })

 

 

4. 在course-video.html中修改视频跳转地址

原代码为

{% for video in lesson.get_lesson_video %}

    <li>

    <a target="_blank" href='{{ video.url }}' class="J-media-item studyvideo">{{ video.name }} ({{ video.video_time }})

    <i class="study-state"></i>

    </a>

    </li>

{% endfor %}

将其中的{{video.url}}改为{% url "course:video_play" video.id %}

 

 

5. 七牛云对象存储->新建存储空间