说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家!
接着上一篇博客继续往下写 :https://blog.youkuaiyun.com/qq_41782425/article/details/89914436
目录
一丶公开课(详情页)
1.显示课程详情页
- 模板继承这个不用多说了
- 定义类视图get方法,用于显示页面
class CourseDetailView(View):
"""课程详情页"""
def get(self, request, course_id):
return render(request, "course-detail.html")
- 定义url路由
url(r'^detail/(?P<course_id>\d+)/$', CourseDetailView.as_view(), name="course_detail"), # 课程列表页
- 在课程列表页中修改课程详情链接地址
{% for course in all_courses.object_list %}
<div class="box">
<a href="{% url 'course:course_detail' course.id %}">
<img width="280" height="350" class="scrollLoading"
src={
{ MEDIA_URL }}{
{ course.image }}/>
</a>
<div class="des">
<a href="{% url 'course:course_detail' course.id %}">
<h2>{
{ course.name }}</h2>
</a>
<span class="fl">时长:<i class="key">{
{ course.learn_times }}</i></span>
<span class="fr">学习人数:{
{ course.students }} </span>
</div>
<div class="bottom">
<a href="{% url 'course:course_detail' course.id %}"><span class="fl">来自{
{ course.course_org.name }}</span></a>
<span class="star fr notlogin
" data-favid="15">
{
{ course.fav_nums }}
</span>
</div>
</div>
{% endfor %}
- 测试在课程列表页点击课程,则显示课程详情页
2.动态显示出课程详情页数据
- 在类视图中根据请求地址传递的课程id获取对应的课程信息数据,当用户点击进入课程详情页时,则点击数+1
class CourseDetailView(View):
"""课程详情页"""
def get(self, request, course_id):
course = Course.objects.get(id=int(course_id))
# 当用户点击进入课程详情页时,则课程点击数+1
course.click_nums += 1
course.save()
return render(request, "course-detail.html", {"course":course})
- 分析课程详情页面中的(章节数和课程类别以及学习用户),在Course模型类中没有的字段
- 紧接着需要在模型类中,获取章节数以及学习用户信息,因为该两个字段是UserCourse模型表和Lesson表的外键,即可以使用django models提供self.小写表名_set方法获取字段信息
def get_zj_nums(self):
#获取课程章节数
return self.lesson_set.all().count()
get_zj_nums.short_description = "章节数"
def get_learn_users(self):
# 获取课程学习用户
return self.usercourse_set.all()[:5]
- 课程类别则需要在Course模型表中添加category字段
category = models.CharField(default=u"后端开发", max_length=20, verbose_name=u"课程类别")
- 生成对应的数据表category字段
- 最后在课程详情模板中打印字段数据即可
<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_times }}</span></li>
<li><span class="pram word3">章 节 数:</span><span>{
{ course.get_zj_nums }}</span></li>
<li><span class="pram word3">课程类别:</span><span title="">{
{ course.category }}</span></li>
<li class="piclist"><span class="pram word4">学习用户:</span>
{% for course_user in course.get_learn_users %}
<span class="pic"><img width="40" height="40" src="{
{ MEDIA_URL }}{
{ course_user.user.image }}"/></span>
{% endfor %}
</li>
</ul>
- 因为用户课程表并没有数据,则需要进行添加,为了显示详情页面中的学习用户
- 刷新课程详情页面,成功显示出详情页面动态数据
- 查看课程表中Mysql主从复制2的click_nums点击数字段,已经进行+1了
3.动态显示出课程详情页面右侧授课机构数据
- 授课机构数据包括教师数,所以需要在CourseOrg模型表中获取教师数数据
def get_teacher_nums(self):
#获取课程机构的教师数量
return self.teacher_set.all().count()
- 在模板中进行打印字段数据即可
<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 }}">{
{ course.course_org.name }}</h2>
</a>
<div class="btn notlogin
"data-favid="14" id="jsRightBtn">
已收藏
</div>
<div class="clear">
<ul>
<li>
<span>课 程 数: {
{ course.course_org.course_nums }}</span>
</li>
<li>
<span>教 师 数: {
{ course.course_org.get_teacher_nums }}</span>
</li>
<li>所在地区: {
{ course.course_org.address }}</li>
<li>认 证 :
<img title="金牌机构", src="{% static 'images/gold.png' %}"/>
</li>
</ul>
</div>
</div>
- 刷新页面成功动态加载出授课机构数据
4.相关课程推荐功能
说明:完成该功能需要在Course课程模型类中添加tag标签字段,通过tag标签字段查找相等的课程,并且只获取一个结果,返回给模板
- 在course模型类中添加标签字段
tag = models.CharField(default="", verbose_name=u"课程标签", max_length=10)
- 生成对应数据表字段
- 在类视图中查看tag标签相同的课程数据
class CourseDetailView(View):
"""课程详情页"""
def get(self, request, course_id):
course = Course.objects.get(id=int(course_id))
# 当用户点击进入课程详情页时,则课程点击数+1
course.click_nums += 1
course.save()
tag = course.tag
if tag:
relate_courses = Course.objects.filter(tag=tag)[:1]
else:
relate_courses = []
return render(request, "course-detail.html", {"course":course, "relate_courses":relate_courses})
- 在模板文件中找到相关课程推荐标签,进行数据打印
<div class="group_recommend">
{% for relate_course in relate_courses%}
<dl>
<dt>
<a target="_blank" href="">
<img width="240" height="220" class="scrollLoading" src="{
{ MEDIA_URL }}{
{ relate_course.image }}"/>
</a>
</dt>
<dd>
<a target="_blank" href=""><h2> {
{ relate_course.name }}</h2></a>
<span class="fl">学习时长:<i class="key">{
{ relate_course.learn_times }}</i></span>
</dd>
</dl>
{% endfor %}
</div>
- 为了视图中获取的tag字段的值不为空,则需要登录xadmin后台进行添加课程中的标签字段的数据,博主这里将课程mysql主从复制以及mysql主从复制2添加相同标签mysql
- 刷新页面,正确显示出相关课程信息
5.课程详情页面收藏功能
- 说明:在页面中有两个收藏功能,分别是课程收藏以及机构收藏,两个收藏功能逻辑与机构详情页面的收藏功能一致,公用AddFavView视图函数,完成同样逻辑,代码的重复性
- 即不需要再编写收藏功能接口函数了,只需要在course-detail详情页模板中继承父模板base中预留custom_js数据块,完成ajxa post异步请求,完成此功能,在js代码中需要分别定义课程收藏以及机构收藏,因为它们两个功能在调用add_fav函数时,传递的fav_id以及fav_type是不一样的
{% block custom_js %}
<script type="text/javascript">
//收藏分享
function add_fav(current_elem, fav_id, fav_type){
$.ajax({
cache: false,
type: "POST",
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 %}
- 在视图中跟之前机构收藏一样,需要判断UserFavorite用户收藏表中是否存在数据,设置开关,向模板中传递开关,根据开关的值,来判断页面收藏功能块内容是显示收藏还是已收藏
# 设置默认为未收藏状态
has_fav_course = False
has_fav_org = False
# 当用户为登录状态才能根据条件查询该用户收藏数据
if request.user.is_authenticated():
# 当用户已收藏课程时,即has_fav_course = True ,需注意这里的fav_type = 1 这个条件是固定的因此为课程收藏
if UserFavorite.objects.filter(user=request.user, fav_id=int(course.id), fav_type=1):
has_fav_course = True
# 当用户已收藏机构时,即has_fav_org = Tru