一.模板继承
我们将现在拥有的HTML界面做成模板，继承在其他页面中。
1.原理图
2.过程（这里我们在项目二的笔记已经讲过，但是准备重来一遍）
- 注册organizationsAPP
startapp organizations
-
将新建的app移入到apps目录下
-
打开MXOline/settings.py文件
'apps.organizations.apps.OrganizationsConfig',
- 填写模型类，打开apps/organizationss/models.py文件
from django.db import models
from apps.users.models import UserProfile
from apps.users.models import BaseModel
class City(BaseModel):
name = models.CharField(max_length=20, verbose_name=u"城市名")
desc = models.CharField(max_length=200, verbose_name=u"描述")
class Meta:
verbose_name = "城市"
verbose_name_plural = verbose_name
def __str__(self):
return self.name
class CourseOrg(BaseModel):
name = models.CharField(max_length=50, verbose_name="机构名称")
tag = models.CharField(default="全国知名", max_length=10, verbose_name="机构标签")
category = models.CharField(default="pxjg", verbose_name="机构类别", max_length=4,
choices=(("pxjg", "培训机构"), ("gr", "个人"), ("gx", "高校")))
click_nums = models.IntegerField(default=0, verbose_name="点击数")
fav_nums = models.IntegerField(default=0, verbose_name="收藏数")
image = models.ImageField(upload_to="org/%Y/%m", verbose_name="logo", max_length=100)
address = models.CharField(max_length=150, verbose_name="机构地址")
students = models.IntegerField(default=0, verbose_name="学习人数")
course_nums = models.IntegerField(default=0, verbose_name="课程数")
is_auth = models.BooleanField(default=False, verbose_name="是否认证")
is_gold = models.BooleanField(default=False, verbose_name="是否金牌")
desc = models.CharField(max_length=200, verbose_name=u"描述",default="")
city = models.ForeignKey(City, on_delete=models.CASCADE, verbose_name="所在城市")
def courses(self):
courses = self.course_set.filter(is_classics=True)[:3]
return courses
class Meta:
verbose_name = "课程机构"
verbose_name_plural = verbose_name
def __str__(self):
return self.name
class Teacher(BaseModel):
user = models.OneToOneField(UserProfile, on_delete=models.SET_NULL, null=True, blank=True,verbose_name="用户")
org = models.ForeignKey(CourseOrg, on_delete=models.CASCADE, verbose_name="所属机构")
name = models.CharField(max_length=50, verbose_name=u"教师名")
work_years = models.IntegerField(default=0, verbose_name="工作年限")
work_company = models.CharField(max_length=50, verbose_name="就职公司")
work_position = models.CharField(max_length=50, verbose_name="公司职位")
points = models.CharField(max_length=50, verbose_name="教学特点")
click_nums = models.IntegerField(default=0, verbose_name="点击数")
fav_nums = models.IntegerField(default=0, verbose_name="收藏数")
age = models.IntegerField(default=18, verbose_name="年龄")
image = models.ImageField(upload_to="teacher/%Y/%m", verbose_name="头像", max_length=100)
class Meta:
verbose_name = "教师"
verbose_name_plural = verbose_name
def __str__(self):
return self.name
def course_nums(self):
return self.course_set.all().count()
- 迁移数据库
makemigrations
migrate
- 建立一个adminx.py文件：
import xadmin
from apps.organizations.models import Teacher, CourseOrg, City
class TeacherAdmin(object):
list_display = ['org', 'name', 'work_years', 'work_company']
search_fields = ['org', 'name', 'work_years', 'work_company']
list_filter = ['org', 'name', 'work_years', 'work_company']
class CourseOrgAdmin(object):
list_display = ['name', 'desc', 'click_nums', 'fav_nums']
search_fields = ['name', 'desc', 'click_nums', 'fav_nums']
list_filter = ['name', 'desc', 'click_nums', 'fav_nums']
style_fields = {
"desc": "ueditor"
}
class CityAdmin(object):
list_display = ["id", "name", "desc"]
search_fields = ["name", "desc"]
list_filter = ["name", "desc", "add_time"]
list_editable = ["name", "desc"]
xadmin.site.register(Teacher, TeacherAdmin)
xadmin.site.register(CourseOrg, CourseOrgAdmin)
xadmin.site.register(City, CityAdmin)
- 在apps/organizations/apps.py文件中：
verbose_name="机构信息"
-
启动程序，运行界面：
-
添加城市
- 打开apps/organizations/views.py文件中：
from django.shortcuts import render
from django.views.generic import View
from apps.organizations.models import CourseOrg, City, Teacher
# Create your views here.
class OrgView(View):
def get(self, request, *args, **kwargs):
"""
展示授课机构列表页
:param request:
:param args:
:param kwargs:
:return:
"""
all_orgs = CourseOrg.objects.all()
org_nums = CourseOrg.objects.all().count()
all_citys = City.objects.all()
return render(request, 'org-list.html',
{'all_orgs':all_orgs,'org_nums':org_nums,'all_citys':all_citys})
- 添加页面：
页面链接：https://pan.baidu.com/s/1BzH44dXjVmnt4pEO_Ejsjg
提取码：k864
- 配置url:打开MXOline/urls.py文件：
from apps.organization.views import OrgView
...
#配置授课机构列表展示
path('orglist/',OrgView.as_view(), name ='org_list'),
- 运行网页：http://127.0.0.1:8000/orglist/
- 修改org-list.html代码，使用静态引用的方式
<!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>首页-慕学在线</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">#}
<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' %}">
{# <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>#}
<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>
</head>
-
我们将org-list.html复制一份，命名为base.html
-
面包屑
- 修改base.html文件里面的东西
<!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 %}首页-慕学在线-{% 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">#}
<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' %}">
{# <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>#}
<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_css %}
{% endblock %}
</head>
<body>
<section class="headerwrap ">
<header>
<div class=" header">
<div class="top">
<div class="wp">
<div class="fl"><p>服务电话：<b>400-888-888</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="#"/>
</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>12</span></p>
<p class="c7">学习人数：<span>23</span></p></li>
<li class="c8" style="padding-left:18px;">12</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="#"/>
</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>12</span></p>
<p class="c7">学习人数：<span>23</span></p></li>
<li class="c8" style="padding-left:18px;">12</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="#"/>
</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>12</span></p>
<p class="c7">学习人数：<span>23</span></p></li>
<li class="c8" style="padding-left:18px;">12</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="立即咨询 >"/>
</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>
{% block custom_js %}
{% endblock %}
<script>
$(function () {
$(document).ready(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();
$('#jsCompanyTips').html("");
alert("提交成功")
} else if (data.status == 'fail') {
$('#jsCompanyTips').html(data.msg)
}
},
});
});
});
})
</script>
</body>
</html>
- 我们现在将org-list.html里面的东西删除，重新写入代码：
{% extends 'base.html' %}
{% 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 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="#"/>
</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>12</span></p>
<p class="c7">学习人数：<span>23</span></p></li>
<li class="c8" style="padding-left:18px;">12</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="#"/>
</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>12</span></p>
<p class="c7">学习人数：<span>23</span></p></li>
<li class="c8" style="padding-left:18px;">12</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="#"/>
</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>12</span></p>
<p class="c7">学习人数：<span>23</span></p></li>
<li class="c8" style="padding-left:18px;">12</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="立即咨询 >"/>
</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 %}
-
我们将base.html中的section里面的内容删除：
-
再次刷新页面
- 我们将index.html也变成继承的，那么删除index.html之前的东西，新写代码：
{% extends 'base.html' %}
{% block content %}
<div class="banner">
<div class="wp">
<div class="fl">
<div class="imgslide">
<ul class="imgs">
<li>
<a href="#">
<img width="1200" height="478"
src="/static/media/banner/2016/11/57a801860001c34b12000460.jpg"/>
</a>
</li>
<li>
<a href="#">
<img width="1200" height="478"
src="/static/media/banner/2016/11/57aa86a0000145c512000460.jpg"/>
</a>
</li>
<li>
<a href="#">
<img width="1200" height="478"
src="/static/media/banner/2016/11/57a801860001c34b12000460_z4Vb8zl.jpg"/>
</a>
</li>
<li>
<a href="#">
<img width="1200" height="478"
src="/static/media/banner/2016/11/57aa86a0000145c512000460_nMwvoQD.jpg"/>
</a>
</li>
<li>
<a href="#">
<img width="1200" height="478"
src="/static/media/banner/2016/11/57aa86a0000145c512000460_GXIBATC.jpg"/>
</a>
</li>
</ul>
</div>
<div class="unslider-arrow prev"></div>
<div class="unslider-arrow next"></div>
</div>
</div>
</div>
<!--banner end-->
<!--feature start-->
<section>
<div class="wp">
<ul class="feature">
<li class="feature1">
<img class="pic" src="/static/images/feature1.png"/>
<p class="center">专业权威</p>
</li>
<li class="feature2">
<img class="pic" src="/static/images/feature2.png"/>
<p class="center">课程最新</p>
</li>
<li class="feature3">
<img class="pic" src="/static/images/feature3.png"/>
<p class="center">名师授课</p>
</li>
<li class="feature4">
<img class="pic" src="/static/images/feature4.png"/>
<p class="center">数据真实</p>
</li>
</ul>
</div>
</section>
<!--feature end-->
<!--module1 start-->
<section>
<div class="module">
<div class="wp">
<h1>公开课程</h1>
<div class="module1 eachmod">
<div class="module1_1 left">
<img width="228" height="614" src="/static/images/module1_1.jpg"/>
<p class="fisrt_word">名师授课<br/>专业权威</p>
<a class="more" href="course-list.html">查看更多课程 ></a>
</div>
<div class="right group_list">
<div class="module1_2 box">
<div class="imgslide2">
<ul class="imgs">
<li>
<a href="course-detail.html">
<img width="470" height="300"
src="/static/media/courses/2016/12/python文件处理.jpg"/>
</a>
</li>
<li>
<a href="course-detail.html">
<img width="470" height="300"
src="/static/media/courses/2016/12/python面向对象.jpg"/>
</a>
</li>
</ul>
</div>
<div class="unslider-arrow2 prev"></div>
<div class="unslider-arrow2 next"></div>
</div>
<div class="module1_3 box">
<a href="course-detail.html">
<img width="233" height="190" src="/static/media/courses/2016/11/mysql.jpg"/>
</a>
<div class="des">
<a href="course-detail.html">
<h2 title="django入门">django入门</h2>
</a>
<span class="fl">难度：<i class="key">初级</i></span>
<span class="fr">学习人数：3</span>
</div>
<div class="bottom">
<span class="fl" title="慕学网">慕学网</span>
<span class="star fr">0</span>
</div>
</div>
<div class="module1_4 box">
<a href="course-detail.html">
<img width="233" height="190"
src="/static/media/courses/2016/11/57035ff200014b8a06000338-240-135.jpg"/>
</a>
<div class="des">
<a href="course-detail.html">
<h2 title="java入门">java入门</h2>
</a>
<span class="fl">难度：<i class="key">中级</i></span>
<span class="fr">学习人数：0</span>
</div>
<div class="bottom">
<span class="fl" title="北京大学">北京大学</span>
<span class="star fr">0</span>
</div>
</div>
<div class="module1_5 box">
<a href="course-detail.html">
<img width="233" height="190"
src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135.jpg"/>
</a>
<div class="des">
<a href="course-detail.html">
<h2 title="python入门">python入门</h2>
</a>
<span class="fl">难度：<i class="key">中级</i></span>
<span class="fr">学习人数：0</span>
</div>
<div class="bottom">
<span class="fl" title="南京大学">南京大学</span>
<span class="star fr">0</span>
</div>
</div>
<div class="module1_6 box">
<a href="course-detail.html">
<img width="233" height="190"
src="/static/media/courses/2016/11/57035ff200014b8a06000338-240-135_dHfj8Nq.jpg"/>
</a>
<div class="des">
<a href="course-detail.html">
<h2 title="java入门2">java入门2</h2>
</a>
<span class="fl">难度：<i class="key">高级</i></span>
<span class="fr">学习人数：0</span>
</div>
<div class="bottom">
<span class="fl" title="慕学网2">慕学网2</span>
<span class="star fr">0</span>
</div>
</div>
<div class="module1_7 box">
<a href="course-detail.html">
<img width="233" height="190"
src="/static/media/courses/2016/11/57035ff200014b8a06000338-240-135_0nFiBSI.jpg"/>
</a>
<div class="des">
<a href="course-detail.html">
<h2 title="java入门3">java入门3</h2>
</a>
<span class="fl">难度：<i class="key">初级</i></span>
<span class="fr">学习人数：1</span>
</div>
<div class="bottom">
<span class="fl" title="慕学网3">慕学网3</span>
<span class="star fr">0</span>
</div>
</div>
<div class="module1_8 box">
<a href="course-detail.html">
<img width="233" height="190"
src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135_MSIqfvw.jpg"/>
</a>
<div class="des">
<a href="course-detail.html">
<h2 title="python入门2">python入门2</h2>
</a>
<span class="fl">难度：<i class="key">中级</i></span>
<span class="fr">学习人数：0</span>
</div>
<div class="bottom">
<span class="fl" title="慕学网666">慕学网666</span>
<span class="star fr">0</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="module greybg">
<div class="wp">
<h1>课程机构</h1>
<div class="module3 eachmod">
<div class="module3_1 left">
<img width="228" height="463" src="/static/images/module3_1.jpg"/>
<p class="fisrt_word">名校来袭<br/>权威认证</p>
<a class="more" href="org-list.html">查看更多机构 ></a>
</div>
<div class="right">
<ul>
<li class="">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/11/bjdx.jpg"/>
<div class="score">
<div class="circle">
<h2>全国知名</h2>
</div>
</div>
</div>
<p><span class="key" title="慕学网">慕学网</span></p>
</a>
</li>
<li class="">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/11/bjdx.jpg"/>
<div class="score">
<div class="circle">
<h2>全国知名</h2>
</div>
</div>
</div>
<p><span class="key" title="北京大学">北京大学</span></p>
</a>
</li>
<li class="">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/11/qhdx-logo.png"/>
<div class="score">
<div class="circle">
<h2>全国知名</h2>
</div>
</div>
</div>
<p><span class="key" title="清华大学">清华大学</span></p>
</a>
</li>
<li class="">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/11/njdx.jpg"/>
<div class="score">
<div class="circle">
<h2>全国知名</h2>
</div>
</div>
</div>
<p><span class="key" title="南京大学">南京大学</span></p>
</a>
</li>
<li class="five">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/11/bjdx.jpg"/>
<div class="score">
<div class="circle">
<h2>全国知名</h2>
</div>
</div>
</div>
<p><span class="key" title="慕学网2">慕学网2</span></p>
</a>
</li>
<li class="">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/11/bjdx.jpg"/>
<div class="score">
<div class="circle">
<h2>全国知名</h2>
</div>
</div>
</div>
<p><span class="key" title="慕学网3">慕学网3</span></p>
</a>
</li>
<li class="">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/11/bjdx.jpg"/>
<div class="score">
<div class="circle">
<h2>全国知名</h2>
</div>
</div>
</div>
<p><span class="key" title="慕学网3">慕学网3</span></p>
</a>
</li>
<li class="">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/11/bjdx.jpg"/>
<div class="score">
<div class="circle">
<h2>全国知名</h2>
</div>
</div>
</div>
<p><span class="key" title="慕学网4">慕学网4</span></p>
</a>
</li>
<li class="">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/11/bjdx.jpg"/>
<div class="score">
<div class="circle">
<h2>全国知名</h2>
</div>
</div>
</div>
<p><span class="key" title="慕学网5">慕学网5</span></p>
</a>
</li>
<li class="five">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/11/bjdx.jpg"/>
<div class="score">
<div class="circle">
<h2>全国知名</h2>
</div>
</div>
</div>
<p><span class="key" title="慕学网666">慕学网666</span></p>
</a>
</li>
<li class="">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/12/bjdx.jpg"/>
<div class="score">
<div class="circle">
<h2>全国知名</h2>
</div>
</div>
</div>
<p><span class="key" title="慕学网">慕学网</span></p>
</a>
</li>
<li class="">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/12/bjdx.jpg"/>
<div class="score">
<div class="circle">
<h2>全国知名</h2>
</div>
</div>
</div>
<p><span class="key" title="python培训机构">python培训机构</span></p>
</a>
</li>
<li class="">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/12/bjdx_cCpdUw8.jpg"/>
<div class="score">
<div class="circle">
<h2>全国知名</h2>
</div>
</div>
</div>
<p><span class="key" title="vuejs培训">vuejs培训</span></p>
</a>
</li>
<li class="">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/11/bjdx.jpg"/>
<div class="score">
<div class="circle">
<h2>全国知名</h2>
</div>
</div>
</div>
<p><span class="key" title="nodejs培训">nodejs培训</span></p>
</a>
</li>
<li class="five">
<a href="org-detail-homepage.html">
<div class="company">
<img width="184" height="100" src="/static/media/org/2016/12/bjdx_bcd0m07.jpg"/>
<div class="score">
<div class="circle">
<h2>全国知名</h2>
</div>
</div>
</div>
<p><span class="key" title="慕学在线">慕学在线</span></p>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block custom_js%}
<script type="text/javascript" src="/static/js/index.js"></script>
{% endblock %}
二.跳转授课机构页面
- 修改apps/organizations/views.py
from django.shortcuts import render
from django.views.generic import View
from apps.organization.models import CourseOrg, City, Teacher
# Create your views here.
class OrgView(View):
def get(self, request, *args, **kwargs):
"""
展示授课机构列表页
:param request:
:param args:
:param kwargs:
:return:
"""
all_orgs = CourseOrg.objects.all()
org_nums = CourseOrg.objects.all().count()
all_citys = City.objects.all()
return render(request, 'org-list.html',
{'all_orgs':all_orgs,'org_nums':org_nums,'all_citys':all_citys})
-
在Xadmin页面中添加机构信息
-
这个时候我们会发现图片上传到了下面这个文件夹下：
-
但是这样上传不好，我们创建一个文件夹名字叫做media,我们所上传的文件全部存入到media这个文件夹中
- 我们将org文件夹删掉
- 在MXOline/settings.py中进行添加配置：
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
-
我们再新建一个机构：
-
修改显示个数
-
遍历数据
-
修改名字：
-
修改课程数
-
修改学习人数：
-
修改地址：
-
刷新页面:
-
但是图片没有加载进去，这个时候我们打开数据库
我们可以看到，虽然我们已经改完路径了，可是在数据库中没有生效，还是原来的地址，那么我们再修改一下settings.py
'django.template.context_processors.media',
- 我们再为这个图片配置一下url:
from django.conf.urls import url
from django.views.static import serve
from MXOline.settings import MEDIA_ROOT
...
#配置上传文件的访问url
url(r'^media/(?P<path>.*)$',serve,{"document_root":MEDIA_ROOT}),
-
修改org_list.html文件内容：
-
重启项目，打开网页：
-
因为我们修改了上下文，也就是刚刚配置的settings.py文件的内容，我们我们也可将刚刚的org_list.html文件改成这样：
也是可以运行出来的
git
以前的项目代码都可以在git上看到
https://github.com/zhaoXiY/MXOline
（此文章仅作为个人学习笔记使用，如有错误欢迎指正~）
网友评论