前言
之前的簡單Flask例子中不恭，使用Flask顯示了一個最簡單的helloworld, 直接返回的是一個字符串怨酝。在實際的開發(fā)和應(yīng)用中顯然不能滿足需求您炉，實際的網(wǎng)頁都是由HTML+CSS+JavaScript組成驻粟， 因此Flask需要實際的渲染和生成一個HTML界面,在Flask中饭宾， HTML文件又稱為模板template批糟。
本節(jié)的內(nèi)容: 使用Flask顯示一個簡單的HTML界面.
測試環(huán)境
Ubuntu 20.04
python flask
vscode
關(guān)于Flask web開發(fā)中的術(shù)語簡介
剛剛接觸web開發(fā)之前，筆者對web中涉及的HTML/CSS/JS這些是一頭霧水看铆，分不清哪些是程序開發(fā)語言跃赚，哪些是開發(fā)框架。 經(jīng)過一段時間的學(xué)習(xí)性湿，淺談一下筆者對以下內(nèi)容在Flask中扮演角色的認(rèn)識:
| Item | 全稱 | 用途 | 運(yùn)行環(huán)境 |
|---|---|---|---|
| HTML | 超文本標(biāo)記語言 | 網(wǎng)頁內(nèi)容的顯示纬傲， 相當(dāng)于網(wǎng)頁的骨架 | 瀏覽器渲染 |
| CSS | 層疊樣式表 | 網(wǎng)頁的布局以及顯示格式，比如背景顏色肤频，對齊方式之類 | 瀏覽器渲染 |
| JavaScript | - 和Java沒關(guān)系 | HTML界面中嵌入的腳本程序叹括，用于網(wǎng)頁一些動態(tài)效果的控制 | 瀏覽器執(zhí)行，除了瀏覽器還可以使用nodejs執(zhí)行 |
| Python | 不用說了宵荒，大家都知道大蟒蛇 | web后臺汁雷，和數(shù)據(jù)庫打交道 | python解釋器， 通常使用conda環(huán)境 |
HTML和CSS不算是程序開發(fā)的語言报咳， JavsScript是程序開發(fā)語言侠讯， 類似于經(jīng)常使用的python/C++/Java一樣， JavaScript和Python感覺比較像暑刃，都是腳本語言厢漩。 由于Flask屬于Python web, 因此不會涉及太多的JavaScript。
Flask 渲染HTML模板涉及的內(nèi)容
-
render_template()函數(shù)
Flask中關(guān)于render_template函數(shù)的介紹:- template_name_or_list: 被渲染的模板的名稱岩臣，一般是待渲染的HTML文件的名稱
- context: key-val迭代器溜嗜， 傳入render_template()函數(shù)中的一些字典變量，比如：
render_template("index.html", param1=val_1, param2=val_2), 用于向html文件中傳入一些動態(tài)的變量
def render_template(template_name_or_list, **context):
"""Renders a template from the template folder with the given
context.
:param template_name_or_list: the name of the template to be
rendered, or an iterable with template names
the first one existing will be rendered
:param context: the variables that should be available in the
context of the template.
"""
-
url_for()函數(shù)
def url_for(endpoint, **values):
"""Generates a URL to the given endpoint with the method provided.
Variable arguments that are unknown to the target endpoint are appended
to the generated URL as query arguments. If the value of a query argument
is ``None``, the whole pair is skipped. In case blueprints are active
you can shortcut references to the same blueprint by prefixing the
local endpoint with a dot (``.``).
- Jinja2語法
Jinja2 是 Flask 框架的兩大核心(Jinja2 模板引擎和 Werkzeug WSGI 工具集)之一, Jinja2 是 Flask 框架內(nèi)置的模板語言架谎， 在安裝 Flask 框架時炸宵，就會默認(rèn)安裝上 Jinja2 模板引擎。
Jinja2用于flask中的html文件谷扣， jinja2支持一些python中的語法:
- for循環(huán)
- if土全， if-else
- import
- include
- val 變量顯示
- block 代碼塊
- extend 模板繼承
VSCode提供了對flask, Jinja2支持的插件:
測試工程
demo1 --- 使用HTML顯示一首詩
工程文件目錄組織
為了在Flask中顯示HTML, 需要添加以下文件:
static: 包含css和js文件夾， 分別存放css文件以及javascript代碼文件
templates: 存放HTML文件
代碼介紹
- app.py
需要在python flask中倒入函數(shù) ——render_template, render_template() 函數(shù)輸入為HTML文件，返回為包含HTML文件的響應(yīng)裹匙。
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
- index.html
為了使得顯示效果更好野哭， 在html的 head標(biāo)簽中引入了css文件， 這里使用了Flask提供的函數(shù)url_for()用于查找和定位css文件幻件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flask_demo</title>
<link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}">
</head>
<body>
<p id="content">
<b>將進(jìn)酒·君不見黃河之水天上來</b> <br> <br>
[唐] 李白 <br> <br>
君不見黃河之水天上來拨黔，奔流到海不復(fù)回。<br>
君不見高堂明鏡悲白發(fā)绰沥，朝如青絲暮成雪篱蝇。<br>
人生得意須盡歡，莫使金樽空對月徽曲。<br>
天生我材必有用零截，千金散盡還復(fù)來。<br>
烹羊宰牛且為樂秃臣，會須一飲三百杯涧衙。<br>
岑夫子，丹丘生奥此，將進(jìn)酒弧哎，杯莫停。<br>
與君歌一曲稚虎，請君為我傾耳聽撤嫩。<br>
鐘鼓饌玉不足貴，但愿長醉不復(fù)醒蠢终。<br>
古來圣賢皆寂寞序攘，惟有飲者留其名。<br>
陳王昔時宴平樂寻拂，斗酒十千恣歡謔程奠。<br>
主人何為言少錢，徑須沽取對君酌祭钉。<br>
五花馬瞄沙，千金裘，<br>
呼兒將出換美酒朴皆，與爾同銷萬古愁帕识。
</p>
</body>
</html>
- style.css文件
這個css很簡單， #{element}代表id選擇器(CSS,HTML內(nèi)容遂铡，不屬于flask)
#content {
text-align: center;
}
運(yùn)行： flask run
運(yùn)行效果:
在瀏覽器上， 按F12 進(jìn)入開發(fā)模式晶姊，觀察渲染之后的HTML文件:
