mxonline实战13，授课讲师列表页，详情页，index页面全局导航

 

 

对应github地址：第13天 

 

把teacher-list.html和teacher-detail.html拷贝过来

 

一. 授课讲师列表页

 

1. 修改html文件

把org-list.html的页面内容拷贝到teacher-list.html中，替换面包屑和conteng内容

 

2. 编写URL和VIEW

因为Teacher的model是定义的organization/models.py中的，所以可以在organization/urls.py中定义讲师的URL

 

organization/views.py中编写

class TeacherListView(View):
    def get(self, request):
        all_teacher = Teacher.objects.all()
        teacher_nums = all_teacher.count()
        # 分页,获取从前台get请求传来的page参数，如果不合法默认返回第一页；每页显示3个老师
        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. 填充页面动态内容

organiztion/models.py->Teacher中新增age字段

修改teacher-list.html如下

字段详情如下，还有个讲师头像自己改

 

 

4. 前端添加分页代码

<ul class="pagelist">
    <!--如果有前一页就显示前一页，如果没有，什么都不显示-->
    {% if all_teachers.has_previous %}
        <li class="long"><a href="?{{ all_teachers.previous_page_number.querystring }}">上一页</a></li>
    {% endif %}
 
    {% for page in all_teachers.pages %}
        {% if page %}
            <!--如果page等于当前页，page就加一个active样式-->
            {% ifequal page all_teachers.number %}
                <li class="active"><a href="?{{ page.querystring }}">{{ page }}</a></li>
            <!--page不等于当前页时,就可以点页码page-->
            {% 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 }}">下一页</a></li>
    {% endif %}
</ul>

 

 

 

5. 排序

organization/views->TeacherListView中添加如下代码，并把sort传到前端

对应teacher-list.html中代码

 

 

6. 讲师排行榜

在organization/views.py的排序代码后面添加如下代码，并把rank_teachers传到前端

在teachers-list.html中找到排行榜相关代码，并用变量标签替换

 

 

 

 

二. 讲师详情页

 

1. 修改前端页面

 

2. 添加URL, VIEW

organizaiton/urls.py

 

organization/view.py添加

 

3. 修改teacher-list.html点击课程时到详情页的跳转链接

在讲师的for循环标签中，把<a href="/org/teacher/detail/1/">改为<a href="{% url 'org:teacher_detail' teacher.id %}">

 

 

4. teacher-detail.html中填充动态页面

修改课程，机构，讲师跳转地址（机构信息可以用teacher.org来获得），

 

 

5. 收藏功能

teacher-detail.html页面添加js

{% block custom_js %}
<script type="text/javascript">
//收藏分享
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 == '用户未登录'){
                    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 %}

 

 

 

 

修改前端页面关于收藏的代码

 

 

 

三. index页面菜单跳转

 

1. 首先把index.html进行模板继承

将<section class="headerwrap ">和<footer>之间的内容放在{% block content %}中

面包屑重写为空，因为首页一般不要面包屑

index页面有一个单独的js文件

 

2. 配置菜单的跳转

在base.html中修改

<a href="index.html">修改为<a href="{% url 'index' %}

<a href="course-list.html">修改为<a href="{% url 'course:course_list' %}">

<a href="teachers-list.html">修改为<a href="{% url 'org:teacher_list' %}">

<a href="org-list.html">修改为<a href="{% url 'org:org_list' %}"

 

3. 增加菜单的选中状态

利用request.path取相对地址的方法，取到相应字节，在base.html的菜单跳转代码前增加如下代码

把原先organization/urls.py中path('teacher/<int:org_id>/', OrgTeacherView.as_view(), name="org_teacher")，其中的teacher改为org_teacher，方便分辨清楚，因为我们前端文件中都用的name标签表示，所以可以随意修改url地址