【三】Flask 中模板的簡單應(yīng)用
Python Flask從入門到不放棄
按照慣例我們會在這里插入一張圖片作為封面
高清無碼pdf見
鏈接：https://pan.baidu.com/s/1Dpg3G44Ytp5EwGg9CuoI3g?
提取碼：gc22
前情回顧
上次我們使用Flask中的路由來創(chuàng)建了兩個可以被同時訪問的頁面
可是,一個完整的網(wǎng)站當(dāng)然不能只返回給用戶一句"HelloWord"
靈魂拷問
怎樣才能返回一個好看的頁面呢?
難道要這么寫么?
@app.route('/')
def hello_world():
? ? return """??
? ? ? ? <html>
? ? ? ? <head>
? ? ? ? ? <meta charset="UTF-8">
? ? ? ? ? <title>這是一個頁面</title>
? ? ? ? </head>
? ? ? ? <body>
? ? ? ? ? <h1>Hello</h1>
? ? ? ? ? <h2>難道我們要以這樣的方式來返回頁面么?</h2>
? ? ? ? </body>
? ? ? ? </html>
? ? ? ? """
雖然這個方法是可取的,但是如果我有一個上百上千行的html代碼的話,你還打算這樣做嗎?
我們在網(wǎng)絡(luò)上去訪問一個地址時,通常情況下他會給我們返回一個帶有各種信息的html文檔,因為我們的程序是動態(tài)的,他可能會根據(jù)不同的情況展示不同的狀態(tài).比如說不同用戶登錄之后展示出來各自不同的信息,所以頁面需要在用戶訪問的時候通過查找的數(shù)據(jù)來自動生成.
我們可以把一些帶有變量和邏輯運算的html或者其他格式的文件叫做模板
程序?qū)⑦@些變量的內(nèi)容替換和邏輯計算的過程叫做渲染
來完成這個工作的程序叫做模板引擎
在flask中,可以使用諸多的模板引擎,但是flask默認(rèn)使用的是jinja2模板引擎
如何編寫模板?
根據(jù)flask的默認(rèn)設(shè)置,Flask會在程序?qū)嵗谀K的同級目錄的templates文件夾中去尋找模板,這也是上次我們要搞明白為什么要有__name__的原因
目前我們的程序存在app.py文件中,所有我們需要在app.py的同級目錄來創(chuàng)建templates目錄
為了操作方便,下面的操作會在pycharm軟件中完成
現(xiàn)在有了模板目錄,我們再來創(chuàng)建模板文件比如index.html
保存之后,我們就擁有了一個html模板
如何將模板展示到頁面上?
我們需要從flask模塊中導(dǎo)入render_template函數(shù)
使用render_template來渲染我們的模板文件并且返回頁面
@app.route('/')
def hello_world():
? ? return render_template("index.html")
重新運行服務(wù)器進(jìn)行測試
模板已經(jīng)成功的渲染到了瀏覽器中
但是,這里還是展示的靜態(tài)數(shù)據(jù),那我們?nèi)绾蝹鬟f數(shù)據(jù)到模板中呢?
不要著急,我們先來看一下模板的基本語法是如何構(gòu)成的
{{ ... }}用來標(biāo)記變量。{% ... %}用來標(biāo)記語句，比如if語句，for語句等。{# ... #}用來寫注釋。
先來看看一個變量是怎么跑到頁面上去的
<body>
? ? {{ name }}
</body>
這里我們就在模板中聲明了一個變量他的名字叫name
那我們?nèi)绾伟堰@個變量的值傳遞過去呢?
在render_template函數(shù)后面?zhèn)鬟f參數(shù)
@app.route('/')
def hello_world():
? ? return render_template("index.html", name="萬能北極熊")
重啟服務(wù)器查看
很顯然,這個變量已經(jīng)成功的傳遞過去了
你也可以直接把對應(yīng)類型的數(shù)據(jù)寫到模板中
<body>
? ? {{ name }}<br>
? ? {{ 18 }} 歲<br>
? ? 坐標(biāo): {{ "山東省" }}<br>
? ? {{ ["甚","至","一","個","列","表"] }}<br>
</body>
我們再來看看其他語法是怎么使用的
{% ... %}
你可以在這里面寫if或者for語句
if
<body>
? ? {% if True %}
? ? ? ? {{ "真" }}
? ? {% endif %}
? ? <br/>
? ? {% if False %}
? ? ? ? {{ "假" }}
? ? {% endif %}
</body>
輸出結(jié)果
可以看到,當(dāng)if為真的時候就會執(zhí)行if和endif中間的語句
你也可以在中間寫else或者elif
?
for
for循環(huán)主要的作用就是渲染多個一樣格式的內(nèi)容,比如一個名字的列表
<body>
? ? <br/>
? ? {% for name in ["大熊","熊二","小熊"] %}
? ? ? ? {{ name }}<br>
? ? {% endfor %}
</body>
穿插在for和endfor中間的html標(biāo)簽也會被重復(fù)的渲染
{# ... #}
這個標(biāo)簽中間的內(nèi)容是注釋內(nèi)容,既不會被模板引擎所渲染也不會包含在html標(biāo)簽中
<body>
? ? <br/>
? ? {% for name in ["大熊","熊二","小熊"] %}
? ? ? ? {{ name }}<br>
? ? {% endfor %}
? ? <!-- HTML的注釋 -->
? ? {# 這寫的是注釋 #}
</body>
過濾器
為了方便對變量進(jìn)行處理，Jinja2 提供了一些過濾器，語法形式如下：
{{ ?變量|過濾器 ?}}
怎樣來使用過濾器?
<body>
? ? {{ ["熊大","熊二","吉吉","毛毛"] | length }}
</body>
這是一個取長度的過濾器,類似于len()函數(shù)
jinja2中都有哪些過濾器?
這里列舉了常用的一些過濾器
safe: ? ? ?渲染時值不轉(zhuǎn)義
capitialize: ? 把值的首字母轉(zhuǎn)換成大寫，其他子母轉(zhuǎn)換為小寫
lower: ? ?把值轉(zhuǎn)換成小寫形式
upper: ? ?把值轉(zhuǎn)換成大寫形式
title: ? ?把值中每個單詞的首字母都轉(zhuǎn)換成大寫
trim: ? ? ?把值的首尾空格去掉
striptags: ? ?渲染之前把值中所有的HTML標(biāo)簽都刪掉
join: ? ? ?拼接多個值為字符串
replace: ? ? ?替換字符串的值
round: ?默認(rèn)對數(shù)字進(jìn)行四舍五入，也可以用參數(shù)進(jìn)行控制
int: ? ? ? 把值轉(zhuǎn)換成整型
你也可以自定義一個過濾器,相關(guān)內(nèi)容可以自行查找資料
了解了這些基礎(chǔ)的內(nèi)容我們來做個小實例
模仿bilibi主頁上的個人信息卡片(的文字)
先來準(zhǔn)備前端頁面(奇丑無比)
<body>
? ? <p>
? ? ? ? {{ name }}
? ? </p>
? ? <p>
? ? ? ? 硬幣:{{ coin_num }}
? ? </p>
? ? <p>
? ? ? ? ?B幣:{{ B_coin_num }}
? ? </p>
? ? <p>
? ? ? ? 手機(jī)綁定狀態(tài): {% if phone %} {{ phone }} {% else %} {{ "未綁定手機(jī)" }} {% endif %}
? ? </p>
? ? <p>
? ? ? ? 郵箱綁定狀態(tài): {% if emall %} {{ emall }} {% else %} {{ "未綁定郵箱" }} {% endif %}
? ? </p>
? ? <p>
? ? ? ? 關(guān)注:{{ Subscribe_num }}
? ? </p>
? ? <p>
? ? ? ? 粉絲數(shù):{{ fans_num }}
? ? </p>
? ? <p>
? ? ? ? 動態(tài): {{ dynamic_num }}
? ? </p>
</body>
雖然稍微有些撿漏...
現(xiàn)在我們來模擬一些數(shù)據(jù)來傳入這個模板
from flask import Flask
from flask import render_template
app = Flask(__name__)
@app.route('/')
def hello_world():
? ? user = {
? ? ? ? "name": "萬能北極熊",
? ? ? ? "coin_num": 600,
? ? ? ? "B_coin_num": 0,
? ? ? ? "phone": None,
? ? ? ? "emall": "2960053329@qq.com",
? ? ? ? "Subscribe_num":140,
? ? ? ? "fans_num": 9999,
? ? ? ? 'dynamic_num': 255
? ? }
? ? return render_template("index.html",
? ? ? ? ? ? ? ? ? ? ? ? ? ?name=user.get("name"),
? ? ? ? ? ? ? ? ? ? ? ? ? ?coin_num=user.get("coin_num"),
? ? ? ? ? ? ? ? ? ? ? ? ? ?B_coin_num=user.get("B_coin_num"),
? ? ? ? ? ? ? ? ? ? ? ? ? ?phone=user.get("phone"),
? ? ? ? ? ? ? ? ? ? ? ? ? ?emall=user.get("emall"),
? ? ? ? ? ? ? ? ? ? ? ? ? ?Subscribe_num=user.get("Subscribe_num"),
? ? ? ? ? ? ? ? ? ? ? ? ? ?fans_num=user.get("fans_num"),
? ? ? ? ? ? ? ? ? ? ? ? ? ?dynamic_num=user.get("dynamic_num")
? ? ? ? ? ? ? ? ? ? ? ? ? ?)
if __name__ == '__main__':
? ? app.run()
這樣我們的數(shù)據(jù)就傳入模板了
將參數(shù)一個個傳遞進(jìn)去并不是一個聰明的做法,我們應(yīng)該傳入一個對象或者一個字典來統(tǒng)一調(diào)用數(shù)據(jù)
? ?return render_template("index.html", user=user)
<body>
? ? <p>
? ? ? ? {{ user.get("name") }}
? ? </p>
? ? <p>
? ? ? ? 硬幣:{{ user.get("coin_num") }}
? ? </p>
? ? <p>
? ? ? ? ?B幣:{{ user.get("B_coin_num") }}
? ? </p>
? ? <p>
? ? ? ? 手機(jī)綁定狀態(tài): {% if user.get("phone") %} {{ user.get("phone") }} {% else %} {{ "未綁定手機(jī)" }} {% endif %}
? ? </p>
? ? <p>
? ? ? ? 郵箱綁定狀態(tài): {% if user.get("emall") %} {{ user.get("emall") }} {% else %} {{ "未綁定郵箱" }} {% endif %}
? ? </p>
? ? <p>
? ? ? ? 關(guān)注:{{ user.get("Subscribe_num") }}
? ? </p>
? ? <p>
? ? ? ? 粉絲數(shù):{{ user.get("fans_num") }}
? ? </p>
? ? <p>
? ? ? ? 動態(tài): {{ user.get("dynamic_num") }}
? ? </p>
</body>
關(guān)于模板的使用還有很多很多的東西需要你來了解,這里我們就先介紹到這里,更多新奇的內(nèi)容還是要用心去發(fā)現(xiàn)多查閱資料
那現(xiàn)在,我們就先剎剎車休息一下消化一下內(nèi)容
(瘋狂暗示,暗示,暗示)
