如何在Python的Flask框架中使用模版的入門教程?
概述
如果你已經(jīng)閱讀過(guò)上一個(gè)章節(jié),那么你應(yīng)該已經(jīng)完成了充分的準(zhǔn)備工作并且創(chuàng)建了一個(gè)很簡(jiǎn)單的具有如下文件結(jié)構(gòu)的Web應(yīng)用:
microblog
|-flask文件夾
|-<一些虛擬環(huán)境的文件>
|-app文件夾
| |-static文件夾
| |-templates文件夾
| |-__init__.py文件
| |-views.py文件
|-tmp文件夾
|-run.py文件
以上給你介紹了在Python的Flask框架中使用模版的入門教程,希望對(duì)你有幫助。
我們?cè)诤竺娴恼鹿?jié)會(huì)不斷地從前一章節(jié)結(jié)束的地方繼續(xù)開(kāi)發(fā)我們的應(yīng)用,所以你要確保你的環(huán)境已經(jīng)正確安裝,并且你的應(yīng)用能夠正常運(yùn)行.
為什么我們需要使用模板系統(tǒng)
讓我們來(lái)考慮一下,我們接下來(lái)怎么樣擴(kuò)展我們的小程序.
我們要在微博應(yīng)用里邊實(shí)現(xiàn)一個(gè)非?;镜墓δ?在首頁(yè)上面顯示一個(gè)歡迎已登錄用戶的標(biāo)題.暫且忽略當(dāng)前應(yīng)用里邊沒(méi)有用戶的狀況,我將會(huì)在稍后解決這個(gè)問(wèn)題.
要顯示一個(gè)美觀大方的標(biāo)題,最簡(jiǎn)單的方法就是改變我們提供視圖的方式來(lái)顯示一些HTML代碼,不如這樣子:
from app import app
@app.route('/')
@app.route('/index')
def index():
user = { 'nickname': 'Miguel' } # fake user
return '''
<html>
<head>
<title>Home Page</title>
</head>
<body>
<h1>Hello, ''' + user['nickname'] + '''</h1>
</body>
</html>
現(xiàn)在,在你的瀏覽器里面刷新一下看看,是不是很爽?
因?yàn)槲覀冞@個(gè)小程序還支持用戶功能,所以咱用了一個(gè)用戶占位對(duì)象,通常它被親切的稱呼為假數(shù)據(jù)或測(cè)試數(shù)據(jù)。它可以讓我們關(guān)注程序中急需解決的部分。
爽完了,面對(duì)實(shí)際吧,我希望你會(huì)覺(jué)得上面這個(gè)混合著html代碼的小程序相當(dāng)惡心。想想看,如果你用一些動(dòng)態(tài)內(nèi)容生成的一個(gè)復(fù)雜的HTML頁(yè)面,并且想要在由這樣的程序組成的網(wǎng)站中改變一些頁(yè)面內(nèi)容,這將會(huì)一件非常蛋疼的事情。
模板系統(tǒng)拯救世界
如果保持業(yè)務(wù)邏輯和表現(xiàn)的分離,你的網(wǎng)站結(jié)構(gòu)將會(huì)組織的更好。不要不信,如果你用python完成了業(yè)務(wù)代碼,你甚至可以請(qǐng)一個(gè)網(wǎng)站設(shè)計(jì)師幫你完成剩下的部分。模板系統(tǒng)就是幫你實(shí)現(xiàn)業(yè)務(wù)和表現(xiàn)分離的。
讓我們完成第一個(gè)模板(fileapp/templates/index.html):
<html>
<head>
<title>{{title}} - microblog</title>
</head>
<body>
<h1>Hello, {{user.nickname}}!</h1>
</body>
</html>
如你所見(jiàn),我們只是寫了一個(gè)普通的HTML頁(yè)面,唯一跟HTML有區(qū)別的就是里面摻雜了一些以 {{ ... }} 組成的動(dòng)態(tài)內(nèi)容占位符。
現(xiàn)在讓我們來(lái)看看視圖函數(shù)中是如何處理這個(gè)模板的(fileapp/views.py):
from flask import render_template
from app import app
@app.route('/')
@app.route('/index')
def index():
user = { 'nickname': 'Miguel' } # fake user
return render_template("index.html",
title = 'Home',
user = user)
測(cè)試這段程序的重點(diǎn)就是看看模板系統(tǒng)是如何工作的。你可以比較瀏覽器中渲染后的html頁(yè)面源碼與模板文件源碼之間的區(qū)別。
在上面的程序中,我們從 Flask 框架 import 了一個(gè)叫 render_template 的新函數(shù),并用這個(gè)函數(shù)來(lái)渲染模板。并給這個(gè)函數(shù)賦予了模板文件名和一些變量作為參數(shù)。它將導(dǎo)入的變量替換掉模板中的變量占位符,并返回渲染后的模板。
讓我們了解的更深入點(diǎn)。在 Flask 底層,render_template 函數(shù)實(shí)際上是調(diào)用了 Flask 的一個(gè)組件: Jinja2 模板處理引擎。是 Jinjia2 用導(dǎo)入的變量替換掉了模板中對(duì)應(yīng)的 {{ ... }} 代碼塊。
模板中的流程控制
Jinja2 模板系統(tǒng)還支持流程控制語(yǔ)句,我們來(lái)嘗試一下在模板中添加一個(gè) if 流程控制語(yǔ)句 (fileapp/templates/index.html):
<html>
<head>
{% if title %}
<title>{{title}} - microblog</title>
{% else %}
<title>Welcome to microblog</title>
{% endif %}
</head>
<body>
<h1>Hello, {{user.nickname}}!</h1>
</body>
</html>
現(xiàn)在我們的模板文件有點(diǎn)智能了。如果我們?cè)谝晥D函數(shù)中忘了定義頁(yè)面標(biāo)題變量 title,它將會(huì)使用自已的標(biāo)題替代。把視圖函數(shù)中 render_template 里的 title 變量取消試試,看看這個(gè) if 流程語(yǔ)句是如何工作的。
模板中使用循環(huán)
也許用戶想在他的主頁(yè)上展示好友最近寫的文章,有點(diǎn)像人人,或者新浪微博那樣的好友動(dòng)態(tài),接下來(lái)我們就要看看如何來(lái)完成這個(gè)功能。
首先,創(chuàng)建用戶和文章 (fileapp/views.py):
def index():
user = { 'nickname': 'Miguel' } # fake user
posts = [ # fake array of posts
{
'author': { 'nickname': 'John' },
'body': 'Beautiful day in Portland!'
},
{
'author': { 'nickname': 'Susan' },
'body': 'The Avengers movie was so cool!'
}
]
return render_template("index.html",
title = 'Home',
user = user,
posts = posts)
用數(shù)組存儲(chǔ)用戶的文章,每一個(gè)數(shù)組元素都是一個(gè)字典,如上代碼所示,這個(gè)dict的key是author和body,用來(lái)存儲(chǔ)文章的作者和文章內(nèi)容。當(dāng)我們決定使用數(shù)據(jù)庫(kù)來(lái)存儲(chǔ)這些信息時(shí),這個(gè)字典的key可以隱射為表的一個(gè)字段,這里為了給大家演示模板的使用,沒(méi)有使用數(shù)據(jù)庫(kù)相關(guān)的技術(shù),簡(jiǎn)單地使用字典和數(shù)組模擬用戶和他的好友最近發(fā)表的文章。
我們的模板文件現(xiàn)在有了一個(gè)新問(wèn)題。我們剛剛創(chuàng)建了一個(gè)包含用戶文章的內(nèi)容數(shù)據(jù),這個(gè)數(shù)組可能包含任意數(shù)量的文章。怎樣才能讓模板根據(jù)這個(gè)數(shù)組的數(shù)量自動(dòng)渲染內(nèi)容。
要解決這個(gè)問(wèn)題,就需要一個(gè)新的流程控制語(yǔ)句:for循環(huán)。讓我們來(lái)把 for循環(huán)添加到模板文件 (fileapp/templates/index.html)
<html>
<head>
{% if title %}
<title>{{title}} - microblog</title>
{% else %}
<title>microblog</title>
{% endif %}
</head>
<body>
<h1>Hi, {{user.nickname}}!</h1>
{% for post in posts %}
<p>{{post.author.nickname}} says: <b>{{post.body}}</b></p>
{% endfor %}
</body>
</html>
很簡(jiǎn)單吧,你還可以在數(shù)組中添加更多的內(nèi)容看看效果。
模板繼承
接來(lái)下,我們需要給這個(gè)微博(microblog)添加一個(gè)導(dǎo)航菜單,里面包含 修改個(gè)人資料,退出登錄 等類似的鏈接。
直接在 index.html 模板文件中直接加入這個(gè)導(dǎo)航條也是可行的,但是當(dāng)我們有很多模板文件都包含這個(gè)導(dǎo)航條時(shí),就會(huì)陷入為了修改導(dǎo)航條的某個(gè)地方而不得不在多個(gè)文件中往返編輯的尷尬境地。當(dāng)包含這個(gè)導(dǎo)航條的文件越來(lái)越多時(shí),你想死的心就會(huì)有了。
我們可以使用 Jinja2 的模板繼承功能,它可以使我們把模板中一些公共的內(nèi)容組合在一起創(chuàng)建一個(gè)基礎(chǔ)模板,然后讓其它模板繼承這個(gè)基礎(chǔ)模板。
我們先來(lái)定義一個(gè)基礎(chǔ)模板,里面包含了導(dǎo)航條和那個(gè)最開(kāi)始寫的關(guān)于頁(yè)面標(biāo)題(title)的流程控制語(yǔ)句。(fileapp/templates/base.html):
<html>
<head>
{% if title %}
<title>{{title}} - microblog</title>
{% else %}
<title>microblog</title>
{% endif %}
</head>
<body>
<div>Microblog: <a href="/index">Home</a></div>
<hr>
{% block content %}{% endblock %}
</body>
</html>
在這個(gè)模板中,我們使用了 block 控制語(yǔ)句來(lái)定義繼承模板內(nèi)容的顯示位置。注意:這個(gè) block 語(yǔ)句中設(shè)置的名稱必須唯一。
接下來(lái)讓我們修改一下 index.html 模板,讓它繼承于剛剛添加的基礎(chǔ)模板 base.html (fileapp/templates/index.html):
{% extends "base.html" %}
{% block content %}
<h1>Hi, {{user.nickname}}!</h1>
{% for post in posts %}
<div><p>{{post.author.nickname}} says: <b>{{post.body}}</b></p></div>
{% endfor %}
{% endblock %}
基礎(chǔ)模板 base.html 幫我們搞定了頁(yè)面結(jié)構(gòu)和公共內(nèi)容,所以這個(gè) index.html 模板就成了這幅衰樣了。extends 語(yǔ)句使兩個(gè)模板關(guān)聯(lián)了起來(lái)。Jinja2 在渲染 index.html 模板時(shí),發(fā)現(xiàn) extends 語(yǔ)句,就會(huì)自動(dòng)先引入 base.html 基礎(chǔ)模板,并對(duì)兩個(gè)模板中名為 content 的 block 語(yǔ)句進(jìn)行匹配。Jinja2知道如何把兩個(gè)模板合并到一起。我們以后創(chuàng)建新的模板時(shí),同樣也會(huì)使用這種從基礎(chǔ)模板繼承的方法。
以上為你介紹了如何在Python的Flask框架中使用模版的入門教程,希望對(duì)你有幫助。
更多信息請(qǐng)查看IT技術(shù)專欄