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 { width: 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 { width: 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 { width: 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、总结
