（项目）在线教育平台（十）

十四、授课教师功能

1、讲师列表页面

1.1 前端页面配置

　　将讲师列表页面teachers-list.html拷贝到templates下。

　　继承base页面，重写需要block的地方：

1.2 讲师列表接口

　　在organization/views.py中编写讲师列表的接口：

class TeacherListView(View):
    """讲师列表"""
    def get(self, request):
        # 获取所有的讲师
        all_teachers = Teacher.objects.all()

        return render(request, 'teachers-list.html', {
            'all_teachers': all_teachers
        })

　　配置url：

from .views import TeacherListView

urlpatterns = [
    re_path('teacher/list/', TeacherListView.as_view(), name='teacher_list'),  # 讲师列表
]

　　修改index.html中跳转到讲师列表页面的url：

　　在讲师列表页面需要显示讲师的年龄，需要在teacher的model中增加一个年龄的字段：

class Teacher(models.Model):
    """机构老师"""
    org = models.ForeignKey(CourseOrg, verbose_name='所属机构', on_delete=models.CASCADE)
    name = models.CharField('老师名', max_length=50)
    age = models.IntegerField('年龄', default=25)
    work_years =models.IntegerField('工作年限', default=0)
    work_company = models.CharField('就职公司', max_length=50)
    work_position = models.CharField('工作职位', max_length=50)
    points = models.CharField('教学特点', max_length=50)
    click_nums = models.IntegerField('点击数', default=0)
    fav_nums = models.IntegerField('收藏数', default=0)
    image = models.ImageField('头像', upload_to='teacher/%Y/%m', max_length=100, default='')
    add_time = models.DateTimeField('添加时间', default=datetime.now)

    class Meta:
        verbose_name = '教师'
        verbose_name_plural = verbose_name

    def __str__(self):
        return '[{}]机构的教师:{}'.format(self.org.name, self.name)

　　迁移数据库。

　　然后修改讲师列表页面显示讲师信息的代码：

1.3 分页功能

　　在讲师列表接口中完善分页的逻辑：

class TeacherListView(View):
    """讲师列表"""
    def get(self, request):
        # 获取所有的讲师
        all_teachers = Teacher.objects.all()

        # 统计讲师的总数
        teacher_nums = all_teachers.count()

        # 分页
        try:
            page = request.GET.get('page', 1)
        except PageNotAnInteger:
            page = 1
        p = Paginator(all_teachers, 5, request=request)
        teachers = p.page(page)

        return render(request, 'teachers-list.html', {
            'all_teachers': teachers,
            'teacher_nums': teacher_nums
        })

　　在遍历讲师的时候需要加上object_list属性，否则在分页会抛出异常：

　　修改前端分页显示的代码：

 1.4 排序功能

　　讲师可以根据人气进行排序，完善讲师列表接口中排序的逻辑：

class TeacherListView(View):
    """讲师列表"""
    def get(self, request):
        # 获取所有的讲师
        all_teachers = Teacher.objects.all()

        # 统计讲师的总数
        teacher_nums = all_teachers.count()

        # 排序,按点击数排序
        sort = request.GET.get('sort', '')
        if sort:
            if sort == 'hot':
                all_teachers = all_teachers.order_by('-click_nums')

        # 分页
        try:
            page = request.GET.get('page', 1)
        except PageNotAnInteger:
            page = 1
        p = Paginator(all_teachers, 5, request=request)
        teachers = p.page(page)

        return render(request, 'teachers-list.html', {
            'all_teachers': teachers,
            'teacher_nums': teacher_nums,
            'sort': sort
        })

　　修改讲师列表页面中按人气选中的状态显示代码：

　　在讲师列表页面右侧有讲师排行版，完善讲师列表接口中排行榜的逻辑：

class TeacherListView(View):
    """讲师列表"""
    def get(self, request):
        # 获取所有的讲师
        all_teachers = Teacher.objects.all()

        # 统计讲师的总数
        teacher_nums = all_teachers.count()

        # 排序,按点击数排序
        sort = request.GET.get('sort', '')
        if sort:
            if sort == 'hot':
                all_teachers = all_teachers.order_by('-click_nums')

        # 讲师排行版
        teacher_sorted = all_teachers.order_by('-click_nums')[:3]

        # 分页
        try:
            page = request.GET.get('page', 1)
        except PageNotAnInteger:
            page = 1
        p = Paginator(all_teachers, 5, request=request)
        teachers = p.page(page)

        return render(request, 'teachers-list.html', {
            'all_teachers': teachers,
            'teacher_nums': teacher_nums,
            'sort': sort,
            'teacher_sorted': teacher_sorted
        })

　　修改讲师列表页面中显示讲师排行榜的代码：

2、讲师详情页面

2.1 前端页面配置

　　将讲师详情页面teacher-detail.html拷贝到templates下。

　　继承base页面，重写需要block的地方：

2.2 讲师详情接口

class TeacherDetailView(View):
    """讲师详情页面"""
    def get(self, request, teacher_id):
        # 根据前端的讲师id找到对应的讲师
        teacher = Teacher.objects.get(id=int(teacher_id))

        # 获取该老师所有的课程
        all_courses = Course.objects.filter(teacher=teacher)

        # 讲师排行
        teacher_sorted = Teacher.objects.all().order_by('-click_nums')[:3]

        return render(request, 'teacher-detail.html', {
            'teacher': teacher,
            'all_courses': all_courses,
            'teacher_sorted': teacher_sorted
        })

　　配置url：

from .views import TeacherDetailView

urlpatterns = [
    re_path('teacher/detail/(?P<teacher_id>\d+)/', TeacherDetailView.as_view(), name='teacher_detail'),  # 讲师详情
]

　　在讲师列表页面修改点击讲师跳转到讲师详情页面的url：

　　修改讲师详情页面信息的显示代码：

2.3 收藏

　　在讲师详情页面可以收藏讲师，右侧可以收藏机构，完善讲师详情接口中收藏的判断逻辑：

class TeacherDetailView(View):
    """讲师详情页面"""
    def get(self, request, teacher_id):
        # 根据前端的讲师id找到对应的讲师
        teacher = Teacher.objects.get(id=int(teacher_id))

        # 获取该老师所有的课程
        all_courses = Course.objects.filter(teacher=teacher)

        # 讲师排行
        teacher_sorted = Teacher.objects.all().order_by('-click_nums')[:3]

        # 讲师收藏、机构收藏
        has_teahcer_faved = False
        if UserFavorite.objects.filter(user=request.user, fav_type=3, fav_id=teacher_id):
            has_teahcer_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

        return render(request, 'teacher-detail.html', {
            'teacher': teacher,
            'all_courses': all_courses,
            'teacher_sorted': teacher_sorted,
            'has_teahcer_faved': has_teahcer_faved,
            'has_org_faved': has_org_faved
        })

　　修改讲师详情页面中收藏的判断代码：

　　因为收藏操作是由前端通过ajax异步操作的，需要在讲师详情页面的最下面加上script代码：

{% 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 %}