2020-05-06--Django项目5--模板继承重构

1.显示org-list.html

1.首先把org-list.html导入templates文件夹下
2.在MXOnline/urls.py下配置url：

from apps.organizations.views import OrgView
#配置授课机构的列表展示
    path('orglist/',OrgView.as_view(),name = 'org_list'),
]

3.在apps/organizations/view.py下编写初步的视图类：

from django.shortcuts import render

# Create your views here.
from django.views.generic import View

class OrgView(View):
    def get(self,request,*args,**kwargs):
        '''
        展示授课机构的列表页
        :param request:
        :param args:
        :param kwargs:
        :return:
        '''
        return render(request,'org-list.html')

启动项目：
访问：

127.0.0.1:8000/orglist

2.使用模板继承优化代码

1.更改static文件的引入方式

在html中更改：
1.引入static的url

{% load staticfiles %}

这个staticfiles是在setings.py中设置的

STATIC_URL = '/static/'

2.使用引入
例如：

我们发现在settings中static的url设置成了/static/，对这里的static替换，正好就是之前的原始的路径。简单来说就是字符串的拼接

这么修改的好处:当我们想修改static文件的位置时,可以直接改变settings中的url即可,不用大面积的替换

org-list.html:

index.html和login.html页面也相应修改

2.模板继承优化代码

1.新建base.html用于被继承,

(1)在base.html中添加网页可被继承的部分

• head部分(引用static部分)，并添加一个插槽

  
  

• 网页头部
  添加一下base.html的网页头部代码，因为之前在完成登录功能的时候，我们在index.html写了判断用户是否登录成功，如果成功显示用户的信息，否则不做改变，所以当用户登陆成功后，不管他浏览到哪，都是登陆状态。
  也就是这块代码：

  
  

所以我们要把index.html的头部复制到base.html的头部，这样每个网页继承后都是有判断登录的功能的
修改授课机构的超链接跳转到name = orglist的url

• 添加面包屑插槽和内容插槽，在插槽中不写任何东西，子模版自行添加

  
  
• 网页底部
  copy一下即可

• 底部引用js部分，添加一个js插槽，用于子模版自行添加

  
  

• title

  
  

父模板插槽中的内容如果在子模版中被调用，那么就按照子模版中的内容来显示,没有调用插槽，默认显示父模板插槽中的内容。

3.使用继承重写org-list.html的代码

3.1继承base.html

{% extends 'base.html' %}

3.2复写面包屑插槽内容

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

并且修改面包屑中首页的超链接地址的格式:

如果再其他页面使用面包屑时,就直接其页面中编写面包屑插槽并添加列表项即可.

3.3筛选信息及主要内容的继承
复制base.html中的内容插槽到orglist.html中，把自己的内容部分放入插槽中

3.4title部分

{#title#}
{% block title%}
    授课机构
{% endblock %}

orglist.html页面没有css和js的重构
运行:

127.0.0.1:8000/orglist

4.使用模板继承重写index页面

3.2分析index页面的结构

image.png

相对于base.html添加了一条js

对于index.html来说,继承base.html以后,需要改变两项：

• 内容
• js即可

运行：

点击授课机构：

login.html与其他页面的结构没有相似之处，不适用继承来写。

结果：

运行：

点击授课机构：

我们发现了一个问题，点击授课机构以后，高亮还是首页，这说明我们划分的共用头部范围大了，所以他们的公用部分只有：

在base.html的网页头部中找到这个盒子，把它添加到插槽中，用于继承

那么继承以后怎么改变高亮的位置呢？
我们发现这四个元素的显示是无序列表，想显示高亮也就是加上css样式。
哪个想显示，哪个就有class选择器:

所以我们在orglist.html中要多加一个插槽用于改变选项列表。
并且把class的作用对象改为授课机构

这样再次运行：
点击授课机构：

点击登录：
输入正确的username和密码

点击立即登录
回到首页index，网页头部发生变化：

再次进入授课机构;

成功显示。
最后提交github