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>