讲师列表
把页面复制到templates文件下。
由于讲师和机构是在同一个app下,所以在organizations下的urls.py配置url:
#讲师列表
url(r'^teachers/$',TeacherListView.as_view(),name = 'teachers'),
#讲师详情
url(r'^teachers_detail/(?P<teacher_id>\d+)$',TeacherDetailView.as_view(),name = 'teachers_detail'),
在views中编写初步的视图类:
#讲师列表
class TeacherListView(View):
def get(self, request, *args, **kwargs):
all_teachers = Teacher.objects.all()
return render(request,'teachers-list.html',{
'all_teachers':all_teachers #讲师
})
#讲师详情
class TeacherDetailView(View):
def get(self, request,teacher_id, *args, **kwargs):
pass
在base.html中修改跳转链接部分:

修改授课教师的class值,如果跳转的路径的前13位是/org/teachers,那么就显示active值,同时也要修改授课机构的class值的判断条件为--如果路路径的前9位为/org/list,那么就显示active值。
使用模板继承优化代码:

这时候运行:

数据填充和分页
在后端orgnizations/views.py:
#讲师列表
class TeacherListView(View):
def get(self, request, *args, **kwargs):
all_teachers = Teacher.objects.all()
# 经过过滤后的机构总数
teacher_nums = all_teachers.count()
# 分页部分
# 获取page,如果没找到或者出错都置page为1
try:
pindex = request.GET.get('page', 1)
except PageNotAnInteger:
pindex = 1
# 参数1:作用对象,参数2:单页显示数量,参数3:request
p = Paginator(all_teachers, per_page=1, request=request)
teachers = p.page(pindex) # 获取page页的信息
return render(request,'teachers-list.html',{
'all_teachers':teachers, #讲师
'teacher_nums':teacher_nums #讲师数量
})
前端绑定三个部分
-
讲师数量
-
教师信息
-
页码部分
运行:

点击下一页或者2:

排序
根据人气进行排序
在view中添加:
#人气排序
sort = request.GET.get('sort','')
if sort=='hot':
all_teachers = all_teachers.order_by('-click_nums') #根据点击数进行排序
return render(request,'teachers-list.html',{
'sort':sort #获取的前端接口值
})
分析:如果获取的接口值为hot,那么就根据点击数进行排序,记得用all_teachers接着,最后返回sort即可,用于样式的判断
前端代码:

根据sort值和接口值进行比较,判断是否显示active值。
运行:
后台数据:

前端展示:

跳转到讲师详情页面
修改跳转链接:

url已经设置好了,在view中写初步的视图函数:
#讲师详情
class TeacherDetailView(View):
def get(self, request,teacher_id, *args, **kwargs):
teachers = Teacher.objects.get(id=int(teacher_id)) #获取用户点击的讲师信息
return render(request,'teacher-detail.html',{
'teachers':teachers
})
运行:

点击查看详情:

进入页面,但是没有css样式。
模板继承修改代码

运行:

填充数据库数据

运行:
点击这三处都可以进入详情页:

课程详情页:

网友评论