公開(kāi)課界面實(shí)現(xiàn)
標(biāo)簽： django
公開(kāi)課
公開(kāi)課首頁(yè)實(shí)現(xiàn)
首頁(yè)內(nèi)容展示挟阻，通過(guò)獲取所有的課程信息衅枫，其中存在排序功能顯示。
{% extends 'common/base.html' %}
{% load staticfiles %}
{% block custom_bread %}
<section>
<div class="wp">
<ul class="crumbs">
<li><a href="index.html">首頁(yè)</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">最熱門(mén)</a></li>
<li class="{% ifequal sort 'students' %}active{% endifequal %} "><a href="?sort=students">參與人數(shù)</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">時(shí)長(zhǎng)：<i class="key">{{ course.learn_time }}</i></span>
<span class="fr">學(xué)習(xí)人數(shù)：{{ course.students }} </span>
</div>
<div class="bottom">
<a href="course-detail.html"><span class="fl">來(lái)自{{ 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 }}">上一頁(yè)</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 }}">下一頁(yè)</a></li>
{% endif %}
</ul>
</div>
</div>
</div>
</div>
<div class="right layout">
<div class="head">熱門(mén)課程推薦</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):
"""
課程列表首頁(yè)
"""
def get(self, request):
all_course = Course.objects.all().order_by('-add_time')
# 熱門(mén)
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')
# 分頁(yè)功能展示
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
})
課程詳情頁(yè)編輯
課程詳情
通過(guò)獲取課程id跳轉(zhuǎn)詳情頁(yè)阅悍，其中對(duì)課程信息model中添加兩個(gè)函數(shù)好渠，其中通過(guò)外鍵的方式 獲取課程總數(shù) 以及課程學(xué)習(xí)學(xué)員的信息。關(guān)于收藏則通過(guò)兩個(gè)收藏變量查詢(xún)的方式节视，收藏異步還是調(diào)用之前的公共收藏內(nèi)容拳锚。
教師統(tǒng)計(jì)跟之前的方式一樣。
{% extends 'common/base.html' %}
{% load staticfiles %}
{% block custom_bread %}
<section>
<div class="wp">
<div class="crumbs">
<ul>
<li><a href="{% url 'index' %}">首頁(yè)</a>></li>
<li><a href="{% url 'course:course_list' %}">公開(kāi)課程</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 從入門(mén)到精通體驗(yàn)開(kāi)始了">{{ 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">學(xué)習(xí)人數(shù)：{{ course.students }}</span>
</div>
<ul class="parameter">
<li><span class="pram word3">時(shí) 長(zhǎng)：</span><span>{{ course.learn_time }}</span></li>
<li><span class="pram word3">章 節(jié) 數(shù)：</span><span>{{ course.get_lesson_count }}</span></li>
<li><span class="pram word3">課程類(lèi)別：</span><span title="">{{ course.category }}</span></li>
<li class="piclist"><span class="pram word4">學(xué)習(xí)用戶(hù)：</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">開(kāi)始學(xué)習(xí)</a></div>
</div>
</div>
<div class="group-share-box">
<div class="bdsharebuttonbox"
data-text="django開(kāi)始了"
data-desc="我在#慕課網(wǎng)#發(fā)現(xiàn)了"
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="分享到人人網(wǎng)" 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>授課機(jī)構(gòu)</h1>
<p>世界名校寻行，課程權(quán)威</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="清華大學(xué)">北京大學(xué)</h2>
</a>
<div class="btn notlogin
"data-favid="14" id="jsRightBtn">
已收藏
</div>
<div class="clear">
<ul>
<li>
<span>課 程 數(shù)： 5</span>
</li>
<li>
<span>教 師 數(shù)： 0</span>
</li>
<li>所在地區(qū)： 北京市</li>
<li>認(rèn) 證 :
<img title="金牌機(jī)構(gòu)", 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">相關(guān)課程推薦</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實(shí)戰(zhàn)項(xiàng)目</h2></a>
<span class="fl">學(xué)習(xí)時(shí)長(zhǎng)：<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'課程機(jī)構(gòu)')
name = models.CharField(max_length=128, verbose_name=u'課程名稱(chēng)')
desc = models.CharField(max_length=256, verbose_name=u'課程描述')
category = models.CharField(default=u'后端開(kāi)發(fā)', max_length=20, verbose_name=u'課程分類(lèi)')
detail = models.TextField(verbose_name=u'課程詳情')
degree = models.CharField(choices=(('cj', '初級(jí)'), ('zj', '中級(jí)'), ('gj', '高級(jí)')), max_length=2, verbose_name=u'課程難度')
learn_time = models.IntegerField(default=0, verbose_name=u'課程時(shí)長(zhǎng)')
students = models.IntegerField(default=0, verbose_name=u'學(xué)習(xí)人數(shù)')
fav_nums = models.IntegerField(default=0, verbose_name=u'收藏人數(shù)')
click_nums = models.IntegerField(default=0, verbose_name=u'點(diǎn)擊數(shù)')
image = models.ImageField(upload_to='courses/%Y/%m', verbose_name=u'封面圖', max_length=128)
add_time = models.DateTimeField(default=datetime.now, verbose_name=u'添加時(shí)間')
class Meta:
verbose_name = u'課程信息'
verbose_name_plural = verbose_name
def get_lesson_count(self):
# 課程章節(jié)外鍵獲取總數(shù)
return self.lesson_set.all().count()
def get_students_list(self):
# 根據(jù)用戶(hù)操作外鍵獲取學(xué)習(xí)用戶(hù)
return self.usercourse_set.all()[:5]
def __unicode__(self):
return self.name
class CourseDetialView(View):
"""
課程詳情信息頁(yè)
"""
def get(self, request, course_id):
course = Course.objects.get(id=course_id)
return render(request, 'course-detail.html', {
'course': course,
})
課程推薦
聽(tīng)過(guò)添加tag字段來(lái)進(jìn)行比對(duì)霍掺，當(dāng)相同時(shí)則推薦相同的。
{% extends 'common/base.html' %}
{% load staticfiles %}
{% block custom_bread %}
<section>
<div class="wp">
<div class="crumbs">
<ul>
<li><a href="{% url 'index' %}">首頁(yè)</a>></li>
<li><a href="{% url 'course:course_list' %}">公開(kāi)課程</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 從入門(mén)到精通體驗(yàn)開(kāi)始了">{{ 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">學(xué)習(xí)人數(shù)：{{ course.students }}</span>
</div>
<ul class="parameter">
<li><span class="pram word3">時(shí) 長(zhǎng)：</span><span>{{ course.learn_time }}</span></li>
<li><span class="pram word3">章 節(jié) 數(shù)：</span><span>{{ course.get_lesson_count }}</span></li>
<li><span class="pram word3">課程類(lèi)別：</span><span title="">{{ course.category }}</span></li>
<li class="piclist"><span class="pram word4">學(xué)習(xí)用戶(hù)：</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">開(kāi)始學(xué)習(xí)</a></div>
</div>
</div>
<div class="group-share-box">
<div class="bdsharebuttonbox"
data-text="django開(kāi)始了"
data-desc="我在#慕課網(wǎng)#發(fā)現(xiàn)了"
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="分享到人人網(wǎng)" 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>授課機(jī)構(gòu)</h1>
<p>世界名校拌蜘，課程權(quán)威</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="清華大學(xué)">{{ 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>課 程 數(shù)： {{ course.course_org.course_nums}}</span>
</li>
<li>
<span>教 師 數(shù)： {{ course.course_org.get_teacher_count }}</span>
</li>
<li>所在地區(qū)： {{ course.course_org.address }}</li>
<li>認(rèn) 證 :
<img title="金牌機(jī)構(gòu)", 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">相關(guān)課程推薦</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">學(xué)習(xí)時(shí)長(zhǎng)：<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 == '用戶(hù)未登錄'){
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):
"""
課程詳情信息頁(yè)
"""
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
})
課程章節(jié)信息
章節(jié)頁(yè)
同樣的頁(yè)面加載杆烁，存在新的樣式引用。添加章節(jié)連接地址简卧，以及重載unicode方法兔魂。
{% extends 'common/base.html' %}
{% load staticfiles %}
{% block custom_bread %}
<section>
<div class="wp">
<div class="crumbs">
<ul>
<li><a href="{% url 'index' %}">首頁(yè)</a>></li>
<li><a href="{% url 'course:course_list' %}">公開(kāi)課程</a>></li>
<li><a href="{% url 'course:course_detail' course.id %}">課程詳情</a>></li>
<li>章節(jié)詳情</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">時(shí)長(zhǎng)</span>
<em></em>
</div>
<div class="static-item">
<span class="meta-value"><strong>{{ course.students }}</strong></span>
<span class="meta">學(xué)習(xí)人數(shù)</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>章節(jié)</span></a></li>
<li><a id="commentOn" class="" href="{% url 'course:course_comment' course.id %}"><span>評(píng)論</span></a></li>
</ul>
</div>
<div id="notice" class="clearfix">
<div class="l"> <strong>課程公告:</strong> <a href="javascript:void(0)">Spring的文檔以及相關(guān)的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>老師告訴你能學(xué)到什么？</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">該課的同學(xué)還學(xué)過(guò)</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實(shí)戰(zhàn)項(xiàng)目2">
<span class="name autowrap">django與vuejs實(shí)戰(zhàn)項(xiàng)目2</span>
</a>
</li>
<li class="curr">
<a href="course-detail.html" target="_blank">
<img src="../media/courses/2016/12/python面向?qū)ο?jpg" alt="python面向?qū)ο?>
<span class="name autowrap">python面向?qū)ο?lt;/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入門(mén)">
<span class="name autowrap">django入門(mén)</span>
</a>
</li>
<li class="curr">
<a href="course-detail.html" target="_blank">
<img src="../media/courses/2016/12/mysql.jpg" alt="xadmin進(jìn)階開(kāi)發(fā)">
<span class="name autowrap">xadmin進(jìn)階開(kāi)發(fā)</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):
"""
課程章節(jié)信息
"""
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
})
課程評(píng)論信息
評(píng)論
通過(guò)異步的方式實(shí)現(xiàn)評(píng)論的添加贞滨。
{% extends 'common/base.html' %}
{% load staticfiles %}
{% block custom_bread %}
<section>
<div class="wp">
<div class="crumbs">
<ul>
<li><a href="{% url 'index' %}">首頁(yè)</a>></li>
<li><a href="{% url 'course:course_list' %}">公開(kāi)課程</a>></li>
<li><a href="{% url 'course:course_detail' course.id %}">課程詳情</a>></li>
<li>章節(jié)詳情</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">時(shí)長(zhǎng)</span>
<em></em>
</div>
<div class="static-item">
<span class="meta-value"><strong>{{ course.students }}</strong></span>
<span class="meta">學(xué)習(xí)人數(shù)</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>章節(jié)</span></a></li>
<li><a id="commentOn" class="" href="{% url 'course:course_comment' course.id %}"><span>評(píng)論</span></a></li>
</ul>
</div>
<!--發(fā)布評(píng)論-->
<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="扯淡入热、吐槽、表?yè)P(yáng)晓铆、鼓勵(lì)……想說(shuō)啥就說(shuō)啥勺良！" ></textarea>
</div>
<input type="button" id="js-pl-submit" class="pub-btn" data-cid="452" value="發(fā)表評(píng)論">
<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="創(chuàng)建時(shí)間" 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>老師告訴你能學(xué)到什么？</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">該課的同學(xué)還學(xué)過(guò)</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實(shí)戰(zhàn)項(xiàng)目2">
<span class="name autowrap">django與vuejs實(shí)戰(zhàn)項(xiàng)目2</span>
</a>
</li>
<li class="curr">
<a href="course-detail.html" target="_blank">
<img src="../media/courses/2016/12/python面向?qū)ο?jpg" alt="python面向?qū)ο?>
<span class="name autowrap">python面向?qū)ο?lt;/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入門(mén)">
<span class="name autowrap">django入門(mén)</span>
</a>
</li>
<li class="curr">
<a href="course-detail.html" target="_blank">
<img src="../media/courses/2016/12/mysql.jpg" alt="xadmin進(jìn)階開(kāi)發(fā)">
<span class="name autowrap">xadmin進(jìn)階開(kāi)發(fā)</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">
//添加評(píng)論
$('#js-pl-submit').on('click', function(){
var comments = $("#js-pl-textarea").val()
if(comments == ""){
alert("評(píng)論不能為空")
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 == '用戶(hù)未登錄'){
window.location.href="login.html";
}else{
alert(data.msg)
}
}else if(data.status == 'success'){
window.location.reload();//刷新當(dāng)前頁(yè)面.
}
},
});
});
</script>
{% endblock %}
class CommentsView(View):
"""
課程評(píng)論
"""
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": "用戶(hù)未登陸"}', 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')
學(xué)習(xí)的用戶(hù)還學(xué)習(xí)了什么課程推薦
{% extends 'common/base.html' %}
{% load staticfiles %}
{% block custom_bread %}
<section>
<div class="wp">
<div class="crumbs">
<ul>
<li><a href="{% url 'index' %}">首頁(yè)</a>></li>
<li><a href="{% url 'course:course_list' %}">公開(kāi)課程</a>></li>
<li><a href="{% url 'course:course_detail' course.id %}">課程詳情</a>></li>
<li>章節(jié)詳情</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">時(shí)長(zhǎng)</span>
<em></em>
</div>
<div class="static-item">
<span class="meta-value"><strong>{{ course.students }}</strong></span>
<span class="meta">學(xué)習(xí)人數(shù)</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>章節(jié)</span></a></li>
<li><a id="commentOn" class="" href="{% url 'course:course_comment' course.id %}"><span>評(píng)論</span></a></li>
</ul>
</div>
<div id="notice" class="clearfix">
<div class="l"> <strong>課程公告:</strong> <a href="javascript:void(0)">Spring的文檔以及相關(guān)的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>老師告訴你能學(xué)到什么骄噪？</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">該課的同學(xué)還學(xué)過(guò)</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 %}
- 用戶(hù)登錄判斷攔截utils
# _*_ encoding:utf-8 _*_
"""
用戶(hù)登錄判斷攔截類(lèi)
"""
__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):
"""
課程章節(jié)信息
"""
def get(self, request, course_id):
course = Course.objects.get(id=course_id)
# 用戶(hù)學(xué)習(xí)信息添加
user_course = UserCourse.objects.filter(user=request.user, course=course)
if user_course:
user_course = UserCourse(user=request.user, course=course)
user_course.save()
# 同類(lèi)用戶(hù)學(xué)習(xí)的其他課程
"""
通過(guò)本課程查詢(xún)所有學(xué)習(xí)該課程的用戶(hù)尚困，循環(huán)獲取學(xué)習(xí)該課程的用戶(hù)id，通過(guò)
所有用戶(hù)id查詢(xún)所有用戶(hù)學(xué)習(xí)的課程id链蕊，通過(guò)所有用戶(hù)課程id查詢(xún)所有課程信
息事甜，并通過(guò)點(diǎn)擊量排序展示前五個(gè)
"""
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
})
視頻播放界面
課程播放
通過(guò)添加video.js文件 ，添加視頻地址滔韵，播放視頻逻谦。
{% extends 'common/base.html' %}
{% load staticfiles %}
{% block custom_bread %}
<section>
<div class="wp">
<div class="crumbs">
<ul>
<li><a href="{% url 'index' %}">首頁(yè)</a>></li>
<li><a href="{% url 'course:course_list' %}">公開(kāi)課程</a>></li>
<li><a href="{% url 'course:course_detail' course.id %}">課程詳情</a>></li>
<li>章節(jié)詳情</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>章節(jié)</span></a></li>
<li><a id="commentOn" class="" href="{% url 'course:course_comment' course.id %}"><span>評(píng)論</span></a></li>
</ul>
</div>
<div id="notice" class="clearfix">
<div class="l"> <strong>課程公告:</strong> <a href="javascript:void(0)">Spring的文檔以及相關(guān)的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>老師告訴你能學(xué)到什么？</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">該課的同學(xué)還學(xué)過(guò)</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
# 用戶(hù)學(xué)習(xí)信息添加
user_course = UserCourse.objects.filter(user=request.user, course=course)
if user_course:
user_course = UserCourse(user=request.user, course=course)
user_course.save()
# 同類(lèi)用戶(hù)學(xué)習(xí)的其他課程
"""
通過(guò)本課程查詢(xún)所有學(xué)習(xí)該課程的用戶(hù)陪蜻，循環(huán)獲取學(xué)習(xí)該課程的用戶(hù)id邦马，通過(guò)
所有用戶(hù)id查詢(xún)所有用戶(hù)學(xué)習(xí)的課程id，通過(guò)所有用戶(hù)課程id查詢(xún)所有課程信
息，并通過(guò)點(diǎn)擊量排序展示前五個(gè)
"""
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
})
- 本篇博客原視頻博主[慕課在線(xiàn)教育平臺(tái)]
- 本篇博客撰寫(xiě)人: XiaoJinZi 轉(zhuǎn)載請(qǐng)注明出處
- 學(xué)生能力有限 附上郵箱: 986209501@qq.com 不足以及誤處請(qǐng)大佬指責(zé)
