零基础使用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页面找到共的位置,填写这个变量:

至此,本篇关于模板继承,城市筛选,数量统计等功能的实现就介绍到这里,感谢你的赏阅。

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ThoughtWorks

8大前端安全问题(上) | 洞见

当我们说“前端安全问题”的时候,我们在说什么 “安全”是个很大的话题,各种安全问题的类型也是种类繁多。如果我们把安全问题按照所发生的区域来进行分类的话,那么所有...

31350
来自专栏腾讯NEXT学位

新人如何搭建(copy)一个属于自己的博客

47340
来自专栏Python自动化测试

selenium 3.0.1遇到问题的解决方案

迄今为止,我个人认为,selenium是最好使用的web应用程序的自动化测试框架,不仅仅因为它是开源的优势之一,更加重要的是它可以支持的语言比较多,像...

17420
来自专栏林德熙的博客

win10 uwp 如何开始写 uwp 程序 安装 VisualStudio创建应用启动流程显示 hellow

本文告诉大家如何创建一个 UWP 程序。 这是一系列的 uwp 入门博客,所以写的很简单

11710
来自专栏敏捷开发&项目管理

微信小程序开发 (资料汇总,谁还没被坑过?希望助你绕过一些坑)

最近帮人家做一个微信小程序,刚好想熟悉一下。由于牵扯到多用户使用系统,以及数据共享,所以自然架构选择了,客户端和服务器的方式。

36330
来自专栏张戈的专栏

让WordPress RSS/Feed订阅数据延迟发布,附RSS技巧集锦

前些天给博客添加了一个百度是否收录的查询功能,今天无意点开了一篇显示已收录的查询链接,发现查到的居然不是我的博客博文,而是和我博客一直就有合作的一览 1001 ...

37350
来自专栏Python中文社区

Python开发微信公众号后台(系列一)

專 欄 ❈ 段晓晨,写过一点爬虫,写过几篇文章。能力虽有限,会尽量把想说的东西讲清楚。 知乎ID:段小草 知乎专栏:小段同学的杂记, https://zhua...

3.2K100
来自专栏安恒信息

“圣诞怪杰”Grinch:比Bash破壳(shellshock)更严重的Linux漏洞

安全研究人员在Linux操作系统中发现了一个名为圣诞怪杰(Grinch)的漏洞,该漏洞存在于linux系统中,和Bash破壳(shellshock)漏洞(CNN...

36870
来自专栏BY的专栏

利用 GitHub Pages 快速搭建个人博客前言快速开始写文章自定义域名进阶利用GithHub Desktop管理GitHub仓库修改个人介绍常见问题其他Star补充最后要说个事情

1K100
来自专栏魏艾斯博客www.vpsss.net

腾讯云COS对象存储WordPress插件 让网站动静分离跑的更快

腾讯云 COS 对象存储是利用云存储空间来存放静态文件,让网站动静分离跑的更快。我们平时用 wordpress 博客较多,而适用于腾讯云的很多都失效不好用了,今...

91420

扫码关注云+社区

领取腾讯云代金券