前端页面地址 https://github.com/Lxstrive/DjangoHtml
1.把org-list.html拷贝到项目templates中
2.很多页面都有共同部分,所以可以创建一个母版base.html 用来继承(减少代码量)
3.把org-list.html代码剪切进母版base.html中 用模板语句block包裹可变动模块 母板创建完成
<!DOCTYPE html> <html> {% load staticfiles %} <head> <meta charset="UTF-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" > <title>{% block title %}课程机构列表 - X.xx在线网{% endblock %}</title> <link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}"> <link rel="stylesheet" type="text/css" href="{% static 'css/animate.css' %}"> <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"> {% block custom_css %}{% endblock %} <script src="{% static 'js/jquery.min.js' %}" type="text/javascript"></script> <script src="{% static 'js/jquery-migrate-1.2.1.min.js' %}" type="text/javascript"></script> {% block custom_js %}{% endblock %} </head> <body> <section class="headerwrap "> <header> <div class=" header"> <div class="top"> <div class="wp"> <div class="fl"><p>服务电话:<b>33333333</b></p></div> <!--登录后跳转--> <a style="color:white" class="fr registerbtn" href="register.html">注册</a> <a style="color:white" class="fr loginbtn" href="login.html">登录</a> </div> </div> <div class="middle"> <div class="wp"> <a href="index.html"><img class="fl" src="../images/logo.jpg"/></a> <div class="searchbox fr"> <div class="selectContainer fl"> <span class="selectOption" id="jsSelectOption" data-value="course"> 公开课 </span> <ul class="selectMenu" id="jsSelectMenu"> <li data-value="course">公开课</li> <li data-value="org">课程机构</li> <li data-value="teacher">授课老师</li> </ul> </div> <input id="search_keywords" class="fl" type="text" value="" placeholder="请输入搜索内容"/> <img class="search_btn fr" id="jsSearchBtn" src="../images/search_btn.png"/> </div> </div> </div> <nav> <div class="nav"> <div class="wp"> <ul> <li ><a href="index.html">首页</a></li> <li > <a href="course-list.html"> 公开课<img class="hot" src="../images/nav_hot.png"> </a> </li> <li > <a href="teachers-list.html">授课教师</a> </li> <li class="active" ><a href="org-list.html">授课机构</a></li> </ul> </div> </div> </nav> </div> </header> </section> <!--crumbs start--> {% 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 butler_list_box list"> <div class='left'> <div class="listoptions"> <ul> <li> <h2>机构类别</h2> <div class="cont"> <a href="?city="><span class="active2">全部</span></a> <a href="?ct=pxjg&city="><span class="">培训机构</span></a> <a href="?ct=gx&city="><span class="">高校</span></a> <a href="?ct=gr&city="><span class="">个人</span></a> </div> </li> <li> <h2>所在地区</h2> <div class="more">更多</div> <div class="cont"> <a href="?ct="><span class="active2">全部</span></a> <a href="?city=1&ct="><span class="">北京市</span></a> <a href="?city=2&ct="><span class="">上海市</span></a> <a href="?city=3&ct="><span class="">广州市</span></a> <a href="?city=4&ct="><span class="">深圳市</span></a> <a href="?city=5&ct="><span class="">天津市</span></a> </div> </li> </ul> </div> <div class="all">共<span class="key">15</span>家</div> <div class="butler_list company list"> <div class="layout"> <div class="head"> <ul class="tab_header"> <li class="active"><a href="?ct=&city=">全部</a> </li> <li class=""><a href="?sort=students&ct=&city=">学习人数 ↓</a></li> <li class=""><a href="?sort=courses&ct=&city=">课程数 ↓</a></li> </ul> </div> <dl class="des difdes"> <dt> <a href="org-detail-homepage.html"> <img width="200" height="120" class="scrollLoading" data-url="../media/org/2016/11/imooc.png"/> </a> </dt> <dd> <div class="clearfix"> <a href="org-detail-homepage.html"> <h1>慕课网</h1> <div class="pic fl"> <img src="../images/authentication.png"/> <img src="../images/gold.png"/> </div> </a> </div> <ul class="cont"> <li class="first"><p class="pic9">课程数:<span>1</span></p><p class="c7">学习人数:<span>1000</span></p></li> <li class="c8" style="padding-left:18px;">北京市海淀区中关村北大街</li> <li class="pic10" style="padding-left:18px;">经典课程: <a href="/diary/19/">c语言基础入门</a> <a href="/diary/16/">数据库基础</a> </li> </ul> </dd> <div class="buy start_groupbuy jsShowPerfect2" data-id="22"><br/>联系<br/>服务</div> </dl> <dl class="des difdes"> <dt> <a href="org-detail-homepage.html"> <img width="200" height="120" class="scrollLoading" data-url="../media/org/2016/11/bjdx.jpg"/> </a> </dt> <dd> <div class="clearfix"> <a href="org-detail-homepage.html"> <h1>北京大学</h1> <div class="pic fl"> <img src="../images/authentication.png"/> <img src="../images/gold.png"/> </div> </a> </div> <ul class="cont"> <li class="first"><p class="pic9">课程数:<span>1</span></p><p class="c7">学习人数:<span>1000</span></p></li> <li class="c8" style="padding-left:18px;">北京市海淀区中关村北大街</li> <li class="pic10" style="padding-left:18px;">经典课程: <a href="/diary/19/">c语言基础入门</a> <a href="/diary/16/">数据库基础</a> </li> </ul> </dd> <div class="buy start_groupbuy jsShowPerfect2" data-id="22"><br/>联系<br/>服务</div> </dl> <dl class="des difdes"> <dt> <a href="org-detail-homepage.html"> <img width="200" height="120" class="scrollLoading" data-url="../media/org/2016/11/qhdx-logo.png"/> </a> </dt> <dd> <div class="clearfix"> <a href="org-detail-homepage.html"> <h1>清华大学</h1> <div class="pic fl"> <img src="../images/authentication.png"/> <img src="../images/gold.png"/> </div> </a> </div> <ul class="cont"> <li class="first"><p class="pic9">课程数:<span>1</span></p><p class="c7">学习人数:<span>1000</span></p></li> <li class="c8" style="padding-left:18px;">北京市海淀区中关村北大街</li> <li class="pic10" style="padding-left:18px;">经典课程: <a href="/diary/19/">c语言基础入门</a> <a href="/diary/16/">数据库基础</a> </li> </ul> </dd> <div class="buy start_groupbuy jsShowPerfect2" data-id="22"><br/>联系<br/>服务</div> </dl> <dl class="des difdes"> <dt> <a href="org-detail-homepage.html"> <img width="200" height="120" class="scrollLoading" data-url="../media/org/2016/11/njdx.jpg"/> </a> </dt> <dd> <div class="clearfix"> <a href="org-detail-homepage.html"> <h1>南京大学</h1> <div class="pic fl"> <img src="../images/authentication.png"/> <img src="../images/gold.png"/> </div> </a> </div> <ul class="cont"> <li class="first"><p class="pic9">课程数:<span>1</span></p><p class="c7">学习人数:<span>1000</span></p></li> <li class="c8" style="padding-left:18px;">北京市海淀区中关村北大街</li> <li class="pic10" style="padding-left:18px;">经典课程: <a href="/diary/19/">c语言基础入门</a> <a href="/diary/16/">数据库基础</a> </li> </ul> </dd> <div class="buy start_groupbuy jsShowPerfect2" data-id="22"><br/>联系<br/>服务</div> </dl> <dl class="des difdes"> <dt> <a href="org-detail-homepage.html"> <img width="200" height="120" class="scrollLoading" data-url="../media/org/2016/11/imooc_klgAUn5.png"/> </a> </dt> <dd> <div class="clearfix"> <a href="org-detail-homepage.html"> <h1>慕课网2</h1> <div class="pic fl"> <img src="../images/authentication.png"/> <img src="../images/gold.png"/> </div> </a> </div> <ul class="cont"> <li class="first"><p class="pic9">课程数:<span>1</span></p><p class="c7">学习人数:<span>1000</span></p></li> <li class="c8" style="padding-left:18px;">北京市海淀区中关村北大街</li> <li class="pic10" style="padding-left:18px;">经典课程: <a href="/diary/19/">c语言基础入门</a> <a href="/diary/16/">数据库基础</a> </li> </ul> </dd> <div class="buy start_groupbuy jsShowPerfect2" data-id="22"><br/>联系<br/>服务</div> </dl> </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><a href="?page=3" class="page">3</a></li> <li class="long"><a href="?page=2">下一页</a></li> </ul> </div> </div> </div> <div class="right companyright"> <div class="head">我要学习</div> <form class="rightform" id="jsStayForm"> <div> <img src="../images/rightform1.png"/> <input type="text" name="name" id="companyName" placeholder="名字" maxlength="25" /> </div> <div> <img src="../images/rightform2.png"/> <input type="text" name="mobile" id="companyMobile" placeholder="联系电话"/> </div> <div> <img src="../images/rightform3.png"/> <input type="text" name="course_name" id="companyAddress" placeholder="课程名" maxlength="50" /> </div> <p class="error company-tips" id="jsCompanyTips"></p> <input class="btn" type="text" id="jsStayBtn" value="立即咨询 >" /> <input type='hidden' name='csrfmiddlewaretoken' value='5I2SlleZJOMUX9QbwYLUIAOshdrdpRcy' /> </form> </div> <div class="right companyrank layout"> <div class="head">授课机构排名</div> <dl class="des"> <dt class="num fl">1</dt> <dd> <a href="/company/2/"><h1>慕课网</h1></a> <p>北京市</p> </dd> </dl> <dl class="des"> <dt class="num fl">2</dt> <dd> <a href="/company/2/"><h1>慕课网2</h1></a> <p>深圳市</p> </dd> </dl> <dl class="des"> <dt class="num fl">3</dt> <dd> <a href="/company/2/"><h1>北京大学</h1></a> <p>北京市</p> </dd> </dl> </div> </div> </section> {% endblock %} <footer> <div class="footer"> <div class="wp"> <ul class="cont"> <li class="logo"><a href=""><img src="../images/footlogo.png"/></a></li> <li class="code"><img src="../images/code.jpg"/><p class="center">扫描关注微信</p></li> <li class="third"><img class="fl" src="../images/tell.png"/><p class="tell">33333333</p><p class="time">周一至周日 9:00-18:00</p></li> </ul> </div> <p class="line"></p> <div class="wp clear"> <span class="fl">? 2016 www.projectsedu.com 慕学在线-在线学习交流平台 保留所有权利</span> <span class="fr">copyright ? 2016 ICP备案证书号:蜀ICP备xxxxx号-1</span> </div> </div> </footer> <section> <ul class="sidebar"> <li class="qq"> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2023525077&site=qq&menu=yes"></a> </li> <li class="totop"></li> </ul> </section> <script src="{% static 'js/selectUi.js' %}" type='text/javascript'></script> <script src="{% static 'js/deco-common.js' %}" type='text/javascript'></script> <script type="text/javascript" src="{% static 'js/plugins/laydate/laydate.js' %}"></script> <script src="{% static 'js/plugins/layer/layer.js' %}"></script> <script src="{% static 'js/plugins/queryCity/js/public.js' %}" type="text/javascript"></script> <script src="{% static 'js/unslider.js' %}" type="text/javascript"></script> <script src="{% static 'js/plugins/jquery.scrollLoading.js' %}" type="text/javascript"></script> <script src="{% static 'js/deco-common.js' %}" type="text/javascript"></script> <script> $(function(){ $('#jsStayBtn').on('click', function(){ $.ajax({ cache: false, type: "POST", url:"/org/add_ask/", data:$('#jsStayForm').serialize(), async: true, success: function(data) { if(data.status == 'success'){ $('#jsStayForm')[0].reset(); alert("提交成功") }else if(data.status == 'fail'){ $('#jsCompanyTips').html(data.msg) } }, }); }); }) </script> </body> </html>
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 %} <dl class="des difdes"> <dt> <a href="org-detail-homepage.html"> <img width="200" height="120" class="scrollLoading" data-url="{{ MEDIA_URL }}{{ course_org.image }}"/> </a> </dt> <dd> <div class="clearfix"> <a href="org-detail-homepage.html"> <h1>{{ course_org.name }}</h1> <div class="pic fl"> <img src="{% static 'images/authentication.png' %}"/> <img src="{% static 'images/gold.png' %}"/> </div> </a> </div> <ul class="cont"> <li class="first"><p class="pic9">课程数:<span>1</span></p><p class="c7">学习人数:<span>1000</span></p></li> <li class="c8" style="padding-left:18px;">北京市海淀区中关村北大街</li> <li class="pic10" style="padding-left:18px;">经典课程: <a href="/diary/19/">c语言基础入门</a> <a href="/diary/16/">数据库基础</a> </li> </ul> </dd> <div class="buy start_groupbuy jsShowPerfect2" data-id="22"><br/>联系<br/>服务</div> </dl> {% 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 })
配置前端页面
<div class="pageturn"> <ul class="pagelist"> {% if all_orgs.has_previous %} <li class="long"><a href="?{{ all_orgs.previous_page_number.querystring }}">上一页</a></li> {% endif %} {% for page in all_orgs.pages %} {% if page %} {% ifequal page all_orgs.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_orgs.has_next %} <li class="long"> <a href="?{{ all_orgs.next_page_number.querystring }}">下一页</a> </li> {% endif %} </ul> </div>
分页功能完成
页面城市 机构类别 筛选 右侧课程机构排名 功能
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 })
配置前端页面
<ul> <li> <h2>机构类别</h2> <div class="cont"> <a href="?city={{ city_id }}"><span class="{% ifequal catgory '' %}active2{% endifequal %}">全部</span></a> <a href="?ct=pxjg&city={{ city_id }}"><span class="{% ifequal catgory 'pxjg' %}active2{% endifequal %}">培训机构</span></a> <a href="?ct=gx&city={{ city_id }}"><span class="{% ifequal catgory 'gx' %}active2{% endifequal %}">高校</span></a> <a href="?ct=gr&city={{ city_id }}"><span class="{% ifequal catgory 'gr' %}active2{% endifequal %}">个人</span></a> </div> </li> <li> <h2>所在地区</h2> <div class="more">更多</div> <div class="cont"> <a href="?ct={{ catgory }}"><span class="{% ifequal city_id '' %}active2{% endifequal %}">全部</span></a> {% for city in all_citys %} <a href="?city={{ city.id }}&ct={{ catgory }}"><span class="{% ifequal city_id city.id|stringformat:'i'%}active2{% endifequal %}">{{ city }}</span></a> {% endfor %} </div> </li> </ul>
页面排序功能
<div class="head"> <ul class="tab_header"> <li class="{% if sort == '' %}active{% endif %}"><a href="?ct={{ catgory }}&city={{ city_id }}">全部</a> </li> <li class="{% if sort == 'students' %}active{% endif %}"><a href="?sort=students&ct={{ catgory }}&city={{ city_id }}">学习人数 ↓</a></li> <li class="{% if sort == 'courses' %}active{% endif %}"><a href="?sort=courses&ct={{ catgory }}&city={{ city_id }}">课程数 ↓</a></li> </ul> </div>
注意返回给前端页面