模板继承组件自定义过滤器静态文件别名反向解析

今日内容

模板继承
组件
自定义过滤器
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,将所有静态文件放到这个文件夹中

1569493728264

第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' %}

模板继承 组件 自定义过滤器 静态文件 别名 反向解析