我們之前的視圖函數,返回的都是簡單的'Hello Wolrd'
之類的字符串,怎么返回一個html呢?首先我們在templates文件夾建立一個html文件,內容隨便寫一點如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<body>
<h1>This is index page</h1>
</body>
</html>
我們可以使用Flask
對象app
的send_static_file
方法,使視圖函數返回一個靜態的html文件,但現在我們不使用這種方法,而是使用flask
的render_template
函數,它功能更強大。
從flask
中導入render_template
,整體代碼如下:
from flask import Flask, render_template
import config
app = Flask(__name__)
app.config.from_object(config)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run()
render_template
函數會自動在templates文件夾中找到對應的html,因此我們不用寫完整的html文件路徑。用瀏覽器訪問'/'
這個地址,顯示結果如下:
那么為何稱之為模板呢?因為render_template
不僅能渲染靜態的html文件,也能傳遞參數給html,使一個html模板根據參數的不同顯示不同的內容,這是因為flask使用了jinja2這個模板引擎。要使用模板,在render_template
參數中以key=value
形式傳入變量,在html中使用{{key}}
來顯示傳入的變量,例如:
# 視圖函數
@app.route('/')
def index():
return render_template('index.html', contents='This is index page')
# html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<body>
<h1>{{ contents }}</h1>
</body>
</html>
瀏覽器顯示的結果與上文是一樣的。我們還可以直接把一個類的實例傳遞過去,並在模板中訪問類的屬性,例如假設一個類對象obj
有a
和b
屬性,關鍵部分的代碼如下:
# 視圖函數中
return render_template('index.html', object=obj)
...
# html中
<p>a: {{ object.a }}</p>
<p>b: {{ object.b }}</p>
傳入一個字典也可以,並且在模板中既可以用dict[key]
,也可以用dict.key
。
使用過濾器,可以在html中對傳入的變量進行處理,其格式是{{ 變量 | 過濾器 }}
,例如將前文的{{ contents }}
修改為{{ contents | upper}}
,瀏覽器顯示的內容就變成了:
所以我們可以很容易就理解,過濾器其實就是以變量為參數的函數,返回處理后的結果,在后端一樣可以先用字符串對象的upper()
函數處理好再傳遞給模板,效果是完全一樣的。jinja2自帶了一些過濾器,例如length/reverse/lower
等等 ,並且我們也可以自己按照需求自定義過濾器,模板還支持{{ 變量 | 過濾器1 | 過濾器2 | ... }}
這樣的操作。想要深入了解的話,可以搜索jinja2過濾器去進一步學習。
模板中還可以使用if else
和for in
控制語句,與變量使用{{ }}
不同,控制語句要放在{% %}
里,例如前文的contents
傳入一個list:
contents=[i for i in range(10)]
html中代碼如下:
<h1>
{% for i in contents %}
{{ i }}{# 注意i也要用兩個大括號 #}
{% endfor %}
</h1>
使用for
遍歷contents
的內容,並用{{ i }}
顯示出來,同時還用{# #}
加了一個注釋,還要注意需要使用{% endfor %}
來提示循環區域的結束,因為html不像python那樣通過縮進來判斷循環的區域,if
也是同理。瀏覽器顯示結果:
最后for
和if
結合使用:
<h1>header</h1>
{% for i in contents %}
<p>
{% if i%2 == 0 %}
{{ i }}是偶數{# 注意i也要用兩個大括號 #}
{% else %}
{{ i }}是奇數
{% endif %}
</p>
{% endfor %}
結果如下(只是演示一下,不要吐槽排版和美觀):