八、課程詳情頁功能的實現 8.1.課程列表 （1）配置urls MxOnline/urls中 course裡面新建urls.py 把course-list.html拷貝到templates目錄下 （2）course-list.html繼承base.html 修改title，修改bread裡面，con ...
八、課程詳情頁功能的實現
8.1.課程列表
（1）配置urls
MxOnline/urls中
path("course/", include('course.urls', namespace="course")),
course裡面新建urls.py
# course/urls.py from django.urls import path,re_path from .views import CourseListView # 要寫上app的名字 app_name = "course" urlpatterns = [ path('list/',CourseListView.as_view(),name='course_list'), ]
把course-list.html拷貝到templates目錄下
from django.shortcuts import render from django.views.generic import View class CourseListView(View): def get(self, request): return render(request, "course-list.html")
（2）course-list.html繼承base.html
修改title，修改bread裡面，content裡面放course-list獨有的
{#templates/course-list.html#} {% extends 'base.html' %} {% load staticfiles %} {% block title %}公開課列表{% endblock %} {% block custom_bread %} <section> <div class="wp"> <ul class="crumbs"> <li><a href="index.html">首頁</a>></li> <li>公開課</li> </ul> </div> </section> {% endblock %} {% block content %} <section> <div class="wp"> <div class="list" style="margin-top:0;"> <div class="left layout"> <div class="head"> <ul class="tab_header"> <li class="active"><a href="?sort=">最新 </a></li> <li ><a href="?sort=hot">最熱門</a></li> <li ><a href="?sort=students">參與人數</a></li> </ul> </div> <div id="inWindow"> <div class="tab_cont " id="content"> <div class="group_list"> <div class="box"> <a href="course-detail.html"> <img width="280" height="350" class="scrollLoading" src="{% static 'media/courses/2016/12/mysql.jpg' %}"/> </a> <div class="des"> <a href="course-detail.html"> <h2>xadmin進階開發</h2> </a> <span class="fl">時長：<i class="key">30</i></span> <span class="fr">學習人數：2 </span> </div> <div class="bottom"> <a href="course-detail.html"><span class="fl">來自慕課網</span></a> <span class="star fr notlogin " data-favid="15"> 1 </span> </div> </div> </div> <div class="pageturn"> <ul class="pagelist"> <li class="active"><a href="?page=1">1</a></li> <li><a href="?page=2" class="page">2</a></li> <li class="long"><a href="?page=2">下一頁</a></li> </ul> </div> </div> </div> </div> <div class="right layout"> <div class="head">熱門課程推薦</div> <div class="group_recommend"> <dl> <dt> <a target="_blank" href=""> <img width="240" height="220" class="scrollLoading" src="{% static 'media/courses/2016/11/540e57300001d6d906000338-240-135_n0L8vbw.jpg' %}"/> </a> </dt> <dd> <a target="_blank" href=""><h2> django與vuejs實戰項目2</h2></a> <span class="fl">難度：<i class="key">高級</i></span> </dd> </dl> </div> </div> </div> </div> </section> {% endblock %}course-list.html
然後去後臺添加十門課程
（3）列表展示
views.py
# course/views.py from django.shortcuts import render from django.views.generic import View from .models import Course class CourseListView(View): def get(self, request): all_courses = Course.objects.all() return render(request, "course-list.html",{'all_courses':all_courses})
course-list.html
<div class="group_list"> {% for course in all_course %} <div class="box"> <a href="course-detail.html"> <img width="280" height="350" class="scrollLoading" src="{{ MEDIA_URL }}{{ course.image }}"/> </a> <div class="des"> <a href="course-detail.html"> <h2>{{ course.name }}</h2> </a> <span class="fl">時長：<i class="key">{{ course.learn_times }}</i></span> <span class="fr">學習人數：{{ course.students }} </span> </div> <div class="bottom"> <a href="course-detail.html"><span class="fl">來自{{ course.course_org.name }}</span></a> <span class="star fr notlogin " data-favid="15"> {{ course.fav_nums }} </span> </div> </div> {% endfor %}
8.2.分頁
try: page = request.GET.get('page', 1) except PageNotAnInteger: page = 1 p = Paginator(all_courses,2 , request=request) courses = p.page(page)
<div class="pageturn"> <ul class="pagelist"> {% if all_courses.has_previous %} <li class="long"><a href="?{{ all_courses.previous_page_number.querystring }}">上一頁</a></li> {% endif %} {% for page in all_courses.pages %} {% if page %} {% ifequal page all_courses.number %} <li class="active"><a href="?{{ page.querystring }}">{{ page }}</a></li> {% else %} <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li> {% endifequal %} {% else %} <li class="none"><a href="">...</a></li> {% endif %} {% endfor %} {% if all_courses.has_next %} <li class="long"><a href="?{{ all_courses.next_page_number.querystring }}">下一頁</a></li> {% endif %} </ul> </div>
8.3.排序
class CourseListView(View): def get(self, request): all_courses = Course.objects.all().order_by('-add_time') # 熱門課程推薦 hot_courses = Course.objects.all().order_by('-click_nums')[:3] # 排序 sort = request.GET.get('sort', "") if sort: if sort == "students": all_courses = all_courses.order_by("-students") elif sort == "hot": all_courses = all_courses.order_by("-click_nums") # 分頁 try: page = request.GET.get('page', 1) except PageNotAnInteger: page = 1 p = Paginator(all_courses,2 , request=request) courses = p.page(page) return render(request, "course-list.html", { "all_courses":courses, 'sort': sort, 'hot_courses':hot_courses, })
<div class="head"> <ul class="tab_header"> <li class="{% ifequal sort '' %}active{% endifequal %}"><a href="?sort=" >最新 </a></li> <li class="{% ifequal sort 'hot' %}active{% endifequal %}"><a href="?sort=hot" >最熱門 </a></li> <li class="{% ifequal sort 'students' %}active{% endifequal %}"><a href="?sort=students" >參與人數 </a></li> </ul> </div>
<div class="head">熱門課程推薦</div> <div class="group_recommend"> {% for hot_course in hot_courses %} <dl> <dt> <a target="_blank" href=""> <img width="240" height="220" class="scrollLoading" src="{{ MEDIA_URL }}{{ hot_course.image }}"/> </a> </dt> <dd> <a target="_blank" href=""><h2> {{ hot_course.name }}</h2></a> <span class="fl">難度：<i class="key">{{ hot_course.get_degree_display }}</i></span> </dd> </dl> {% endfor %}
{#templates/course-list.html#} {% extends 'base.html' %} {% load staticfiles %} {% block title %}公開課列表{% endblock %} {% block custom_bread %} <section> <div class="wp"> <ul class="crumbs"> <li><a href="index.html">首頁</a>></li> <li>公開課</li> </ul> </div> </section> {% endblock %} {% block content %} <section> <div class="wp"> <div class="list" style="margin-top:0;"> <div class="left layout"> <div class="head"> <ul class="tab_header"> <li class="{% ifequal sort '' %}active{% endifequal %}"><a href="?sort=" >最新 </a></li> <li class="{% ifequal sort 'hot' %}active{% endifequal %}"><a href="?sort=hot" >最熱門 </a></li> <li class="{% ifequal sort 'students' %}active{% endifequal %}"><a href="?sort=students" >參與人數 </a></li> </ul> </div> <div id="inWindow"> <div class="tab_cont " id="content"> <div class="group_list"> {% for course in all_courses.object_list %} <div class="box"> <a href="course-detail.html"> <img width="280" height="350" class="scrollLoading" src="{{ MEDIA_URL }}{{ course.image }}"/> </a> <div class="des"> <a href="course-detail.html"> <h2>{{ course.name }}</h2> </a> <span class="fl">時長：<i class="key">{{ course.learn_times }}</i></span> <span class="fr">學習人數：{{ course.students }} </span> </div> <div class="bottom"> <a href="course-detail.html"><span class="fl">來自{{ course.course_org.name }}</span></a> <span class="star fr notlogin " data-favid="15"> {{ course.fav_nums }} </span> </div> </div> {% endfor %} </div> <div class="pageturn"> <ul class="pagelist"> {% if all_courses.has_previous %} <li class="long"><a href="?{{ all_courses.previous_page_number.querystring }}">上一頁</a></li> {% endif %} {% for page in all_courses.pages %} {% if page %} {% ifequal page all_courses.number %} <li class="active"><a href="?{{ page.querystring }}">{{ page }}</a></li> {% else %} <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li> {% endifequal %} {% else %} <li class="none"><a href="">...</a></li> {% endif %} {% endfor %} {% if all_courses.has_next %} <li class="long"><a href="?{{ all_courses.next_page_number.querystring }}">下一頁</a></li> {% endif %} </ul> </div> </div> </div> </div> <div class="right layout"> <div class="head">熱門課程推薦</div> <div class="group_recommend"> {% for hot_course in hot_courses %} <dl> <dt> <a target="_blank"
