使用模板继承的方式优化代码
1.显示courselist
把courselist.html复制到项目的templates文件夹下
1.编写view
这个页面是课程的展示页,所以这个页面的视图函数应该写在apps/courses/views.py下,与之前的orglist.html一样,我们要编写一个CourseView的类继承于View。在get方法中返回courselist.html。
初步的view.py:
from django.shortcuts import render
from django.views.generic import View #视图类
class CourseView(View):
def get(self, request, *args, **kwargs):
return render(request,'courselist.html')
2.配置url
在MXOnline/urls.py:
编写一级路由:
#课程courses相关路由
url(r'^course/',include(('apps.courses.urls','courses'),namespace='course')),
在courses app下新建urls.py:
编写二级路由:
from django.conf.urls import url
from apps.courses.views import CourseView
urlpatterns = [
#公开课列表展示
url(r'^list/',CourseView.as_view(),name = 'list')
]
3.在前端页面中修改公开课跳转的链接

由于css样式问题,这个跳转链接部分并没有作为继承部分,而是分开来写的。所以orglist,courselist,index都要改正。
运行:

2.模板继承优化courselist的代码
分析:

继承base.html以后,要添加4项内容
- title
- 跳转链接列表
- 面包屑
- 内容

在跳转链接序列表的nav中修改css的作用对象给公开课。

修改面包屑的路径为首页-->公开课

运行:

与之前的未继承代码效果一致。
改进
如果想显示类似于orglist.html显示筛选选项和机构(课程)数量,那么就要:
首先分析orglist中这两个部分的结构:它们两个是同级的div标签,所以都复制一份,因为使用了模板继承,所以不能直接在网页中随意添加,那么我们就添加到面包屑的插槽中。
但是由于位置发生变化,原来的css样式失效了,所以就自己加一些行内样式来完成。
<div class="listoptions" style="margin-left: 74.5px;width: 900px">
<div class="all" style="padding-left: 940px;font-size: 15px;line-height: 20px;margin-top: 20px">共<span class="key">1</span>门</div>

运行结果:

填充数据库中的数据
view.py:
在这段中我们完成数据的显示,并且给它分页显示。
apps/courses/views.py:
from django.shortcuts import render
# Create your views here.
from django.views.generic import View #视图类
from apps.courses.models import * #模型类
from pure_pagination import Paginator, EmptyPage, PageNotAnInteger #分页
class CourseView(View):
def get(self, request, *args, **kwargs):
'''
公开课,课程的展示
:param request:
:param args:
:param kwargs:
:return:
'''
#查询数据库中的所有信息,按照时间从大到小排序
all_courses = Course.objects.all().order_by('-add_time')
#查询信息的个数
course_nums = all_courses.count()
# 分页部分
# 获取page,如果没找到或者出错都置page为1
try:
pindex = request.GET.get('page', 1)
except PageNotAnInteger:
pindex = 1
# 参数1:作用对象,参数2:单页显示数量,参数3:request
p = Paginator(all_courses, per_page=6, request=request)
courses = p.page(pindex) # 获取pindex页的信息
return render(request,'courselist.html',{
'all_courses':courses,
'course_nums':course_nums
})
解析:查询数据库中的所有课程数据按照添加时间逆行排序,查询数据的总个数。然后进行分页,返回模板并携带数据。
前端页面:
数据的个数course_nums:

数据循环项:

进行数据绑定。
解析:
在这里循环的是all_courses.object_list,因为all_courses是page对象,不可迭代。
上传图片{{ MEDIA_URL }}{{ course.image }},字符串拼接的方式。
- 课程名称
- 课程时长
- 学习人数
- 来自的课程机构(课程类和机构类并没有关联,这里先绑定课程类别)
- 课程的点击数

{# 页码 #}
<div class="pageturn">
<ul class="pagelist">
{# 上一页 #}
{% if all_courses.has_previous %}
<li class="long"><a href="?{{all_courses.previous_page_number.querystring }}"class="page">上一页</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 class="page"><a href="?{{ page.querystring }}">{{ page }}</a></li>
{% endifequal %}
{% else %}
<li class="none">...</li>
{% endif %}
{% endfor %}
{# 下一页 #}
{% if all_courses.has_next %}
<li class="long"><a href="?{{ all_courses.next_page_number.querystring }}"class="page">下一页</a></li>
{% endif %}
</ul>
</div>
在admin中填充数据

运行:
第一页:

第二页:

网友评论