zoukankan      html  css  js  c++  java
  • day58——模板继承、组件、自定义标签和过滤器、inclusion_tag、静态文件配置、url别名和反向解析、url命名空间

    day58

    模板相关

    模板继承(母版继承)

    1. 创建一个xx.html页面(作为母版,其他页面来继承它使用)
    2. 在母版中定义block块(可以定义多个,整个页面任意位置)
    	{% block content %}  <!-- 预留的钩子,共其他需要继承它的html,自定义自己的内容 -->
    	内容。。。
    	{% endblock %}
    
    
    3 其他页面继承写法
    	{% extends 'base.html' %}  必须放在页面开头
    4 页面中写和母版中名字相同的block块,从而来显示自定义的内容
        {% block content %}  <!-- 预留的钩子,共其他需要继承它的html,自定义自己的内容 -->
            {{ block.super }}  #这是显示继承的母版中的content这个快中的内容
            这是xx1
        {% endblock %}
    

    事例:

    模板页面
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            li{
                float: left;
                background: red;
            }
        </style>
    </head>
    <body>
    <ul type="none">
        <li>第一</li>
        <li>第二</li>
        <li>第三</li>
        <li>第四</li>
    </ul>
    <br>
    <h1>第一</h1>
    {% block content %}
        这是模板
    {% endblock %}
    </body>
    </html>
    

    模板页面效果:

    继承页面
    {% extends "base.html" %}
    
    {% block content %}
        <h1>我是大帅哥</h1>
        {% for i in "123" %}
            <h4>{{ i }}</h4>
        {% endfor %}
        {{ block.super }}
    {% endblock %}
    

    继承页面效果:

    组件

    1 创建html页面,里面写上自己封装的组件内容,xx.html
    2 新的html页面使用这个组件
    	{% include 'xx.html' %}
    
    组件事例

    组件页面:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h1>我是导航栏</h1>
    </body>
    </html>
    

    应用页面:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    {% include 'zujian.html' %}
    <h1>我是应用组件的</h1>
    </body>
    </html>
    
    组件与插件的区别
    组件是提供某一个完整功能的模块:如:编辑器组件,QQ空间提供的关注组件等
    而插件更倾向封闭某一功能方法的函数
    这两者的区别在 Javascript 里区别很笑,组件这个名词用的不多,一般统称为插件
    

    自定义标签和过滤器

    1 在应用下创建一个叫做templatetags的文件夹(名称不能改),在里面创建一个py文件,例如xx.py
    
    2 在xx.py文件中引用django提供的template类,写法
    	from django import template
    	register = template.Library() #register变量名称不能改
    	
    	定义过滤器
    		@register.filter   参数至多两个
    		def xx(v1,v2):
    			return xxx
    	使用:
    		{% load xx %}
    		{% name|xx:'oo' %}
    	
    	# 自定义标签 没有参数个数限制
        @register.simple_tag
        def huxtag(n1,n2):  #冯强xx  '牛欢喜'
            '''
            :param n1:  变量的值 管道前面的
            :param n2:  传的参数 管道后面的,如果不需要传参,就不要添加这个参数
            :return:
            '''
            return n1+n2
        使用:
        	{% load xx %}
        	{% huxtag 12 23 %}
    
    实例

    定义标签和过滤器的py文件

    from django import template
    from django.utils.safestring import mark_safe
    
    register = template.Library()
    
    
    @register.filter
    def num(v1, v2):
        return v1 * v2
    
    
    @register.simple_tag
    def num2(v1, v2):
        return v1 *v2
    
    
    @register.simple_tag
    def num3(v1, v2, v3):
        return v1+v2+v3
    

    应用文件

    {% load filter_tag %}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h1>自定义过滤器:{{ a|num:b }}</h1>
    
    <h1>自定义标签:{% num2 12 3 %}</h1>
    <h1>自定义标签多个参数:{% num3 12 12 12 %}</h1>
    
    </body>
    </html>
    

    inclusion_tag

    # inclusion_tag 返回html片段的标签
    @register.inclusion_tag('result.html')
    def res(n1): #n1 : ['aa','bb','cc']
    
        return {'li':n1 }
    使用:
    	{% res a %}
    
    实例

    配置函数的py文件——inclusion_tagg

    from django import template
    
    register = template.Library()
    
    
    @register.inclusion_tag('tagg_2.html')  # 将tagg_2.html里面的内容用下面函数的返回值渲染,然后作为一个组件加载到应用文件里面
    def show(n):  # n是应用文件中传入的列表,参数可以传多个进来
        data = n
        return {'data': data}  # 把列表传入动态html文件,注意变量名需一样,这里可以穿多个值,和render的感觉是一样的{'data1':data1,'data2':data2....}
    

    动态html文件——tagg_2

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <ul>
        {% for i in data %}  # py文件传入的文件
            <li>{{ i }}</li>
        {% endfor %}
    </ul>
    
    </body>
    </html>
    

    应用文件——tagg_1

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    {% load inclusion_tagg %}
    {% show lst %}  # lst是views中传入的列表,变量名需一样
    </body>
    </html>
    

    静态文件配置

    setting文件配置
    1 项目目录下创建一个文件夹,例如名为jingtaiwenjianjia(文件夹名随便取),将所有静态文件放到这个文件夹中
    2 settings配置文件中进行下面的配置
    	# 静态文件相关配置
        STATIC_URL = '/abc/'  #静态文件路径别名
    
        STATICFILES_DIRS = [
            os.path.join(BASE_DIR, 'jingtaiwenjianjia'),
        ]
    
    3 引入<link rel="stylesheet" href="/abc/css/index.css">
    
    应用app01创建配置

    文件引入配置
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="/static/css/index.css">
        <link rel="stylesheet" href="/static/bootstrapootstrap-3.3.7-distcssootstrap.min.css">
    </head>
    <body>
    <h1>来了!老弟!</h1>
    <img src="/static/img/1.jpg" alt="">
    <span class="glyphicon glyphicon-plus"></span>
    
    <script src="/static/jquery/jquery.js"></script>
    <script src="/static/js/index.js"></script>
    
    </body>
    </html>
    

    url别名和反向解析

    写法
    	url(r'^index2/', views.index,name='index'),
    反向解析
    	后端: from django.urls import reverse
    		 reverse('别名')  例如:reverse('index') -- /index2/
    		 带参数的反向解析:reverse('index',args=(10,11,))	-- /index2/10/
    	html: {% url '别名' %} -- 例如:{% url 'index' %} -- /index2/
    	带参数的反向解析:{% url '别名' 参数1 参数2 %} 例如:{% url 'index' 10 %} -- /index2/10/  <a href='/index2/10/'>hhh</a>
    
    实例

    urls文件

    from django.conf.urls import url
    from django.contrib import admin
    from app01 import views
    urlpatterns = [
        # url(r'^admin/', admin.site.urls),
        url(r'^login/', views.login),
        url(r'^home2/', views.home, name='home'),
        url(r'^flase2/', views.flase, name='flase'),
    ]
    

    views文件

    from django.shortcuts import render,HttpResponse,redirect
    from django.urls import reverse
    
    def login(request):
        if request.method == 'GET':
            return render(request, 'login.html')
        else:
            name = request.POST.get('username')
            pwd = request.POST.get('pwd')
            if name == 'zdr' and pwd == '123':
                return redirect('home')
                # return render(request, 'home.html')
            else:
                return redirect('flase')
    
    
    def home(request):
        return render(request, 'home.html')
    
    
    def true(request):
        return render(request, 'true.html')
    
    
    def flase(request):
        return render(request, 'flase.html')
    

    url命名空间

    路由分发 include

    1.	创建app:python3 manage.py startapp app02
    
    1. 在setting文件中修改数据

    1. 在每个app下创建urls.py文件,写上自己app的路径

    1. 在三个urls文件添加数据
    事例

    总urls

    from django.conf.urls import url,include
    from django.contrib import admin
    
    urlpatterns = [
        # url(r'^admin/', admin.site.urls),
        url(f'^app01/', include('app01.urls')),
        url(f'^app02/', include('app02.urls')),
    ]
    

    app01的urls

    from django.conf.urls import url,include
    from django.contrib import admin
    from app01 import views
    urlpatterns = [
        # url(r'^admin/', admin.site.urls),
        url(f'^home', views.home, name='home'),
    ]
    

    app02的urls

    from django.conf.urls import url,include
    from django.contrib import admin
    from app02 import views
    urlpatterns = [
        # url(r'^admin/', admin.site.urls),
        url(f'^home', views.home, name='home'),
    ]
    

    命名空间namespace

    urls别名获取值

    urls中的别名是获取的路径是urls文件中取别名前面的正则表达式的内容

    如果没有分发:url(r'^index2/', views.index,name='index')——>/index2/

    如果是路由分发:url(r'^index2/', views.index,name='index')——>/应用名/index2/(/app01/index2/)

    事例:

    总urls

    from django.conf.urls import url,include
    from django.contrib import admin
    
    urlpatterns = [
        # url(r'^admin/', admin.site.urls),
        url(f'^app01/', include('app01.urls', namespace='app01')),
        url(f'^app02/', include('app02.urls', namespace='app02')),
    ]
    

    app01的urls

    from django.conf.urls import url,include
    from django.contrib import admin
    from app01 import views
    urlpatterns = [
        # url(r'^admin/', admin.site.urls),
        url(f'^home', views.home, name='home'),
        url(f'^index', views.index, name='index'),
    ]
    
    

    app02的urls

    from django.conf.urls import url,include
    from django.contrib import admin
    from app02 import views
    urlpatterns = [
        # url(r'^admin/', admin.site.urls),
        url(f'^home', views.home, name='home'),
    ]
    
    

    app01的views

    from django.shortcuts import render,HttpResponse,redirect
    from django.urls import reverse
    
    
    def home(request):
        # return HttpResponse('我是首页1')
        return render(request, 'home.html')
    
    
    def index(request):
        return redirect(reverse('app01:home'))
    
    

    app02的views

    from django.shortcuts import render,HttpResponse
    
    
    def home(request):
        return HttpResponse('我是首页2')
    
    
    

    html文件——home.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h1>我是首页</h1>
    <a href="{% url 'app02:home' %}">aaaa</a>
    </body>
    </html>
    
    
    总结

    后端的时候serverse('app01:home'),括号里面必须是命名空间名称:别名

    hmtl:{% 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' %}
    
    
  • 相关阅读:
    CSUFT 1002 Robot Navigation
    CSUFT 1003 All Your Base
    Uva 1599 最佳路径
    Uva 10129 单词
    欧拉回路
    Uva 10305 给任务排序
    uva 816 Abbott的复仇
    Uva 1103 古代象形文字
    Uva 10118 免费糖果
    Uva 725 除法
  • 原文地址:https://www.cnblogs.com/NiceSnake/p/11605131.html
Copyright © 2011-2022 走看看