web应用框架——Django实践项目（四）

一.模板继承

我们将现在拥有的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=">学习人数 &#8595;</a></li>
                            <li class=""><a href="?sort=courses&ct=&city=">课程数 &#8595;</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=">学习人数 &#8595;</a></li>
                            <li class=""><a href="?sort=courses&ct=&city=">课程数 &#8595;</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

（此文章仅作为个人学习笔记使用，如有错误欢迎指正~）