（三）Django 在线平台(详情页配置+动态显示后端数据+分页+筛选+排序功能)
前端页面地址 https://github.com/Lxstrive/DjangoHtml
1.把org-list.html拷贝到项目templates中
2.很多页面都有共同部分，所以可以创建一个母版base.html 用来继承（减少代码量）
3.把org-list.html代码剪切进母版base.html中 用模板语句block包裹可变动模块 母板创建完成
{% load staticfiles %}
{% block title %}课程机构列表 - X.xx在线网{% endblock %}
{% block custom_css %}{% endblock %}
{% block custom_js %}{% endblock %}
{% block custom_bread %}
- 首页>
- 课程机构
{% endblock %}
{% block content %}
共15家
我要学习
{% endblock %}
4.在org-list.html中继承母版base.html页面 并修改
5.配置URLS
配置media URLS
6.在organitionAPP中编写View视图函数
# _*_ coding: utf-8 _*_ from django.shortcuts import render from django.views.generic import View class OrgView(View): """ 课程机构列表功能 """ def get(self, request): return render(request, 'org-list.html', {})
页面可以正常显示
城市列表页后台功能展示
1.在Xadmin中添加数据 城市 课程机构 并且在settings中配置上传文件路径（新建media存放由后台上传的文件）
# 配置上传文件路径 MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
动态显示后端数据到前端页面视图函数
class OrgView(View): """ 课程机构列表功能 """ def get(self, request): # 获取到所有数据中的机构 all_orgs = CourseOrg.objects.all() # 获取页面机构数量 org_nums = all_orgs.count() # 获取到所有数据中的城市 all_citys = CityDict.objects.all() return render(request, 'org-list.html', { 'all_orgs': all_orgs, 'all_citys': all_citys, 'org_nums': org_nums })配置org-list.html页面
{% for course_org in all_orgs %}
{% endfor %}
前端页面动态显示后端添加的数据
org-list.html分页功能
github地址 ：https://github.com/jamespacileo/django-pure-pagination
安装库 并且添加到settings APP中
pip install django-pure-pagination
INSTALLED_APPS = (
...
'pure_pagination',
)
编写视图函数
from pure_pagination import Paginator, EmptyPage, PageNotAnInteger class OrgView(View): """ 课程机构列表功能 """ def get(self, request): # 获取到所有数据中的机构 all_orgs = CourseOrg.objects.all() # 获取页面机构数量 org_nums = all_orgs.count() # 获取到所有数据中的城市 all_citys = CityDict.objects.all() # 对课程机构进行分页 try: page = request.GET.get('page', 1) except PageNotAnInteger: page = 1 p = Paginator(all_orgs, 3, request=request) orgs = p.page(page) return render(request, 'org-list.html', { 'all_orgs': orgs, 'all_citys': all_citys, 'org_nums': org_nums })
配置前端页面
{% if all_orgs.has_previous %}
- 上一页
{% endif %}
{% for page in all_orgs.pages %}
{% if page %}
{% ifequal page all_orgs.number %}
- {{ page }}
{% else %}
- {{ page }}
{% endifequal %}
{% else %}
- ...
{% endif %}
{% endfor %}
{% if all_orgs.has_next %}
-
下一页
{% endif %}
分页功能完成
页面城市 机构类别 筛选 右侧课程机构排名 功能
class OrgView(View): """ 课程机构列表功能 """ def get(self, request): # 获取到所有数据中的机构 all_orgs = CourseOrg.objects.all() # 获取到所有数据中的城市 all_citys = CityDict.objects.all() # 根据点击量进行筛选排序 hot_orgs = all_orgs.order_by('-click_nums')[:3] # 取出筛选城市 city_id = request.GET.get('city', '') if city_id: all_orgs = all_orgs.filter(city_id=int(city_id)) # 机构类别筛选 catgory = request.GET.get('ct', '') if catgory: all_orgs = all_orgs.filter(catgory=catgory) # 获取页面机构数量 org_nums = all_orgs.count() # 对课程机构进行分页 try: page = request.GET.get('page', 1) except PageNotAnInteger: page = 1 p = Paginator(all_orgs, 3, request=request) orgs = p.page(page) return render(request, 'org-list.html', { 'all_orgs': orgs, 'all_citys': all_citys, 'org_nums': org_nums, 'city_id': city_id, 'catgory': catgory, 'hot_orgs': hot_orgs })
配置前端页面
-
机构类别
-
所在地区
更多
全部
{% for city in all_citys %}
{{ city }}
{% endfor %}
页面排序功能
注意返回给前端页面
