今日内容
- 模板继承
- 组件
- 自定义过滤器
- inclusion_tag
- 配置静态文件
- 别名和反向解析
- url命名空间
模板继承
为什么要模板继承？
在写html页面中 发现有很多页面有雷同的样式 为了不必重复造轮子
Web框架需要一种很便利的方法用于动态生成HTML页面。 最常见的做法是使用模板。
模板包含所需HTML页面的静态部分，以及一些特殊的模版语法，用于将动态内容插入静态部分。
模板的设计实现了业务逻辑view与显示内容template的分离，一个视图可以使用任意一个模板，一个模板可以供多个视图使用。
模板继承怎么实现？
1. 创建一个base.html页面(作为母版,其他页面来继承它使用 名字随便取)
2. 在母版中定义block块(可以定义多个,整个页面任意位置)
{% block content %} <!-- 预留的钩子,共其他需要继承它的html,自定义自己的内容content -->
{% endblock %}
3 其他页面继承写法
{% extends 'base.html' %} 必须放在页面开头
4 页面中写和母版中名字相同的block块,从而来显示自定义的内容
{% block content %} <!-- 预留的钩子,共其他需要继承它的html,自定义自己的内容 -->
{{ block.super }} #这是显示继承的母版中的content这个快中的内容
这是xx1
{% endblock %}
以下是具体运行代码
第一步创建一个母模板
在templates文件夹 中创建一个muban.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板</title>
<style>
{% block css %}
#mub{
100%;
height: 50px;
background-color: cornflowerblue;
}
{% endblock %}{#预留的钩子,共其他需要继承它的html,自定义自己的内容#}
</style>
</head>
<body>
<div id="mub">我是模板</div>
{% block content %} <!-- 预留的钩子,共其他需要继承它的html,自定义自己的内容 -->
<h1>我是模板h1</h1>
{% endblock %}
{% block cs2 %} <!-- 预留的钩子,共其他需要继承它的html,自定义自己的内容 -->
<h1>我是测试2</h1>
{% endblock %}
</body>
</html>
第2步其他页面继承写法
在templates文件夹 中创建一个home.html 继承于muban.html
{% extends 'muban.html' %}
{% block css %}
#mub{
100%;
height: 50px;
background-color: red;
}
#s6{
50%;
height: 50px;
background-color: red;
float: right;
}
{% endblock %}
{% block content %} <!-- 预留的钩子,共其他需要继承它的html,自定义自己的内容 -->
<h1>我改变了模板的内容</h1>
<div id="s6">我来测试</div>
{% endblock %}
{% block cs2 %} <!-- 预留的钩子,共其他需要继承它的html,自定义自己的内容 -->
{{ block.super }}
我在测试2下面
{% endblock %}
组件
组件就是类似于python中的模块 什么时候用 什么时候导入 比如常见的导航条，页尾信息等组件 我们一般 保存在单独的文件中， 组件封装了功能 模板可以修改
1 创建html页面,里面写上自己封装的组件内容,xx.html
2 新的html页面使用这个组件
{% include 'xx.html' %}
以下是代码
创建组件
在templates文件夹 中创建一个组件 title.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.nav{
background-color: pink;
height: 40px;
}
</style>
</head>
<body>
<div class="nav">
<span>个人中心</span>
<span>首页</span>
<span>注册</span>
<span>登录</span>
</div>
</body>
</html>
引用组件
在templates文件夹 中创建一个home.html 引用组件 title.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% include 'title.html' %}
<h1>这是新项目首页</h1>
</body>
</html>
自定义过滤器
为什么要有自定义标签和过滤器？
因为在现实编程中可能内置的标签过滤器 不可以满足我们的需求 所有需要我们自己来创建
创建自定义标签和过滤器的流程
1 在应用下创建一个叫做templatetags的文件夹(名称不能改),在里面创建一个py文件,例如xx.py
2 在xx.py文件中引用django提供的template类,写法
from django import template
register = template.Library() #register变量名称不能改
# 自定义标签 没有参数个数限制
from django import template
register = template.Library() #register变量名称不能改
@register.filter #参数至多两个 也就是管道后最多只有一个
def guolv(v1,v2):
"""
:param v1: 变量的值 管道前面的
:param v2: 传的参数 管道后面的,如果不需要传参,就不要添加这个参数
:return:
"""
return v1+v2
使用:
{% load xx %} xx是py文件 先在HTML页面引入
{{ name|guolv:'oo' }} 使用过滤器 guolv是自己定义的过滤器函数名
下面是执行的代码
4.7.2.1在应用文件夹下 创建templatetags文件夹并在里面创建一个xx.文件
from django import template
register = template.Library() #register变量名称不能改
@register.filter #参数至多两个
def guolv(v1,v2):
"""
:param v1: 变量的值 管道前面的
:param v2: 传的参数 管道后面的,如果不需要传参,就不要添加这个参数
:return:
"""
return v1+v2
4.7.2.2视图views中代码
from django.shortcuts import render,HttpResponse
name='测试+'
def home(request):
return render(request,'home.html',{'name':name})
4.7.2.3创建要引用自定义过滤器的html页面
{% load xx %}{#xx是templatetags文件夹下的xx.py文件#}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
{{ name|guolv:'要传给n2的参数' }}
</body>
</html>
inclusion_tag
多用于返回html代码片段
原理先运行nue.html 调用xx.py 中res函数
res函数将返回值给@register.inclusion_tag对应的页面('result.html') 模板渲染后 以组件的形式给原来的nue.htm
nue.htm
{% load xx %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% res a %}#a是参数
</body>
</html>
result.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
{% for i in li %}
<li>{{ i }}</li>
{% endfor %}
</ul>
</body>
</html>
xx.py
# inclusion_tag 返回html片段的标签
@register.inclusion_tag('result.html')
def res(n1): #n1 : ['aa','bb','cc']
return {'li':n1 }
静态文件相关
静态文件配置
js、css、img等都叫做静态文件，那么关于django中静态文件的配置，我们就需要在settings配置文件里面写上这写内容：
目录：别名也是一种安全机制，浏览器上通过调试台你能够看到的是别名的名字，这样别人就不能知道你静态文件夹的名字了，不然别人就能通过这个文件夹路径进行攻击。
1 项目目录下创建一个文件夹,例如名为 static_file,将所有静态文件放到这个文件夹中
2 settings 配置文件中进行下面的配置
# 静态文件相关配置
STATIC_URL = '/static/' #静态文件路径别名
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static_file'),
]
3 引入<link rel="stylesheet" href="/abc/css/index.css">
第一项目目录下创建一个文件夹,例如名为static_file,将所有静态文件放到这个文件夹中
第2找到settings 配置文件中进行下面的配置
STATIC_URL = '/abc/' #静态文件路径别名 可以随便改
#注意第2个参数一定对应创建的文件夹名 别名可以随便改
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static_file'),
]
第3引入的配置文件的html页面内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/abc/css/index.css">
<link rel="stylesheet" href="/abc/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<input type="text" class="form-control">
<h1>红浪漫spa会所</h1>
<img src="/abc/img/timg.jpg" alt="">
<a href="{% url 'home' %}">首页</a>
技师:
<ul>
<li>小白</li>
<li>小黑</li>
</ul>
</body>
</html>
别名和反向解析
我们给url 起一个别名· 以后不管url怎么改 都可以实现原来的网址 就不会写死了
rurl文件写法
url(r'^index2/', views.index,name='cs'),
反向解析
后端views:
from django.urls import reverse 可以实现反向解析
reverse('别名') 例如:reverse('cs') 反向解析为别名对应的地址 /index2/
带参数的反向解析: reverse( index' ，args=(10,))--- /index2/10/
html: {% url '别名' %} -- 例如:{% url 'cs' %} -- /index2/
下面是代码
rurl文件写法
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^cs/', views.home,name='cs'),
url(r'^cs1/', views.cs1,name='cs1'),
]
后端views.py
用于重定向 redirect
我们利用别名 以后不管 别名cs1 对应的网址这么变 我们通过反解析 ，都可以找到他，写活了他
from django.shortcuts import render,HttpResponse,redirect
from django.urls import reverse
def home(request):
return redirect(reverse('cs1'))
def cs1(request):
return HttpResponse('测试')
url命名空间
在路由分发中可能会错乱为了 避免
from django.conf.urls import url,include
from django.contrib import admin
urlpatterns = [
# url(r'^admin/', admin.site.urls),
url(r'^app01/', include('app01.urls',namespace='app01')),#app01/home/
url(r'^app02/', include('app02.urls',namespace='app02')),
]
使用:
后端:reverse('命名空间名称:别名') -- reverse('app01:home')
hmtl:{% url '命名空间名称:别名' %} -- {% url 'app01:home' %}