Code
(1) Configure urls
MxOnline/urls
path("course/", include('course.urls', namespace="course")),Create new urls.py in the course
# course/urls.py
from django.urls import path,re_path
from .views import CourseListView
# To write the name of the app
app_name = "course"
urlpatterns = [
path('list/',CourseListView.as_view(),name='course_list'),
]Copy course-list.html to the templates directory
from django.shortcuts import render
from django.views.generic import View
class CourseListView(View):
def get(self, request):
return render(request, "course-list.html")(2) course-list.html inherits base.html
Modify the title, modify the bread, and put the unique course-list in the content
{#templates/course-list.html#}
{% extends'base.html' %}
{% load staticfiles %}
{% block title %}List of public classes{% endblock %}
{% block custom_bread %}
<section>
<div class="wp">
<ul class="crumbs">
<li><a href="index.html">Home</a>></li>
<li>Open class</li>
</ul>
</div>
</section>
{% endblock %}
{% block 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="active"><a href="?sort=">Latest</a></li>
<li ><a href="?sort=hot">Most popular</a></li>
<li ><a href="?sort=students">Number of participants</a></li>
</ul>
</div>
<div id="inWindow">
<div class="tab_cont "id="content">
<div class="group_list">
<div class="box">
<a href="course-detail.html">
<img width="280" height="350" class="scrollLoading" src="{% static'media/courses/2016/12/mysql.jpg' %}"/>
</a>
<div class="des">
<a href="course-detail.html">
<h2>xadmin advanced development</h2>
</a>
<span class="fl">Duration: <i class="key">30</i></span>
<span class="fr">Number of learners: 2 </span>
</div>
<div class="bottom">
<a href="course-detail.html"><span class="fl">From Mukenet</span></a>
<span class="star fr notlogin
"data-favid="15">
1
</span>
</div>
</div>
</div>
<div class="pageturn">
<ul class="pagelist">
<li class="active"><a href="?page=1">1</a></li>
<li><a href="?page=2" class="page">2</a></li>
<li class="long"><a href="?page=2">Next page</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="right layout">
<div class="head">Recommended popular courses</div>
<div class="group_recommend">
<dl>
<dt>
<a target="_blank" href="">
<img width="240" height="220" class="scrollLoading" src="{% static'media/courses/2016/11/540e57300001d6d906000338-240-135_n0L8vbw.jpg' %}"/>
</a>
</dt>
<dd>
<a target="_blank" href=""><h2> django and vuejs actual combat project 2</h2></a>
<span class="fl">Difficulty: <i class="key">Advanced</i></span>
</dd>
</dl>
</div>
</div>
</div>
</div>
</section>
{% endblock %}Then go to the backend to add ten courses
(3) List display
views.py
# course/views.py
from django.shortcuts import render
from django.views.generic import View
from .models import Course
class CourseListView(View):
def get(self, request):
all_courses = Course.objects.all()
return render(request, "course-list.html",{'all_courses':all_courses})course-list.html
<div class="group_list">
{% for course in all_course %}
<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">Duration: <i class="key">{{ course.learn_times }}</i></span>
<span class="fr">Number of students: {{ course.students }} </span>
</div>
<div class="bottom">
<a href="course-detail.html"><span class="fl">From {{ course.course_org.name }}</span></a>
<span class="star fr notlogin
"data-favid="15">
{{ course.fav_nums }}
</span>
</div>
</div>
{% endfor %} try:
page = request.GET.get('page', 1)
except PageNotAnInteger:
page = 1
p = Paginator(all_courses,2, request=request)
courses = p.page(page)<div class="pageturn">
<ul class="pagelist">
{% if all_courses.has_previous %}
<li class="long"><a href="?{{ all_courses.previous_page_number.querystring }}">Previous page</a></li>
{% endif %}
{% for page in all_courses.pages %}
{% if page %}
{% ifequal page all_courses.number %}
<li class="active"><a href="?{{ page.querystring }}">{{ 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_courses.has_next %}
<li class="long"><a href="?{{ all_courses.next_page_number.querystring }}">Next page</a></li>
{% endif %}
</ul>
</div>class CourseListView(View):
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,
})<div class="head">
<ul class="tab_header">
<li class="{% ifequal sort'' %}active{% endifequal %}"><a href="?sort=" >Latest</a></li>
<li class="{% ifequal sort'hot' %}active{% endifequal %}"><a href="?sort=hot" >Most popular</a></li>
<li class="{% ifequal sort'students' %}active{% endifequal %}"><a href="?sort=students" >Number of participants</a></li>
</ul>
</div><div class="head">Recommended popular courses</div>
<div class="group_recommend">
{% for hot_course in hot_courses %}
<dl>
<dt>
<a target="_blank" href="">
<img width="240" height="220" class="scrollLoading" src="{{ MEDIA_URL }}{{ hot_course.image }}"/>
</a>
</dt>
<dd>
<a target="_blank" href=""><h2> {{ hot_course.name }}</h2></a>
<span class="fl">Difficulty: <i class="key">{{ hot_course.get_degree_display }}</i></span>
</dd>
</dl>
{% endfor %}{#templates/course-list.html#}
{% extends'base.html' %}
{% load staticfiles %}
{% block title %}List of public classes{% endblock %}
{% block custom_bread %}
<section>
<div class="wp">
<ul class="crumbs">
<li><a href="index.html">Home</a>></li>
<li>Open class</li>
</ul>
</div>
</section>
{% endblock %}
{% block 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=" >Latest</a></li>
<li class="{% ifequal sort'hot' %}active{% endifequal %}"><a href="?sort=hot" >Most popular</a></li>
<li class="{% ifequal sort'students' %}active{% endifequal %}"><a href="?sort=students" >Number of participants</a></li>
</ul>
</div>
<div id="inWindow">
<div class="tab_cont "id="content">
<div class="group_list">
{% for course in all_courses.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">Duration: <i class="key">{{ course.learn_times }}</i></span>
<span class="fr">Number of students: {{ course.students }} </span>
</div>
<div class="bottom">
<a href="course-detail.html"><span class="fl">From {{ 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_courses.has_previous %}
<li class="long"><a href="?{{ all_courses.previous_page_number.querystring }}">Previous page</a></li>
{% endif %}
{% for page in all_courses.pages %}
{% if page %}
{% ifequal page all_courses.number %}
<li class="active"><a href="?{{ page.querystring }}">{{ 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_courses.has_next %}
<li class="long"><a href="?{{ all_courses.next_page_number.querystring }}">Next page</a></li>
{% endif %}
</ul>
</div>
</div>
</div>
</div>
<div class="right layout">
<div class="head">Recommended popular courses</div>
<div class="group_recommend">
{% for hot_course in hot_courses %}
<dl>
<dt>
<a target="_blank" href="">
<img width="240" height="220" class="scrollLoading" src="{{ MEDIA_URL }}{{ hot_course.image }}"/>
</a>
</dt>
<dd>
<a target="_blank" href=""><h2> {{ hot_course.name }}</h2></a>
<span class="fl">Difficulty: <i class="key">{{ hot_course.get_degree_display }}</i></span>
</dd>
</dl>
{% endfor %}
</div>
</div>
</div>
</div>
</section>
{% endblock %}
course-list.html# course/views.py
from django.shortcuts import render
from django.views.generic import View
from .models import Course
from pure_pagination import Paginator, EmptyPage, PageNotAnInteger
class CourseListView(View):
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,
})copy course-detail.html in
(1) URL configuration
re_path('course/(?P<course_id>\d+)/', CourseDetailView.as_view(), name="course_detail"),class CourseDetailView(View):
'''Course Details'''
def get(self, request, course_id):
return render(request, "course-detail.html", {
})Add links to details in course-list.html
(2) views
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()
return render(request, "course-detail.html", {
'course':course,
})(3) Course model increased
class Course(models.Model):
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)
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_learn_users(self):
#Get the learning users of this course
return self.usercourse_set.all()[:5]
def __str__(self):
return self.name(4) Display of course detail information in course-detail.html
<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="{{ course.name }}">{{ course.name }}</h1>
<span class="key">{{ course.desc }}</span>
<div class="prize">
<span class="fl">Difficulty: <i class="key">{{ course.get_degree_display }}</i></span>
<span class="fr">Number of students: {{ course.students }}</span>
</div>
<ul class="parameter">
<li><span class="pram word3">Hours Long:</span><span>{{ course.learn_times }}</span></li>
<li><span class="pram word3">Chapter section number:</span><span>{{ course.get_zj_nums }}</span></li>
<li><span class="pram word3">Course category:</span><span title="">{{ course.category }}</span></li>
<li class="piclist"><span class="pram word4">Learning users:</span>
{% for user_course in course.get_learn_users %}
<span class="pic"><img width="40" height="40" src="{{ MEDIA_URL }}{{ user_course.user.image }}"/></span>
{% endfor %}
</li>
</ul>
<div class="btns">Show course details
(1) CourseOrg model adds a method to obtain the number of teachers
def get_teacher_nums(self):
#Get the number of teachers in the institution
return self.teacher_set.all().count()class CourseOrg(models.Model):
ORG_CHOICES = (
("pxjg", u"training organization"),
("gx", u"high school"),
("gr", u"personal"),
)
name = models.CharField('Organization Name',max_length=50)
desc = models.TextField('Organization Description')
category = models.CharField(max_length=20, choices=ORG_CHOICES, verbose_name=u"organization category", default="pxjg")
click_nums = models.IntegerField('Number of clicks',default=0)
fav_nums = models.IntegerField('Number of collections',default=0)
students = models.IntegerField("Number of students",default=0)
course_nums = models.IntegerField("Number of courses",default=0)
image = models.ImageField('logo',upload_to='org/%Y/%m',max_length=100)
address = models.CharField('Organization address',max_length=150,)
city = models.ForeignKey(CityDict,verbose_name='City',on_delete=models.CASCADE)
add_time = models.DateTimeField(default=datetime.now)
class Meta:
verbose_name ='Course institution'
verbose_name_plural = verbose_name
def get_teacher_nums(self):
#Get the number of teachers in the institution
return self.teacher_set.all().count()
def __str__(self):
return self.name(2) Teaching institution display
<div class="head">
<h1>Teaching institution</h1>
<p>World famous school, curriculum authority</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="Tsinghua University">{{ course.course_org.name }}</h2>
</a>
<div class="btn notlogin
"data-favid="14" id="jsRightBtn">
collected
</div>
<div class="clear">
<ul>
<li>
<span>course course number: {{ course.course_org.course_nums }}</span>
</li>
<li>
<span>Teaching teacher Number: {{ course.course_org.get_teacher_nums }}</span>
</li>
<li>Location: {{ course.course_org.address }}</li>
<li>Recognize certificate :
<img title="Gold Medal Organization", src="{% static'images/gold.png' %}"/>
</li>
</ul>
</div>
</div>(1) Add a "Course Label" field to the "Course" model
tag = models.CharField('Course tag',default='',max_length=10)class Course(models.Model):
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_learn_users(self):
#Get the learning users of this course
return self.usercourse_set.all()[:5]
def __str__(self):
return self.name(2) views
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
tag = course.tag
if tag:
# Need to start from 1 or I will recommend myself
relate_courses = Course.objects.filter(tag=tag)[:3]
else:
relate_courses = []
return render(request, "course-detail.html", {
'course':course,
'relate_courses':relate_courses,
})(3) Front end
<div class="right layout">
<div class="head">Recommended courses</div>
<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">Length of learning: <i class="key">{{ relate_course.learn_times }}</i></span>
</dd>
</dl>
{% endfor %}
</div>
</div>{% block custom_js %}{% endblock %}, put it at the bottom, because it is js code, it must be loaded last
The backend judges the current collection transition
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,
})Add Ajax to course-detail.html
{% block custom_js %}
<script type="text/javascript">
//Favorite sharing
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 =='User is not logged in'){
win.loc.href="/login/";
}else{
alrt(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 %}