八、讲师模块
准备工作:将资料包中的关于teacher的两个前端页面全部复制到templates/orgs下
1、讲师列表页功能实现
(1)、url
将 path('teacher_list',teacher_list, name='teacher_list')加入到orgs/url.py的urlpatterns中。
from django.urls import path, re_path
from .views import *
app_name = 'orgs'
urlpatterns = [
path('org_list', org_list, name='org_list'),
re_path(r'org_detail/(\d+)$', org_detail, name='org_detail'),
re_path(r'org_detail_course/(\d+)$', org_detail_course, name='org_detail_course'),
re_path(r'org_detail_desc/(\d+)$', org_detail_desc, name='org_detail_desc'),
re_path(r'org_detail_teacher/(\d+)$', org_detail_teacher, name='org_detail_teacher'),
path('teacher_list',teacher_list, name='teacher_list')
]
(2)、试图函数
在orgs/views.py中,编写视图函数
def teacher_list(request): all_teachers = TeacherInfo.objects.all() sort_teachers = all_teachers.order_by('-love_num')[:2] sort = request.GET.get('sort') if sort: all_teachers = all_teachers.order_by('-' + sort) # 分页 pagenum = request.GET.get('pagenum', '') pa = Paginator(all_teachers, 2) try: pages = pa.page(pagenum) except PageNotAnInteger: pages = pa.page(1) except EmptyPage: pages = pa.page(pa.num_pages) return render(request, 'orgs/teachers-list.html', { 'all_teachers': all_teachers, 'sort_teachers': sort_teachers, 'pages': pages, 'sort': sort })
(3)、前端页面
注意在base.html中给出接口
{% extends 'base.html' %} {% block title %} 课程讲师 - 谷粒教育网 {% endblock %} {% block content %} <section> <div class="wp"> <ul class="crumbs"> <li><a href="/">首页</a>></li> <li>课程讲师</li> </ul> </div> </section> <section> <div class="wp butler_list_box list"> <div class='left'> <div class="butler_list layout"> <div class="head"> <ul class="fl tab_header"> <li {% if sort == '' %} class="active" {% endif %}><a href="?sort=">全部</a> </li> <li {% if sort == 'click_num' %} class="active" {% endif %}><a href="?sort=click_num">人气 ↓</a></li> </ul> <div class="fr butler-num">共<span class="key">{{ all_teachers.count }}</span>人 </div> </div> {% for teacher in pages %} <dl class="des"> <dt> <a href="/org/teacher/detail/1/"> <div class="picpic"> <img width="100" height="100" class="scrollLoading" src="{{ MEDIA_URL }}{{ teacher.image }}"/> </div> </a> <div class="btn"> <div class="fr btn2 bdsharebuttonbox"> <span class="fl">分享</span> <a href="#" class="bds_more" data-cmd="more"></a> </div> </div> </dt> <dd> <a href="/org/teacher/detail/1/"> <h1>{{ teacher.name }}<span class="key picbig">金牌讲师</span></h1> </a> <ul class="cont"> <li>工作年限:<span>{{ teacher.work_year }}年</span></li> <li>工作职位:<span>{{ teacher.work_position }}</span></li> <li>就职公司:<span>{{ teacher.work_company.name }} </span></li> <li>年龄:<span>{{ teacher.age }}岁</span></li> <li>教学特点:<span>{{ teacher.work_style }}</span></li> </ul> </dd> <a class="buy buyservice" href="/org/teacher/detail/1/"><br/>查看<br/>详情</a> </dl> {% endfor %} </div> <div class="pageturn"> <ul class="pagelist"> {% if pages.has_previous %} <li class="long"><a href="?pagenum={{ pages.previous_page_number }}&sort={{ sort }}">上一页</a></li> {% endif %} {% for num in pages.paginator.page_range %} <li {% if num == pages.number %} class="active" {% endif %}><a href="?pagenum={{ num }}&sort={{ sort }}">{{ num }}</a></li> {% endfor %} {% if pages.has_next %} <li class="long"><a href="?pagenum={{ pages.next_page_number }}&sort={{ sort }}">下一页</a></li> {% endif %} </ul> </div> </div> <div class="right layout"> <div class="head">讲师排行榜</div> {% for teacher in sort_teachers %} <dl class="des"> <span class="num fl">{{ forloop.counter }}</span> <a href="/diary/hk_detail/6/"> <dt> <img width="50" height="50" class="scrollLoading" src="{{ MEDIA_URL }}{{ teacher.image }}"/> </dt> </a> <dd> <a href="/diary/hk_detail/6/"> <h1 title="weesmile">{{ teacher.name }}</h1> </a> <p>工作年限:<span>{{ teacher.work_year }}年</span></p> </dd> </dl> {% endfor %} </div> </div> </section> {% endblock %}
2、讲师详情页
(1)、url
from django.urls import path, re_path from .views import * app_name = 'orgs' urlpatterns = [ path('org_list', org_list, name='org_list'), re_path(r'org_detail/(\d+)$', org_detail, name='org_detail'), re_path(r'org_detail_course/(\d+)$', org_detail_course, name='org_detail_course'), re_path(r'org_detail_desc/(\d+)$', org_detail_desc, name='org_detail_desc'), re_path(r'org_detail_teacher/(\d+)$', org_detail_teacher, name='org_detail_teacher'), path('teacher_list',teacher_list, name='teacher_list'), re_path(r'teacher_detail/(\d+)$', teacher_detail, name='teacher_detail') ]
(2)、视图函数
def teacher_detail(request, teacher_id): if teacher_id: teacher = TeacherInfo.objects.filter(id=int(teacher_id))[0] all_teachers = TeacherInfo.objects.all() sort_teachers = all_teachers.order_by('-love_num')[:2] return render(request, 'orgs/teacher-detail.html', { 'teacher': teacher, 'sort_teachers': sort_teachers, })
(3)、前端页面
{% extends 'base.html' %} {% block title %} 讲师详情 - 谷粒教育网 {% endblock %} {% block content %} <section> <div class="wp"> <ul class="crumbs"> <li><a href="/">首页</a>></li> <li><a href="{% url 'orgs:teacher_list' %}">授课讲师</a>></li> <li>讲师详情</li> </ul> </div> </section> <section> <div class="wp butler-detail-box butler-diaryd-box clearfix"> <div class="fl list"> <div class="butler_detail_list clearfix"> <div class="brief"> <dl class="des"> <dt> <div class="picpic"> <img width="100" height="100" src="{{ MEDIA_URL }}{{ teacher.image }}"/> </div> <div class="btn"> <span class="fl btn1 collectionbtn" id="jsLeftBtn"> 收藏 </span> <span class="fr btn2 shareBtn bdsharebuttonbox"> <span class="fl">分享</span> <a href="#" class="bds_more" data-cmd="more"></a> </span> </div> </dt> <dd> <a href="{% url 'orgs:teacher_detail' teacher.id %}"> <h1>weesmile<span class="key picbig">金牌讲师</span></h1> </a> <ul class="cont"> <li>工作年限:<span>{{ teacher.work_year }}年</span></li> <li>就职公司:<span>{{ teacher.work_company.name }}</span></li> <li>工作职位:<span>{{ teacher.work_position }} </span></li> <li>教学特点:<span>{{ teacher.work_style }}</span></li> </ul> </dd> </dl> </div> </div> <div class="butler_detail_cont clearfix"> <div class="left layout"> <div class="head"> <ul class="tab_header"> <li class="active"><a href="{% url 'courses:course_list' %}">全部课程</a> </li> </ul> </div> <div class="companycenter"> <div class="group_list brief"> {% for course in teacher.courseinfo_set.all %} <div class="module1_5 box"> <a href="{% url 'courses:course_detail' course.id %}"> <img width="214" height="190" class="scrollLoading" src="{{ MEDIA_URL }}{{ course.image }}"/> </a> <div class="des"> <a href="{% url 'courses:course_detail' course.id %}"><h2>{{ course.name }}</h2></a> <span class="fl">时长:<i class="key">{{ course.study_time }}</i></span> <span class="fr">学习人数:{{ course.study_num }}</span> </div> <div class="bottom"> <span class="fl">{{ course.orginfo.name }}</span> <span class="star fr notlogin" data-favid="15">{{ course.love_num }}</span> </div> </div> {% endfor %} </div> </div> <!--<div class="pageturn">--> <!--<ul class="pagelist">--> <!--<li class="active"><a href="?page=1">1</a></li>--> <!--</ul>--> <!--</div>--> </div> </div> </div> <div class="fr list"> <div class="butler_detail_list"> <div class="right butler-company-box"> <div class="head"> <h1>{{ teacher.work_company.name }}</h1> <p>{{ teacher.work_company.desc }}</p> </div> <div class="pic"> <a href="{% url 'orgs:org_detail' teacher.work_company.id %}"> <img width="150" height="80" src="{{ MEDIA_URL }}{{ teacher.work_company.image }}"/> </a> </div> <a href="{% url 'orgs:org_detail' teacher.work_company.id %}"> <h2 class="center">{{ teacher.work_company.name }}</h2> </a> <p class="center tell">{{ teacher.work_company.address }}</p> <a class="btn" id="jsRightBtn">收藏</a> </div> </div> <div class="butler_detail_cont"> <div class="butler_list_box"> <div class="right layout"> <div class="head">讲师排行榜</div> {% for teacher1 in sort_teachers %} <dl class="des"> <span class="num fl">{{ forloop.counter }}</span> <a href="{% url 'orgs:teacher_detail' teacher1.id %}"> <dt> <img width="50" height="50" class="scrollLoading" src="{{ MEDIA_URL }}{{ teacher1.image }}"/> </dt> </a> <dd> <a href="{% url 'orgs:teacher_detail' teacher1.id %}"> <h1 title="weesmile">{{ teacher1.name }}</h1> </a> <p>工作年限:<span>{{ teacher1.work_year }}年</span></p> </dd> </dl> {% endfor %} </div> </div> </div> </div> </div> </section> {% endblock %}
3、收藏功能
这边的收藏和课程模块的收藏很相似。
(1)、视图函数
def course_detail(request, course_id): if course_id: course = CourseInfo.objects.filter(id=course_id)[0] relate_course = CourseInfo.objects.filter(category=course.category).exclude(id=int(course_id))[:2] # lovecourse和loveorg用来存储用户收藏这个东西的状态,在模板中,根据状态来确定页面加载时候显示的收藏还是取消收藏 lovecourse = False loveorg = False if request.user.is_authenticated: # 判断用户是否登录 # 获取用户是否收藏过课程 love1 = UserLove.objects.filter(love_id=int(course_id), love_type=2, love_status=True, love_man=request.user) if love1: lovecourse = True # 获取用户是否收藏过机构 love2 = UserLove.objects.filter(love_id=int(course.orginfo.id), love_type=1, love_status=True, love_man=request.user) if love2: loveorg = True return render(request, 'courses/course-detail.html', { 'course': course, 'relate_course': relate_course, 'lovecourse': lovecourse, 'loveorg': loveorg, })
(2)、前端js代码
<script> $(function () { $('#jsLeftBtn').click(function () { var loveid= {{ teacher.id }}; var lovetype = 3; $.ajax({ type: 'GET', url: '{% url 'operations:user_love' %}', data:{ loveid:loveid, lovetype:lovetype, }, success:function(callback){ if (callback.status == 'ok'){ $('#jsLeftBtn').text(callback.msg) }else{ alert(callback.msg) } } }) }); $('#jsRightBtn').click(function () { var loveid= {{ teacher.work_company.id }}; var lovetype = 1; $.ajax({ type: 'GET', url: '{% url 'operations:user_love' %}', data:{ loveid:loveid, lovetype:lovetype, }, success:function(callback){ if (callback.status == 'ok'){ $('#jsRightBtn').text(callback.msg) }else{ alert(callback.msg) } } }) }); }) </script>
{% extends 'base.html' %} {% block title %} 讲师详情 - 谷粒教育网 {% endblock %} {% block content %} <section> <div class="wp"> <ul class="crumbs"> <li><a href="/">首页</a>></li> <li><a href="{% url 'orgs:teacher_list' %}">授课讲师</a>></li> <li>讲师详情</li> </ul> </div> </section> <section> <div class="wp butler-detail-box butler-diaryd-box clearfix"> <div class="fl list"> <div class="butler_detail_list clearfix"> <div class="brief"> <dl class="des"> <dt> <div class="picpic"> <img width="100" height="100" src="{{ MEDIA_URL }}{{ teacher.image }}"/> </div> <div class="btn"> <span class="fl btn1 collectionbtn" id="jsLeftBtn"> {% if loveteacher %} 取消收藏 {% else %} 收藏 {% endif %} </span> <span class="fr btn2 shareBtn bdsharebuttonbox"> <span class="fl">分享</span> <a href="#" class="bds_more" data-cmd="more"></a> </span> </div> </dt> <dd> <a href="{% url 'orgs:teacher_detail' teacher.id %}"> <h1>weesmile<span class="key picbig">金牌讲师</span></h1> </a> <ul class="cont"> <li>工作年限:<span>{{ teacher.work_year }}年</span></li> <li>就职公司:<span>{{ teacher.work_company.name }}</span></li> <li>工作职位:<span>{{ teacher.work_position }} </span></li> <li>教学特点:<span>{{ teacher.work_style }}</span></li> </ul> </dd> </dl> </div> </div> <div class="butler_detail_cont clearfix"> <div class="left layout"> <div class="head"> <ul class="tab_header"> <li class="active"><a href="{% url 'courses:course_list' %}">全部课程</a> </li> </ul> </div> <div class="companycenter"> <div class="group_list brief"> {% for course in teacher.courseinfo_set.all %} <div class="module1_5 box"> <a href="{% url 'courses:course_detail' course.id %}"> <img width="214" height="190" class="scrollLoading" src="{{ MEDIA_URL }}{{ course.image }}"/> </a> <div class="des"> <a href="{% url 'courses:course_detail' course.id %}"><h2>{{ course.name }}</h2></a> <span class="fl">时长:<i class="key">{{ course.study_time }}</i></span> <span class="fr">学习人数:{{ course.study_num }}</span> </div> <div class="bottom"> <span class="fl">{{ course.orginfo.name }}</span> <span class="star fr notlogin" data-favid="15">{{ course.love_num }}</span> </div> </div> {% endfor %} </div> </div> <!--<div class="pageturn">--> <!--<ul class="pagelist">--> <!--<li class="active"><a href="?page=1">1</a></li>--> <!--</ul>--> <!--</div>--> </div> </div> </div> <div class="fr list"> <div class="butler_detail_list"> <div class="right butler-company-box"> <div class="head"> <h1>{{ teacher.work_company.name }}</h1> <p>{{ teacher.work_company.desc }}</p> </div> <div class="pic"> <a href="{% url 'orgs:org_detail' teacher.work_company.id %}"> <img width="150" height="80" src="{{ MEDIA_URL }}{{ teacher.work_company.image }}"/> </a> </div> <a href="{% url 'orgs:org_detail' teacher.work_company.id %}"> <h2 class="center">{{ teacher.work_company.name }}</h2> </a> <p class="center tell">{{ teacher.work_company.address }}</p> <a class="btn" id="jsRightBtn"> {% if loveorg %} 取消收藏 {% else %} 收藏 {% endif %} </a> </div> </div> <div class="butler_detail_cont"> <div class="butler_list_box"> <div class="right layout"> <div class="head">讲师排行榜</div> {% for teacher1 in sort_teachers %} <dl class="des"> <span class="num fl">{{ forloop.counter }}</span> <a href="{% url 'orgs:teacher_detail' teacher1.id %}"> <dt> <img width="50" height="50" class="scrollLoading" src="{{ MEDIA_URL }}{{ teacher1.image }}"/> </dt> </a> <dd> <a href="{% url 'orgs:teacher_detail' teacher1.id %}"> <h1 title="weesmile">{{ teacher1.name }}</h1> </a> <p>工作年限:<span>{{ teacher1.work_year }}年</span></p> </dd> </dl> {% endfor %} </div> </div> </div> </div> </div> </section> {% endblock %} {% block myjs %} <script> $(function () { $('#jsLeftBtn').click(function () { var loveid= {{ teacher.id }}; var lovetype = 3; $.ajax({ type: 'GET', url: '{% url 'operations:user_love' %}', data:{ loveid:loveid, lovetype:lovetype, }, success:function(callback){ if (callback.status == 'ok'){ $('#jsLeftBtn').text(callback.msg) }else{ alert(callback.msg) } } }) }); $('#jsRightBtn').click(function () { var loveid= {{ teacher.work_company.id }}; var lovetype = 1; $.ajax({ type: 'GET', url: '{% url 'operations:user_love' %}', data:{ loveid:loveid, lovetype:lovetype, }, success:function(callback){ if (callback.status == 'ok'){ $('#jsRightBtn').text(callback.msg) }else{ alert(callback.msg) } } }) }); }) </script> {% endblock %}