写在前面
本篇笔记我们将介绍讲师相关页面的配置，具体包括讲师列表页，讲师详情页等功能，下面我们依次介绍一下。
本篇笔记对应于第二十一篇代码，对应于github的位置是https://github.com/licheetools/eduline。
讲师列表页配置
老规矩，把前端资料里面的teacher_list.html和teacher-detail.html页面拷贝到我们的templates文件夹里面，接着修改teacher_list.html页面，保留部分信息，其余删除，{% block content %} <section>{% endblock %}里面 <section>是原来teacher_list.html保留下来的一部分：
接着打开organization/urls.py文件，新增代码：
from .views import TeacherListView
# 讲师列表页url
path("teacher/list/", TeacherListView.as_view(), name="teacher_list"),
然后打开organization/views.py文件，新增代码：
# 课程讲师列表页
class TeacherListView(View):
def get(self, request):
# 取出所有的讲师
all_teachers = Teacher.objects.all()
# 人气排名
sort = request.GET.get('sort', '')
if sort:
if sort == "hot":
all_teachers = all_teachers.order_by("-click_nums")
# 讲师排行榜
sorted_teacher = Teacher.objects.all().order_by("-fav_nums")[:5]
# 统计课程讲师的数量
teacher_nums = all_teachers.count()
# 对课程讲师进行分页,尝试获取前端get请求传递过来的page参数
# 如果是不合法的配置参数则默认返回第一页
try:
page = request.GET.get('page', 1)
except PageNotAnInteger:
page = 1
# 这里指从all_org中取五个出来，每页显示6个
p = Paginator(all_teachers, 6, request=request)
teachers = p.page(page)
return render(request, "teachers-list.html", {
"all_teachers": teachers,
"sorted_teacher": sorted_teacher,
"sort": sort,
"teacher_nums": teacher_nums,
})
接下来打开teacher_list.html页面，进行数据的动态显示（看不清楚的小伙伴们可以对照github上的源代码进行修改），包括课程讲师，讲师排行榜的填充：
刷新一下，没有问题：
讲师详情页配置
打开teacher-detail.html页面，修改teacher_detail.html页面，保留部分信息，其余删除，{% block content %} <section>{% endblock %}里面 <section>是原来teacher_detail.html保留下来的一部分：
接着打开organization/urls.py文件，新增代码：
# 讲师详情页url
re_path('teacher/detail/(?P<teacher_id>\d+)/', TeacherDetailView.as_view(), name="teacher_detail"),
然后打开organization/views.py文件，新增代码（这里面的代码用途前面已经说过，这里不再细说）：
# 讲师详情页
class TeacherDetailView(View):
def get(self, request, teacher_id):
# 取出当前id的讲师信息
teacher = Teacher.objects.get(id=int(teacher_id))
# 前面的teacher是数据库里面的字段，后一个则是上面取到的teacher
all_courses = Course.objects.filter(teacher=teacher)
has_fav_teacher = False
if UserFavorite.objects.filter(user=request.user, fav_type=3, fav_id=teacher.id):
has_fav_teacher = True
has_fav_org = False
if UserFavorite.objects.filter(user=request.user, fav_type=2, fav_id=teacher.org.id):
has_fav_org = True
# 讲师排行榜
sorted_teacher = Teacher.objects.all().order_by("-fav_nums")[:5]
return render(request, "teacher-detail.html", {
"teacher": teacher,
"all_courses": all_courses,
"sorted_teacher": sorted_teacher,
"has_fav_teacher": has_fav_teacher,
"has_fav_org": has_fav_org,
})
接着打开我们的teacher-detail.html页面，进行数据的动态加载以及页面的跳转，这里就不附上代码的，大家自己去和我github上的页面源代码进行对比（先尝试自己修改，之后可以看一下）。
还有页面中左右两侧的收藏功能，这里我直接附上js代码(不懂位置的可以去查看github上的页面源代码)：
{% 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/?next={{ request.path }}";
}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>
<script>
window._bd_share_config = {
"common":{"bdSnsKey":{},"bdText":"","bdMini":"1","bdMiniList":["mshare","qzone","tsina","weixin","sqq"],"bdPic":"","bdStyle":"0","bdSize":"16"},
share : [
{
"info" : "share_{{ teacher.id }}",
"bdSize" : 16,
"bdText":"授课教师-{{ teacher.name }}-慕海学习网",
"bdDesc": "我在#慕海学习网#发现了老师“{{ teacher.name }}”，对我们学习很有帮助，一起来看看吧",
"bdUrl": 'http://eduline.licheetools.top{% url 'org:teacher_detail' teacher.id %}',
},
]
}
//以下为js加载部分
with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
</script>
{% endblock %}
顺便大家可以把之前teacher_list.html中的页面跳转弄一下（可以配置的尽量先配置）。
至此，我们本篇关于讲师详情页面的介绍就到此为止，感谢你的赏阅。
本篇笔记对应于第二十一篇代码，对应于github的位置是https://github.com/licheetools/eduline。
网友评论