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
网友评论