詳解flask入門模板引擎
更新時(shí)間：2018年07月18日 10:12:45 作者：rottengeek
這篇文章主要介紹了詳解flask入門模板引擎，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
模板引擎
說明：模板文件就是按照一定的規(guī)則書寫的展示效果的HTML文件 模板引擎就是負(fù)責(zé)按照指定規(guī)則進(jìn)行替換的工具
模板引擎選擇jinja2
一、渲染模板的方法
1、將渲染的模板進(jìn)行返回
render_template()
2、渲染字符串返回
render_templates_string()
實(shí)例
@app.route('/')
def index():
#將模板內(nèi)容響應(yīng)給用戶
return render_template('index.html')
#渲染一內(nèi)容響應(yīng)給用戶
return render_template_string('<h1 style="color:green;font-size:18px;">原諒色</h1>')
二、模板的語法
模板中只存在倆種語法
1、變量
{{ var }}
#像模板文件中傳參
return render_template('index.html',title='首惡')
{{ title }}
2、標(biāo)簽
{% 標(biāo)簽名 %}
注意：
在模板中使用字典中的鍵 需要像使用對象得方式來調(diào)用
{{data.key}}
如果在模板中給定的變量不存在 則插入的是空字符串 不會報(bào)錯
三、過濾器
過濾器使用管道符 | 來使用的
1、{{ var|abs }} 返回一個數(shù)值的絕對值
2、default 設(shè)置默認(rèn)值
只有當(dāng)給定的變量不存在時(shí) 則執(zhí)行默認(rèn)值
當(dāng)設(shè)置default的boolean的時(shí)候 會執(zhí)行默認(rèn)值
<li>{{ data.bool|default('我是默認(rèn)值',boolean=True) }}</li>
3、first: 取出變量中的第一個字符
4、last: 取出變量中的最后一個字符
5、format： 字符的格式化
<li>{{ '我叫%s 我今年%d歲了 我的存款為 %.2f'|format('羅鐵漢',38,23) }}</li>
6、length: 返回變量值的長度
7、join: 拼接成字符串
<li>{{ [1,2,3,4]|join('') }}</li>
<li>{{ [1,2,3,4]|join('x') }}</li>
8、safe: 不轉(zhuǎn)義標(biāo)簽 原樣顯示
9、lower 轉(zhuǎn)為小寫
10、upper 轉(zhuǎn)為大寫
11、replace 替換
<li>{{ data.string|replace('a','x') }}</li>
12、striptages 去除HTML標(biāo)簽
{{ data.html|striptags }}
四、標(biāo)簽
語法格式 ：{% 標(biāo)簽名 %}
(1) if
實(shí)例
{% if data.bool %}
<li>{{ data.bool }}值為真</li>
{% elif True %}
<li>{{ True }}職位真</li>
{% else %}
<li>{{ data.bool }}值為假</li>
{% endif %}
(2) for 循環(huán)
實(shí)例
{% for i in data.xxxx %}
{# 錯誤的迭代方法TypeError: 'bool' object is not iterable #}
{# {% for i in data.bool %}#}
<li>{{ i }}</li>
{% else %}
<li>當(dāng)?shù)淖兞坎淮嬖跁r(shí) 則執(zhí)行else</li>
{% endfor %}
注意：
break continue 不能夠在這里使用
迭代字典
{% for k,v in data.items() %}
<li>{{ k }}=>{{ v }}</li>
{% endfor %}
獲取當(dāng)前迭代的狀態(tài)
| 變量 | 描述 |
|---|---|
| loop.index | 獲取當(dāng)前迭代的索引 從1開始 |
| loop.index0 | 獲取當(dāng)前迭代的索引 從0開始 |
| loop.first | 是否為第一次迭代 |
| loop.last | 是否為最后一次迭代 |
| loop.length | 迭代的長度 |
六、注釋
{# 多行注釋 #}
七、文件包含 include
相當(dāng)于把一個文件 拷貝到當(dāng)前的你的包含的位置
實(shí)例
{% include 'common/header.html' %}
<div>我是中間的內(nèi)容</div>
{% include 'common/footer.html' %}
注意：
1、包含的公共的文件中 只存放 公共的代碼 除此以外什么都不要存在
2、導(dǎo)入的時(shí)候 如果文件和在同一級別 直接導(dǎo)入就可以 如果包含在某個目錄中 需要寫出路徑
{% include 'common/header.html' %}
{% include 'test.html' %}
八、宏 macro
概念： 類似python中的函數(shù)
實(shí)例
在macro.html中
{% macro input(name,type='text',value='') %}
<input type="{{ type }}" name="{{ name }}" value="{{ value }}">
{% endmacro %}
宏的調(diào)用
{{ input('text','username','') }}
{{ input() }}
{{ input(type='password',name='userpass') }}
宏的導(dǎo)入
(1) import
{% import 'test.html' as test %}
{% import 'common/test.html' as test %}
<p>用戶名： {{ test.input(type='password',name='userpass') }}</p>
(2) form import
{% from 'test.html' import input %}
{% from 'common/test.html' import input %}
<p>用戶名： {{ input(type='password',name='userpass') }}</p>
注意：
- 宏的調(diào)用只能在定義的下方去調(diào)用 否則未定義
- 宏如果存在形參 且沒有默認(rèn)值 則可以調(diào)用(沒意義)
- 形參的默認(rèn)值 需要遵循默認(rèn)值規(guī)則 有默認(rèn)值的參數(shù) 放右側(cè)
- 可以正常使用 關(guān)鍵字參數(shù)
九、繼承 extends
語法：
- {% extends %} 繼承某個模板
- {% block %} 挖坑和填坑
- {{ super() }} 調(diào)用被替換掉的代碼
base.html
<!DOCTYPE html>
<html lang="en">
<head>
{% block header %}
<meta charset="UTF-8">
{% block meta %}
{% endblock %}
<title>{% block title%}首頁{% endblock %}</title>
<style>
{% block style %}
p{color:red;}
{% endblock %}
</style>
{% block link %}
{% endblock %}
{% block script %}
{% endblock %}
{% endblock %}
</head>
<body>
<header>頭部</header>
{% block con %}
我是中間的內(nèi)容部分
{% endblock %}
<footer>尾部</footer>
</body>
</html>
index.html繼承 base.html
{% extends 'common/base.html' %}
{% block title %}
我的首頁
{% endblock %}
{% block style %}
{{ super() }}
p{color:green;}
{% endblock %}
{% block con %}
<p>我是首頁的內(nèi)容</p>
我是首頁的內(nèi)容
{% endblock %}
注意：
如果當(dāng)替換某個樣式的時(shí)候 所有原來的樣式 都消失了 去查看是否使用了super()
十、flask-bootstrap
安裝
pip install flask-bootstrap sudo pip3 install flask-bootstrap
使用
繼承 bootstrap/base.html 基礎(chǔ)模板 改造成適用于自己網(wǎng)站的base.html基礎(chǔ)模板
自己的base.html
{% extends 'bootstrap/base.html' %}
{% block navbar %}
<nav class="navbar navbar-inverse" style="border-radius: 0px;">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span class="glyphicon glyphicon-signal" aria-hidden="true"></span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁 <span class="sr-only">(current)</span></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >發(fā)帖子</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >注冊</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >登錄</a></li>
<li class="dropdown">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">個人中心 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >個人信息</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改頭像</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改密碼</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >退出登錄</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
{% endblock %}
{% block content %}
<div class="container">
{% block pagecontent %}
網(wǎng)頁的中間內(nèi)容部分寫在當(dāng)前的位置
{% endblock %}
</div>
{% endblock %}
使用 index.html
{% extends 'common/base.html' %}
{% block title %}
首頁
{% endblock %}
十一、錯誤頁面的定制
manage.py
@app.errorhandler(404)
def page_not_found(e):
return render_template('common/error.html',error=e,code=404)
@app.errorhandler(500)
def server_error(e):
return render_template('common/error.html',error=e,code=500)
error.html
{% extends 'common/base.html' %}
{% block title %}
{{ code }}錯誤
{% endblock %}
{% block pagecontent %}
<div class="alert alert-danger" role="alert">{{ error }}</div>
{% endblock %}
十二、視圖傳遞多個參數(shù)
(1) 原始傳參
@app.route('/')
def index():
return render_template('index.html',arg1=1,arg2=2...)
(2) 使用字典
@app.route('/')
def index():
return render_template('index.html',arg={arg1:1,arg2:2...})
kwarg={arg1:1,arg2:2...}
return render_template('index.html',``)
(3) 使用全局變量g
@app.route('/')
def index():
g.name = '張三'
g.age = 18
return render_template('index.html')
模板中
<ol>
<li>{{ g.name }}</li>
<li>{{ g.age }}</li>
</ol>
(4) 使用 **locals()
@app.route('/')
def index():
name = '張三'
age = 18
print(locals())
return render_template('index.html',**locals())
模板中
<li>{{ name }}</li>
<li>{{ age }}</li>
十三、url_for 構(gòu)造絕對的鏈接地址
@app.route('/test/')
def test():
print(url_for('index',_external=True))
return 'test'
十四、加載靜態(tài)資源
靜態(tài)資源：圖片，css，js，視頻，音頻，，
實(shí)例
<img src="{{ url_for('static',filename='img/17.jpg') }}" alt="">
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Python中os.path模塊的8個神奇函數(shù)分享
在Python編程中,os.path模塊是一個非常重要的模塊,它提供了用于處理文件路徑和目錄的函數(shù),本文將介紹os.path模塊中最常用的8個內(nèi)置函數(shù),需要的可以參考下2023-11-11
這篇文章主要介紹了Python3非對稱加密算法RSA,結(jié)合實(shí)例形式分析了Python3 RSA加密相關(guān)模塊安裝及使用操作技巧,需要的朋友可以參考下2018-12-12
大家好，本篇文章主要講的是Python OpenCV圖像顏色變換示例，感興趣的同學(xué)趕快來看一看吧，對你有幫助的話記得收藏一下2022-01-01
python獲取當(dāng)前運(yùn)行函數(shù)名稱的方法實(shí)例代碼
這篇文章主要介紹了python獲取當(dāng)前運(yùn)行函數(shù)名稱的方法實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了如何利用python做表格數(shù)據(jù)處理，幫助大家更好的理解和學(xué)習(xí)使用python，感興趣的朋友可以了解下2021-04-04
Python?基于TCP?傳輸協(xié)議的網(wǎng)絡(luò)通信實(shí)現(xiàn)方法
網(wǎng)絡(luò)編程指在網(wǎng)絡(luò)環(huán)境中，如何實(shí)現(xiàn)不在同一物理位置中的計(jì)算機(jī)之間進(jìn)行數(shù)據(jù)通信，本文重點(diǎn)給大家介紹Python?基于TCP?傳輸協(xié)議的網(wǎng)絡(luò)通信實(shí)現(xiàn)方法，感興趣的朋友跟隨小編一起看看吧2022-02-02
淺談selenium如何應(yīng)對網(wǎng)頁內(nèi)容需要鼠標(biāo)滾動加載的問題
這篇文章主要介紹了淺談selenium如何應(yīng)對網(wǎng)頁內(nèi)容需要鼠標(biāo)滾動加載的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03
Python 中獲取數(shù)組的子數(shù)組示例詳解
在 Python 中獲取一個數(shù)組的子數(shù)組時(shí)，可以使用切片操作，使用切片操作來獲取一個數(shù)組的一段連續(xù)的子數(shù)組，并且還可以使用一些方便的語法來簡化代碼，這篇文章主要介紹了如何在 Python 中獲取數(shù)組的子數(shù)組,需要的朋友可以參考下2023-05-05
今天小編就為大家分享一篇用python解壓分析jar包實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-01-01
探索Python定時(shí)任務(wù)實(shí)現(xiàn)高效時(shí)間管理
這篇文章主要為大家介紹了探索Python定時(shí)任務(wù)高效實(shí)現(xiàn)高效時(shí)間管理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01