公开课界面实现
标签： django
公开课
公开课首页实现
首页内容展示，通过获取所有的课程信息，其中存在排序功能显示。
{% extends 'common/base.html' %}
{% load staticfiles %}
{% block custom_bread %}
<section>
<div class="wp">
<ul class="crumbs">
<li><a href="index.html">首页</a>></li>
<li>课程列表</li>
</ul>
</div>
</section>
{% endblock %}
{% block custom_content %}
<section>
<div class="wp">
<div class="list" style="margin-top:0;">
<div class="left layout">
<div class="head">
<ul class="tab_header">
<li class="{% ifequal sort '' %}active{% endifequal %} "><a href="?sort=">最新 </a></li>
<li class="{% ifequal sort 'hot' %}active{% endifequal %} "><a href="?sort=hot">最热门</a></li>
<li class="{% ifequal sort 'students' %}active{% endifequal %} "><a href="?sort=students">参与人数</a></li>
</ul>
</div>
<div id="inWindow">
<div class="tab_cont " id="content">
<div class="group_list">
{% for course in all_course.object_list %}
<div class="box">
<a href="course-detail.html">
<img width="280" height="350" class="scrollLoading" src="{{ MEDIA_URL }}{{ course.image }}"/>
</a>
<div class="des">
<a href="course-detail.html">
<h2>{{ course.name }}</h2>
</a>
<span class="fl">时长：<i class="key">{{ course.learn_time }}</i></span>
<span class="fr">学习人数：{{ course.students }} </span>
</div>
<div class="bottom">
<a href="course-detail.html"><span class="fl">来自{{ course.course_org.name }}</span></a>
<span class="star fr notlogin
" data-favid="15">
{{ course.fav_nums }}
</span>
</div>
</div>
{% endfor %}
</div>
<div class="pageturn">
<ul class="pagelist">
{% if all_course.has_previous %}
<li class="long"><a href="?{{ all_course.previous_page_number.querystring }}">上一页</a></li>
{% endif %}
{% for page in all_course.pages %}
{% if page %}
{% ifequal page all_course.number %}
<li class="active"><a href="">{{ page }}</a></li>
{% else %}
<li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li>
{% endifequal %}
{% else %}
<li class="none"><a href="">...</a></li>
{% endif %}
{% endfor %}
{% if all_course.has_next %}
<li class="long"><a href="?{{ all_course.next_page_number.querystring }}">下一页</a></li>
{% endif %}
</ul>
</div>
</div>
</div>
</div>
<div class="right layout">
<div class="head">热门课程推荐</div>
<div class="group_recommend">
{% for course in hot_course %}
<dl>
<dt>
<a target="_blank" href="">
<img width="240" height="220" class="scrollLoading" src="{{ MEDIA_URL }}{{ course.image }}"/>
</a>
</dt>
<dd>
<a target="_blank" href=""><h2> {{ course.name }}</h2></a>
<span class="fl">难度：<i class="key">{{ course.get_degree_display }}</i></span>
</dd>
</dl>
{% endfor %}
</div>
</div>
</div>
</div>
</section>
{% endblock %}
# _*_ encoding:utf-8 _*_
from django.shortcuts import render
from django.views.generic import View
from pure_pagination import Paginator, EmptyPage, PageNotAnInteger
from .models import Course
# Create your views here.
class CourseIndexView(View):
"""
课程列表首页
"""
def get(self, request):
all_course = Course.objects.all().order_by('-add_time')
# 热门
hot_course = Course.objects.all().order_by('-click_nums')[:3]
# 排序
sort = request.GET.get('sort', '')
if sort:
if sort == 'student':
all_course = all_course.order_by('-students')
elif sort == 'hot':
all_course = all_course.order_by('-click_nums')
# 分页功能展示
try:
page = request.GET.get('page', 1)
except PageNotAnInteger:
page = 1
p = Paginator(all_course, 3, request=request)
courses = p.page(page)
return render(request, 'course-list.html', {
'all_course': courses,
'hot_course': hot_course,
'sort': sort
})
课程详情页编辑
课程详情
通过获取课程id跳转详情页，其中对课程信息model中添加两个函数，其中通过外键的方式 获取课程总数 以及课程学习学员的信息。关于收藏则通过两个收藏变量查询的方式，收藏异步还是调用之前的公共收藏内容。
教师统计跟之前的方式一样。
{% extends 'common/base.html' %}
{% load staticfiles %}
{% block custom_bread %}
<section>
<div class="wp">
<div class="crumbs">
<ul>
<li><a href="{% url 'index' %}">首页</a>></li>
<li><a href="{% url 'course:course_list' %}">公开课程</a>></li>
<li>课程详情</li>
</ul>
</div>
</div>
</section>
{% endblock %}
{% block custom_content %}
<section>
<div class="wp">
<div class="groupPurchase_detail detail">
<div class="toppro">
<div class="left">
<div class="picbox">
<div class="tb-booth tb-pic">
<img width="440" height="445" src="{{ MEDIA_URL }}{{ course.image }}" class="jqzoom" />
</div>
</div>
<div class="des">
<h1 title="django 从入门到精通体验开始了">{{ course.name }}</h1>
<span class="key">{{ course.desc }}</span>
<div class="prize">
<span class="fl">难度：<i class="key">{{ course.get_degree_display }}</i></span>
<span class="fr">学习人数：{{ course.students }}</span>
</div>
<ul class="parameter">
<li><span class="pram word3">时 长：</span><span>{{ course.learn_time }}</span></li>
<li><span class="pram word3">章 节 数：</span><span>{{ course.get_lesson_count }}</span></li>
<li><span class="pram word3">课程类别：</span><span title="">{{ course.category }}</span></li>
<li class="piclist"><span class="pram word4">学习用户：</span>
{% for user in course.get_students_list %}
<span class="pic"><img width="40" height="40" src="{{ MEDIA_URL }}{{ user.user.image }}"/></span>
{% endfor %}
</li>
</ul>
<div class="btns">
<div class="btn colectgroupbtn" id="jsLeftBtn">
收藏
</div>
<div class="buy btn"><a style="color: white" href="course-video.html">开始学习</a></div>
</div>
</div>
<div class="group-share-box">
<div class="bdsharebuttonbox"
data-text="django开始了"
data-desc="我在#慕课网#发现了"
data-comment=""
data-url="/group/groupdetail/15/">
<span class="fl">分享到：</span>
<a href="#" class="bds_more" data-cmd="more"></a>
<a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a>
<a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a>
<a title="分享到腾讯微博" href="#" class="bds_tqq" data-cmd="tqq"></a>
<a title="分享到人人网" href="#" class="bds_renren" data-cmd="renren"></a>
<a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a>
</div>
</div>
</div>
<div class="right">
<div class="head">
<h1>授课机构</h1>
<p>世界名校，课程权威</p>
</div>
<div class="pic">
<a href="/company/14/">
<img width="150" height="80" src="../media/org/2016/11/bjdx.jpg"/>
</a>
</div>
<a href="/company/14/">
<h2 class="center" title="清华大学">北京大学</h2>
</a>
<div class="btn notlogin
"data-favid="14" id="jsRightBtn">
已收藏
</div>
<div class="clear">
<ul>
<li>
<span>课 程 数： 5</span>
</li>
<li>
<span>教 师 数： 0</span>
</li>
<li>所在地区： 北京市</li>
<li>认 证 :
<img title="金牌机构", src="../images/gold.png"/>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="wp">
<div class="list groupPurchase_detail_pro">
<div class="left layout">
<div class="head">
<ul class="tab_header">
<li class="active">课程详情</li>
</ul>
</div>
<div class="tab_cont tab_cont1">
<p> </P>
</div>
<div class="tab_cont tab_cont2" >
<div class="comment">
<div class="comenlist">
</div>
</div>
</div>
</div>
<div class="right layout">
<div class="head">相关课程推荐</div>
<div class="group_recommend">
<dl>
<dt>
<a target="_blank" href="">
<img width="240" height="220" class="scrollLoading" src="../media/courses/2016/11/540e57300001d6d906000338-240-135_mvvGYHL.jpg"/>
</a>
</dt>
<dd>
<a target="_blank" href=""><h2> django实战项目</h2></a>
<span class="fl">学习时长：<i class="key">0</i></span>
</dd>
</dl>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
class Course(models.Model):
course_org = models.ForeignKey(CourseOrg, verbose_name=u'课程机构')
name = models.CharField(max_length=128, verbose_name=u'课程名称')
desc = models.CharField(max_length=256, verbose_name=u'课程描述')
category = models.CharField(default=u'后端开发', max_length=20, verbose_name=u'课程分类')
detail = models.TextField(verbose_name=u'课程详情')
degree = models.CharField(choices=(('cj', '初级'), ('zj', '中级'), ('gj', '高级')), max_length=2, verbose_name=u'课程难度')
learn_time = models.IntegerField(default=0, verbose_name=u'课程时长')
students = models.IntegerField(default=0, verbose_name=u'学习人数')
fav_nums = models.IntegerField(default=0, verbose_name=u'收藏人数')
click_nums = models.IntegerField(default=0, verbose_name=u'点击数')
image = models.ImageField(upload_to='courses/%Y/%m', verbose_name=u'封面图', max_length=128)
add_time = models.DateTimeField(default=datetime.now, verbose_name=u'添加时间')
class Meta:
verbose_name = u'课程信息'
verbose_name_plural = verbose_name
def get_lesson_count(self):
# 课程章节外键获取总数
return self.lesson_set.all().count()
def get_students_list(self):
# 根据用户操作外键获取学习用户
return self.usercourse_set.all()[:5]
def __unicode__(self):
return self.name
class CourseDetialView(View):
"""
课程详情信息页
"""
def get(self, request, course_id):
course = Course.objects.get(id=course_id)
return render(request, 'course-detail.html', {
'course': course,
})
课程推荐
听过添加tag字段来进行比对，当相同时则推荐相同的。
{% extends 'common/base.html' %}
{% load staticfiles %}
{% block custom_bread %}
<section>
<div class="wp">
<div class="crumbs">
<ul>
<li><a href="{% url 'index' %}">首页</a>></li>
<li><a href="{% url 'course:course_list' %}">公开课程</a>></li>
<li>课程详情</li>
</ul>
</div>
</div>
</section>
{% endblock %}
{% block custom_content %}
<section>
<div class="wp">
<div class="groupPurchase_detail detail">
<div class="toppro">
<div class="left">
<div class="picbox">
<div class="tb-booth tb-pic">
<img width="440" height="445" src="{{ MEDIA_URL }}{{ course.image }}" class="jqzoom" />
</div>
</div>
<div class="des">
<h1 title="django 从入门到精通体验开始了">{{ course.name }}</h1>
<span class="key">{{ course.desc }}</span>
<div class="prize">
<span class="fl">难度：<i class="key">{{ course.get_degree_display }}</i></span>
<span class="fr">学习人数：{{ course.students }}</span>
</div>
<ul class="parameter">
<li><span class="pram word3">时 长：</span><span>{{ course.learn_time }}</span></li>
<li><span class="pram word3">章 节 数：</span><span>{{ course.get_lesson_count }}</span></li>
<li><span class="pram word3">课程类别：</span><span title="">{{ course.category }}</span></li>
<li class="piclist"><span class="pram word4">学习用户：</span>
{% for user in course.get_students_list %}
<span class="pic"><img width="40" height="40" src="{{ MEDIA_URL }}{{ user.user.image }}"/></span>
{% endfor %}
</li>
</ul>
<div class="btns">
<div class="btn colectgroupbtn" id="jsLeftBtn">
{% if has_course_fav %} 已收藏 {% else %} 收藏 {% endif %}
</div>
<div class="buy btn"><a style="color: white" href="course-video.html">开始学习</a></div>
</div>
</div>
<div class="group-share-box">
<div class="bdsharebuttonbox"
data-text="django开始了"
data-desc="我在#慕课网#发现了"
data-comment=""
data-url="/group/groupdetail/15/">
<span class="fl">分享到：</span>
<a href="#" class="bds_more" data-cmd="more"></a>
<a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a>
<a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a>
<a title="分享到腾讯微博" href="#" class="bds_tqq" data-cmd="tqq"></a>
<a title="分享到人人网" href="#" class="bds_renren" data-cmd="renren"></a>
<a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a>
</div>
</div>
</div>
<div class="right">
<div class="head">
<h1>授课机构</h1>
<p>世界名校，课程权威</p>
</div>
<div class="pic">
<a href="/company/14/">
<img width="150" height="80" src="{{ MEDIA_URL }}{{ course.course_org.image }}"/>
</a>
</div>
<a href="/company/14/">
<h2 class="center" title="清华大学">{{ course.course_org.name }}</h2>
</a>
<div class="btn notlogin
"data-favid="14" id="jsRightBtn">
{% if has_course_org_fav %} 已收藏 {% else %} 收藏 {% endif %}
</div>
<div class="clear">
<ul>
<li>
<span>课 程 数： {{ course.course_org.course_nums}}</span>
</li>
<li>
<span>教 师 数： {{ course.course_org.get_teacher_count }}</span>
</li>
<li>所在地区： {{ course.course_org.address }}</li>
<li>认 证 :
<img title="金牌机构", src="{% static 'images/gold.png' %}"/>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="wp">
<div class="list groupPurchase_detail_pro">
<div class="left layout">
<div class="head">
<ul class="tab_header">
<li class="active">课程详情</li>
</ul>
</div>
<div class="tab_cont tab_cont1">
<p>{{ course.detail }}</p>
</div>
<div class="tab_cont tab_cont2" >
<div class="comment">
<div class="comenlist">
</div>
</div>
</div>
</div>
<div class="right layout">
<div class="head">相关课程推荐</div>
<div class="group_recommend">
{% for tag_course in tag_courses %}
<dl>
<dt>
<a target="_blank" href="">
<img width="240" height="220" class="scrollLoading" src="{{ MEDIA_URL }}{{ tag_course.image }}"/>
</a>
</dt>
<dd>
<a target="_blank" href=""><h2>{{ tag_course.name }}</h2></a>
<span class="fl">学习时长：<i class="key">{{ tag_course.learn_time }}</i></span>
</dd>
</dl>
{% endfor %}
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block custom_js %}
<script type="text/javascript">
function add_fav(current_elem, fav_id, fav_type){
$.ajax({
cache: false,
type: "POST",
url:"{% url 'org:add_fav' %}",
data:{'fav_id':fav_id, 'fav_type':fav_type},
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.html";
}else{
alert(data.msg)
}
}else if(data.status == 'success'){
current_elem.text(data.msg)
}
},
});
}
$('#jsLeftBtn').on('click', function(){
add_fav($(this), {{ course.id }}, 1);
});
$('#jsRightBtn').on('click', function(){
add_fav($(this), {{ course.course_org.id }}, 2);
});
</script>
{% endblock %}
class CourseDetialView(View):
"""
课程详情信息页
"""
def get(self, request, course_id):
course = Course.objects.get(id=course_id)
has_course_fav = False
has_course_org_fav = False
if request.user.is_authenticated():
if UserFavorite.objects.filter(user=request.user, fav_id=course.id, fav_type=1):
has_course_fav = True
if UserFavorite.objects.filter(user=request.user, fav_id=course.course_org.id, fav_type=2):
has_course_org_fav = True
tag_courses = Course.objects.filter(tag=course.tag)
return render(request, 'course-detail.html', {
'course': course,
'tag_courses': tag_courses,
'has_course_fav': has_course_fav,
'has_course_org_fav': has_course_org_fav
})
课程章节信息
章节页
同样的页面加载，存在新的样式引用。添加章节连接地址，以及重载unicode方法。
{% extends 'common/base.html' %}
{% load staticfiles %}
{% block custom_bread %}
<section>
<div class="wp">
<div class="crumbs">
<ul>
<li><a href="{% url 'index' %}">首页</a>></li>
<li><a href="{% url 'course:course_list' %}">公开课程</a>></li>
<li><a href="{% url 'course:course_detail' course.id %}">课程详情</a>></li>
<li>章节详情</li>
</ul>
</div>
</div>
</section>
{% endblock %}
{% block custom_css %}
<link rel="stylesheet" type="text/css" href="{% static 'css/muke/base.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/muke/common-less.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/learn-less.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/aui.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/mooc.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/common-less.css' %}">
{% endblock %}
{% block custom_content %}
<div id="main">
<div class="course-infos">
<div class="w pr">
<div style="height: 15px" class="path">
</div>
<div class="hd">
<h2 class="l">{{ course.name }}</h2>
</div>
<div class="statics clearfix">
<div class="static-item ">
<span class="meta-value"><strong>{{ course.get_degree_display }}</strong></span>
<span class="meta">难度</span>
<em></em>
</div>
<div class="static-item static-time">
<span class="meta-value">{{ course.learn_time }}分钟</span>
<span class="meta">时长</span>
<em></em>
</div>
<div class="static-item">
<span class="meta-value"><strong>{{ course.students }}</strong></span>
<span class="meta">学习人数</span>
<em></em>
</div>
</div>
</div>
</div>
<div class="course-info-main clearfix w has-progress">
<div class="info-bar clearfix">
<div class="content-wrap clearfix">
<div class="content">
<div class="mod-tab-menu">
<ul class="course-menu clearfix">
<li><a class="ui-tabs-active active" id="learnOn" href="{% url 'course:course_info' course.id %}"><span>章节</span></a></li>
<li><a id="commentOn" class="" href="{% url 'course:course_comment' course.id %}"><span>评论</span></a></li>
</ul>
</div>
<div id="notice" class="clearfix">
<div class="l"> <strong>课程公告:</strong> <a href="javascript:void(0)">Spring的文档以及相关的jar文件已上传</a> </div>
</div>
<div class="mod-chapters">
{% for chapter in course.ger_lesson_detail %}
<div class="chapter chapter-active" >
<h3>
<strong><i class="state-expand"></i>{{ chapter.name }}</strong>
</h3>
<ul class="video">
{% for video in chapter.get_video_info %}
<li>
<a target="_blank" href='{{ MEDIA_URL }}{{ video.url }}' class="J-media-item studyvideo">{{ video.name }} ({{ video.learn_time }})
<i class="study-state"></i>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
</div>
<div class="aside r">
<div class="bd">
<div class="box mb40">
<h4>资料下载</h4>
<ul class="downlist">
{% for resource in all_resource %}
<li>
<span ><i class="aui-iconfont aui-icon-file"></i> {{ resource.name }}</span>
<a href="{{ MEDIA_URL }}{{ resource.download }}" class="downcode" target="_blank" download="" data-id="274" title="">下载</a>
</li>
{% endfor %}
</ul>
</div>
<div class="box mb40">
<h4>讲师提示</h4>
<div class="teacher-info">
<a href="/u/315464/courses?sort=publish" target="_blank">
<img src='{{ MEDIA_URL }}{{ course.teacher.image }}' width='80' height='80' />
</a>
<span class="tit">
<a href="/u/315464/courses?sort=publish" target="_blank">{{ course.teacher.name }}</a>
</span>
<span class="job">{{ course.teacher.work_position }}</span>
</div>
<div class="course-info-tip">
<dl class="first">
<dt>课程须知</dt>
<dd class="autowrap">{{ course.youneed_know }}</dd>
</dl>
<dl>
<dt>老师告诉你能学到什么？</dt>
<dd class="autowrap">{{ course.teacher_tell }}</dd>
</dl>
</div>
</div>
<div class="cp-other-learned js-comp-tabs">
<div class="cp-header clearfix">
<h2 class="cp-tit l">该课的同学还学过</h2>
</div>
<div class="cp-body">
<div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="course" style="display: block">
<!-- img 200 x 112 -->
<ul class="other-list">
<li class="curr">
<a href="course-detail.html" target="_blank">
<img src="../media/courses/2016/11/540e57300001d6d906000338-240-135_n0L8vbw.jpg" alt="django与vuejs实战项目2">
<span class="name autowrap">django与vuejs实战项目2</span>
</a>
</li>
<li class="curr">
<a href="course-detail.html" target="_blank">
<img src="../media/courses/2016/12/python面向对象.jpg" alt="python面向对象">
<span class="name autowrap">python面向对象</span>
</a>
</li>
<li class="curr">
<a href="course-detail.html" target="_blank">
<img src="../media/courses/2016/12/python文件处理.jpg" alt="python文件处理">
<span class="name autowrap">python文件处理</span>
</a>
</li>
<li class="curr">
<a href="course-detail.html" target="_blank">
<img src="../media/courses/2016/11/mysql.jpg" alt="django入门">
<span class="name autowrap">django入门</span>
</a>
</li>
<li class="curr">
<a href="course-detail.html" target="_blank">
<img src="../media/courses/2016/12/mysql.jpg" alt="xadmin进阶开发">
<span class="name autowrap">xadmin进阶开发</span>
</a>
</li>
</ul>
</div>
<div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="plan">
<ul class="other-list">
<li class="curr">
<a href="/course/programdetail/pid/31?src=sug" target="_blank">
<img src="http://img.mukewang.com/56551e6700018b0c09600720-240-135.jpg" alt="Java工程师">
<span class="name autowrap">Java工程师</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div> </div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
{% endblock %}
class InfoDetailView(View):
"""
课程章节信息
"""
def get(self, request, course_id):
course = Course.objects.get(id=course_id)
all_resource = CourseResource.objects.filter(course=course)
return render(request, 'course-video.html', {
'course': course,
'all_resource': all_resource
})
课程评论信息
评论
通过异步的方式实现评论的添加。
{% extends 'common/base.html' %}
{% load staticfiles %}
{% block custom_bread %}
<section>
<div class="wp">
<div class="crumbs">
<ul>
<li><a href="{% url 'index' %}">首页</a>></li>
<li><a href="{% url 'course:course_list' %}">公开课程</a>></li>
<li><a href="{% url 'course:course_detail' course.id %}">课程详情</a>></li>
<li>章节详情</li>
</ul>
</div>
</div>
</section>
{% endblock %}
{% block custom_css %}
<link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/course-comment.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/muke/base.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/muke/common-less.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/learn-less.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/mooc.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/common-less.css' %}">
{% endblock %}
{% block custom_content %}
<div id="main">
<div class="course-infos">
<div class="w pr">
<div style="height: 15px" class="path">
</div>
<div class="hd">
<h2 class="l">{{ course.name }}</h2>
</div>
<div class="statics clearfix">
<div class="static-item ">
<span class="meta-value"><strong>{{ course.get_degree_display }}</strong></span>
<span class="meta">难度</span>
<em></em>
</div>
<div class="static-item static-time">
<span class="meta-value">{{ course.learn_time }}分钟</span>
<span class="meta">时长</span>
<em></em>
</div>
<div class="static-item">
<span class="meta-value"><strong>{{ course.students }}</strong></span>
<span class="meta">学习人数</span>
<em></em>
</div>
</div>
</div>
</div>
<div class="course-info-main clearfix w has-progress">
<div class="info-bar clearfix">
<div class="content-wrap clearfix">
<div class="content">
<div class="mod-tab-menu">
<ul class="course-menu clearfix">
<li><a class="ui-tabs-active active" id="learnOn" href="{% url 'course:course_info' course.id %}"><span>章节</span></a></li>
<li><a id="commentOn" class="" href="{% url 'course:course_comment' course.id %}"><span>评论</span></a></li>
</ul>
</div>
<!--发布评论-->
<div id="js-pub-container" class="issques clearfix js-form">
<div class="wgt-ipt-wrap pub-editor-wrap " id="js-pl-input-fake">
<textarea id="js-pl-textarea" class="" placeholder="扯淡、吐槽、表扬、鼓励……想说啥就说啥！" ></textarea>
</div>
<input type="button" id="js-pl-submit" class="pub-btn" data-cid="452" value="发表评论">
<p class="global-errortip js-global-error"></p>
</div>
<div id="course_note">
<ul class="mod-post" id="comment-list">
{% for comment in all_comments %}
<li class="post-row">
<div class="media">
<span target="_blank"><img src='{{ MEDIA_URL }}{{ comment.user.image }}g' width='40' height='40' /></span>
</div>
<div class="bd">
<div class="tit">
<span target="_blank">{{ comment.user.username }}</span>
</div>
<p class="cnt">{{ comment.comments }}</p>
<div class="footer clearfix">
<span title="创建时间" class="l timeago">{{ comment.add_time }}</span>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
<div class="aside r">
<div class="bd">
<div class="box mb40">
<h4>资料下载</h4>
<ul class="downlist">
{% for resource in all_resource %}
<li>
<span ><i class="aui-iconfont aui-icon-file"></i> {{ resource.name }}</span>
<a href="{{ MEDIA_URL }}{{ resource.download }}" class="downcode" target="_blank" download="" data-id="274" title="">下载</a>
</li>
{% endfor %}
</ul>
</div>
<div class="box mb40">
<h4>讲师提示</h4>
<div class="teacher-info">
<a href="/u/315464/courses?sort=publish" target="_blank">
<img src='{{ MEDIA_URL }}{{ course.teacher.image }}' width='80' height='80' />
</a>
<span class="tit">
<a href="/u/315464/courses?sort=publish" target="_blank">{{ course.teacher.name }}</a>
</span>
<span class="job">{{ course.teacher.work_position }}</span>
</div>
<div class="course-info-tip">
<dl class="first">
<dt>课程须知</dt>
<dd class="autowrap">{{ course.youneed_know }}</dd>
</dl>
<dl>
<dt>老师告诉你能学到什么？</dt>
<dd class="autowrap">{{ course.teacher_tell }}</dd>
</dl>
</div>
</div>
<div class="cp-other-learned js-comp-tabs">
<div class="cp-header clearfix">
<h2 class="cp-tit l">该课的同学还学过</h2>
</div>
<div class="cp-body">
<div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="course" style="display: block">
<!-- img 200 x 112 -->
<ul class="other-list">
<li class="curr">
<a href="course-detail.html" target="_blank">
<img src="../media/courses/2016/11/540e57300001d6d906000338-240-135_n0L8vbw.jpg" alt="django与vuejs实战项目2">
<span class="name autowrap">django与vuejs实战项目2</span>
</a>
</li>
<li class="curr">
<a href="course-detail.html" target="_blank">
<img src="../media/courses/2016/12/python面向对象.jpg" alt="python面向对象">
<span class="name autowrap">python面向对象</span>
</a>
</li>
<li class="curr">
<a href="course-detail.html" target="_blank">
<img src="../media/courses/2016/12/python文件处理.jpg" alt="python文件处理">
<span class="name autowrap">python文件处理</span>
</a>
</li>
<li class="curr">
<a href="course-detail.html" target="_blank">
<img src="../media/courses/2016/11/mysql.jpg" alt="django入门">
<span class="name autowrap">django入门</span>
</a>
</li>
<li class="curr">
<a href="course-detail.html" target="_blank">
<img src="../media/courses/2016/12/mysql.jpg" alt="xadmin进阶开发">
<span class="name autowrap">xadmin进阶开发</span>
</a>
</li>
</ul>
</div>
<div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="plan">
<ul class="other-list">
<li class="curr">
<a href="/course/programdetail/pid/31?src=sug" target="_blank">
<img src="http://img.mukewang.com/56551e6700018b0c09600720-240-135.jpg" alt="Java工程师">
<span class="name autowrap">Java工程师</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div> </div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
{% endblock %}
{% block custom_js %}
<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 'course:course_add_comm' %}",
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.html";
}else{
alert(data.msg)
}
}else if(data.status == 'success'){
window.location.reload();//刷新当前页面.
}
},
});
});
</script>
{% endblock %}
class CommentsView(View):
"""
课程评论
"""
def get(self, request, course_id):
course = Course.objects.get(id=course_id)
all_resource = CourseResource.objects.filter(course=course)
all_comments = CourseComments.objects.filter(course=course)
return render(request, 'course-comment.html', {
'course': course,
'all_resource': all_resource,
'all_comments': all_comments
})
class AddCommentView(View):
def post(self, request):
if not request.user.is_authenticated():
return HttpResponse('{"status": "fail", "msg": "用户未登陆"}', content_type='application/json')
else:
course_id = request.POST.get('course_id', 0)
comments = request.POST.get('comments', '')
if int(course_id) > 0 and comments:
comment = CourseComments()
course = Course.objects.get(id=int(course_id))
comment.course = course
comment.user = request.user
comment.comments = comments
comment.save()
return HttpResponse('{"status": "success", "msg": "添加成功"}', content_type='application/json')
else:
return HttpResponse('{"status": "fail", "msg": "添加失败"}', content_type='application/json')
学习的用户还学习了什么课程推荐
{% extends 'common/base.html' %}
{% load staticfiles %}
{% block custom_bread %}
<section>
<div class="wp">
<div class="crumbs">
<ul>
<li><a href="{% url 'index' %}">首页</a>></li>
<li><a href="{% url 'course:course_list' %}">公开课程</a>></li>
<li><a href="{% url 'course:course_detail' course.id %}">课程详情</a>></li>
<li>章节详情</li>
</ul>
</div>
</div>
</section>
{% endblock %}
{% block custom_css %}
<link rel="stylesheet" type="text/css" href="{% static 'css/muke/base.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/muke/common-less.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/learn-less.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/aui.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/mooc.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/common-less.css' %}">
{% endblock %}
{% block custom_content %}
<div id="main">
<div class="course-infos">
<div class="w pr">
<div style="height: 15px" class="path">
</div>
<div class="hd">
<h2 class="l">{{ course.name }}</h2>
</div>
<div class="statics clearfix">
<div class="static-item ">
<span class="meta-value"><strong>{{ course.get_degree_display }}</strong></span>
<span class="meta">难度</span>
<em></em>
</div>
<div class="static-item static-time">
<span class="meta-value">{{ course.learn_time }}分钟</span>
<span class="meta">时长</span>
<em></em>
</div>
<div class="static-item">
<span class="meta-value"><strong>{{ course.students }}</strong></span>
<span class="meta">学习人数</span>
<em></em>
</div>
</div>
</div>
</div>
<div class="course-info-main clearfix w has-progress">
<div class="info-bar clearfix">
<div class="content-wrap clearfix">
<div class="content">
<div class="mod-tab-menu">
<ul class="course-menu clearfix">
<li><a class="ui-tabs-active active" id="learnOn" href="{% url 'course:course_info' course.id %}"><span>章节</span></a></li>
<li><a id="commentOn" class="" href="{% url 'course:course_comment' course.id %}"><span>评论</span></a></li>
</ul>
</div>
<div id="notice" class="clearfix">
<div class="l"> <strong>课程公告:</strong> <a href="javascript:void(0)">Spring的文档以及相关的jar文件已上传</a> </div>
</div>
<div class="mod-chapters">
{% for chapter in course.ger_lesson_detail %}
<div class="chapter chapter-active" >
<h3>
<strong><i class="state-expand"></i>{{ chapter.name }}</strong>
</h3>
<ul class="video">
{% for video in chapter.get_video_info %}
<li>
<a target="_blank" href='{{ MEDIA_URL }}{{ video.url }}' class="J-media-item studyvideo">{{ video.name }} ({{ video.learn_time }})
<i class="study-state"></i>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
</div>
<div class="aside r">
<div class="bd">
<div class="box mb40">
<h4>资料下载</h4>
<ul class="downlist">
{% for resource in all_resource %}
<li>
<span ><i class="aui-iconfont aui-icon-file"></i> {{ resource.name }}</span>
<a href="{{ MEDIA_URL }}{{ resource.download }}" class="downcode" target="_blank" download="" data-id="274" title="">下载</a>
</li>
{% endfor %}
</ul>
</div>
<div class="box mb40">
<h4>讲师提示</h4>
<div class="teacher-info">
<a href="/u/315464/courses?sort=publish" target="_blank">
<img src='{{ MEDIA_URL }}{{ course.teacher.image }}' width='80' height='80' />
</a>
<span class="tit">
<a href="/u/315464/courses?sort=publish" target="_blank">{{ course.teacher.name }}</a>
</span>
<span class="job">{{ course.teacher.work_position }}</span>
</div>
<div class="course-info-tip">
<dl class="first">
<dt>课程须知</dt>
<dd class="autowrap">{{ course.youneed_know }}</dd>
</dl>
<dl>
<dt>老师告诉你能学到什么？</dt>
<dd class="autowrap">{{ course.teacher_tell }}</dd>
</dl>
</div>
</div>
<div class="cp-other-learned js-comp-tabs">
<div class="cp-header clearfix">
<h2 class="cp-tit l">该课的同学还学过</h2>
</div>
<div class="cp-body">
<div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="course" style="display: block">
<!-- img 200 x 112 -->
<ul class="other-list">
{% for course in all_courses %}
<li class="curr">
<a href="course-detail.html" target="_blank">
<img src="{{ MEDIA_URL }}{{ course.image }}" alt="{{ course.name }}">
<span class="name autowrap">{{ course.name }}</span>
</a>
</li>
{% endfor %}
</ul>
</div>
<div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="plan">
<ul class="other-list">
<li class="curr">
<a href="/course/programdetail/pid/31?src=sug" target="_blank">
<img src="http://img.mukewang.com/56551e6700018b0c09600720-240-135.jpg" alt="Java工程师">
<span class="name autowrap">Java工程师</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div> </div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
{% endblock %}
- 用户登录判断拦截utils
# _*_ encoding:utf-8 _*_
"""
用户登录判断拦截类
"""
__author__ = 'wrj008'
__date__ = '2018/3/15 10:18'
from django.contrib.auth.decorators import login_required
from django.utils.decorators import method_decorator
class LoginRequireMixin(object):
@method_decorator(login_required(login_url='/login/'))
def dispatch(self, request, *args , **kwargs):
return super(LoginRequireMixin, self).dispatch(request, *args , **kwargs)
class InfoDetailView(LoginRequireMixin, View):
"""
课程章节信息
"""
def get(self, request, course_id):
course = Course.objects.get(id=course_id)
# 用户学习信息添加
user_course = UserCourse.objects.filter(user=request.user, course=course)
if user_course:
user_course = UserCourse(user=request.user, course=course)
user_course.save()
# 同类用户学习的其他课程
"""
通过本课程查询所有学习该课程的用户，循环获取学习该课程的用户id，通过
所有用户id查询所有用户学习的课程id，通过所有用户课程id查询所有课程信
息，并通过点击量排序展示前五个
"""
user_courses = UserCourse.objects.filter(course=course)
all_users_id = [user_course.user_id for user_course in user_courses]
all_user_courses = UserCourse.objects.filter(user_id__in=all_users_id)
course_ids = [all_course.course_id for all_course in all_user_courses]
all_courses = Course.objects.filter(id__in=course_ids).order_by('-click_nums')[:5]
all_resource = CourseResource.objects.filter(course=course)
return render(request, 'course-video.html', {
'course': course,
'all_resource': all_resource,
'all_courses': all_courses
})
视频播放界面
课程播放
通过添加video.js文件 ，添加视频地址，播放视频。
{% extends 'common/base.html' %}
{% load staticfiles %}
{% block custom_bread %}
<section>
<div class="wp">
<div class="crumbs">
<ul>
<li><a href="{% url 'index' %}">首页</a>></li>
<li><a href="{% url 'course:course_list' %}">公开课程</a>></li>
<li><a href="{% url 'course:course_detail' course.id %}">课程详情</a>></li>
<li>章节详情</li>
</ul>
</div>
</div>
</section>
{% endblock %}
{% block custom_css %}
<link rel="stylesheet" type="text/css" href="{% static 'css/muke/base.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/muke/common-less.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/learn-less.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/aui.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/mooc.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/common-less.css' %}">
<link href="{% static 'css/video-js.min.css' %}" rel="stylesheet" type="text/css">
{% endblock %}
{% block custom_js %}
<script src="{% static 'js/video.min.js' %}"></script>
<script>
videojs.options.flash.swf = "{% static 'js/video-js.swf' %}";
</script>
{% endblock %}
{% block custom_content %}
<div id="main">
<div class="course-infos">
<div style="margin-left: 340px;">
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="1200" height="675" poster="" data-setup="{}">
<source src="{{ video.url }}" type='video/mp4' />
</video>
</div>
</div>
<div class="course-info-main clearfix w has-progress">
<div class="info-bar clearfix">
<div class="content-wrap clearfix">
<div class="content">
<div class="mod-tab-menu">
<ul class="course-menu clearfix">
<li><a class="ui-tabs-active active" id="learnOn" href="{% url 'course:course_info' course.id %}"><span>章节</span></a></li>
<li><a id="commentOn" class="" href="{% url 'course:course_comment' course.id %}"><span>评论</span></a></li>
</ul>
</div>
<div id="notice" class="clearfix">
<div class="l"> <strong>课程公告:</strong> <a href="javascript:void(0)">Spring的文档以及相关的jar文件已上传</a> </div>
</div>
<div class="mod-chapters">
{% for chapter in course.ger_lesson_detail %}
<div class="chapter chapter-active" >
<h3>
<strong><i class="state-expand"></i>{{ chapter.name }}</strong>
</h3>
<ul class="video">
{% for video in chapter.get_video_info %}
<li>
<a target="_blank" href='{{ MEDIA_URL }}{{ video.url }}' class="J-media-item studyvideo">{{ video.name }} ({{ video.learn_time }})
<i class="study-state"></i>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
</div>
<div class="aside r">
<div class="bd">
<div class="box mb40">
<h4>资料下载</h4>
<ul class="downlist">
{% for resource in all_resource %}
<li>
<span ><i class="aui-iconfont aui-icon-file"></i> {{ resource.name }}</span>
<a href="{{ MEDIA_URL }}{{ resource.download }}" class="downcode" target="_blank" download="" data-id="274" title="">下载</a>
</li>
{% endfor %}
</ul>
</div>
<div class="box mb40">
<h4>讲师提示</h4>
<div class="teacher-info">
<a href="/u/315464/courses?sort=publish" target="_blank">
<img src='{{ MEDIA_URL }}{{ course.teacher.image }}' width='80' height='80' />
</a>
<span class="tit">
<a href="/u/315464/courses?sort=publish" target="_blank">{{ course.teacher.name }}</a>
</span>
<span class="job">{{ course.teacher.work_position }}</span>
</div>
<div class="course-info-tip">
<dl class="first">
<dt>课程须知</dt>
<dd class="autowrap">{{ course.youneed_know }}</dd>
</dl>
<dl>
<dt>老师告诉你能学到什么？</dt>
<dd class="autowrap">{{ course.teacher_tell }}</dd>
</dl>
</div>
</div>
<div class="cp-other-learned js-comp-tabs">
<div class="cp-header clearfix">
<h2 class="cp-tit l">该课的同学还学过</h2>
</div>
<div class="cp-body">
<div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="course" style="display: block">
<!-- img 200 x 112 -->
<ul class="other-list">
{% for course in all_courses %}
<li class="curr">
<a href="course-detail.html" target="_blank">
<img src="{{ MEDIA_URL }}{{ course.image }}" alt="{{ course.name }}">
<span class="name autowrap">{{ course.name }}</span>
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div> </div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
{% endblock %}
class VideoPlayView(View):
"""
视频播放
"""
def get(self, request, video_id):
video = Video.objects.get(id=video_id)
course = video.lesson.course
# 用户学习信息添加
user_course = UserCourse.objects.filter(user=request.user, course=course)
if user_course:
user_course = UserCourse(user=request.user, course=course)
user_course.save()
# 同类用户学习的其他课程
"""
通过本课程查询所有学习该课程的用户，循环获取学习该课程的用户id，通过
所有用户id查询所有用户学习的课程id，通过所有用户课程id查询所有课程信
息，并通过点击量排序展示前五个
"""
user_courses = UserCourse.objects.filter(course=course)
all_users_id = [user_course.user_id for user_course in user_courses]
all_user_courses = UserCourse.objects.filter(user_id__in=all_users_id)
course_ids = [all_course.course_id for all_course in all_user_courses]
all_courses = Course.objects.filter(id__in=course_ids).order_by('-click_nums')[:5]
all_resource = CourseResource.objects.filter(course=course)
return render(request, 'video-play.html', {
'course': course,
'all_resource': all_resource,
'all_courses': all_courses,
'video': video
})
- 本篇博客原视频博主[慕课在线教育平台]
- 本篇博客撰写人: XiaoJinZi 转载请注明出处
- 学生能力有限 附上邮箱: 986209501@qq.com 不足以及误处请大佬指责
网友评论