零基础使用Django2.0.1打造在线教育网站（十五）：模板继承应用

原创

啃饼思录

修改于 2018-09-10 21:36:03

5370

修改于 2018-09-10 21:36:03

文章被收录于专栏：零基础使用Django2.0.1打造在线教育网站零基础使用Django2.0.1打造在线教育网站

关于博主

努力与运动兼备～~~有任何问题可以加我好友或者关注微信公众号，欢迎交流，我们一起进步！

                 微信公众号:  啃饼思录

                 QQ: 2810706745（啃饼小白）

写在前面

本篇笔记我们将开始进入课程机构前端页面的配置，你会了解到模板继承，城市筛选，数量统计等功能的实现。

本篇笔记对应于第十五篇代码，对应于github的位置是https://github.com/licheetools/eduline。

模板继承

通过观察，我们发现很多页面都是有相同的结构，例如header和footer都是一样的，我们是不是可以考虑单独给它们分别放在2个HTML页面里面，然后当需要用到的时候，可以include进来，这就是早期的模板继承原理。不过这个只能用于那些页面是固定的内容，也就是说如果要根据自己的想法随意对include进来的页面进行修改这是不可能的。鉴于此，人们在吸收了挖坑填坑的思想之后，提出了一种新的方法：子本继承父本，将需要修改的地方挖坑，然后采用不同的方式来填坑，这样就解决了这个问题（类似于子类继承父类的方法）。这就是模板继承的原理！

新建父本base.html页面

在templates文件夹中新建base.html，同时将前端页面org-list.html拷贝到我们的templates里面，然后把org-list.html的全部内容复制粘贴到base.html页面中来，然后收起标签，成了下面这个样子：

然后配置静态的文件相对路径，只需要修改图中的即可：

开始定义父本挖坑操作

1、每个org-list网页的标题会发生变化，所以修改如下：

<title>{% block title%}课程机构列表 - 慕海学习网{% endblock %}</title>

2、每个页面都具有公共的js和css，但又具有各自特殊的js和css,所以修改如下：

    {% block custom_css %}{% endblock %}
   
    {% block custom_js %}{% endblock %}

公共的js和css都不变，允许自定义样式,12步就是这个样子：

3、面包屑和内容的修改如下：

至此，我们的base.html的配置就差不多完成了，接下来是对它的引用！

org-list页面的配置

1、清空 org-list.html页面的所有代码；

2、继承base页面：

{% extends 'base.html' %}   # 已经包含base.html的所有信息

3、覆盖父本的标题：

首先将base页面的标题代码修改为：

<title>{% block title%} 慕海学习网-首页{% endblock %}</title>

再在org-list.html页面中加上以下代码：

{% block title %}课程机构列表 - 慕海学习网{% endblock %}

为了检查我们的继承是否有问题，我们需要写一个视图和配置path用于访问。

打开organization/views.py文件，添加如下代码：

from django.views.generic.base import View

# 课程机构列表功能
class OrgView(View):
    def get(self, request):
        return render(request, "org-list.html", {})

然后打开eduline/urls.py文件，在里面添加以下代码：

from organization.views import OrgView

# 课程机构首页url
path("org_list/", OrgView.as_view(), name="org_list"),

测试成功，页面正常显示，没有问题！

4、修改org-list页面的面包屑

首先修改base页面的面包屑，如下：

{% block custom_bread %}
<section>
        <div class="wp">
            <ul  class="crumbs">
                <li><a href="{% url 'index' %}">首页</a>></li>
               
            </ul>
        </div>
    </section>
{% endblock %}

然后在org-list页面配置的面包屑如下：

{% block custom_bread %}
<section>
        <div class="wp">
            <ul  class="crumbs">
                <li><a href="{% url 'index' %}">首页</a>></li>
                <li>课程机构</li>
            </ul>
        </div>
</section>
{% endblock %}

5、重写block content

注意：block之间没有先后顺序。

复制base页面的block content到org-list页面：

然后删除base页面中block content内包含的section:

6、org-list页面记得加载静态路径：{% load staticfiles %}

总结一下

页面的继承关系可以让我们直接使用变量，比如user中的表单数据传递到registe页面当中（register页面继承了base页面）那么你在base页面当中也是可以使用这些数据的。这就是参数的向上传递！

课程机构列表页面数据显示

通过观察页面，我们确定哪些数据是动态的，哪些是静态的，动态的需要从后台来显示，静态的可以通过HTML代码直接实现：（红色为动态，蓝色为静态）

登录xadmin后台管理系统，新增10个城市信息，10门课程信息数据：

在新建课程信息之前，我们需要配置文件的上传路径，打开eduline/settings.py文件，在里面加入：

# 设置我们上传文件的路径
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

然后在主目录下新建media文件夹，用于存放上传文件：

完成上面2步之后就可以增加10门课程信息数据了：

查看media 文件夹，里面10张图片，就是10个课程机构的logo:

然后继续完善我们的organization/views.py文件：

from .models import CityDict, CourseOrg

# 课程机构列表功能
class OrgView(View):
    def get(self, request):
        # 查找所有的城市信息
        all_citys = CityDict.objects.all()
        # 查找所有的课程机构信息
        all_orgs = CourseOrg.objects.all()
        return render(request, "org-list.html", {
            "all_citys": all_citys,
            "all_orgs": all_orgs
        })

现在是回填动态的城市信息：在org_list页面，找到如下代码：

我们使用Django自带的for循环来从刚才获取到的城市信息中回填城市，并显示出来,修改代码如下：

{% for city in all_citys %}
 <a href="?city=1&ct="><span class="">{{ city.name }}</span></a>
{% endfor %}

现在城市就是动态的信息了，不再是被前端人员写死的页面了。同理我们现在把课程信息也给显示出来：

通过折叠代码分析发现，每一个des 就是一个课程，所以我们继续刚才的操作，把多余的删掉，保留一个：

{% for course_org in all_orgs %}
               <dl class="des difdes">
       
               </dl>  
{% endfor %}

接下来对<dl class="des difdes"> </dl>里面的内容进行分析：

我们尝试利用对象的属性来获取图片的地址，也就是这样：

data-url="{{ course_org.image }}"

对，正如你想的那样，这其实获得只是图片的相对路径，系统根本找不到我们前面定义的路径。而且我们在数据库中的图片地址其实是字符串类型，也更加证明了这一点：

因此，我们需要补全地址，变成下面这个样子：

data-url="{{ MEDIA_URL }}{{ course_org.image }}"

不过这样还不够，我们需要配置图片处理器,打开eduline/settings.py文件，找到TEMPLATES，在后面添加一行：

# 图片处理器，可以使{{ MEDIA_URL }}产生作用
 'django.template.context_processors.media',

然后刷新一下我们的页面，发现图片还是没有加载出来，那是因为path中没有处理图片相应路径的url，我们需要配置一下：

from django.views.static import serve
from eduline.settings import MEDIA_ROOT

 # 配置文件上传的访问处理url
 re_path('media/(?P<path>.*)', serve, {"document_root": MEDIA_ROOT }),

成功了！

接下来，我们来统计课程机构的数量，打开organization/views.py文件，我们修改如下：

# 课程机构列表功能
class OrgView(View):
    def get(self, request):
        # 查找所有的城市信息
        all_citys = CityDict.objects.all()
        # 查找所有的课程机构信息
        all_orgs = CourseOrg.objects.all()
        # 统计课程机构的数量
        org_nums = all_orgs.count()
        return render(request, "org-list.html", {
            "all_citys": all_citys,
            "all_orgs": all_orgs,
            "org_nums": org_nums
        })

然后在org_list页面找到共的位置，填写这个变量：