zoukankan      html  css  js  c++  java

  • 06-模板层

    1、模板语言

    views

    from django.shortcuts import render


def index(request):
    name = 'alex'
    # return render(request, 'index.html')   # 不向html传递参数
    return render(request, 'index.html', {'name': name})

    不向html传递参数

     2、模板语法

        """
    模板语法：
        变量：{{}}
            1.深度查询    句点符
            2.过滤器   {{value|filter_name:参数}}

        标签：{% %}

    """

    　　1.locals() 传递所有变量

    　　view文件：

    from django.shortcuts import render

def index(request):
    
    ######### 深度查询 ############ 
    name = 'alex'
    num = 10
    li = [11, 22, 33]
    dic = {'name': 'tom', 'age': 42}
    flag = True

    class Person(object):
        def __init__(self, name, age):
            self.name = name
            self.age = age

    alex = Person('alex', 22)
    jack = Person('jack', 33)       # 对象

    person_list = [alex, jack]      # 对象list

    return render(request, 'index.html', locals())  # 把所有的变量传递到模板文件

    模板文件

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>locals() 传递所有变量</h1>
<p>{{ name }}</p>
<p>{{ num }}</p>
<p>{{ li }}</p>
<p>{{ dic }}</p>
<p>{{ flag }}</p>
<p>{{ alex }}</p>
<p>{{ jack }}</p>
<p>{{ person_list }}</p>

</body>
</html>

    　　2.深度查询

    <h1>深度查询</h1>
<p>{{ li.1 }}</p>
<p>{{ dic.name }}</p>
<p>{{ alex.name }}</p>
<p>{{ jack.age }}</p>
<p>{{ person_list.1.age }}</p>

    　　2.模板之过滤器

    view

    from django.shortcuts import render

def index(request):
    # ############ 过滤器 #############

    import datetime
    now = datetime.datetime.now()

    now_list = []

    file_size1 = 1240
    file_size2 = 124000

    text_word = "You have 14 unapplied migration(s). Your project may not work properly until you apply the " 
                "migrations for app(s): admin, auth, contenttypes, sessions.python manage.py migrate"

    link = "<a href=''>click</a>"

    num_list = [111, 222, 333]

    desc = 'this is a pict'

    return render(request, 'index.html', locals())  # 把所有的变量传递到模板文件

     html

    <h1>过滤器</h1>
<p>{{ now }}</p>
<p>{{ now|date:'Y-m-d' }}</p>

<p>{{ now_list }}</p>
<p>{{ now_list|default:'数据为空' }}</p>

<p>{{ file_size1 }}</p>
<p>{{ file_size2 }}</p>
<p>{{ file_size1|filesizeformat }}</p>
<p>{{ file_size2|filesizeformat }}</p>

<hr>
<p>{{ text_word }}</p>
<p>{{ text_word|truncatechars:4 }}</p>
<p>{{ text_word|truncatewords:4 }}</p>

<hr>
<p>{{ link }}</p>
<p>{{ link|safe }}</p>

<hr>
<p>{{ num_list.1|add:999 }}</p>

<hr>
<p>{{ desc|upper }}</p>

     

     

     

       

     

     

    　　

     

    　其他常用的模板过滤器

     

    　　运算

    　　大小写转换

    　　3、模板之标签

    view

    from django.shortcuts import render

def index(request):


    # #######  标签 ##########

    name_list = ['alex', 'jack', 'tom']
    age_list = [22, 33, 44]

    class Person(object):
        def __init__(self, name, age):
            self.name = name
            self.age = age

    alex = Person('alex', 22)
    jack = Person('jack', 33)       # 对象
    person_list = [alex, jack]      # 对象list
    empty_list = []
    return render(request, 'index.html', locals()) # 把所有的变量传递到模板文件

    模板文件

    <h1>标签</h1>
<h4>for 标签</h4>
{% for age in age_list %}
    <p>{{ age }}</p>
{% endfor %}

{% for name in name_list %}
    <p>{{ name }}</p>
{% endfor %}

{% for person in person_list %}
    <p>{{ person.name }}-{{ person.age }}</p>
{% endfor %}

<hr>
{% for person in person_list %}
    <p>{{ forloop.counter }}{{ person.name }}-{{ person.age }}</p>
    <p>{{ forloop.counter0 }}{{ person.name }}-{{ person.age }}</p>
{% endfor %}

<hr>
{% for empty in empty_list %}
    {% empty %}
    <p>empty_list:列表为空</p>
{% endfor %}

     

        num = 100
    <h4>if标签</h4>
{% if num < 100 or num < 0 %}
    <p>0< num < 100</p>
{% elif num > 100 %}
    <p> num > 100 </p>
{% else %}
    <p>num < 0</p>
{% endif %}

    　　if实现登录前后不同状态

    {% if user %}
    <div>
        <a href="">hi {{ user }}</a>
        <a href="">注销</a>
        <a href="">退出</a>
    </div>
{% else %}
    <div>
        <a href="">登录</a>
        <a href="">注册</a>
    </div>
{% endif %}

     

     

    {% with person_list.1.name as name1  %}
{{ name1 }}
{{ name1 }}
{{ name1 }}
{{ name1 }}
{% endwith %}

     

     

    跨站请求伪造保护 

    post方式提交数据需要添加   {% csrf_token %}

    　　

     

    （2）外部的其他浏览器跨站请求

     

    　　（3）添加 csrf_token

     

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login Page</title>
</head>
<body>

<form action="" method="post">
    {% csrf_token %}
    username <input type="text" name="user">
    password <input type="text" name="pwd">
    <input type="submit">
</form>
</body>
</html>

     

     

     4.自定义标签与过滤器

    from django import template

register = template.Library()    # register是固定参数，不能改变


@register.filter    # 注册自定义过滤器
def multi_filter(x, y):

    return x*y


@register.simple_tag  # 注册自定义标签
def multi_tag(x, y):

    return x*y

    <h1>自定义过滤器,标签</h1>
{% load my_tag_filter %}

<p>{{ x|multi_filter:20}}</p>

<p>{% multi_tag 7 9 %}</p>

     

    　　（2）多个形参的

    <h4>多个参数</h4>
{% load my_tag_filter %}
{#<p>{{ x|multi_filter: 20:30 }}</p>   自定义过滤器报错#}

<p>{% multi_tag 7 9 8 %}</p>

     

    　　（3）流程控制

    <h4>流程控制</h4>
{% load my_tag_filter %}
{% if x|multi_filter:20 > 100 %}
<p>100</p>
{% else %}
<p>{{ i }}</p>
{% endif %}

{#自定义标签不能完成流程控制#}
{#{% if multi_tag:7 9 8 > 100 %}#}
{#<p>100</p>#}
{#{% else %}#}
{#<p>{{ i }}</p>#}
{#{% endif %}#}

     5、模板语法之继承

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .header {
             100%;
            height: 50px;
            background-color: #369;
        }
    </style>
</head>
<body>
<div class="header"></div>

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="leftBox">
                <div class="panel panel-success">
                    <div class="panel-heading">Panel heading without title</div>
                    <div class="panel-body">
                        Panel content
                    </div>
                </div>
                <div class="panel panel-danger">
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel title</h3>
                    </div>
                    <div class="panel-body">
                        Panel content
                    </div>
                </div>
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel title</h3>
                    </div>
                    <div class="panel-body">
                        Panel content
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="rightBox">
                <h1>locals() 传递所有变量</h1>
                <p>{{ name }}</p>
                <p>{{ num }}</p>
                <p>{{ li }}</p>
                <p>{{ dic }}</p>
                <p>{{ flag }}</p>
                <p>{{ alex }}</p>
                <p>{{ jack }}</p>
                <p>{{ person_list }}</p>
                <hr>

                <h1>深度查询</h1>
                <p>{{ li.1 }}</p>
                <p>{{ dic.name }}</p>
                <p>{{ alex.name }}</p>
                <p>{{ jack.age }}</p>
                <p>{{ person_list.1.age }}</p>
                <hr>

                <h1>过滤器</h1>
                <p>{{ now }}</p>
                <p>{{ now|date:'Y-m-d' }}</p>
                <p>{{ now_list }}</p>
                <p>{{ now_list|default:'数据为空' }}</p>
                <p>{{ file_size1 }}</p>
                <p>{{ file_size2 }}</p>
                <p>{{ file_size1|filesizeformat }}</p>
                <p>{{ file_size2|filesizeformat }}</p>
                <hr>
                <p>{{ text_word }}</p>
                <p>{{ text_word|truncatechars:4 }}</p>
                <p>{{ text_word|truncatewords:4 }}</p>
                <hr>
                <p>{{ link }}</p>
                <p>{{ link|safe }}</p>
                <hr>
                <p>{{ num_list.1|add:999 }}</p>
                <hr>
                <p>{{ desc|upper }}</p>


                <hr>

                <h1>标签</h1>
                <h4>for 标签</h4>
                {% for age in age_list %}
                    <p>{{ age }}</p>
                {% endfor %}

                {% for name in name_list %}
                    <p>{{ name }}</p>
                {% endfor %}

                {% for person in person_list %}
                    <p>{{ person.name }}-{{ person.age }}</p>
                {% endfor %}

                <hr>
                {% for person in person_list %}
                    <p>{{ forloop.counter }}：{{ person.name }}-{{ person.age }}</p>
                    <p>{{ forloop.counter0 }}：{{ person.name }}-{{ person.age }}</p>
                {% endfor %}

                <hr>
                {% for empty in empty_list %}
                {% empty %}
                    <p>empty_list:列表为空</p>
                {% endfor %}

                <hr>
                <h4>if标签</h4>
                {% if num < 100 or num < 0 %}
                    <p>0< num < 100</p>
                {% elif num > 100 %}
                    <p> num > 100 </p>
                {% else %}
                    <p>num < 0</p>
                {% endif %}

                <hr>
                {% if user %}
                    <div>
                        <a href="">hi {{ user }}</a>
                        <a href="">注销</a>
                        <a href="">退出</a>
                    </div>
                {% else %}
                    <div>
                        <a href="">登录</a>
                        <a href="">注册</a>
                    </div>
                {% endif %}


                <hr>
                {% with person_list.1.name as name1 %}
                    {{ name1 }}
                    {{ name1 }}
                    {{ name1 }}
                    {{ name1 }}
                {% endwith %}

                <h1>自定义过滤器,标签</h1>
                {#{% load my_tag_filter %}#}
                {##}
                {#<p>{{ x|multi_filter:20}}</p>#}
                {##}
                {#<p>{% multi_tag 7 9 %}</p>#}


                <h4>多个参数</h4>
                {% load my_tag_filter %}
                {#<p>{{ x|multi_filter: 20:30 }}</p>   自定义过滤器报错#}

                <p>{% multi_tag 7 9 8 %}</p>

                <h4>流程控制</h4>
                {% load my_tag_filter %}
                {% if x|multi_filter:20 > 100 %}
                    <p>100</p>
                {% else %}
                    <p>{{ i }}</p>
                {% endif %}

                {#自定义标签不能完成流程控制#}
                {#{% if multi_tag:7 9 8 > 100 %}#}
                {#<p>100</p>#}
                {#{% else %}#}
                {#<p>{{ i }}</p>#}
                {#{% endif %}#}
            </div>
        </div>
    </div>
</div>

</body>
</html>
    页面代码

    　　（1） include 语法

    index.html页面 的内容用include替换

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .header {
             100%;
            height: 50px;
            background-color: #369;
        }
    </style>
</head>
<body>
<div class="header"></div>

<div class="container">
    <div class="row">
        <div class="col-md-3">
            {% include 'leftBox.html' %}
        </div>

        <div class="col-md-9">
            {% include 'rightBox.html' %}
        </div>
    </div>
</div>

</body>
</html>

     

     　　（2）extends：必须写在首行

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .header {
             100%;
            height: 50px;
            background-color: #369;
        }
    </style>
</head>
<body>
<div class="header"></div>

<div class="container">
    <div class="row">
        <div class="col-md-3">
            {% block leftBox %}

            {% endblock %}
        </div>

        <div class="col-md-9">
            {% block content %}

            {% endblock %}
        </div>
    </div>
</div>

</body>
</html>

    base.html

    {% extends 'base.html' %}

{% block leftBox %}
    {% include 'leftBox.html' %}
{% endblock %}

{% block content %}
    {% include 'rightBox.html' %}
{% endblock %}

     新建一个order页面

    url

    from django.urls import path, re_path, include
from app01 import views


urlpatterns = [
    re_path(r'^index/$', views.index, name='index'),
    re_path(r'^login/$', views.login, name='login'),
    re_path(r'^order/$', views.order, name='order'),
]

    view

    def order(request):

    return render(request, 'order.html')

     title代码块

        <meta charset="UTF-8">

    {% block title %}
        <title>baseTitle</title>
    {% endblock %}

     不替换title的代码块的话，用初始的

    替换的话，用自己的

    既想要自己的，也要父级的：  {{ block.super }}

    {% block content %}
    {{ block.super }}
    <h4>订单Page</h4>
{% endblock %}

     

     6、总结

     
  • 相关阅读:
    Windows Service 2016 DatacenterStandEmbedded激活方法
    批处理文件设置IP以及DNS
    C#类的一些基础知识（静态方法可以不用实例化调用）
    Dynamics Crm Plugin插件注册的问题及解决方案（持续更新。。。。。。）
    【转载】C# get 与set的一些说明
    C#补位函数PadLeft和PadRight
    Kubernetes集群调度之Scheduler
    Kubernetes集群控制之ControllerManager
    Kubernetes集群大脑之apiserver
    Kubernetes集群存储之etcd
  • 原文地址：https://www.cnblogs.com/venicid/p/9245912.html
Copyright © 2011-2022 走看看