day58

Template related

Template inheritance (master inherited)

1. 创建一个xx.html页面(作为母版,其他页面来继承它使用)
2. 在母版中定义block块(可以定义多个,整个页面任意位置)
    {% block content %}  <!-- 预留的钩子,共其他需要继承它的html,自定义自己的内容 -->
    内容。。。
    {% endblock %}


3 其他页面继承写法
    {% extends 'base.html' %}  必须放在页面开头
4 页面中写和母版中名字相同的block块,从而来显示自定义的内容
    {% block content %}  <!-- 预留的钩子,共其他需要继承它的html,自定义自己的内容 -->
        {{ block.super }}  #这是显示继承的母版中的content这个快中的内容
        这是xx1
    {% endblock %}

Case Study:

Template page

<!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>

Template results page:

Inheritance page

{% extends "base.html" %}

{% block content %}
    <h1>我是大帅哥</h1>
    {% for i in "123" %}
        <h4>{{ i }}</h4>
    {% endfor %}
    {{ block.super }}
{% endblock %}

Inheritance results page:

Package

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

Assembly case

Components page:

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

Application page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% include 'zujian.html' %}
<h1>我是应用组件的</h1>
</body>
</html>

The difference between the components and plug-ins

组件是提供某一个完整功能的模块：如：编辑器组件，QQ空间提供的关注组件等
而插件更倾向封闭某一功能方法的函数
这两者的区别在 Javascript 里区别很笑，组件这个名词用的不多，一般统称为插件

Custom tags and filters

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

Examples

Define the label file and filters 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

Application file

{% 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 %}

Examples

Configuration file py function --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....}

Dynamic html file --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>

Application files --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>

Static configuration file

setting the configuration file

1 项目目录下创建一个文件夹,例如名为jingtaiwenjianjia（文件夹名随便取）,将所有静态文件放到这个文件夹中
2 settings配置文件中进行下面的配置
    # 静态文件相关配置
    STATIC_URL = '/abc/'  #静态文件路径别名

    STATICFILES_DIRS = [
        os.path.join(BASE_DIR, 'jingtaiwenjianjia'),
    ]

3 引入<link rel="stylesheet" href="/abc/css/index.css">

Create a configuration application app01

Introductory configuration file

<!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/bootstrap\bootstrap-3.3.7-dist\css\bootstrap.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 aliases and reverse lookup

写法
    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>

Examples

urls file

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'),
]

File 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 namespace

Route distribution include

1.  创建app：python3 manage.py startapp app02

Modify the data in the setting file

Urls.py create files in each app, write your own app on the path of

Add data files in three urls

Example

The total 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 of 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 of 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 namespace

urls get alias value

urls alias path is acquired content file urls taken preceding regular expression alias

Without Distribution: url (r '^ index2 /', views.index, name = 'index') -> / index2 /

If route distribution: url (r '^ index2 /', views.index, name = 'index') -> / application name / index2 / (/ app01 / index2 /)

Case Study:

The total 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 of 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 of 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 of 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 of views

from django.shortcuts import render,HttpResponse


def home(request):
    return HttpResponse('我是首页2')

html Bunken --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>

to sum up

The back end when serverse ( 'app01: home') , brackets must be namespace name: Alias

hmtl: {% url 'namespace name: Alias'%}, {%}% which must be namespace name: Alias

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

day58-- template inheritance, components, custom tags and filters, inclusion_tag, static configuration file, url aliases and reverse analysis, url namespace

day58

Template related

Template inheritance (master inherited)

Template page

Inheritance page

Package

Assembly case

The difference between the components and plug-ins

Custom tags and filters

Examples

inclusion_tag

Examples

Static configuration file

setting the configuration file

Create a configuration application app01

Introductory configuration file

url aliases and reverse lookup

Examples

url namespace

Route distribution include

Example

Namespace namespace

urls get alias value

Case Study:

to sum up

Guess you like