Django 模板層
前后端數據傳遞
(1) 后端朝前端頁面傳遞數據的方式:
# 將當前所在的名稱空間中的名字全部傳遞給前端頁面
# 第一種
return render(request,'index.html',{'n':n})
# 第二種
return render(request,'index.html',locals())
(2) 后端傳函數名到前端,會自動加括號調用,但是不支持傳參
(3) 后端傳對象到前端,就相當於打印了這個對象
(4) 前端獲取后端傳過來的容器類型的內部元素 統一采用句點符(.)
('關某某','謝某某','陳某某','容嬤嬤')>>>:{{ t }},{{ t.1 }} 數字對應的就是數據的索引
(5) 前端能夠調用python后端數據類型的一些不需要傳參的內置方法
(6) 注釋:
模板語法的注釋,不會展示到前端頁面:
{#調用python自帶的內置方法,可以調用不需要傳參的一些內置方法#}
原生html的注釋,會展示到前端:
<!--我是原生的html注釋-->
過濾器
# 下面的內容,第一行是在前端的代碼,第二行是運行的結果
(1) <p>前端統計字符串的長度:{{ s|length }}</p>
# 結果:前端統計字符串的長度:16
(2) <p>前端獲取數據如果是空就返回default后面默認的參數值:{{ flag|default:'你這個東西是個空'}}</p>
# 結果:前端獲取數據如果是空就返回default后面默認的參數值:123
(3) <p>將數字格式化成表示文件大小的單位:{{ file_size|filesizeformat }}</p>
# 結果:將數字格式化成表示文件大小的單位:20.3 MB
(4) <p>{{ ctime }}</p>
# 結果:June 11, 2019, 7:30 p.m.
(5) <p>格式化時間(不要加百分號):{{ ctime|date:'Y-m-d' }}</p>
# 結果:格式化時間(不要加百分號):2019-06-11
(6) <p>字符串的切片操作:{{ res|slice:'0:8' }}</p>
# 結果:字符串的切片操作:hello bi
(7) <p>{{ res|slice:'0:8:2' }}</p>
# 結果:hlob 起始位置:結束位置:步長
(8) <p>截取固定的長度的字符串 三個點也算:{{ s|truncatechars:10 }}</p>
# 結果:截取固定的長度的字符串 三個點也算:這是 一段 字...
(9) <p>按照空格截取文本內容:{{ res|truncatewords:4 }}</p>
# 結果:按照空格截取文本內容:hello big ba by~ ...
(10) <p>{{ s|truncatewords:4 }}</p>
# 結果:這是 一段 字符串 沒有別的東西
(11) <p>{{ 'hahah'|add:'heheheh' }}</p>
# 結果:
后端代碼:
ht = '<h1>我是h1標簽</h1>'
sr = '<script>alert(123)</script>'
前端:
<p>{{ ht }}</p>
<p>{{ sr }}</p>
# 上面兩個在前端顯示的是純字符串,不會將其轉義成代碼執行
<p>{{ ht|safe }}</p>
<p>{{ sr|safe }}</p>
# 下面的兩句,通過|safe過空濾器將其轉義代碼執行
前后端取消轉義(*****)
前端:
|safe
后端:
from django.utils.safestring import mark_safe
xxx = mark_safe('<h1>我是h1標簽</h1>')
標簽
(1) for循環:
{% for foo in l %}
<p>{{ foo }}</p>
<p>{{ forloop }}</p>
{% endfor %}
解釋一波:從容器l中一個個的讀取數據,然后將其塞入前端的標簽里面
{{ foo }}:取l里面的一個個的值
{{ forloop }}:下面是一條記錄
{'revcounter': 7, 'counter0': 0, 'last': False, 'parentloop': {}, 'counter': 1, 'first': True, 'revcounter0': 6}
{{ forloop.counter0 }} 從0開始計數
{{ forloop.counter1 }} 從1開始計數
(2) if判斷
{% if flag %}
<p>flag不為空</p>
{% else %}
<p>flag是空</p>
{% endif %}
例:
{% if article_obj.classify == classify %} //這里 == 兩端必須有空格,不然飄紅
(3) 嵌套使用
{% for foo in l %}
{% if forloop.first %}
<p>這是我的第一次</p>
{% elif forloop.last %}
<p>這是最后一次了啊</p>
{% else %}
<p>嗨起來!!!</p>
{% endif %}
{% empty %}
<p>你給我的容器類型是個空啊,沒法for循環</p>
{% endfor %}
解釋一波:
{% if forloop.first %} 判斷此次循環是不是第一次,是,就執行下面的代碼
{% elif forloop.last %} 同樣的,判斷是不是最后一次,是,就執行下面代碼
{% empty %} 當你的for循環對象為空的時候會自動走empty代碼塊兒的內容
(3) 嵌套使用
{% for foo in l %}
{% if forloop.first %}
<p>這是我的第一次</p>
{% elif forloop.last %}
<p>這是最后一次了啊</p>
{% else %}
<p>嗨起來!!!</p>
{% endif %}
{% empty %}
<p>你給我的容器類型是個空啊,沒法for循環</p>
{% endfor %}
解釋一波:
{% if forloop.first %} 判斷此次循環是不是第一次,是,就執行下面的代碼
{% elif forloop.last %} 同樣的,判斷是不是最后一次,是,就執行下面代碼
{% empty %} 當你的for循環對象為空的時候會自動走empty代碼塊兒的內容
使用之前請先導入 --> 在html模板頁面中導入
{% load my_filter %}
這個my_filter是自定義的py文件名(上面定義的三個步驟其二)
(5) 自定義標簽
# 自定義標簽
@register.simple_tag
def plus(a,b,c):
return a+b+c
(6) 自定義inclusion_tag
# 自定義inclusion_tag
@register.inclusion_tag('login.html',name='login')
def login(n):
# l = []
# for i in range(n):
# l.append('第%s項'%i)
l = [ '第%s項'%i for i in range(n)]
return {'l':l}
# login.html
<ul>
{% for foo in l %}
<li>{{ foo }}</li>
{% endfor %}
</ul>
# 調用
{% login 5 %}
注意 :要想使用自定義的過濾器 標簽 inclusion_tag
必須先在需要使用的html頁面加載你的py文件
{% load my_tag %}
{{ 666|XBB:8 }}
{% plus 1 2 3 %}
{% login 5 %}
模板的繼承與導入
(1) 首先需要在被繼承的模板中划分多個區域
{% block 給區域起的名字 %}
{% endblock %}
(2) 通常情況下一個模板中應該至少有三塊
{% block css %}
頁面css代碼塊
{% endblock %}
{% block js %}
頁面js代碼塊
{% endblock %}
{% block content %}
頁面主體內容
{% endblock %}
(3) 子板繼承模板
1> 先繼承模板所有的內容
{% extends 'home.html' %}
2> 然后根據block塊的名字修改指定區域的內容
{% block content %}
<h1>登錄頁面</h1>
<form action="">
<p>username:<input type="text" class="form-control"></p>
<p>password:<input type="text" class="form-control"></p>
<input type="submit" class="btn btn-success">
</form>
{% endblock %}
(4) 模板的導入:
將一段html當做模塊的方式導入到另一個html展示
{% include '想導入的html文件名' %}
靜態文件配置
{% load static %}
<link rel='stylesheet' href="{% static 'css/mycss.css'%}"> # 第一種方式
<link rel='stylesheet' href="{% get_static_prefix %}css/mycss.css"> # 第二種方式