python全栈开发_day52_html模板继承和静态配置
生活随笔
收集整理的這篇文章主要介紹了
python全栈开发_day52_html模板继承和静态配置
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今日內容
模板層(模板語法)
標簽
過濾器
自定義標簽,過濾器,inclusion_tag
模板的繼承
模板的導入
后端朝前端頁面傳遞數據的方式
# 第一種
return render(request,'index.html',{'n':n})
# 第二種
return render(request,'index.html',locals())
# 將當前所在的名稱空間中的名字全部傳遞給前端頁面
后端傳函數名到前端,會自動加括號調用,但是不支持傳參
后端傳對象到前端,就相當于打印了這個對象
前端獲取后端傳過來的容器類型的內部元素 統一采用句點符(.)
('關某某','謝某某','陳某某','容嬤嬤')>>>:{{ t }},{{ t.1 }} 數字對應的就是數據的索引
前端能夠調用python后端數據類型的一些不需要傳參的內置方法
模板語法的注釋
不會展示到前端頁面:{#調用python自帶的內置方法,可以調用不需要傳參的一些內置方法#}
原生html的注釋
會展示到前端:<!--我是原生的html注釋-->
過濾器
<p>前端統計字符串的長度:{{ s|length }}</p>
<p>前端獲取數據如果是空就返回default后面默認的參數值:{{ flag|default:'你這個東西是個空'}}</p>
<p>將數字格式化成表示文件大小的單位:{{ file_size|filesizeformat }}</p>
<p>{{ ctime }}</p>
<p>格式化時間(不要加百分號){{ ctime|date:'Y-m-d' }}</p>
<p>字符串的切片操作:{{ res|slice:'0:8' }}</p>
<p>{{ res|slice:'0:8:2' }}</p>
<p>截取固定的長度的字符串 三個點也算:{{ s|truncatechars:10 }}</p>
<p>按照空格截取文本內容:{{ res|truncatewords:4 }}</p>
<p>{{ s|truncatewords:4 }}</p>
<p>{{ 'hahah'|add:'heheheh' }}</p>
{#重點#}
<p>{{ ht }}</p>
<p>{{ sr }}</p>
<p>{{ ht|safe }}</p>
<p>{{ sr|safe }}</p>
前后端取消轉義(*****)
前端:
|safe
后端:
from django.utils.safestring import mark_safe
xxx = mark_safe('<h1>我是h1標簽</h1>')
標簽
for循環
{% for foo in l %}
<p>{{ foo }}</p>
<p>{{ forloop }}</p>
{% endfor %}
if判斷
{% if flag %}
<p>flag不為空</p>
{% else %}
<p>flag是空</p>
{% endif %}
嵌套使用
{% for foo in l %}
{% if forloop.first %}
<p>這是我的第一次</p>
{% elif forloop.last %}
<p>這是最后一次了啊</p>
{% else %}
<p>嗨起來!!!</p>
{% endif %}
{% endfor %}
empty
當你的for循環對象為空的時候會自動走empty代碼塊兒的內容
后端:
l = None
前端:
{% for foo in l %}
{% if forloop.first %}
<p>這是我的第一次</p>
{% elif forloop.last %}
<p>這是最后一次了啊</p>
{% else %}
<p>嗨起來!!!</p>
{% endif %}
{% empty %}
<p>你給我的容器類型是個空啊,沒法for循環</p>
{% endfor %}
自定義過濾器
必須做的三件事
1.在應用名下新建一個名為templatetags文件夾(必須叫這個名字)
2.在該新建的文件夾內新建一個任意名稱的py文件
3.在該py文件中需要固定寫下面兩句代碼
from django import template
register = template.Library()
# 自定義過濾器
@register.filter(name='XBB')
def index(a,b):
return a+b
自定義標簽
# 自定義標簽
@register.simple_tag
def plus(a,b,c):
return a+b+c
自定義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 %}
模板的繼承與導入
首先需要在被繼承的模板中劃分多個區域
{% block 給區域起的名字 %}
{% endblock %}
通常情況下一個模板中應該至少有三塊
{% block css %}
頁面css代碼塊
{% endblock %}
{% block js %}
頁面js代碼塊
{% endblock %}
{% block content %}
頁面主體內容
{% endblock %}
子板繼承模板
先繼承模板所有的內容
{% extends 'home.html' %}
然后根據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 %}
模板的導入:將一段html當做模塊的方式導入到另一個html展示
{% include '想導入的html文件名' %}
靜態文件配置
{% load static %}
<link rel='stylesheet' href="{% static 'css/mycss.css'%}"> # 第一種方式
<link rel='stylesheet' href="{% get_static_prefix %}css/mycss.css"> # 第二種方式
模板層(模板語法)
標簽
過濾器
自定義標簽,過濾器,inclusion_tag
模板的繼承
模板的導入
后端朝前端頁面傳遞數據的方式
# 第一種
return render(request,'index.html',{'n':n})
# 第二種
return render(request,'index.html',locals())
# 將當前所在的名稱空間中的名字全部傳遞給前端頁面
后端傳函數名到前端,會自動加括號調用,但是不支持傳參
后端傳對象到前端,就相當于打印了這個對象
前端獲取后端傳過來的容器類型的內部元素 統一采用句點符(.)
('關某某','謝某某','陳某某','容嬤嬤')>>>:{{ t }},{{ t.1 }} 數字對應的就是數據的索引
前端能夠調用python后端數據類型的一些不需要傳參的內置方法
模板語法的注釋
不會展示到前端頁面:{#調用python自帶的內置方法,可以調用不需要傳參的一些內置方法#}
原生html的注釋
會展示到前端:<!--我是原生的html注釋-->
過濾器
<p>前端統計字符串的長度:{{ s|length }}</p>
<p>前端獲取數據如果是空就返回default后面默認的參數值:{{ flag|default:'你這個東西是個空'}}</p>
<p>將數字格式化成表示文件大小的單位:{{ file_size|filesizeformat }}</p>
<p>{{ ctime }}</p>
<p>格式化時間(不要加百分號){{ ctime|date:'Y-m-d' }}</p>
<p>字符串的切片操作:{{ res|slice:'0:8' }}</p>
<p>{{ res|slice:'0:8:2' }}</p>
<p>截取固定的長度的字符串 三個點也算:{{ s|truncatechars:10 }}</p>
<p>按照空格截取文本內容:{{ res|truncatewords:4 }}</p>
<p>{{ s|truncatewords:4 }}</p>
<p>{{ 'hahah'|add:'heheheh' }}</p>
{#重點#}
<p>{{ ht }}</p>
<p>{{ sr }}</p>
<p>{{ ht|safe }}</p>
<p>{{ sr|safe }}</p>
前后端取消轉義(*****)
前端:
|safe
后端:
from django.utils.safestring import mark_safe
xxx = mark_safe('<h1>我是h1標簽</h1>')
標簽
for循環
{% for foo in l %}
<p>{{ foo }}</p>
<p>{{ forloop }}</p>
{% endfor %}
if判斷
{% if flag %}
<p>flag不為空</p>
{% else %}
<p>flag是空</p>
{% endif %}
嵌套使用
{% for foo in l %}
{% if forloop.first %}
<p>這是我的第一次</p>
{% elif forloop.last %}
<p>這是最后一次了啊</p>
{% else %}
<p>嗨起來!!!</p>
{% endif %}
{% endfor %}
empty
當你的for循環對象為空的時候會自動走empty代碼塊兒的內容
后端:
l = None
前端:
{% for foo in l %}
{% if forloop.first %}
<p>這是我的第一次</p>
{% elif forloop.last %}
<p>這是最后一次了啊</p>
{% else %}
<p>嗨起來!!!</p>
{% endif %}
{% empty %}
<p>你給我的容器類型是個空啊,沒法for循環</p>
{% endfor %}
自定義過濾器
必須做的三件事
1.在應用名下新建一個名為templatetags文件夾(必須叫這個名字)
2.在該新建的文件夾內新建一個任意名稱的py文件
3.在該py文件中需要固定寫下面兩句代碼
from django import template
register = template.Library()
# 自定義過濾器
@register.filter(name='XBB')
def index(a,b):
return a+b
自定義標簽
# 自定義標簽
@register.simple_tag
def plus(a,b,c):
return a+b+c
自定義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 %}
模板的繼承與導入
首先需要在被繼承的模板中劃分多個區域
{% block 給區域起的名字 %}
{% endblock %}
通常情況下一個模板中應該至少有三塊
{% block css %}
頁面css代碼塊
{% endblock %}
{% block js %}
頁面js代碼塊
{% endblock %}
{% block content %}
頁面主體內容
{% endblock %}
子板繼承模板
先繼承模板所有的內容
{% extends 'home.html' %}
然后根據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 %}
模板的導入:將一段html當做模塊的方式導入到另一個html展示
{% include '想導入的html文件名' %}
靜態文件配置
{% load static %}
<link rel='stylesheet' href="{% static 'css/mycss.css'%}"> # 第一種方式
<link rel='stylesheet' href="{% get_static_prefix %}css/mycss.css"> # 第二種方式
轉載于:https://www.cnblogs.com/xuxingping/p/11006239.html
總結
以上是生活随笔為你收集整理的python全栈开发_day52_html模板继承和静态配置的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 长沙理工大学第十二届ACM大赛-重现赛C
- 下一篇: vue+element+echarts柱