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

关于博主

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

                                      微信公众号:  啃饼思录
                                    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文件,新增代码:

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

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

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

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员的知识天地

Web 开发人员的文档生成工具【推荐】

工欲善其事必先利其器,在此给 Web 开发人员推荐几款优秀的开源文档生成工具,希望能对大家有所帮助。

39220
来自专栏逸鹏说道

一个粗心的Bug,JSON格式不规范导致AJAX错误

一、事件回放 今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里。 当时正在联调一个项目,由于后端没有提供数据...

36740
来自专栏知晓程序

我,一个自诩牛逼上天的 Node.js 和小程序开发者,今天就教「快应用」好好做人

16020
来自专栏不二小段

【一起学Python】STEAM游戏评测爬虫

别催更,越催越懒得写。催更只接受赞赏…可惜我的微信还没有赞赏的功能… 今天刚接的需求&新鲜的代码… 有个大佬昨天跟我说 来给我爬一下Steam的游戏评测吧,我...

1.4K60
来自专栏腾讯Bugly的专栏

《客厅TV-APP首页瀑布流后台猫腻细窥》

1、项目概况 横版式已经持续使用了约2年,内容排布、主题细分、露出效率、操作便利等方面都有一些不足。而瀑布流则能很好的解决这些不足,在业界已经是一种通用的做法。...

546100
来自专栏iOS技术

设计一个简单的 iOS 架构前言一、关于组件化二、模块化思维划分文件三、减少全局宏的使用四、去基类化设计五、MVC?MVP?MVVM?VIPER?结语

正如“100个读者就有100个哈姆雷特”一样,对于架构的理解不同的软件工程师有不同的看法。架构设计往往是一个权衡的过程,每一个架构设计者都要考虑到各个因素,比如...

17930
来自专栏张戈的专栏

WordPress4.2升级修复补丁:解决大量404请求以及评论表情路径及尺寸异常问题

上一篇文章写到了 WordPress 升级 4.2 版本后部分主题出现了大量 404 请求的问题,匆忙解决也没深究原因。今天继续调试主题却发现了评论表情不显示了...

477130
来自专栏IMWeb前端团队

babel

原文http://jiangyuan.me/blog/2016/08/13/babel/

25590
来自专栏IT大咖说

自动化测试的理想境界:AppCrawler自动遍历工具

内容来源:2017 年 6 月 24 日,TesterHome联合创始人黄延胜在“Testwo第一届测试分享沙龙”进行《App crawler自动遍历工具》演讲...

72030
来自专栏速成应用小程序

小程序注册开发制作过程中要注意哪些?

小程序在注册制作发布过程中常常会遇见审核不通过或是上线后被停止等问题,那么怎么避免这类问题的出现呢?

52170

扫码关注云+社区

领取腾讯云代金券