Code
Copy teacher-list.html and teacher-detail.html to the templates directory
Change teacher-list.html first, and also inherit base.html
(1) urls configuration
organazition/urls.py
# Lecturer list
re_path('teacher/list/', TeacherListView.as_view(), name="teacher_list"),(2) Add an age field to the Teacher Model
teacher_age = models.IntegerField('age',default=25)(3) View and template
# Lecturer list
class TeacherListView(View):
def get(self, request):
all_teachers = Teacher.objects.all()
return render(request,'teachers-list.html',{
'all_teachers':all_teachers,
}){% for teacher in all_teachers %}
<dl class="des">
<dt>
<a href="/org/teacher/detail/1/">
<div class="picpic">
<img width="100" height="100" class="scrollLoading" src="{{ MEDIA_URL }}{{ teacher.image }}"/>
</div>
</a>
<div class="btn">
<div class="fr btn2 bdsharebuttonbox"
data-text="Teacher-Obama-Muxue Online"
data-desc="I found the teacher "Obama" in #慕课网#, which is very helpful to the learning partners, let's take a look."
data-comment="Obama Gold Medal Lecturer, years of experience: 5 years"
>
<span class="fl">Share</span>
<a href="#" class="bds_more" data-cmd="more"></a>
</div>
</div>
</dt>
<dd>
<a href="/org/teacher/detail/1/">
<h1>{{ teacher.name }}<span class="key picbig">Gold Lecturer</span></h1>
</a>
<ul class="cont">
<li>Working years: <span>{{ teacher.work_years }} years</span></li>
<li>Job position: <span>{{ teacher.work_position }}</span></li>
<li>Working company: <span>{{ teacher.work_company }} </span></li>
<li>Age: <span>{{ teacher.teacher_age }} years old</span></li>
<li>Teaching features: <span>{{ teacher.points }}</span></li>
</ul>
</dd>
<a class="buy buyservice" href="/org/teacher/detail/1/"><br/>View<br/>details</a>
</dl>
{% endfor %}# Lecturer list
class TeacherListView(View):
def get(self, request):
all_teachers = Teacher.objects.all()
# How many teachers use count for statistics in total
teacher_nums = all_teachers.count()
# Paging
try:
page = request.GET.get('page', 1)
except PageNotAnInteger:
page = 1
p = Paginator(all_teachers, 1, request=request)
teachers = p.page(page)
return render(request, "teachers-list.html", {
"all_teachers": teachers,
"teacher_nums": teacher_nums
})<div class="pageturn">
<ul class="pagelist">
{% if all_teachers.has_previous %}
<li class="long"><a href="?{{ all_teachers.previous_page_number.querystring }}">Previous page</a></li>
{% endif %}
{% for page in all_teachers.pages %}
{% if page %}
{% ifequal page all_teachers.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_teachers.has_next %}
<li class="long"><a href="?{{ all_teachers.next_page_number.querystring }}">Next page</a></li>
{% endif %}
</ul>
</div># Lecturer list
class TeacherListView(View):
def get(self, request):
all_teachers = Teacher.objects.all()
# How many teachers use count for statistics in total
teacher_nums = all_teachers.count()
# Popularity sort
sort = request.GET.get('sort','')
if sort:
if sort =='hot':
all_teachers = all_teachers.order_by('-click_nums')
#Lecturer Ranking
sorted_teacher = Teacher.objects.all().order_by('-click_nums')[:3]
# Paging
try:
page = request.GET.get('page', 1)
except PageNotAnInteger:
page = 1
p = Paginator(all_teachers, 1, request=request)
teachers = p.page(page)
return render(request, "teachers-list.html", {
"all_teachers": teachers,
"teacher_nums": teacher_nums,
'sorted_teacher':sorted_teacher,
'sort':sort,
})Sorting
<ul class="fl tab_header">
<li {% if sort =='' %}class="active"{% endif %}><a href="?sort=">All</a> </li>
<li {% if sort =='hot' %}class="active"{% endif %}><a href="?sort=hot">popularity↓</a></li>
</ul>Lecturer Ranking
<div class="right layout">
<div class="head">Lecturer Ranking</div>
{% for hot_teacher in sorted_teacher %}
<dl class="des">
<span class="num fl">1</span>
<a href="/diary/hk_detail/6/">
<dt>
<img width="50" height="50" class="scrollLoading" src="{{ MEDIA_URL }}{{ hot_teacher.image }}"/>
</dt>
</a>
<dd>
<a href="/diary/hk_detail/6/">
<h1 title="{{ hot_teacher.name }}">{{ hot_teacher.name }}</h1>
</a>
<p>Working years: <span>{{ hot_teacher.work_years }} years</span></p>
</dd>
</dl>
{% endfor %}
</div># Lecturer details
re_path('teacher/detail/(?P<teacher_id>\d+)/', TeacherDetailView.as_view(), name="teacher_detail"),#Lecturer details
class TeacherDetailView(View):
def get(self,request,teacher_id):
teacher = Teacher.objects.get(id=int(teacher_id))
all_course = Course.objects.filter(teacher=teacher)
# Lecturer Ranking
sorted_teacher = Teacher.objects.all().order_by('-click_nums')[:3]
return render(request,'teacher-detail.html',{
'teacher':teacher,
'all_course':all_course,
'sorted_teacher':sorted_teacher,
})Lecturer information
<dl class="des">
<dt>
<div class="picpic">
<img width="100" height="100" src="{{ MEDIA_URL }}{{ teacher.image }}"/>
</div>
<div class="btn">
<span class="fl btn1 collectionbtn" id="jsLeftBtn">
{% if has_teacher_faved %}Favorite {% else %}Favorite{% endif %}
</span>
<span class="fr btn2 shareBtn bdsharebuttonbox"
data-text="Teacher-Teacher Li-Muxue.com"
data-desc="I found it in #慕课网#"
data-comment="Mr. Li, working experience: 5 years; education: undergraduate; company: Alibaba ; classic case: Django entry and in-depth; Flask entry"
data-url="/diary/hk_detail/10/">
<span class="fl">Share</span>
<a href="#" class="bds_more" data-cmd="more"></a>
</span>
</div>
</dt>
<dd>
<a href="/diary/hk_detail/10/">
<h1>{{ teacher.name }}<span class="key picbig">Gold Lecturer</span></h1>
</a>
<ul class="cont">
<li>Working years: <span>{{ teacher.work_years }} years</span></li>
<li>Working company: <span>{{ teacher.work_company }}</span></li>
<li>Job position: <span>{{ teacher.work_position }} </span></li>
<li>Teaching features: <span>{{ teacher.points }}</span></li>
</ul>
</dd>
</dl>All courses
<div class="head">
<ul class="tab_header">
<li class="active"><a href="/diary/hk_detail/10/">All courses</a> </li>
</ul>
</div>
<div class="companycenter">
<div class="group_list brief">
{% for teacher_course in all_course %}
<div class="module1_5 box">
<a href="{% url'course:course_detail' teacher_course.id %}">
<img width="214" height="190" class="scrollLoading" src="{{ MEDIA_URL }}{{ teacher_course.image }}"/>
</a>
<div class="des">
<a href="{% url'course:course_detail' teacher_course.id %}"><h2>{{ teacher_course.name }}</h2></a>
<span class="fl">Duration: <i class="key">{{ teacher_course.learn_times }}</i></span>
<span class="fr">Number of students: {{ teacher_course.students }}</span>
</div>
<div class="bottom">
<span class="fl">{{ teacher_course.course_org.name }}</span>
<span class="star fr notlogin" data-favid="15">{{ teacher_course.fav_nums }}</span>
</div>
</div>
{% endfor %}
</div>
</div>Teachers' institutions
<div class="butler_detail_list">
<div class="right butler-company-box">
<div class="head">
<h1>{{ teacher.org.name }}</h1>
<p>Well-known universities, authoritative teaching</p>
</div>
<div class="pic">
<a href="{% url'org:org_home' teacher.org.id %}">
<img width="150" height="80" src="{{ MEDIA_URL }}{{ teacher.org.image }}"/>
</a>
</div>
<a href="{% url'org:org_home' teacher.org.id %}">
<h2 class="center">{{ teacher.org.name }}</h2>
</a>
<p class="center tell">Address: {{ teacher.org.address }}</p>
<a class="btn" id="jsRightBtn">{% if has_org_faved %}Favorite {% else %}Favorite{% endif %}</a>
</div>
</div>Lecturer Ranking
<div class="right layout">
<div class="head">Lecturer Ranking</div>
{% for hot_teacher in sorted_teacher %}
<dl class="des">
<span class="num fl">1</span>
<a href="{% url'org:teacher_detail' hot_teacher.id %}">
<dt>
<img width="50" height="50" class="scrollLoading" src="{{ MEDIA_URL }}{{ hot_teacher.image }}"/>
</dt>
</a>
<dd>
<a href="{% url'org:teacher_detail' hot_teacher.id %}">
<h1 title="bobby">{{ hot_teacher.name }}</h1>
</a>
<p>Working years: <span>{{ hot_teacher.work_years }} years</span></p>
</dd>
</dl>
{% endfor %}
</div>view and front end
# Teacher Collection and Institution Collection
has_teacher_faved = False
if UserFavorite.objects.filter(user=request.user, fav_type=3, fav_id=teacher.id):
has_teacher_faved = True
has_org_faved = False
if UserFavorite.objects.filter(user=request.user, fav_type=2, fav_id=teacher.org.id):
has_org_faved = True{% if has_teacher_faved %}favored{% else %}favorite{% endif %}
<a class="btn" id="jsRightBtn">{% if has_org_faved %}Favorite {% else %}Favorite{% endif %}</a>The teacher-detail.html Ajax code is as follows:
{% 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), {{ teacher.id }}, 3);
});
$('#jsRightBtn').on('click', function(){
add_fav($(this), {{ teacher.org.id }}, 2);
});
</script>
{% endblock %}{#templates/teacher-detail.html#}
{% extends'base.html' %}
{% load staticfiles %}
{% block title %}Lecturer details{% endblock %}
{% block custom_bread %}
<section>
<div class="wp">
<ul class="crumbs">
<li><a href="index.html">Home</a>></li>
<li><a href="{% url'org:teacher_list' %}">Teaching lecturer</a>></li>
<li>Instructor details</li>
</ul>
</div>
</section>
{% endblock %}
{% block content %}
<section>
<div class="wp butler-detail-box butler-diaryd-box clearfix">
<div class="fl list">
<div class="butler_detail_list clearfix">
<div class="brief">
<dl class="des">
<dt>
<div class="picpic">
<img width="100" height="100" src="{{ MEDIA_URL }}{{ teacher.image }}"/>
</div>
<div class="btn">
<span class="fl btn1 collectionbtn" id="jsLeftBtn">
{% if has_teacher_faved %}Favorite {% else %}Favorite{% endif %}
</span>
<span class="fr btn2 shareBtn bdsharebuttonbox"
data-text="Teacher-Teacher Li-Muxue.com"
data-desc="I found it in #慕课网#"
data-comment="Mr. Li, working experience: 5 years; education: undergraduate; company: Alibaba ; classic case: Django entry and in-depth; Flask entry"
data-url="/diary/hk_detail/10/">
<span class="fl">Share</span>
<a href="#" class="bds_more" data-cmd="more"></a>
</span>
</div>
</dt>
<dd>
<a href="/diary/hk_detail/10/">
<h1>{{ teacher.name }}<span class="key picbig">Gold Lecturer</span></h1>
</a>
<ul class="cont">
<li>Working years: <span>{{ teacher.work_years }} years</span></li>
<li>Working company: <span>{{ teacher.work_company }}</span></li>
<li>Job position: <span>{{ teacher.work_position }} </span></li>
<li>Teaching features: <span>{{ teacher.points }}</span></li>
</ul>
</dd>
</dl>
</div>
</div>
<div class="butler_detail_cont clearfix">
<div class="left layout">
<div class="head">
<ul class="tab_header">
<li class="active"><a href="/diary/hk_detail/10/">All courses</a> </li>
</ul>
</div>
<div class="companycenter">
<div class="group_list brief">
{% for teacher_course in all_course %}
<div class="module1_5 box">
<a href="{% url'course:course_detail' teacher_course.id %}">
<img width="214" height="190" class="scrollLoading" src="{{ MEDIA_URL }}{{ teacher_course.image }}"/>
</a>
<div class="des">
<a href="{% url'course:course_detail' teacher_course.id %}"><h2>{{ teacher_course.name }}</h2></a>
<span class="fl">Duration: <i class="key">{{ teacher_course.learn_times }}</i></span>
<span class="fr">Number of students: {{ teacher_course.students }}</span>
</div>
<div class="bottom">
<span class="fl">{{ teacher_course.course_org.name }}</span>
<span class="star fr notlogin" data-favid="15">{{ teacher_course.fav_nums }}</span>
</div>
</div>
{% endfor %}
</div>
</div>
<!--<div class="pageturn">-->
<!--<ul class="pagelist">-->
<!--<li class="active"><a href="?page=1">1</a></li>-->
<!--</ul>-->
<!--</div>-->
</div>
</div>
</div>
<div class="fr list">
<div class="butler_detail_list">
<div class="right butler-company-box">
<div class="head">
<h1>{{ teacher.org.name }}</h1>
<p>Well-known universities, authoritative teaching</p>
</div>
<div class="pic">
<a href="{% url'org:org_home' teacher.org.id %}">
<img width="150" height="80" src="{{ MEDIA_URL }}{{ teacher.org.image }}"/>
</a>
</div>
<a href="{% url'org:org_home' teacher.org.id %}">
<h2 class="center">{{ teacher.org.name }}</h2>
</a>
<p class="center tell">Address: {{ teacher.org.address }}</p>
<a class="btn" id="jsRightBtn">{% if has_org_faved %}Favorite {% else %}Favorite{% endif %}</a>
</div>
</div>
<div class="butler_detail_cont">
<div class="butler_list_box">
<div class="right layout">
<div class="head">Lecturer Ranking</div>
{% for hot_teacher in sorted_teacher %}
<dl class="des">
<span class="num fl">1</span>
<a href="{% url'org:teacher_detail' hot_teacher.id %}">
<dt>
<img width="50" height="50" class="scrollLoading" src="{{ MEDIA_URL }}{{ hot_teacher.image }}"/>
</dt>
</a>
<dd>
<a href="{% url'org:teacher_detail' hot_teacher.id %}">
<h1 title="bobby">{{ hot_teacher.name }}</h1>
</a>
<p>Working years: <span>{{ hot_teacher.work_years }} years</span></p>
</dd>
</dl>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% 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), {{ teacher.id }}, 3);
});
$('#jsRightBtn').on('click', function(){
add_fav($(this), {{ teacher.org.id }}, 2);
});
</script>
{% endblock %}(1) index.html inherits base.html
Note that there is a separate "index.js" on the homepage
{% extends'base.html' %}
{% load staticfiles %}
{% block title %}List of course institutions{% endblock %}
{% block custom_bread %}
{% endblock %}
{% block content %}
<div class="banner">
<div class="wp">
<div class="fl">
<div class="imgslide">
<ul class="imgs">
<li>
<a href="http://www.imooc.com">
<img width="1200" height="478" src="/static/media/banner/2016/11/57a801860001c34b12000460.jpg"/>
</a>
</li>
<li>
<a href="http://www.projectsedu.com">
<img width="1200" height="478" src="/static/media/banner/2016/11/57aa86a0000145c512000460.jpg"/>
</a>
</li>
<li>
<a href="http://www.projectsedu.com">
<img width="1200" height="478" src="/static/media/banner/2016/11/57a801860001c34b12000460_z4Vb8zl.jpg"/>
</a>
</li>
<li>
<a href="http://www.projectsedu.com">
<img width="1200" height="478" src="/static/media/banner/2016/11/57aa86a0000145c512000460_nMwvoQD.jpg"/>
</a>
</li>
<li>
<a href="http://www.projectsedu.com">
<img width="1200" height="478" src="/static/media/banner/2016/11/57aa86a0000145c512000460_GXIBATC.jpg"/>
</a>
</li>
</ul>
</div>
<div class="unslider-arrow prev"></div>
<div class="unslider-arrow next"></div>
</div>
</div>
</div>
<!--banner end-->
<!--feature start-->
<section>
<div class="wp">
<ul class="feature">
<li class="feature1">
<img class="pic" src="/static/images/feature1.png"/>
<p class="center">Professional authority</p>
</li>
<li class="feature2">
<img class="pic" src="/static/images/feature2.png"/>
<p class="center">The latest course</p>
</li>
<li class="feature3">
<img class="pic" src="/static/images/feature3.png"/>
<p class="center">Lectures by famous teachers</p>
</li>
<li class="feature4">
<img class="pic" src="/static/images/feature4.png"/>
<p class="center">The data is true</p>
</li>
</ul>
</div>
</section>
<!--feature end-->
<!--module1 start-->
<section>
<div class="module">
<div class="wp">
<h1>Open course</h1>
<div class="module1 eachmod">
<div class="module1_1 left">
<img width="228" height="614" src="/static/images/module1_1.jpg"/>
<p class="fisrt_word">Lectures by famous teachers<br/>Professional authority</p>
<a class="more" href="course-list.html">View more courses></a>
</div>
<div class="right group_list">
<div class="module1_2 box">
<div class="imgslide2">
<ul class="imgs">
<li>
<a href="course-detail.html">
<img width="470" height="300" src="/static/media/courses/2016/12/python file processing.jpg"/>
</a>
</li>
<li>
<a href="course-detail.html">
<img width="470" height="300" src="/static/media/courses/2016/12/python object-oriented.jpg"/>
</a>
</li>
</ul>
</div>
<div class="unslider-arrow2 prev"></div>
<div class="unslider-arrow2 next"></div>
</div>
<div class="module1_3 box">
<a href="course-detail.html">
<img width="233" height="190" src="/static/media/courses/2016/11/mysql.jpg"/>
</a>
<div class="des">
<a href="course-detail.html">
<h2 title="Introduction to django">Introduction to django</h2>
</a>
<span class="fl">Difficulty: <i class="key">Beginner</i></span>
<span class="fr">Number of learners: 3</span>
</div>
<div class="bottom">
<span class="fl" title="MUKENET">MUKENET</span>
<span class="star fr">0</span>
</div>
</div>
<div class="module1_4 box">
<a href="course-detail.html">
<img width="233" height="190" src="/static/media/courses/2016/11/57035ff200014b8a06000338-240-135.jpg"/>
</a>
<div class="des">
<a href="course-detail.html">
<h2 title="Introduction to java">Introduction to java</h2>
</a>
<span class="fl">Difficulty: <i class="key">Intermediate</i></span>
<span class="fr">Number of learners: 0</span>
</div>
<div class="bottom">
<span class="fl" title="Peking University">Peking University</span>
<span class="star fr">0</span>
</div>
</div>
<div class="module1_5 box">
<a href="course-detail.html">
<img width="233" height="190" src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135.jpg"/>
</a>
<div class="des">
<a href="course-detail.html">
<h2 title="python getting started">python getting started</h2>
</a>
<span class="fl">Difficulty: <i class="key">Intermediate</i></span>
<span class="fr">Number of learners: 0</span>
</div>
<div class="bottom">
<span class="fl" title="Nanjing University">Nanjing University</span>
<span class="star fr">0</span>
</div>
</div>
<div class="module1_6 box">
<a href="course-detail.html">
<img width="233" height="190" src="/static/media/courses/2016/11/57035ff200014b8a06000338-240-135_dHfj8Nq.jpg"/>
</a>
<div class="des">
<a href="course-detail.html">
<h2 title="java Getting Started 2">Java Getting Started 2</h2>
</a>
<span class="fl">Difficulty: <i class="key">Advanced</i></span>
<span class="fr">Number of learners: 0</span>
</div>
<div class="bottom">
<span class="fl" title="MUclassnet 2">MUclassnet 2</span>
<span class="star fr">0</span>
</div>
</div>
<div class="module1_7 box">
<a href="course-detail.html">
<img width="233" height="190" src="/static/media/courses/2016/11/57035ff200014b8a06000338-240-135_0nFiBSI.jpg"/>
</a>
<div class="des">
<a href="course-detail.html">
<h2 title="java Getting Started 3">Java Getting Started 3</h2>
</a>
<span class="fl">Difficulty: <i class="key">Beginner</i></span>
<span class="fr">Number of learners: 1</span>
</div>
<div class="bottom">
<span class="fl" title="MUclassnet 3">MUclassnet 3</span>
<span class="star fr">0</span>
</div>
</div>
<div class="module1_8 box">
<a href="course-detail.html">
<img width="233" height="190" src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135_MSIqfvw.jpg"/>
</a>
<div class="des">
<a href="course-detail.html">
<h2 title="python getting started 2">python getting started 2</h2>
</a>
<span class="fl">Difficulty: <i class="key">Intermediate</i></span>
<span class="fr">Number of learners: 0</span>
</div>
<div class="bottom">
<span class="fl" title="MUclassnet 666">MUclassnet 666</span>
<span class="star fr">0</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="module greybg">
<div class="wp">
<h1>Course institution</h1>
<div class="module3 eachmod">
<div class="module3_1 left">
<img width="228" height="463" src="/static/images/module3_1.jpg"/>
<p class="fisrt_word">The prestigious school strikes<br/>Authentication certification</p>
<a class="more" href="org-list.html">See more organizations></a>
</div>
<div class="right">
<ul>
<li class="">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/11/imooc.png"/>
<div class="score">
<div class="circle">
<h2>Nationally well-known</h2>
</div>
</div>
</div>
<p><span class="key" title="Mukenet">Mukenet</span></p>
</a>
</li>
<li class="">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/11/bjdx.jpg"/>
<div class="score">
<div class="circle">
<h2>Nationally well-known</h2>
</div>
</div>
</div>
<p><span class="key" title="Peking University">Peking University</span></p>
</a>
</li>
<li class="">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/11/qhdx-logo.png"/>
<div class="score">
<div class="circle">
<h2>Nationally well-known</h2>
</div>
</div>
</div>
<p><span class="key" title="Tsinghua University">Tsinghua University</span></p>
</a>
</li>
<li class="">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/11/njdx.jpg"/>
<div class="score">
<div class="circle">
<h2>Nationally well-known</h2>
</div>
</div>
</div>
<p><span class="key" title="Nanjing University">Nanjing University</span></p>
</a>
</li>
<li class="five">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/11/imooc_klgAUn5.png"/>
<div class="score">
<div class="circle">
<h2>Nationally well-known</h2>
</div>
</div>
</div>
<p><span class="key" title="MUclassnet 2">MUclassnet 2</span></p>
</a>
</li>
<li class="">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/11/imooc_Gn1sRjp.png"/>
<div class="score">
<div class="circle">
<h2>Nationally well-known</h2>
</div>
</div>
</div>
<p><span class="key" title="MUclassnet 3">MUclassnet 3</span></p>
</a>
</li>
<li class="">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/11/imooc_Y2Tonsq.png"/>
<div class="score">
<div class="circle">
<h2>Nationally well-known</h2>
</div>
</div>
</div>
<p><span class="key" title="MUclassnet 3">MUclassnet 3</span></p>
</a>
</li>
<li class="">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/11/imooc_OO2ykYP.png"/>
<div class="score">
<div class="circle">
<h2>Nationally well-known</h2>
</div>
</div>
</div>
<p><span class="key" title="MUclassnet 4">MUclassnet 4</span></p>
</a>
</li>
<li class="">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/11/imooc_V0TJOyb.png"/>
<div class="score">
<div class="circle">
<h2>Nationally well-known</h2>
</div>
</div>
</div>
<p><span class="key" title="MUclassnet 5">MUclassnet 5</span></p>
</a>
</li>
<li class="five">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/11/imooc_qEaMov1.png"/>
<div class="score">
<div class="circle">
<h2>Nationally well-known</h2>
</div>
</div>
</div>
<p><span class="key" title="Mukewang666">Mukewang666</span></p>
</a>
</li>
<li class="">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/12/bjdx.jpg"/>
<div class="score">
<div class="circle">
<h2>Nationally well-known</h2>
</div>
</div>
</div>
<p><span class="key" title="MU Xuenet">MU Xuenet</span></p>
</a>
</li>
<li class="">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/12/imooc_Gn1sRjp.png"/>
<div class="score">
<div class="circle">
<h2>Nationally well-known</h2>
</div>
</div>
</div>
<p><span class="key" title="python training institution">python training institution</span></p>
</a>
</li>
<li class="">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/12/bjdx_cCpdUw8.jpg"/>
<div class="score">
<div class="circle">
<h2>Nationally well-known</h2>
</div>
</div>
</div>
<p><span class="key" title="vuejs training">vuejs training</span></p>
</a>
</li>
<li class="">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/12/imooc_klgAUn5.png"/>
<div class="score">
<div class="circle">
<h2>Nationally well-known</h2>
</div>
</div>
</div>
<p><span class="key" title="nodejs training">nodejs training</span></p>
</a>
</li>
<li class="five">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/12/bjdx_bcd0m07.jpg"/>
<div class="score">
<div class="circle">
<h2>Nationally well-known</h2>
</div>
</div>
</div>
<p><span class="key" title="MUxueonline">MUxueonline</span></p>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block custom_js %}
<script type="text/javascript" src="{% static'js/index.js' %}"></script>
{% endblock %}(2) Configure global navigation and global "active" status
Settings in base.html
<div class="wp">
<ul>
<li {% if request.path =='/' %}class="active"{% endif %}><a href="{% url'index' %}">Home page</a></li>
<li {% if request.path|slice:'7' =='/course' %}class="active"{% endif %}>
<a href="{% url'course:course_list' %}">
Open class<img class="hot" src="{% static'images/nav_hot.png' %}">
</a>
</li>
<li {% if request.path|slice:'12' =='/org/teacher' %}class="active"{% endif %}>
<a href="{% url'org:teacher_list' %}">Teacher</a>
</li>
<li {% if request.path|slice:'9' =='/org/list' %}class="active"{% endif %}>
<a href="{% url'org:org_list' %}">Teaching institution</a></li>
</ul>
</div>Description:
The global search function is achieved by adding the parameter keywords in the url
Take Course search as an example:
# searching feature
search_keywords = request.GET.get('keywords','')
if search_keywords:
# icontains means to include (not case sensitive)
# Q can implement multiple fields, and the relationship between them is or
all_courses = all_courses.filter(Q(name__icontains=search_keywords) | Q(desc__icontains=search_keywords) | Q(
detail__icontains=search_keywords))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]
# searching feature
search_keywords = request.GET.get('keywords','')
if search_keywords:
# Operate in the name field, do the operation of the like statement. i stands for case-insensitive
# or operation using Q
all_courses = all_courses.filter(Q(name__icontains=search_keywords) | Q(desc__icontains=search_keywords) | Q(
detail__icontains=search_keywords))
# 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,
})The search code is placed in deco-common js:
//Search method in the top search bar
function search_click(){
var type = $('#jsSelectOption').attr('data-value'),
keywords = $('#search_keywords').val(),
request_url ='';
if(keywords == ""){
return
}
if(type == "course"){
request_url = "/course/list?keywords="+keywords
}else if(type == "teacher"){
request_url = "/org/teacher/list?keywords="+keywords
}else if(type == "org"){
request_url = "/org/list?keywords="+keywords
}
win.loc.href = request_url
}Course institution search function
# Institution search function
search_keywords = request.GET.get('keywords','')
if search_keywords:
# Operate in the name field, do the operation of the like statement. i stands for case-insensitive
# or operation using Q
all_orgs = all_orgs.filter(Q(name__icontains=search_keywords) | Q(desc__icontains=search_keywords))class OrgView(View):
'''Course institution'''
def get(self, request):
# All course institutions
all_orgs = CourseOrg.objects.all()
# All cities
all_citys = CityDict.objects.all()
# Institution search function
search_keywords = request.GET.get('keywords','')
if search_keywords:
# Operate in the name field, do the operation of the like statement. i stands for case-insensitive
# or operation using Q
all_orgs = all_orgs.filter(Q(name__icontains=search_keywords) | Q(desc__icontains=search_keywords))
# City filter
city_id = request.GET.get('city','')
if city_id:
all_orgs = all_orgs.filter(city_id=int(city_id))
# Category filter
category = request.GET.get('ct','')
if category:
all_orgs = all_orgs.filter(category=category)
# Popular course institution ranking
hot_orgs = all_orgs.order_by('-click_nums')[:3]
# Screening of number of learners and number of courses
sort = request.GET.get('sort', "")
if sort:
if sort == "students":
all_orgs = all_orgs.order_by("-students")
elif sort == "courses":
all_orgs = all_orgs.order_by("-course_nums")
# How many institutions
org_nums = all_orgs.count()
# Pagination of course institutions
# Try to get the page parameters passed by the front desk get request
# If it is an illegal configuration parameter, return to the first page by default
try:
page = request.GET.get('page', 1)
except PageNotAnInteger:
page = 1
# Here refers to five from allorg, each page shows five
p = Paginator(all_orgs, 2, request=request)
orgs = p.page(page)
return render(request, "org-list.html", {
"all_orgs": orgs,
"all_citys": all_citys,
"org_nums": org_nums,
'city_id':city_id,
"category": category,
'hot_orgs':hot_orgs,
'sort':sort,
})Teacher search function
# searching feature
search_keywords = request.GET.get('keywords','')
if search_keywords:
# Operate in the name field, do the operation of the like statement. i stands for case-insensitive
# or operation using Q
all_teachers = all_teachers.filter(name__icontains=search_keywords)# Lecturer list
class TeacherListView(View):
def get(self, request):
all_teachers = Teacher.objects.all()
# How many teachers use count for statistics in total
teacher_nums = all_teachers.count()
# searching feature
search_keywords = request.GET.get('keywords','')
if search_keywords:
# Operate in the name field, do the operation of the like statement. i stands for case-insensitive
# or operation using Q
all_teachers = all_teachers.filter(name__icontains=search_keywords)
# Popularity sort
sort = request.GET.get('sort','')
if sort:
if sort =='hot':
all_teachers = all_teachers.order_by('-click_nums')
#Lecturer Ranking
sorted_teacher = Teacher.objects.all().order_by('-click_nums')[:3]
# Paging
try:
page = request.GET.get('page', 1)
except PageNotAnInteger:
page = 1
p = Paginator(all_teachers, 1, request=request)
teachers = p.page(page)
return render(request, "teachers-list.html", {
"all_teachers": teachers,
"teacher_nums": teacher_nums,
'sorted_teacher':sorted_teacher,
'sort':sort,
})