Code
Copy course-comments.html and course-video.html into the templates directory
Change course-video.html first , and also inherit base.html, and then have your own styles in it, and keep
(1) Configure url and view
# Course chapter information page
re_path('info/(?P<course_id>\d+)/', CourseInfoView.as_view(), name="course_info"),class CourseInfoView(View):
'''Course chapter information'''
def get(self, request, course_id):
course = Course.objects.get(id=int(course_id))
return render(request, "course-video.html", {
"course": course,
})(2) Configure related links
First modify the link in custom_bread in course-vedio.html
{% block custom_bread %}
<section>
<div class="wp">
<div class="crumbs">
<ul>
<li><a href="index.html">Home</a>></li>
<li><a href="{% url'course:course_list' %}">Open course</a>></li>
<li><a href="{% url'course:course_detail' course.id %}">course details</a>></li>
<li>Chapter Information</li>
</ul>
</div>
</div>
</section>
{% endblock %}{% extends'base.html' %}
{% load staticfiles %}
{% block title %}Course list{% endblock %}
{% block custom_bread %}
<section>
<div class="wp">
<div class="crumbs">
<ul>
<li><a href="index.html">Home</a>></li>
<li><a href="{% url'course:course_list' %}">Open course</a>></li>
<li><a href="{% url'course:course_detail' course.id %}">Open course</a>></li>
<li>Course details</li>
</ul>
</div>
</div>
</section>
{% endblock %}
{% block css_learn %}
<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/muke/course/common-less.css' %}">
<link rel="stylesheet" type="text/css" href="{% static'css/mooc.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static'css/aui.css' %}"/>
{% endblock %}
{% block 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">django and vuejs actual combat project 2</h2>
</div>
<div class="statics clearfix">
<div class="static-item ">
<span class="meta-value"><strong>Advanced</strong></span>
<span class="meta">Difficulty</span>
<em></em>
</div>
<div class="static-item static-time">
<span class="meta-value">0 minutes</span>
<span class="meta">Duration</span>
<em></em>
</div>
<div class="static-item">
<span class="meta-value"><strong>13</strong></span>
<span class="meta">Number of learners</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="course-video.html"><span>Chapter</span></a></li>
<li><a id="commentOn" class="" href="course-comment.html"><span>Comments</span></a></li>
</ul>
</div>
<div id="notice" class="clearfix">
<div class="l"> <strong>Course announcement:</strong> <a href="javascript:void(0)">Spring documentation and related jar files have been uploaded</a> </div>
</div>
<div class="mod-chapters">
<div class="chapter chapter-active">
<h3>
<strong><i class="state-expand"></i>Chapter One Basic Knowledge</strong>
</h3>
<ul class="video">
<li>
<a target="_blank" href='/video/3662' class="J-media-item studyvideo">1.1 hello world (0)
<i class="study-state"></i>
</a>
</li>
<li>
<a target="_blank" href='/video/3662' class="J-media-item studyvideo">1.2 Basic concepts (0)
<i class="study-state"></i>
</a>
</li>
<li>
<a target="_blank" href='/video/3662' class="J-media-item studyvideo">django settings.py configuration (0)
<i class="study-state"></i>
</a>
</li>
</ul>
</div>
<div class="chapter chapter-active">
<h3>
<strong><i class="state-expand"></i>Chapter Two Advanced Development</strong>
</h3>
<ul class="video">
<li>
<a target="_blank" href='/video/3662' class="J-media-item studyvideo">2.1 test (0)
<i class="study-state"></i>
</a>
</li>
<li>
<a target="_blank" href='/video/3662' class="J-media-item studyvideo">2.2 test2 (0)
<i class="study-state"></i>
</a>
</li>
</ul>
</div>
<div class="chapter chapter-active">
<h3>
<strong><i class="state-expand"></i>Chapter 3 Demand Analysis and Database Design</strong>
</h3>
<ul class="video">
<li>
<a target="_blank" href='/video/3662' class="J-media-item studyvideo">3.1 django app design (0)
<i class="study-state"></i>
</a>
</li>
<li>
<a target="_blank" href='/video/3662' class="J-media-item studyvideo">3.2 django model design(0)
<i class="study-state"></i>
</a>
</li>
<li>
<a target="_blank" href='/video/3662' class="J-media-item studyvideo">3.3 django users models design(0)
<i class="study-state"></i>
</a>
</li>
<li>
<a target="_blank" href='/video/3662' class="J-media-item studyvideo">3.4 django course models design (0)
<i class="study-state"></i>
</a>
</li>
<li>
<a target="_blank" href='/video/3662' class="J-media-item studyvideo">3.5 organization models design (0)
<i class="study-state"></i>
</a>
</li>
</ul>
</div>
<div class="chapter chapter-active">
<h3>
<strong><i class="state-expand"></i>Chapter 4 Django basic knowledge review</strong>
</h3>
<ul class="video">
<li>
<a target="_blank" href='/video/3662' class="J-media-item studyvideo">4.1 django settings configuration (0)
<i class="study-state"></i>
</a>
</li>
<li>
<a target="_blank" href='/video/3662' class="J-media-item studyvideo">4.2 models design (20)
<i class="study-state"></i>
</a>
</li>
</ul>
</div>
<div class="chapter chapter-active">
<h3>
<strong><i class="state-expand"></i>Chapter 5 Setting up a background management system through xadmin</strong>
</h3>
<ul class="video">
<li>
<a target="_blank" href='/video/3662' class="J-media-item studyvideo">5.1 django admin explanation (10)
<i class="study-state"></i>
</a>
</li>
<li>
<a target="_blank" href='/video/3662' class="J-media-item studyvideo">5.2 xadmin installation and registration(0)
<i class="study-state"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="aside r">
<div class="bd">
<div class="box mb40">
<h4>Data download</h4>
<ul class="downlist">
<li>
<span ><i class="aui-iconfont aui-icon-file"></i> Front-end page</span>
<a href="../media/course/resource/2016/11/media.zip" class="downcode" target="_blank" download="" data-id="274" title="">Download</a>
</li>
</ul>
</div>
<div class="box mb40">
<h4>Instructor Tips</h4>
<div class="teacher-info">
<a href="/u/315464/courses?sort=publish" target="_blank">
<img src='../media/teacher/2016/11/aobama_CXWwMef.png' width='80' height='80'/>
</a>
<span class="tit">
<a href="/u/315464/courses?sort=publish" target="_blank">bobby</a>
</span>
<span class="job">xxx</span>
</div>
<div class="course-info-tip">
<dl class="first">
<dt>Course Notes</dt>
<dd class="autowrap">You need python basics</dd>
</dl>
<dl>
<dt>What did the teacher tell you to learn? </dt>
<dd class="autowrap">Advanced development of django</dd>
</dl>
</div>
</div>
<div class="cp-other-learned js-comp-tabs">
<div class="cp-header clearfix">
<h2 class="cp-tit l">The classmates have also studied this class</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 and vuejs actual combat project 2">
<span class="name autowrap">django and vuejs actual combat project 2</span>
</a>
</li>
<li class="curr">
<a href="course-detail.html" target="_blank">
<img src="../media/courses/2016/12/python object-oriented.jpg" alt="python object-oriented">
<span class="name autowrap">python object-oriented</span>
</a>
</li>
<li class="curr">
<a href="course-detail.html" target="_blank">
<img src="../media/courses/2016/12/python file processing.jpg" alt="python file processing">
<span class="name autowrap">python file processing</span>
</a>
</li>
<li class="curr">
<a href="course-detail.html" target="_blank">
<img src="../media/courses/2016/11/mysql.jpg" alt="django getting started">
<span class="name autowrap">Introduction to Django</span>
</a>
</li>
<li class="curr">
<a href="course-detail.html" target="_blank">
<img src="../media/courses/2016/12/mysql.jpg" alt="xadminadvanced development">
<span class="name autowrap">xadmin advanced development</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 engineer">
<span class="name autowrap">Java engineer</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div> </div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
{% endblock %}Then modify the link of "Start Learning" in course-detetail.html
<div class="btns">
<div class="btn colectgroupbtn" id="jsLeftBtn">
{% if has_fav_course %}Favorite {% else %}Favorite {% endif %}
</div>
<div class="buy btn"><a style="color: white" href="{% url'course:course_info' course.id %}">Start learning</a></div>
</div>(1) Add a url field to Vedio Model
url = models.CharField('Access address',default='',max_length=200)class Video(models.Model):
lesson = models.ForeignKey(Lesson, verbose_name="chapter",on_delete=models.CASCADE)
name = models.CharField("Video Name",max_length=100)
url = models.CharField('Access address',default='',max_length=200)
add_time = models.DateTimeField("Add time", default=datetime.now)
class Meta:
verbose_name = "Video"
verbose_name_plural = verbose_name
def __str__(self):
return self.nameAdd course chapters and chapter video information and links in the xadmin background
python-->>chapter-->>video
(2) Add a method to get chapters to Course
def get_course_lesson(self):
#Get the chapters of the course
return self.lesson_set.all()class Course(models.Model):
'''course'''
DEGREE_CHOICES = (
("cj", "Beginner"),
("zj", "Intermediate"),
("gj", "Advanced")
)
name = models.CharField("Course Name",max_length=50)
desc = models.CharField("Course Description", max_length=300)
detail = models.TextField("Course Details")
degree = models.CharField('Difficulty',choices=DEGREE_CHOICES, max_length=2)
learn_times = models.IntegerField("Learning time (minutes)",default=0)
students = models.IntegerField("Number of students",default=0)
fav_nums = models.IntegerField("Number of Favorites",default=0)
image = models.ImageField("Cover image",upload_to="courses/%Y/%m",max_length=100)
click_nums = models.IntegerField("Number of clicks",default=0)
tag = models.CharField('Course tag',default='',max_length=10)
add_time = models.DateTimeField("Add time",default=datetime.now,)
course_org = models.ForeignKey(CourseOrg, on_delete=models.CASCADE, verbose_name="ownership", null=True, blank=True)
category = models.CharField("Course Category",max_length=20, default="")
class Meta:
verbose_name = "Course"
verbose_name_plural = verbose_name
def get_zj_nums(self):
#Get the number of chapters of the course
return self.lesson_set.all().count()
def get_course_lesson(self):
#Get the chapters of the course
return self.lesson_set.all()
def get_learn_users(self):
#Get the learning users of this course
return self.usercourse_set.all()[:5]
def __str__(self):
return self.name(3) Add a method to get all videos to Lesson
def get_lesson_vedio(self):
#Get all videos in chapter
return self.video_set.all()class Lesson(models.Model):
'''Course Chapters'''
course = models.ForeignKey(Course,verbose_name='course',on_delete=models.CASCADE)
name = models.CharField("Chapter Name",max_length=100)
add_time = models.DateTimeField("Add time",default=datetime.now)
class Meta:
verbose_name = "Chapter"
verbose_name_plural = verbose_name
def get_lesson_vedio(self):
#Get all videos in chapter
return self.video_set.all()
def __str__(self):
return'"{0}" course chapter>> {1}'.format(self.course, self.name)(4) Add a field of study duration to Vedio
learn_times = models.IntegerField("Learning time (minutes)",default=0)class Video(models.Model):
'''Chapter Video'''
lesson = models.ForeignKey(Lesson, verbose_name="chapter",on_delete=models.CASCADE)
name = models.CharField("Video Name",max_length=100)
url = models.CharField('Access address',default='',max_length=200)
learn_times = models.IntegerField("Learning time (minutes)", default=0)
add_time = models.DateTimeField("Add time", default=datetime.now)
class Meta:
verbose_name = "Video"
verbose_name_plural = verbose_name
def __str__(self):
return self.nameCourse chapters and videos
<div class="mod-chapters">
{% for lesson in course.get_course_lesson %}
<div class="chapter chapter-active">
<h3>
<strong><i class="state-expand"></i>{{ lesson.name }}</strong>
</h3>
<ul class="video">
{% for vedio in lesson.get_lesson_vedio %}
<li>
<a target="_blank" href='{{ vedio.url }}' class="J-media-item studyvideo">{{ vedio.name }} ({{ vedio.learn_times }})
<i class="study-state"></i>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
</div>(1) Add resource files in the backend
(2) Pass the course resources of the current course to the front end in the view
class CourseInfoView(View):
def get(self,request,course_id):
course = Course.objects.get(id=int(course_id))
all_resources = CourseResource.objects.filter(course=course)
return render(request,'course-video.html',{'course':course,'all_resources':all_resources})(3) Front-end page display
<div class="box mb40">
<h4>Data download</h4>
<ul class="downlist">
{% for course_resource in all_resources %}
<li>
<span ><i class="aui-iconfont aui-icon-file"></i> {{ course_resource.name }}</span>
<a href="{{ MEDIA_URL }}{{ course_resource.download }}" class="downcode" target="_blank" download="" data-id="274" title="">Download</a>
</li>
{% endfor %}
</ul>
</div>Click Download to download the files we uploaded on the backend
The course information has also been changed by the way
<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">Difficulty</span>
<em></em>
</div>
<div class="static-item static-time">
<span class="meta-value">{{ course.learn_times }} minutes</span>
<span class="meta">Duration</span>
<em></em>
</div>
<div class="static-item">
<span class="meta-value"><strong>{{ course.students }}</strong></span>
<span class="meta">Number of learners</span>
<em></em>
</div>
</div>(1) Add a teacher foreign key to Course
teacher = models.ForeignKey(Teacher,verbose_name='Lecturer',null=True,blank=True,on_delete=models.CASCADE)
class Course(models.Model):
'''course'''
DEGREE_CHOICES = (
("cj", "Beginner"),
("zj", "Intermediate"),
("gj", "Advanced")
)
name = models.CharField("Course Name",max_length=50)
desc = models.CharField("Course Description", max_length=300)
detail = models.TextField("Course Details")
degree = models.CharField('Difficulty',choices=DEGREE_CHOICES, max_length=2)
learn_times = models.IntegerField("Learning time (minutes)",default=0)
students = models.IntegerField("Number of students",default=0)
fav_nums = models.IntegerField("Number of Favorites",default=0)
image = models.ImageField("Cover image",upload_to="courses/%Y/%m",max_length=100)
click_nums = models.IntegerField("Number of clicks",default=0)
tag = models.CharField('Course tag',default='',max_length=10)
add_time = models.DateTimeField("Add time",default=datetime.now,)
course_org = models.ForeignKey(CourseOrg, on_delete=models.CASCADE, verbose_name="ownership", null=True, blank=True)
category = models.CharField("Course Category",max_length=20, default="")
teacher = models.ForeignKey(Teacher,verbose_name='Lecturer',null=True,blank=True,on_delete=models.CASCADE)
class Meta:
verbose_name = "Course"
verbose_name_plural = verbose_name
def get_zj_nums(self):
#Get the number of chapters of the course
return self.lesson_set.all().count()
def get_course_lesson(self):
#Get all chapters of the course
return self.lesson_set.all()
def get_learn_users(self):
#Get the learning users of this course
return self.usercourse_set.all()[:5]
def __str__(self):
return self.nameAdd a lecturer to the course in the background
(2) Add two more fields "Course Instructions" and "The teacher tells you what you can learn" to Course
youneed_know = models.CharField('Course Instructions',max_length=300,default='')
teacher_tell = models.CharField('The teacher tells you', max_length=300, default='')class Course(models.Model):
'''course'''
DEGREE_CHOICES = (
("cj", "Beginner"),
("zj", "Intermediate"),
("gj", "Advanced")
)
name = models.CharField("Course Name",max_length=50)
desc = models.CharField("Course Description", max_length=300)
detail = models.TextField("Course Details")
degree = models.CharField('Difficulty',choices=DEGREE_CHOICES, max_length=2)
learn_times = models.IntegerField("Learning time (minutes)",default=0)
students = models.IntegerField("Number of students",default=0)
fav_nums = models.IntegerField("Number of Favorites",default=0)
image = models.ImageField("Cover image",upload_to="courses/%Y/%m",max_length=100)
click_nums = models.IntegerField("Number of clicks",default=0)
tag = models.CharField('Course tag',default='',max_length=10)
add_time = models.DateTimeField("Add time",default=datetime.now,)
course_org = models.ForeignKey(CourseOrg, on_delete=models.CASCADE, verbose_name="ownership", null=True, blank=True)
category = models.CharField("Course Category",max_length=20, default="")
teacher = models.ForeignKey(Teacher,verbose_name='Lecturer',null=True,blank=True,on_delete=models.CASCADE)
youneed_know = models.CharField('Course Instructions',max_length=300,default='')
teacher_tell = models.CharField('The teacher tells you', max_length=300, default='')
class Meta:
verbose_name = "Course"
verbose_name_plural = verbose_name
def get_zj_nums(self):
#Get the number of chapters of the course
return self.lesson_set.all().count()
def get_course_lesson(self):
#Get all chapters of the course
return self.lesson_set.all()
def get_learn_users(self):
#Get the learning users of this course
return self.usercourse_set.all()[:5]
def __str__(self):
return self.name(3) Front-end display
<div class="box mb40">
<h4>Instructor Tips</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>Course Notes</dt>
<dd class="autowrap">{{ course.youneed_know }}</dd>
</dl>
<dl>
<dt>What did the teacher tell you to learn? </dt>
<dd class="autowrap">{{ course.teacher_tell }}</dd>
</dl>
</div>
</div>(1) course-comments.html still inherits base.html
{% extends'base.html' %}
{% load staticfiles %}
{% block title %}Open class comment{% endblock %}
{% block custom_bread %}
<section>
<div class="wp">
<div class="crumbs">
<ul>
<li><a href="index.html">Home</a>></li>
<li><a href="{% url'course:course_list' %}">Open course</a>></li>
<li><a href="{% url'course:course_detail' course.id %}">Open course</a>></li>
<li>Course comments</li>
</ul>
</div>
</div>
</section>
{% endblock %}
{% block custom_css %}
<link rel="stylesheet" type="text/css" href="{% static'css/muke/course/learn-less.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/common-less.css' %}">
<link rel="stylesheet" type="text/css" href="{% static'css/mooc.css' %}"/>
{% endblock %}
{% block 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">django and vuejs actual combat project 2</h2>
</div>
<div class="statics clearfix">
<div class="static-item ">
<span class="meta-value"><strong>Advanced</strong></span>
<span class="meta">Difficulty</span>
<em></em>
</div>
<div class="static-item static-time">
<span class="meta-value">0 minutes</span>
<span class="meta">Duration</span>
<em></em>
</div>
<div class="static-item">
<span class="meta-value"><strong>12</strong></span>
<span class="meta">Number of learners</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 "id="learnOn" href="course-video.html"><span>Chapter</span></a></li>
<li><a id="commentOn" class="active" href="course-comment.html"><span>Comments</span></a></li>
</ul>
</div>
<!--Post a comment-->
<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=" Nonsense, complaints, praise, encouragement... Say whatever you want!" ></textarea>
</div>
<input type="button" id="js-pl-submit" class="pub-btn" data-cid="452" value="Post a comment">
<p class="global-errortip js-global-error"></p>
</div>
<div id="course_note">
<ul class="mod-post" id="comment-list">
<li class="post-row">
<div class="media">
<span target="_blank"><img src='../media/image/2016/12/default_big_14.png' width='40' height='40'/></span>
</div>
<div class="bd">
<div class="tit">
<span target="_blank">bobby</span>
</div>
<p class="cnt">I saw Chapter 3. Although some of the knowledge is not well understood, it feels very useful. I want to listen to it first before saying it. Then come and listen to it a second time. Finally, I want to say that the teacher is great! ! ! </p>
<div class="footer clearfix">
<span title="Created time" class="l timeago">Time: 22:14, December 13, 2016</span>
</div>
</div>
</li>
<li class="post-row">
<div class="media">
<span target="_blank"><img src='../media/image/2016/12/default_big_14.png' width='40' height='40'/></span>
</div>
<div class="bd">
<div class="tit">
<span target="_blank">bobby</span>
</div>
<p class="cnt">Teacher, you spoke very well, and I look forward to the next class. I have a small problem. I installed jedi with git clone and apt-get. :help jedi-vim prompts me E149: Sorry, there is no description of jedi-vim, and the completion cannot be used. I am a little confused. . I installed the vim plugin python-mode and it can't be used...</p>
<div class="footer clearfix">
<span title="Created time" class="l timeago">Time: December 13, 2016 22:13</span>
</div>
</div>
</li>
<li class="post-row">
<div class="media">
<span target="_blank"><img src='../media/image/2016/12/default_big_14.png' width='40' height='40'/></span>
</div>
<div class="bd">
<div class="tit">
<span target="_blank">bobby</span>
</div>
<p class="cnt">Hello. I'm looking at the example of using context management in section 7.3. Some questions about the use of the telnetlib library. Telnet.read_until(expected, timeout=None) ;Using this method, it is easy to get stuck at the place where the login user name is entered and it will not be executed. If you telnet to the target host, if the prompt is not login, can you not log in? </p>
<div class="footer clearfix">
<span title="Created time" class="l timeago">Time: December 13, 2016 22:13</span>
</div>
</div>
</li>
<li class="post-row">
<div class="media">
<span target="_blank"><img src='../media/image/2016/12/default_big_14.png' width='40' height='40'/></span>
</div>
<div class="bd">
<div class="tit">
<span target="_blank">bobby</span>
</div>
<p class="cnt">Excellent, I have listened to the doctor’s class a long time ago, and this course has made me insightful again. Just like other students said, such a simple way to achieve cool animations allows me Excited, hurry up and finish learning the video content so that I can realize the 10 tasks. I hope that Xu Dashen will give me a good guide and guide me. If I can recommend something to the industry after learning, it would be better. I will start the internship next year! I'm getting nervous--</p>
<div class="footer clearfix">
<span title="Created time" class="l timeago">Time: 22:12, December 13, 2016</span>
</div>
</div>
</li>
<li class="post-row">
<div class="media">
<span target="_blank"><img src='../media/image/2016/12/default_big_14.png' width='40' height='40'/></span>
</div>
<div class="bd">
<div class="tit">
<span target="_blank">bobby</span>
</div>
<p class="cnt">Test it</p>
<div class="footer clearfix">
<span title="Created time" class="l timeago">Time: 22:11, December 13, 2016</span>
</div>
</div>
</li>
<li class="post-row">
<div class="media">
<span target="_blank"><img src='../media/image/2016/12/default_big_14.png' width='40' height='40'/></span>
</div>
<div class="bd">
<div class="tit">
<span target="_blank">bobby</span>
</div>
<p class="cnt">OK</p>
<div class="footer clearfix">
<span title="Created time" class="l timeago">Time: December 8, 2016 22:07</span>
</div>
</div>
</li>
<li class="post-row">
<div class="media">
<span target="_blank"><img src='../media/image/2016/12/default_big_14.png' width='40' height='40'/></span>
</div>
<div class="bd">
<div class="tit">
<span target="_blank">bobby</span>
</div>
<p class="cnt">OK</p>
<div class="footer clearfix">
<span title="Created time" class="l timeago">Time: December 8, 2016 22:07</span>
</div>
</div>
</li>
<li class="post-row">
<div class="media">
<span target="_blank"><img src='../media/image/2016/12/default_big_14.png' width='40' height='40'/></span>
</div>
<div class="bd">
<div class="tit">
<span target="_blank">bobby</span>
</div>
<p class="cnt">OK</p>
<div class="footer clearfix">
<span title="Created time" class="l timeago">Time: December 8, 2016 22:06</span>
</div>
</div>
</li>
<li class="post-row">
<div class="media">
<span target="_blank"><img src='../media/image/2016/12/default_big_14.png' width='40' height='40'/></span>
</div>
<div class="bd">
<div class="tit">
<span target="_blank">bobby</span>
</div>
<p class="cnt">Do it again</p>
<div class="footer clearfix">
<span title="Created time" class="l timeago">Time: November 5, 2016 23:18</span>
</div>
</div>
</li>
<li class="post-row">
<div class="media">
<span target="_blank"><img src='../media/image/2016/12/default_big_14.png' width='40' height='40'/></span>
</div>
<div class="bd">
<div class="tit">
<span target="_blank">bobby</span>
</div>
<p class="cnt">good </p>
<div class="footer clearfix">
<span title="Created time" class="l timeago">Time: November 5, 2016 23:18</span>
</div>
</div>
</li>
<li class="post-row">
<div class="media">
<span target="_blank"><img src='../media/image/2016/12/default_big_14.png' width='40' height='40'/></span>
</div>
<div class="bd">
<div class="tit">
<span target="_blank">bobby</span>
</div>
<p class="cnt">Speaking very well</p>
<div class="footer clearfix">
<span title="Created time" class="l timeago">Time: November 5, 2016 23:13</span>
</div>
</div>
</li>
<li class="post-row">
<div class="media">
<span target="_blank"><img src='../media/image/2016/12/default_big_14.png' width='40' height='40'/></span>
</div>
<div class="bd">
<div class="tit">
<span target="_blank">bobby</span>
</div>
<p class="cnt">Ask me</p>
<div class="footer clearfix">
<span title="Created time" class="l timeago">Time: November 5, 2016 23:09</span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="aside r">
<div class="bd">
<div class="box mb40">
<h4>Data download</h4>
<ul class="downlist">
<li>
<span ><i class="aui-iconfont aui-icon-file"></i> Front-end page</span>
<a href="../media/course/resource/2016/11/media.zip" class="downcode" target="_blank" download="" data-id="274" title="">Download</a>
</li>
</ul>
</div>
<div class="box mb40">
<h4>Instructor Tips</h4>
<div class="teacher-info">
<a href="/u/315464/courses?sort=publish" target="_blank">
<img src='../media/teacher/2016/11/aobama_CXWwMef.png' width='80' height='80'/>
</a>
<span class="tit">
<a href="/u/315464/courses?sort=publish" target="_blank">bobby</a>
</span>
<span class="job">xxx</span>
</div>
<div class="course-info-tip">
<dl class="first">
<dt>Course Notes</dt>
<dd class="autowrap">You need python basics</dd>
</dl>
<dl>
<dt>What did the teacher tell you to learn? </dt>
<dd class="autowrap">Advanced development of django</dd>
</dl>
</div>
</div>
<div class="cp-other-learned js-comp-tabs">
<div class="cp-header clearfix">
<h2 class="cp-tit l">The classmates have also studied this class</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="/view/85?src=sug" target="_blank">
<img src="http://img.mukewang.com/57035ff200014b8a06000338-240-135.jpg" alt="Java Getting Started Season 1">
<span class="name autowrap">Introduction to Java Season 1</span>
</a>
</li>
<li>
<a href="/view/110?src=sug" target="_blank">
<img src="http://img.mukewang.com/5703604a0001694406000338-240-135.jpg" alt="Java Introduction Third Season">
<span class="name autowrap">Introduction to Java Season 3</span>
</a>
</li>
<li>
<a href="/view/124?src=sug" target="_blank">
<img src="http://img.mukewang.com/570360620001390f06000338-240-135.jpg" alt="Java Introduction 2.Season">
<span class="name autowrap">Introduction to Java Season 2</span>
</a>
</li>
<li>
<a href="/view/47?src=sug" target="_blank">
<img src="http://img.mukewang.com/570765d90001bf1406000338-240-135.jpg" alt="Spring MVC start">
<span class="name autowrap">Spring MVC started</span>
</a>
</li>
<li>
<a href="/view/36?src=sug" target="_blank">
<img src="http://img.mukewang.com/53e1d0470001ad1e06000338-240-135.jpg" alt="JavaScript Getting Started">
<span class="name autowrap">Introduction to JavaScript</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 engineer">
<span class="name autowrap">Java engineer</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div> </div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
{% endblock %}(2) URL and view
#Course comments
re_path('comment/(?P<course_id>\d+)/', CommentsView.as_view(), name="course_comments"),class CommentsView(View):
'''Course Comments'''
def get(self, request, course_id):
course = Course.objects.get(id=int(course_id))
all_resources = CourseResource.objects.filter(course=course)
all_comments = CourseComments.objects.all()
return render(request, "course-comment.html", {
"course": course,
"all_resources": all_resources,
'all_comments':all_comments,
})(3) Add link
Modify the links of "Chapter" and "Comment" in course-vedio.html
<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>Chapter</span></a> </li>
<li><a id="commentOn" class="" href="{% url'course:course_comments' course.id %}"><span>Comments</span></a></li>
</ul>
</div>Then put the comment page and the chapter page in the same place ('course','data download','instructor tips') directly.
(4) Add comments
Add comment URL and background processing View
#add comment
path('add_comment/', AddCommentsView.as_view(), name="add_comment"),#add comment
class AddCommentsView(View):
'''user comment'''
def post(self, request):
if not request.user.is_authenticated:
# When you are not logged in, return to json to prompt you are not logged in. Jumping to the login page is done in ajax
return HttpResponse('{"status":"fail", "msg":"User not logged in"}', content_type='application/json')
course_id = request.POST.get("course_id", 0)
comments = request.POST.get("comments", "")
if int(course_id)> 0 and comments:
# Instantiate a course_comments object
course_comments = CourseComments()
# Which course is getting the comment
course = Course.objects.get(id = int(course_id))
# Save the commented course, commented content and commented user to the database separately
course_comments.course = course
course_comments.comments = comments
course_comments.user = request.user
course_comments.save()
return HttpResponse('{"status":"success", "msg":"comment successful"}', content_type='application/json')
else:
return HttpResponse('{"status":"fail", "msg":"Comment failed"}', content_type='application/json')Front-end Ajax to add user comments
{% block custom_js %}
<script type="text/javascript">
//add comment
$('#js-pl-submit').on('click', function(){
var comments = $("#js-pl-textarea").val()
if(comments == ""){
alrt("Comments cannot be empty")
return
}
$.ajax({
cache: false,
type: "POST",
url:"{% url'course: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 =='User is not logged in'){
win.loc.href="/login/";
}else{
alrt(data.msg)
}
}else if(data.status =='success'){
win.loc.reload();//Refresh the current page.
}
},
});
});
</script>
{% endblock %}Show comment information
<div id="course_note">
<ul class="mod-post" id="comment-list">
{% for user_comment in all_comments %}
<li class="post-row">
<div class="media">
<span target="_blank"><img src='{{ MEDIA_URL }}{{ user_comment.user.image }}'
width='40' height='40'/></span>
</div>
<div class="bd">
<div class="tit">
<span target="_blank">{{ user_comment.user.username }}</span>
</div>
<p class="cnt">
{{ user_comment.comments }}
<div class="footer clearfix">
<span title="Created time"
class="l timeago">Time: {{ user_comment.add_time }}</span>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>{% extends'base.html' %}
{% load staticfiles %}
{% block title %}Open class comment{% endblock %}
{% block custom_bread %}
<section>
<div class="wp">
<div class="crumbs">
<ul>
<li><a href="index.html">Home</a>></li>
<li><a href="{% url'course:course_list' %}">Open course</a>></li>
<li><a href="{% url'course:course_detail' course.id %}">Open course</a>></li>
<li>Course comments</li>
</ul>
</div>
</div>
</section>
{% endblock %}
{% block custom_css %}
<link rel="stylesheet" type="text/css" href="{% static'css/muke/course/learn-less.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/common-less.css' %}">
<link rel="stylesheet" type="text/css" href="{% static'css/mooc.css' %}"/>
{% endblock %}
{% block 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">Difficulty</span>
<em></em>
</div>
<div class="static-item static-time">
<span class="meta-value">{{ course.learn_times }} minutes</span>
<span class="meta">Duration</span>
<em></em>
</div>
<div class="static-item">
<span class="meta-value"><strong>{{ course.students }}</strong></span>
<span class="meta">Number of learners</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>Chapter</span></a></li>
<li><a id="commentOn" class=""
href="{% url'course:course_comments' course.id %}"><span>Comments</span></a></li>
</ul>
</div>
<!--Post a comment-->
<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="What are you talking about!!!"></textarea>
</div>
<input type="button" id="js-pl-submit" class="pub-btn" data-cid="452" value="Post a comment">
<p class="global-errortip js-global-error"></p>
</div>
<div id="course_note">
<ul class="mod-post" id="comment-list">
{% for user_comment in all_comments %}
<li class="post-row">
<div class="media">
<span target="_blank"><img src='{{ MEDIA_URL }}{{ user_comment.user.image }}'
width='40' height='40'/></span>
</div>
<div class="bd">
<div class="tit">
<span target="_blank">{{ user_comment.user.username }}</span>
</div>
<p class="cnt">
{{ user_comment.comments }}
<div class="footer clearfix">
<span title="Created time"
class="l timeago">Time: {{ user_comment.add_time }}</span>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
<div class="aside r">
<div class="bd">
<div class="box mb40">
<h4>Data download</h4>
<ul class="downlist">
{% for course_resource in all_resources %}
<li>
<span><i
class="aui-iconfont aui-icon-file"></i> {{ course_resource.name }}</span>
<a href="{{ MEDIA_URL }}{{ course_resource.download }}" class="downcode"
target="_blank" download="" data-id="274" title="">Download</a>
</li>
{% endfor %}
</ul>
</div>
<div class="box mb40">
<h4>Instructor Tips</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>Course Notes</dt>
<dd class="autowrap">{{ course.youneed_know }}</dd>
</dl>
<dl>
<dt>What did the teacher tell you to learn? </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">The classmates have also studied this class</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="/view/85?src=sug" target="_blank">
<img src="http://img.mukewang.com/57035ff200014b8a06000338-240-135.jpg"
alt="Java Getting Started Season 1">
<span class="name autowrap">Introduction to Java Season 1</span>
</a>
</li>
<li>
<a href="/view/110?src=sug" target="_blank">
<img src="http://img.mukewang.com/5703604a0001694406000338-240-135.jpg"
alt="Java Introduction Third Season">
<span class="name autowrap">Introduction to Java Season 3</span>
</a>
</li>
<li>
<a href="/view/124?src=sug" target="_blank">
<img src="http://img.mukewang.com/570360620001390f06000338-240-135.jpg"
alt="Introduction to Java Season 2">
<span class="name autowrap">Introduction to Java Season 2</span>
</a>
</li>
<li>
<a href="/view/47?src=sug" target="_blank">
<img src="http://img.mukewang.com/570765d90001bf1406000338-240-135.jpg"
alt="Spring MVC getting started">
<span class="name autowrap">Spring MVC started</span>
</a>
</li>
<li>
<a href="/view/36?src=sug" target="_blank">
<img src="http://img.mukewang.com/53e1d0470001ad1e06000338-240-135.jpg"
alt="JavaScript Getting Started">
<span class="name autowrap">Introduction to JavaScript</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 engineer">
<span class="name autowrap">Java engineer</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">
//add comment
$('#js-pl-submit').on('click', function(){
var comments = $("#js-pl-textarea").val()
if(comments == ""){
alrt("Comments cannot be empty")
return
}
$.ajax({
cache: false,
type: "POST",
url:"{% url'course: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 =='User is not logged in'){
win.loc.href="/login/";
}else{
alrt(data.msg)
}
}else if(data.status =='success'){
win.loc.reload();//Refresh the current page.
}
},
});
});
</script>
{% endblock %}(1)view
#Related Course Recommendation
# Find all users studying this course
user_courses = UserCourse.objects.filter(course=course)
# Find the id of all users who are learning this course
user_ids = [user_course.user_id for user_course in user_courses]
# Through the id of all users, find all the processes that all users have learned
all_user_courses = UserCourse.objects.filter(user_id__in=user_ids)
# Take out all course ids
course_ids = [all_user_course.course_id for all_user_course in all_user_courses]
# Find all courses through the id of all courses, and go to five according to the number of clicks
relate_courses = Course.objects.filter(id__in=course_ids).order_by("-click_nums")[:5]class CourseInfoView(View):
'''Course chapter information'''
def get(self,request,course_id):
course = Course.objects.get(id=int(course_id))
#Related Course Recommendation
# Find all users studying this course
user_courses = UserCourse.objects.filter(course=course)
# Find the id of all users who are learning this course
user_ids = [user_course.user_id for user_course in user_courses]
# Through the id of all users, find all the processes that all users have learned
all_user_courses = UserCourse.objects.filter(user_id__in=user_ids)
# Take out all course ids
course_ids = [all_user_course.course_id for all_user_course in all_user_courses]
# Find all courses through the id of all courses, and go to five according to the number of clicks
relate_courses = Course.objects.filter(id__in=course_ids).order_by("-click_nums")[:5]
# Resources
all_resources = CourseResource.objects.filter(course=course)
return render(request,'course-video.html',{
'course':course,
'all_resources':all_resources,
'relate_courses':relate_courses,
})(2) Front-end coure-vedio.html
<div class="cp-other-learned js-comp-tabs">
<div class="cp-header clearfix">
<h2 class="cp-tit l">The classmates have also studied this class</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 relate_course in relate_courses %}
<li class="curr">
<a href="{% url'course:course_detail' relate_course.id %}" target="_blank">
<img src="{{ MEDIA_URL }}{{ relate_course.image }}" alt="{{ relate_course.name }}">
<span class="name autowrap">{{ relate_course.name }}</span>
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>After the user clicks "start learning", the course should be associated with the user. Before that, a judgment should be made. If the user is not logged in, let the user log in first.
If it is written in a functional way, it is fine to directly add a decorator (@login_required), but we are writing in a class way, and we must use inheritance
Create a file mixin_utils.py in the utils directory (the most basic classes are placed in mixin_utils.py), the code is as follows:
# apps/utils/mixin_utils.py
from django.contrib.auth.decorators import login_required
from django.utils.decorators import method_decorator
class LoginRequiredMixin(object):
@method_decorator(login_required(login_url='/login/'))
def dispatch(self,request,*args,**kwargs):
return super(LoginRequiredMixin, self).dispatch(request,*args,**kwargs)The Mixin ends in django, which represents the most basic View
Then let CourseInfoView and CommentsView inherit LoginRequiredMixin
class CommentsView(LoginRequiredMixin,View): . . . class CourseInfoView(LoginRequiredMixin,View): . . .
After inheritance, users who are not logged in click "Start Learning" and they will automatically jump to the login interface
Associate users with courses
# Query whether the user has taken the course
user_courses = UserCourse.objects.filter(user=request.user,course=course)
if not user_courses:
# If you don’t learn the course, link up
user_course = UserCourse(user=request.user,course=course)
user_course.save()All codes:
class CourseInfoView(LoginRequiredMixin,View):
'''Course chapter information'''
def get(self,request,course_id):
course = Course.objects.get(id=int(course_id))
# Query whether the user has taken the course
user_courses = UserCourse.objects.filter(user=request.user,course=course)
if not user_courses:
# If you don’t learn the course, link up
user_course = UserCourse(user=request.user,course=course)
user_course.save()
#Related Course Recommendation
# Find all users studying this course
user_courses = UserCourse.objects.filter(course=course)
# Find the id of all users who are learning this course
user_ids = [user_course.user_id for user_course in user_courses]
# Through the id of all users, find all the processes that all users have learned
all_user_courses = UserCourse.objects.filter(user_id__in=user_ids)
# Take out all course ids
course_ids = [all_user_course.course_id for all_user_course in all_user_courses]
# Find all courses through the id of all courses, and go to five according to the number of clicks
relate_courses = Course.objects.filter(id__in=course_ids).order_by("-click_nums")[:5]
# Resources
all_resources = CourseResource.objects.filter(course=course)
return render(request,'course-video.html',{
'course':course,
'all_resources':all_resources,
'relate_courses':relate_courses,
})Now you can click "Start learning" for other courses, and you can see it under "The classmates have studied well", indicating that there is no problem.
(1) Copy course-paly.html to the templates directory
The main difference is css and a vedio div
Download video-js.min.css and video.min.js into the css and js directories respectively
(2) url
# Course video playback page
path('video/(?P<video_id>\d+)/', VideoPlayView.as_view(), name="video_play"),(3) Modify the video link in course-video.html
<li>
<a target="_blank" href='{% url'course:video_play' vedio.id %}' class="J-media-item studyvideo">{{ vedio.name }} ({{ vedio.learn_times }} )
<i class="study-state"></i>
</a>
</li>(4) view
class VideoPlayView(LoginRequiredMixin, View):
'''Course chapter video playback page'''
def get(self,request,video_id):
video = Video.objects.get(id=int(video_id))
#Find the chapter by foreign key and then find the course corresponding to the video
course = video.lesson.course
course.students += 1
course.save()
# Query whether the user has taken the course
user_courses = UserCourse.objects.filter(user=request.user,course=course)
if not user_courses:
# If you don’t learn the course, link up
user_course = UserCourse(user=request.user,course=course)
user_course.save()
#Related Course Recommendation
# Find all users studying this course
user_courses = UserCourse.objects.filter(course=course)
# Find the id of all users who are learning this course
user_ids = [user_course.user_id for user_course in user_courses]
# Through the id of all users, find all the processes that all users have learned
all_user_courses = UserCourse.objects.filter(user_id__in=user_ids)
# Take out all course ids
course_ids = [all_user_course.course_id for all_user_course in all_user_courses]
# Find all courses through the id of all courses, and go to five according to the number of clicks
relate_courses = Course.objects.filter(id__in=course_ids).order_by("-click_nums")[:5]
# Resources
all_resources = CourseResource.objects.filter(course=course)
return render(request,'course-play.html',{
'course':course,
'all_resources':all_resources,
'relate_courses':relate_courses,
'video':video,
})# course/views.py
from django.shortcuts import render
from django.views.generic import View
from .models import Course,CourseResource,Video
from operation.models import UserFavorite,CourseComments,UserCourse
from pure_pagination import Paginator, EmptyPage, PageNotAnInteger
from django.http import HttpResponse
from utils.mixin_utils import LoginRequiredMixin
class CourseListView(View):
'''curriculum schedule'''
def get(self, request):
all_courses = Course.objects.all().order_by('-add_time')
# Popular courses recommended
hot_courses = Course.objects.all().order_by('-click_nums')[:3]
# Sort
sort = request.GET.get('sort', "")
if sort:
if sort == "students":
all_courses = all_courses.order_by("-students")
elif sort == "hot":
all_courses = all_courses.order_by("-click_nums")
# Paging
try:
page = request.GET.get('page', 1)
except PageNotAnInteger:
page = 1
p = Paginator(all_courses,2, request=request)
courses = p.page(page)
return render(request, "course-list.html", {
"all_courses":courses,
'sort': sort,
'hot_courses': hot_courses,
})
class CourseDetailView(View):
'''Course Details'''
def get(self, request, course_id):
course = Course.objects.get(id=int(course_id))
# Course clicks plus 1
course.click_nums += 1
course.save()
# Course label
# Find courses in the database through the current label
has_fav_course = False
has_fav_org = False
# We need to judge only when the user is logged in.
if request.user.is_authenticated:
if UserFavorite.objects.filter(user=request.user, fav_id=course.id, fav_type=1):
has_fav_course = True
if UserFavorite.objects.filter(user=request.user, fav_id=course.course_org.id, fav_type=2):
has_fav_org = True
tag = course.tag
if tag:
# Need to start from 1 or I will recommend myself
relate_courses = Course.objects.filter(tag=tag)[:2]
else:
relate_courses = []
return render(request, "course-detail.html", {
'course':course,
'relate_courses':relate_courses,
"has_fav_course": has_fav_course,
"has_fav_org": has_fav_org,
})
class CourseInfoView(LoginRequiredMixin,View):
'''Course chapter information'''
def get(self,request,course_id):
course = Course.objects.get(id=int(course_id))
course.students += 1
course.save()
# Query whether the user has taken the course
user_courses = UserCourse.objects.filter(user=request.user,course=course)
if not user_courses:
# If you don’t learn the course, link up
user_course = UserCourse(user=request.user,course=course)
user_course.save()
#Related Course Recommendation
# Find all users studying this course
user_courses = UserCourse.objects.filter(course=course)
# Find the id of all users who are learning this course
user_ids = [user_course.user_id for user_course in user_courses]
# Through the id of all users, find all the processes that all users have learned
all_user_courses = UserCourse.objects.filter(user_id__in=user_ids)
# Take out all course ids
course_ids = [all_user_course.course_id for all_user_course in all_user_courses]
# Find all courses through the id of all courses, and go to five according to the number of clicks
relate_courses = Course.objects.filter(id__in=course_ids).order_by("-click_nums")[:5]
# Resources
all_resources = CourseResource.objects.filter(course=course)
return render(request,'course-video.html',{
'course':course,
'all_resources':all_resources,
'relate_courses':relate_courses,
})
class CommentsView(LoginRequiredMixin,View):
'''Course Comments'''
def get(self, request, course_id):
course = Course.objects.get(id=int(course_id))
all_resources = CourseResource.objects.filter(course=course)
all_comments = CourseComments.objects.all()
return render(request, "course-comment.html", {
"course": course,
"all_resources": all_resources,
'all_comments':all_comments,
})
#add comment
class AddCommentsView(View):
'''user comment'''
def post(self, request):
if not request.user.is_authenticated:
# When you are not logged in, return to json to prompt you are not logged in. Jumping to the login page is done in ajax
return HttpResponse('{"status":"fail", "msg":"User not logged in"}', content_type='application/json')
course_id = request.POST.get("course_id", 0)
comments = request.POST.get("comments", "")
if int(course_id)> 0 and comments:
# Instantiate a course_comments object
course_comments = CourseComments()
# Which course is getting the comment
course = Course.objects.get(id = int(course_id))
# Save the commented course, commented content and commented user to the database separately
course_comments.course = course
course_comments.comments = comments
course_comments.user = request.user
course_comments.save()
return HttpResponse('{"status":"success", "msg":"comment successful"}', content_type='application/json')
else:
return HttpResponse('{"status":"fail", "msg":"Comment failed"}', content_type='application/json')
class VideoPlayView(LoginRequiredMixin, View):
'''Course chapter video playback page'''
def get(self,request,video_id):
video = Video.objects.get(id=int(video_id))
#Find the chapter by foreign key and then find the course corresponding to the video
course = video.lesson.course
course.students += 1
course.save()
# Query whether the user has taken the course
user_courses = UserCourse.objects.filter(user=request.user,course=course)
if not user_courses:
# If you don’t learn the course, link up
user_course = UserCourse(user=request.user,course=course)
user_course.save()
#Related Course Recommendation
# Find all users studying this course
user_courses = UserCourse.objects.filter(course=course)
# Find the id of all users who are learning this course
user_ids = [user_course.user_id for user_course in user_courses]
# Through the id of all users, find all the processes that all users have learned
all_user_courses = UserCourse.objects.filter(user_id__in=user_ids)
# Take out all course ids
course_ids = [all_user_course.course_id for all_user_course in all_user_courses]
# Find all courses through the id of all courses, and go to five according to the number of clicks
relate_courses = Course.objects.filter(id__in=course_ids).order_by("-click_nums")[:5]
# Resources
all_resources = CourseResource.objects.filter(course=course)
return render(request,'course-play.html',{
'course':course,
'all_resources':all_resources,
'relate_courses':relate_courses,
'video':video,
}){% extends'base.html' %}
{% block titile %}
{{ video.name }} Online
{% endblock %}
{% load staticfiles %}
<!--crumbs start-->
{% block custom_bread %}
<section>
<div class="wp">
<div class="crumbs">
<ul>
<li><a href="{% url'index' %}">Homepage</a>></li>
<li><a href="{% url'course:list' %}">Open courses</a>></li>
<li><a href="{% url'course:course_detail' course.id %}">{{ course.name }}</a>></li>
<li></li>
</ul>
</div>
</div>
</section>
{% endblock %}
{% block custom_css %}
<link rel="stylesheet" type="text/css" href="{% static'css/video-js.min.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' %}">
<style>
.video-js .vjs-big-play-button {
top: 50%;
left: 50%;
}
</style>
{% endblock %}
{% block custom_js %}
<script src="{% static'js/video.min.js' %}" type="text/javascript"></script>
{% endblock %}
{% block content %}
<div id="main">
<div class="course-info-main clearfix w has-progress">
<div style="width:1200px;height: 650px; margin-left:100px">
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="1200"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup="" type="video/mp4">
<source src="{{ video.url }}">
</video>
</div>
<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>Chapter</span></a></li>
<li><a id="commentOn" class=""
href="{% url'course:course_comments' course.id %}"><span>Comments</span></a></li>
</ul>
</div>
<div id="notice" class="clearfix">
<div class="l"><strong>Class announcement:</strong> <a
href="javascript:void(0)">Spring documentation and related jar files have been uploaded</a></div>
</div>
<div class="mod-chapters">
{% for lesson in course.lesson_set.get_queryset %}
<div class="chapter chapter-active">
<h3>
<strong><i class="state-expand"></i>{{ lesson.name }}</strong>
</h3>
<ul class="video">
{% for video in lesson.video_set.get_queryset %}
<li>
<a target="_blank" href='{% url'course:video_play' video.id %}'
class="J-media-item studyvideo">{{ video.name }}
({{ video.learn_times }})
<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>Data download</h4>
<ul class="downlist">
{% for course_resource in course.courseresource_set.get_queryset %}
<li>
<span><i
class="aui-iconfont aui-icon-file"></i> {{ course_resource.name }}</span>
<a href="{{ MEDIA_URL }}{{ course_resource.download }}" class="downcode"
target="_blank" download="" data-id="274" title="">Download</a>
</li>
{% endfor %}
</ul>
</div>
<div class="box mb40">
<h4>Instructor Tips</h4>
<div class="teacher-info">
<a href="{% url'org:teacher_detail' course.teacher.id %}" target="_blank">
<img src='{{ MEDIA_URL }}{{ course.teacher.image }}' width='80' height='80'/>
</a>
<span class="tit">
<a href="{% url'org:teacher_detail' course.teacher.id %}" 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>Course Notes</dt>
<dd class="autowrap">{{ course.you_need_know }}</dd>
</dl>
<dl>
<dt>What did the teacher tell you to learn? </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">The classmates have also studied this class</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 relate_course in relate_courses %}
<li class="curr">
<a href="{% url'course:course_detail' relate_course.id %}"
target="_blank">
<img src="{{ MEDIA_URL }}{{ relate_course.image }}"
alt="{{ relate_course.name }}">
<span class="name autowrap">{{ relate_course.name }}</span>
</a>
</li>
{% endfor %}
</ul>
</div>
<div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="plan">
<ul class="other-list">
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
{% endblock %}