Corresponding GitHub address: thirteenth days.
Copy teacher-list.html and teacher-detail.html.
List of lecture lecturers
1. Modify HTML file
Copy the contents of the org-list.html page to teacher-list.html to replace crumbs and conteng content.
2. Writing URL and VIEW
Because Teacher’s model is in the defined organization / models. py, you can define the instructor’s URL in organization / urls. PY
organization/views.pyCompiling
class TeacherListView(View): def get(self, request): all_teacher = Teacher.objects.all() teacher_nums = all_teacher.count() # Paging, get the page parameters from the foreground get request, if illegal default back to the first page; each page shows three teachers try: page = request.GET.get('page', 1) except PageNotAnInteger: page = 1 p = Paginator(all_teacher, 3, request=request) teachers = p.page(page) return render(request, "teachers-list.html", { "all_teacher": teachers, "teacher_nums": teacher_nums, })
3. Fill page dynamic content
organiztion/models.py->TeacherAdd age field in
Modify teacher-list.html as follows
The details of the field are as follows.
4. Add paging code to the front end
<ul class="pagelist"> <!--If there is a previous page showing the previous page, if not, nothing will show -->. {% if all_teachers.has_previous %} <li class="long"><a href="?{{ all_teachers.previous_page_number.querystring }}">The last page is < /a> < /li> {% endif %} {% for page in all_teachers.pages %} {% if page %} <!--If page is equal to the current page, page adds a active style -->. {% ifequal page all_teachers.number %} <li class="active"><a href="?{{ page.querystring }}">{{ page }}</a></li> <!--pageIf you do not equate to the current page, you can point page number page-->. {% else %} <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li> {% endifequal %} {% else %} <li class="none"><a href="">...</a></li> {% endif %} {% endfor %} <!--The display logic --> on the next page; {% if all_teachers.has_next %} <li class="long"><a href="?{{ all_teachers.next_page_number.querystring }}">The next page is < /a> < /li> {% endif %} </ul>
5. sort
organization/views->TeacherListViewAdd the following code and transmit the sort to the front end.
Corresponding code in teacher-list.html
6. Lecturer rankings
Add the following code to the sorting code of organization/views.py and transmit rank_teachers to the front end.
Find the ranking code in teachers-list.html and replace it with variable label.
Two. Lecturer details page
1. Modify front page
2. Add URL, VIEW
organizaiton/urls.py
organization/view.pyAdd to
3. Modify the teacher-list.html jump link to the details page when clicking the course.
In the for loop label of the lecturer, change & lt; a href =”/ org / teacher / detail / 1 /” & gt; to & lt; a href =”{% url’org: teacher_detail’teachEr.id%} “>
4. teacher-detail.htmlFill in dynamic pages
Modify course, institution, instructor jump address (organization information can be obtained by teacher.org).
5. Collection function
teacher-detail.htmlAdd JS to page
{% block custom_js %}
<script type="text/javascript">
//Collection and 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 not logged in'){
window.location.href="/login/";
}else{
alert(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 %}
Modify front-end page about collection code
Three. Index page menu jump
1. First, template inheritance is carried out by index.html.
The contents of <, section class= “headerwrap” >, and < footer> are placed in {% block content%}.
Bread crumbs should be rewritten to empty, because there is no bread crumbs on the front page.
indexThe page has a separate JS file.
2. Configuration menu jump
Modify in base.html
<a href=”index.html”>Modified to < a href= “{% URL’index’%}.
<a href=”course-list.html”>Modified to < a href= “{% URL’course:course_list’%}” >
<a href=”teachers-list.html”>Modified to < a href= “{% URL’org:teacher_list’%}” >
<a href=”org-list.html”>Modified to < a href= “{% URL’org:org_list’%}”.
3. Increase menu selection status
Using the method of request. path to get the relative address, fetch the corresponding byte and add the following code before the menu jump code of base. HTML
Put the original organization / urls. py path (‘teacher /& lt; int: org_id & gt; /’, OrgTeacherView. as_view (), name = “org_teac”Her “), where the teacher is changed to org_teacher for easy identification, because we use the name tag in the front-end file to represent, so we can change the URL address at will
