Django网站建设-异步提交课程评论信息及课程信息展示

课程评论信息展示

设置课程评论信息的url

url(r'^courses_comment/(?P<course_id>\d+)/$', CourseCommentView.as_view(), name='courses_comment'),

设置评论信息的视图函数，展示信息包括课程信息、相关课程信息、课程评论信息、课程资源等

class CourseCommentView(View):
    #评论数据展示
    def get(self,request,course_id):
        course = Course.objects.get(id=course_id)
        course_comment = CourseComment.objects.filter(Course=course) #遍历所有课程的评论
        course_resource = CourseResource.objects.filter(Course=course)
        ##########################学过该课程的同学还学过##########################
        # 利用opreation-UserCourse记录的用户行为，在用户选择学习后，需要将用户行为存储进入该数据库中
        Other_User_List = UserCourse.objects.filter(Course=course)  # 利用课程数据遍历出所有学习该课程下的用户
        Related_Courses = set()
        Related_Courses_id = set()
        for u in Other_User_List:
            user_courses = UserCourse.objects.filter(User_id=u.id)  # 遍历所有用户，并利用用户id遍历出所有的course,注意起名字不要重复了
            for c in user_courses:
                if c.Course_id not in Related_Courses_id:  # 利用课程id进行去重
                    Related_Courses.add(c)
                    Related_Courses_id.add(c.Course_id)
        ##########################################################################
        return render(request, 'course_comment.html',{'course': course,'Related_Courses': Related_Courses,'course_comment':course_comment,'course_resource':course_resource})

与html模板进行绑定

{# 评论 #}
{% for comment in course_comment %}
    <ul class="mod-post" id="comment-list">
        <li class="post-row">
            <div class="media">
                <span target="_blank"><img src='{{ MEDIA_URL }}{{ comment.User.img }}' width='40' height='40' /></span>
            </div>
            <div class="bd">
                <div class="tit">
                    <span target="_blank">{{ comment.User.username }}</span>
                </div>
                <p class="cnt">{{ comment.Comment }}</p>
                <div class="footer clearfix">
                    <span title="创建时间" class="l timeago">时间：{{ comment.AddTime }}</span>
                </div>
            </div>
         </li>
     </ul>
{% endfor %}

课程评论信息的添加

设置添加课程评论信息的url

url(r'^courses_add_comment/$', CourseAddCommentView.as_view(), name='courses_add_comment'),

在模板中利用js实现Ajax异步提交表单

<script type="text/javascript">
    //添加评论
    $('#js-pl-submit').on('click', function(){
        var comments = $("#js-pl-textarea").val()
        if(comments == ""){
            alert("评论不能为空")
            return
        }
        $.ajax({
            cache: false,
            type: "POST",
            url:"{% url 'courses:courses_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="{% url 'user_login' %}?next={{ request.path }}";
                    }else{
                        alert(data.msg)
                    }
                }else if(data.status == 'success'){
                    window.location.reload();//刷新当前页面.
                }
            },
        });
    });

</script>

数据提交至相应url，并在后台进行逻辑判断和数据存储，完成评论功能

class CourseAddCommentView(View):
    def post(self,request):
        #首先判断是否登陆
        if not request.user.is_authenticated():
            return HttpResponse(json.dumps({'status':'fail','msg':'用户未登录'}),content_type='application/json')     #返回form的errors信息，跳转在Ajax中完成
        course_id = request.POST.get('course_id',0)
        user = request.user
        comment = request.POST.get('comments',0)
        if int(course_id)>0 and comment:
            course_comment = CourseComment()
            course = Course.objects.get(id=course_id)
            course_comment.Course = course
            course_comment.User = user
            course_comment.Comment = comment
            course_comment.save()
            return HttpResponse(json.dumps({'status':'success','msg':'评论成功'}),content_type='application/json')     #返回form的errors信息，跳转在Ajax中完成

通过模板（course.detail.html），实现前端身份验证及跳转

<div class="buy btn"><a style="color: white" 
    href="{% if request.user.is_authenticated %}
            {% url 'courses:course_video' course_detail.id %}
          {% else %}{% url 'user_login' %}?next={{ request.path }}
         {% endif %}">开始学习</a></div>

在CourseVideoView中增加用户行为的记录，只要能进入course_video.html的都视为开始学习了该课程，将用户和学习课程的行为记录在operation.UserCourse中

class CourseVideoView(View):
    def get(self,request,course_id):
        course = Course.objects.get(id=course_id)
        lesson = Lesson.objects.filter(Course=course)
        course_resource = CourseResource.objects.filter(Course=course)
        ##########################学过该课程的同学还学过##########################
        #利用opreation-UserCourse记录的用户行为，在用户选择学习后，需要将用户行为存储进入该数据库中

        Other_User_List = UserCourse.objects.filter(Course=course)  #利用课程数据遍历出所有学习该课程下的用户
        Related_Courses = set()
        Related_Courses_id = set()
        for u in Other_User_List:
            user_courses = UserCourse.objects.filter(User_id=u.id)    #遍历所有用户，并利用用户id遍历出所有的course,注意起名字不要重复了
            for c in user_courses:
                if c.Course_id not in Related_Courses_id:   #利用课程id进行去重
                    Related_Courses.add(c)
                    Related_Courses_id.add(c.Course_id)

        ##########################实现用户学习行为的记录#################################
        user = request.user
        exit_recorder = UserCourse.objects.filter(User=user,Course=course)
        if not exit_recorder:
            user_cour = UserCourse()
            user_cour.Course = course
            user_cour.User = user
            user_cour.save()
        ##################################################################################
        return render(request, 'course_video.html',{'course':course,'lesson':lesson,'course_resource':course_resource,'Related_Courses':Related_Courses,})

视频播放页面

在courses_video页面绑定跳转，跳转至视频播放页面

<a target="_blank" href='{% url "courses:video_play" v.id %}' class="J-media-item studyvideo">{{ v.VideoName }}({{ v.LearnTime }}:00)

设置好播放地址的url配置

url(r'^video_play/(?P<video_id>\d+)/$', VideoPlayView.as_view(), name='video_play'),

设置好视图函数

class VideoPlayView(View):
    def get(self,request,video_id):
        return render(request, 'video_play.html',{})

视频资源上传至七牛云

设置好视频播放模板，进行数据绑定，模板中利用必要的js库，如video.min.js等等

{% load staticfiles %}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Video.js 6.2.8</title>
    <link href="{% static 'css/video-js.css' %}" rel="stylesheet">
    <style>
        body{background-color: #191919}
        .m{ width: 740px; height: 400px; margin-left: auto; margin-right: auto; margin-top: 100px; }
    </style>
</head>

<body>
    <div class="m">
        <video id="my-video" class="video-js" controls preload="auto" width="740" height="400"
          poster="m.png" data-setup="{}">
            <source src="\media\video\2018\02\04\hahaha.mp4" type="video/mp4">
            <p class="vjs-no-js">
              To view this video please enable JavaScript, and consider upgrading to a web browser that
              <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
            </p>
          </video>
          <script src="{% static 'js/video.min.js' %}"></script>
          <script type="text/javascript">
            var myPlayer = videojs('my-video');
            videojs("my-video").ready(function(){
                var myPlayer = this;
                myPlayer.play();
            });
        </script>
    </div>

</body>
</html>