前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >零基础使用Django2.0.1打造在线教育网站(二十一):讲师相关页面配置

零基础使用Django2.0.1打造在线教育网站(二十一):讲师相关页面配置

原创
作者头像
啃饼思录
修改2018-09-13 21:57:52
5240
修改2018-09-13 21:57:52
举报

关于博主

努力与运动兼备~~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

代码语言:txt
复制
                                      微信公众号:  啃饼思录
代码语言:txt
复制
                                    QQ: 2810706745(啃饼小白)

写在前面

本篇笔记我们将介绍讲师相关页面的配置,具体包括讲师列表页,讲师详情页等功能,下面我们依次介绍一下。

本篇笔记对应于第二十一篇代码,对应于github的位置是https://github.com/licheetools/eduline

讲师列表页配置

老规矩,把前端资料里面的teacher_list.htmlteacher-detail.html页面拷贝到我们的templates文件夹里面,接着修改teacher_list.html页面,保留部分信息,其余删除,{% block content %} <section>{% endblock %}里面 <section>是原来teacher_list.html保留下来的一部分:

接着打开organization/urls.py文件,新增代码:

代码语言:txt
复制
from .views import TeacherListView

 # 讲师列表页url
path("teacher/list/", TeacherListView.as_view(), name="teacher_list"),

然后打开organization/views.py文件,新增代码:

代码语言:txt
复制
# 课程讲师列表页
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文件,新增代码:

代码语言:txt
复制
# 讲师详情页url
    re_path('teacher/detail/(?P<teacher_id>\d+)/', TeacherDetailView.as_view(), name="teacher_detail"),

然后打开organization/views.py文件,新增代码(这里面的代码用途前面已经说过,这里不再细说):

代码语言:txt
复制
# 讲师详情页
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上的页面源代码):

代码语言:txt
复制
{% 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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 关于博主
  • 写在前面
  • 讲师列表页配置
  • 讲师详情页配置
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档