在flask中可以像go和angular那樣使用頁面模版(template)，可以將html頁面顯示進行模版化，通過參數傳遞與頁面進行數據交互。
概要信息
事前準備：flask
|
1
2
3
4
5
6
7
|
liumiaocn:flask liumiao$ which flask/usr/local/bin/flaskliumiaocn:flask liumiao$ flask --versionflask 1.0.2python 2.7.10 (default, jul 15 2017, 17:16:57) [gcc 4.2.1 compatible apple llvm 9.0.0 (clang-900.0.31)]liumiaocn:flask liumiao$ |
代碼示例：嵌入式的html模版
像angular一樣，我們可以在flask中寫前端的頁面，python代碼中混雜著html代碼，在這里將前面的helloworld示例進行簡單的修改，將顯示的hello world加上的設置。
代碼示例
|
1
2
3
4
5
6
7
8
9
10
11
|
liumiaocn:flask liumiao$ cat flask_1.py #!/usr/bin/pythonfrom flask import flaskapp = flask(__name__)@app.route("/")def hello(): return "<h1>hello world!</h1>"if __name__ == "__main__": app.debug=true app.run(host='0.0.0.0',port=7000)liumiaocn:flask liumiao$ |
執行&確認
在helloworld示例中我們提到有兩種方式啟動flask的微服務進程，這里再添加一種，添加#!/usr/bin/python之后，同時對此文件添加可執行權限比如755，即可使用.啟動
|
1
2
3
4
5
6
7
8
9
10
11
|
liumiaocn:flask liumiao$ chmod 755 flask_1.py liumiaocn:flask liumiao$ ./flask_1.py * serving flask app "flask_1" (lazy loading) * environment: production warning: do not use the development server in a production environment. use a production wsgi server instead. * debug mode: on * running on http://0.0.0.0:7000/ (press ctrl+c to quit) * restarting with stat * debugger is active! * debugger pin: 131-533-062 |
通過curl進行結果確認：
|
1
2
|
liumiaocn:flask liumiao$ curl http://localhost:7000<h1>hello world!</h1>liumiaocn:flask liumiao$ |
頁面確認
代碼示例
上面的示例過于簡單，寫一個簡單的完整的頁面來確認一下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
liumiaocn:flask liumiao$ cat flask_1.py #!/usr/bin/pythonfrom flask import flaskapp = flask(__name__)@app.route("/")def hello(): return '<!doctype html> \<html> \<head> \<meta charset="utf-8"> \<title>hello</title> \</head> \<body>\<h1>hello world!</h1> \</body>\</html>'if __name__ == "__main__": app.debug=true app.run(host='0.0.0.0',port=7000)liumiaocn:flask liumiao$ |
執行&確認
通過curl可以確認頁面范圍信息
|
1
2
3
4
5
6
7
8
9
10
|
liumiaocn:flask liumiao$ ./flask_1.py * serving flask app "flask_1" (lazy loading) * environment: production warning: do not use the development server in a production environment. use a production wsgi server instead. * debug mode: on * running on http://0.0.0.0:7000/ (press ctrl+c to quit) * restarting with stat * debugger is active! * debugger pin: 131-533-062 |
也可以通過瀏覽器來確認title和頁面顯示
頁面模版
嵌在python的代碼中非常的麻煩，轉義的連接，以及源碼的查看都非常不方便。flask提供了jinja2的模版渲染，只需要引入render_template即可使用。
import render_template
為了使用這個功能，首先需要在程序中做如下import
from flask import render_template
準備頁面信息
比如將上文中嵌入的html頁面獨立成index.html，詳細信息如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
liumiaocn:flask liumiao$ ls templates/index.htmlliumiaocn:flask liumiao$ cat templates/index.html <!doctype html><html><head> <meta charset="utf-8"> <title>hello template</title></head><body> <h1>hello world!</h1></body></html>liumiaocn:flask liumiao$ |
注意事項：flask會在當前目錄的templates下搜索對應的模版文件，所以需要創建templates文件夾，然后將模版html文件放入其中。
頁面調用
在頁面上只需要調用render_template即可實現url與對應模版的關聯，
render_template(“index.html”)
詳細代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
|
liumiaocn:flask liumiao$ cat flask_2.py #!/usr/bin/pythonfrom flask import flaskfrom flask import render_templateapp = flask(__name__)@app.route("/")def hello(): return render_template("index.html")if __name__ == "__main__": app.debug=true app.run(host='0.0.0.0',port=7000)liumiaocn:flask liumiao$ |
執行&確認
|
1
2
3
4
5
6
7
8
9
10
|
liumiaocn:flask liumiao$ python flask_2.py * serving flask app "flask_2" (lazy loading) * environment: production warning: do not use the development server in a production environment. use a production wsgi server instead. * debug mode: on * running on http://0.0.0.0:7000/ (press ctrl+c to quit) * restarting with stat * debugger is active! * debugger pin: 131-533-062 |
使用curl可以看到詳細的html代碼，而且讀起來方便多了
|
1
2
3
4
5
6
7
8
9
10
11
|
liumiaocn:~ liumiao$ curl http://localhost:7000<!doctype html><html><head> <meta charset="utf-8"> <title>hello template</title></head><body> <h1>hello world!</h1></body></html>liumiaocn:~ liumiao$ |
也可以通過瀏覽器確認并查看源碼
小結
使用render_template，flask也可以像angular一樣非常方便的創建用于展示的模版視圖，我們已經說過render_template是基于jinja2的模版，在下一篇文章中將繼續介紹template的數據交互和控制方式。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對服務器之家的支持。如果你想了解更多相關內容請查看下面相關鏈接
原文鏈接：https://blog.csdn.net/liumiaocn/article/details/80722379
