一、Flask初識
首先,要看你學沒學過Django 如果學過Django 的同學,請從頭看到尾,如果沒有學過Django的同學,並且不想學習Django的同學,輕饒過第一部分
三大主流Web框架對比
1.Django 主要特點是大而全,集成了很多組件,例如: Models Admin Form 等等, 不管你用得到用不到,反正它全都有,屬於全能型框架
2.Tornado 主要特點是原生異步非阻塞,在IO密集型應用和多任務處理上占據絕對性的優勢,屬於專注型框架
3.Flask 主要特點小而輕,原生組件幾乎為0, 三方提供的組件請參考Django 非常全面,屬於短小精悍型框架
Django 通常用於大型Web應用由於內置組件足夠強大所以使用Django開發可以一氣呵成
Tornado 通常用於API后端應用,游戲服務后台,其內部實現的異步非阻塞真是穩得一批
Flask 通常應用於小型應用和快速構建應用,其強大的三方庫,足以支撐一個大型的Web應用
Django 優點是大而全,缺點也就暴露出來了,這么多的資源一次性全部加載,肯定會造成一部分的資源浪費
Tornado 優點是異步,缺點是干凈,連個Session都不支持
Flask 優點是精悍簡單,缺點是你不會!哈哈哈哈哈哈!
總結：
Flask: 1.輕，短小精悍 2.快，三行代碼開啟服務 缺點： 1.組件大部分來源於三方，flask-admin，flask-session 2.flask大版本更新，組件更新速度慢 Django: 1.大而全，admin，models，Form，中間件，session 2.一個框架解決所有問題 缺點： 1.一旦啟動，所有資源全部加載，用不到的，浪費了 2.太大了，結構復雜 3.所有的組件，全部由Django自身控制 Tornado： 1.原生websocket 2.異步io 3.非阻塞 缺點： 三方及原生組件幾乎為0
Flask 的安裝與HelloWorld
Flask的安裝特別難,但是以一個多年奮斗在程序界的我,肯定會找出一個最簡單的方法教你們,具體操作如下:
pip install Flask
別問我還有沒有復雜的方法,沒有!
Flask安裝完成了,下面使用Flask走一遍儀式:
三行Flask
from flask import Flask app = Flask(__name__) app.run()
執行輸出：
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
默認端口是5000，訪問頁面：
因為沒有定義路由，所以報404。但是服務是起來了！
六行Flask
from flask import Flask app = Flask(__name__) @app.route("/") def index(): return "HelloWorld!!" app.run()
重啟程序，刷新頁面
實現了Flask 的第一個HelloWorld程序,恭喜恭喜!
解讀一下代碼
from flask import Flask # 導入Flask類 app = Flask(__name__) # 實例化Flask對象app @app.route("/") # app中的route裝飾器 def index(): # 視圖函數 return "HelloWorld!!" # 返回響應體 # 監聽地址為0.0.0.0,表示服務器的所有網卡 # 5000是監聽端口 # debug=True表示啟動debug模式。當代碼有改動時,Flask會自動加載,無序重啟！ app.run("0.0.0.0",5000,debug=True) # 啟動Flask服務
注意：默認的debug模式是關閉的。如有有代碼改動，需要重啟flask才行生效！
但是開啟debug模式，代碼一有改動，會立刻加載，無需重啟！
還有一點，app = Flask(__name__)。這里面的__name__表示 標識模塊的名字的一個系統變量
還可以是 app= Flask("fdsafejisi")，這樣運行也沒有問題。那么為什么要用__name__呢？
后面學習到藍圖會用到！
啟動了Flask,得到了返回值,打印在頁面上
本文參考：
https://www.cnblogs.com/DragonFire/p/9254637.html
二、Render Redirect HttpResponse
HTTPResponse
@app.route("/") # app中的route裝飾器 def index(): # 視圖函數 return "HelloWorld!!" # HttpResponse
在Flask 中的HttpResponse 在我們看來其實就是直接返回字符串
Redirect
from flask import Flask # 導入Flask類 from flask import redirect # 導入flask中的redirect app = Flask(__name__) # app中的route裝飾器,用來指定視圖函數的URL地址 @app.route("/redi") def redi(): # 視圖函數 return redirect("/") # redirect跳轉至"/" @app.route("/") def index(): # 視圖函數 return "hello" if __name__ == '__main__': app.run("0.0.0.0", 5000, debug=True)
每當訪問"/redi"這個地址的時候,視圖函數redi會觸發redirect("/") 跳轉到url地址: "/" 並會觸發"/"對應的視圖函數index()
訪問url: http://127.0.0.1:5000/redi
查看網頁工具，查看網絡。它經歷了2次請求！
render (render_template)
編輯文件demo.py，代碼如下
from flask import Flask # 導入Flask類 from flask import render_template # 導入flask中的render_template app = Flask(__name__) @app.route("/home") def home(): # 視圖函數 # 渲染html模板,返回html頁面 return render_template("home.html") if __name__ == '__main__': app.run("0.0.0.0", 5000, debug=True)
在當前py文件目錄中創建templates，在此目錄下創建文件home.hml
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>Flask</h1> </body> </html>
重啟flask，訪問home頁面，效果如下：
目錄結果如下：
./
├── demo.py
└── templates
└── home.html
HTML模板渲染是每個Web框架中都必須有的,至於render_template的具體用法,留個懸念,往后看
注意: 如果要使用 render_template 返回渲染的模板,請在項目的主目錄中加入一個目錄 templates
否則可能會有一個Jinja2的異常哦
遇到上述的問題,基本上就是你的template的路徑問題
為什么要一定要創建templates文件夾呢？叫abc，行不行呢？不行！
看這一行代碼
app = Flask(__name__)
使用Ctrl+鼠標左鍵，點擊Falsk，查看源碼
def __init__( self, import_name, static_url_path=None, static_folder='static', static_host=None, host_matching=False, subdomain_matching=False, template_folder='templates', instance_path=None, instance_relative_config=False, root_path=None ):
看到template_folder變量沒有？文件夾必須叫這個名字！
指定templates路徑
注意：我的flask程序，是直接用新建py文件寫的。所以這一行代碼，會飄黃
return render_template("home.html")
怎么解決呢？很簡單！執行目錄就好了
右鍵templates文件夾-->Mark Directory as-->Template Folder
選擇yes
選擇Jinja2，Flask中默認的模板語言是Jinja2
django的模板語言為django，其實django底層也是用Jinja2開發的。其他模板語言同理！
后續會講到flaks模板語法，你會發現，和django幾乎是一樣的！
注意：如果直接使用Pycharm創建Flask項目，是不存在這個問題的！
前期學習Flask，要先自己手動折騰，后期就可以用Pycharm創建了！
本文參考鏈接：
https://www.cnblogs.com/DragonFire/p/9255637.html
三、request
每個框架中都有處理請求的機制(request),但是每個框架的處理方式和機制是不同的
為了了解Flask的request中都有什么東西,首先我們要寫一個前后端的交互
基於HTML + Flask 寫一段前后端的交互
先寫一段兒HTML form表單中提交方式是post action地址是 /req
在templates目錄創建文件login.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>歡迎登陸</h1> <form action="/req" method="post"> <p> <input type="text" name="user" placeholder="請輸入用戶名"> </p> <p> <input type="password" name="pwd" placeholder="請輸入密碼"> </p> <input type="submit" value="提交"> </form> </body> </html>
寫好一個標准 form 表單,一點提交,搜就向后端提交一個POST請求過去了
后端的接收方式就 666 了
首先要從 flask 包中導入 request 模塊 , 至於為什么要導入 request 呢? 這里不做解釋,暫時你就知道 request 如果要用,需要導入
demo.py
from flask import Flask # 導入Flask類 from flask import render_template # 導入flask中的render_template from flask import request # 導入flask中的request app = Flask(__name__) @app.route("/login") def login(): return render_template("login.html") @app.route("/req") def home(): # 視圖函數 print(request) return "ok" if __name__ == '__main__': app.run("0.0.0.0", 5000, debug=True)
重啟flask，訪問登錄頁面
提示之后，報錯！提示請求方式不被允許！
methods
為什么呢？因為默認路由只允許GET訪問。那么需要加一個參數methods，允許POST訪問
from flask import Flask # 導入Flask類 from flask import render_template # 導入flask中的render_template from flask import request # 導入flask中的request app = Flask(__name__) @app.route("/login") def login(): return render_template("login.html") @app.route("/req",methods=["POST"]) # 只允許POST def home(): # 視圖函數 print(request) # request對象 print(request.method) # POST看來可以使用這種方式來驗證請求方式 # ImmutableMultiDict([('user', 'xiao'), ('pwd', '123')]) print(request.form) # ImmutableMultiDict 它看起來像是Dict,使用字典方式取值 print(request.form["user"]) # xiao print(request.form.get("pwd")) # 123 # 字典迭代器對象,keys表示獲取所有值 print(request.form.keys()) # 既然是迭代器,就可以使用for循環了 for i in request.form.keys(): print(i) return "ok" if __name__ == '__main__': app.run("0.0.0.0", 5000, debug=True)
重新提交一次，就可以了！
查看Pycharm控制台輸出：
<Request 'http://127.0.0.1:5000/req' [POST]> POST ImmutableMultiDict([('user', 'xiao'), ('pwd', '123')]) xiao 123 <dict_keyiterator object at 0x0000027BF603FAE8> user pwd
解釋一個 @app.route("/req",methods=["POST"]) :
methods=["POST"] 代表這個url地址只允許 POST 請求,是個列表也就是意味着可以允許多重請求方式,例如GET之類的
request.method
1.request.method 之 肯定知道前端用什么方式提交的
Flask 的 request 中給我們提供了一個 method 屬性里面保存的就是前端的請求的方式
print(request.method) # POST 看來可以使用這種方式來驗證請求方式
request.form
2.request.form 之 拿他來舉例的話再好不過了
Form表單中傳遞過來的值 使用 request.form 中拿到
print(request.form) # ImmutableMultiDict([('user', 'xiao'), ('pwd', '123')]) # ImmutableMultiDict 它看起來像是的Dict 就用Dict的方法取值試一下吧 print(request.form["user"]) # xiao print(request.form.get("pwd")) # 123 # 看來全部才對了, ImmutableMultiDict 似乎就是個字典,再來玩一玩它 print(list(request.form.keys())) # ['user', 'pwd'] 看來是又才對了 #如果以上所有的方法你都覺得用的不爽的話 req_dict = dict(request.form) print(req_dict) # 如果你覺得用字典更爽的話,也可以轉成字典操作(這里有坑)
request.args
3.request.args 之 你能看見的Url參數全在里面
request.args 中保存的是url中傳遞的參數
先把后端請求代碼改動一下，允許POST和GET
from flask import Flask # 導入Flask類 from flask import render_template # 導入flask中的render_template from flask import request # 導入flask中的request app = Flask(__name__) @app.route("/login") def login(): return render_template("login.html") @app.route("/req",methods=["POST","GET"]) # 只允許POST和GET def home(): # 視圖函數 print(request.args) # ImmutableMultiDict([('id', '1'), ('age', '20')]) print(request.args["id"]) # 1 print(request.args.get("age")) # 20 print(list(request.args.keys())) # ['id', 'age'] print(list(request.args.values())) # ['1', '20'] req_dict = dict(request.args) # {'id': ['1'], 'age': ['20']} print(req_dict) return "ok" if __name__ == '__main__': app.run("0.0.0.0", 5000, debug=True)
然后使用URL地址直接傳遞參數
http://127.0.0.1:5000/req?id=1&age=20
然后會在控制台中看到，ImmutableMultiDict
ImmutableMultiDict([('id', '1'), ('age', '20')]) 1 20 ['id', 'age'] ['1', '20'] {'id': ['1'], 'age': ['20']}
request.args 與 request.form 的區別就是:
request.args 是獲取url中的參數
request.form 是獲取form表單中的參數
request.values
4.request.values 之 只要是個參數我都要
改動一下前端代碼:
<form action="/req?id=1&age=20" method="post">
完整代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>歡迎登陸</h1> <form action="/req?id=1&age=20" method="post"> <p> <input type="text" name="user" placeholder="請輸入用戶名"> </p> <p> <input type="password" name="pwd" placeholder="請輸入密碼"> </p> <input type="submit" value="提交"> </form> </body> </html>
改動后端代碼：
from flask import Flask # 導入Flask類 from flask import render_template # 導入flask中的render_template from flask import request # 導入flask中的request app = Flask(__name__) @app.route("/login") def login(): return render_template("login.html") @app.route("/req",methods=["POST","GET"]) # 只允許POST和GET def home(): # 視圖函數 print( request.values) # CombinedMultiDict([ImmutableMultiDict([('id', '1'), ('age', '20')]), ImmutableMultiDict([('user', 'xiao'), ('pwd', '123')])]) print(request.values.get("id")) # 1 print(request.values["user"]) # Oldboy # 這回喜歡直接操作字典的小伙伴們有驚喜了! to_dict() 方法可以直接將我們的參數全部轉為字典形式 print(request.values.to_dict()) # {'user': 'xiao', 'pwd': '123', 'id': '1', 'age': '20'} return "ok" if __name__ == '__main__': app.run("0.0.0.0", 5000, debug=True)
這是讓我們在使用form表單提交的同時使用url參數提交
訪問登錄頁面，點擊提交，查看Pycharm控制台輸出：
CombinedMultiDict([ImmutableMultiDict([('id', '1'), ('age', '20')]), ImmutableMultiDict([('user', 'xiao'), ('pwd', '123')])]) 1 xiao {'user': 'xiao', 'pwd': '123', 'id': '1', 'age': '20'}
form表單的坑
注意這里的坑來啦! 坑來啦!
如果url和form中的Key重名的話,form中的同名的key中value會被url中的value覆蓋
http://127.0.0.1:5000/req?id=1&user=20
修改login.html
<form action="/req?id=1&user=20" method="post">
完整代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>歡迎登陸</h1> <form action="/req?id=1&user=20" method="post"> <p> <input type="text" name="user" placeholder="請輸入用戶名"> </p> <p> <input type="password" name="pwd" placeholder="請輸入密碼"> </p> <input type="submit" value="提交"> </form> </body> </html>
重新訪問登錄頁面，再次提交。
查看Pycharm控制台輸出：
CombinedMultiDict([ImmutableMultiDict([('id', '1'), ('user', '20')]), ImmutableMultiDict([('user', 'xiao'), ('pwd', '123')])]) 1 20 {'user': '20', 'pwd': '123', 'id': '1'}
發現user變成了20 ，咦？我明明輸入的是xiao啊
如果url和form中的Key重名的話,form中的同名的key中value會被url中的value覆蓋
request.cookies
5.request.cookies 之 存在瀏覽器端的字符串兒也會一起帶過來
前提是你要開啟瀏覽器的 cookies
request.cookies 是將cookies中信息讀取出來
修改demo.py中的home視圖函數
def home(): # 視圖函數 print(request.cookies) return "ok"
重新登錄一次，查看Pycharm控制台輸出：
{'Hm_lvt_080836300300be57b7f34f4b3e97d911': '1531653977', 'csrftoken': 'nO0pRJxevEVwRpCLzbEpNSAV4GdzO4aXJiE40AHopAkW0xkpzRE7p6gS2BngA4CA'}
request.headers
6.request.headers 之 請求頭中的秘密
用來獲取本次請求的請求頭
修改demo.py中的home視圖函數
def home(): # 視圖函數 print(request.headers) return "ok"
重新登錄一次，查看Pycharm控制台輸出：
Host: 127.0.0.1:5000 Connection: keep-alive Content-Length: 17 Cache-Control: max-age=0 Origin: http://127.0.0.1:5000 Upgrade-Insecure-Requests: 1 Content-Type: application/x-www-form-urlencoded User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.81 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 Referer: http://127.0.0.1:5000/login Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.9 Cookie: Hm_lvt_080836300300be57b7f34f4b3e97d911=1531653977; csrftoken=nO0pRJxevEVwRpCLzbEpNSAV4GdzO4aXJiE40AHopAkW0xkpzRE7p6gS2BngA4CA
request.data
7.request.data 之 如果處理不了的就變成字符串兒存在data里面
你一定要知道 request 是基於 mimetype 進行處理的
mimetype的類型 以及 字符串兒 : http://www.w3school.com.cn/media/media_mimeref.asp
如果不屬於上述類型的描述,request就會將無法處理的參數轉為Json存入到 data 中
其實我們可以將 request.data , json.loads 同樣可以拿到里面的參數
修改demo.py中的home視圖函數
def home(): # 視圖函數
print(request.data)
return "ok"
重新登錄一次，查看Pycharm控制台輸出：
b''
為什么是空的呢？注意：request處理不了的就變成字符串兒存在data里面！
因為它能處理，所以才是空的！
request.files
8.request.files 之 給我一個文件我幫你保管
如果遇到文件上傳的話,request.files 里面存的是你上傳的文件,但是 Flask 在這個文件的操作中加了一定的封裝,讓操作變得極為簡單
首先改下前端代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h4>歡迎登陸</h4> <form action="/req" method="post" enctype="multipart/form-data"> <p> <input type="file" name="file"> </p> <input type="submit" value="提交"> </form> </body> </html>
再改后端代碼：
from flask import Flask # 導入Flask類 from flask import render_template # 導入flask中的render_template from flask import request # 導入flask中的request app = Flask(__name__) @app.route("/login") def login(): return render_template("login.html") @app.route("/req",methods=["POST","GET"]) # 只允許POST和GET def home(): # 視圖函數 print(request.files) # ImmutableMultiDict([('file', <FileStorage: 'abc.txt' ('text/plain')>)]) print(request.files["file"]) # <FileStorage: 'abc.txt' ('text/plain')> my_file = request.files["file"] my_file.save("123.txt") # 保存文件,里面可以寫完整路徑+文件名 return "ok" if __name__ == '__main__': app.run("0.0.0.0", 5000, debug=True)
訪問登錄頁面
上傳一個文件，比如是abc.txt
點擊提交，效果如下：
查看Pycharm控制台輸出：
ImmutableMultiDict([('file', <FileStorage: 'abc.txt' ('text/plain')>)]) <FileStorage: 'abc.txt' ('text/plain')>
這樣我們就成功的保存了一個名叫 "123.txt" 的文件了,操作還是很簡單的。保存目錄為當前py文件目錄！
注意：前端頁面必須設置enctype="multipart/form-data"，否則提交時，會報錯
request.獲取各種路徑
9. request.獲取各種路徑 之 這些方法沒必要記,但是要知道它存在
修改后端代碼
from flask import Flask # 導入Flask類 from flask import render_template # 導入flask中的render_template from flask import request # 導入flask中的request app = Flask(__name__) @app.route("/login") def login(): return render_template("login.html") @app.route("/req",methods=["POST","GET"]) # 只允許POST和GET def home(): # 視圖函數 # 獲取當前的url路徑 print(request.path) # /req # 當前url路徑的上一級路徑 print(request.script_root) # # 當前url的全部路徑 print(request.url) # http://127.0.0.1:5000/req # 當前url的路徑的上一級全部路徑 print(request.url_root) # http://127.0.0.1:5000/ return "ok" if __name__ == '__main__': app.run("0.0.0.0", 5000, debug=True)
直接訪問頁面
查看Pycharm控制台輸出：
/req http://127.0.0.1:5000/req http://127.0.0.1:5000/
request.json
10. request.json 之 前提你得告訴是json
如果在請求中寫入了 "application/json" 使用 request.json 則返回json解析數據, 否則返回 None
修改后端代碼：
from flask import Flask # 導入Flask類 from flask import render_template # 導入flask中的render_template from flask import request # 導入flask中的request app = Flask(__name__) @app.route("/login") def login(): return render_template("login.html") @app.route("/req",methods=["POST","GET"]) # 只允許POST和GET def home(): # 視圖函數 # 獲取json數據 print(request.json ) return "ok" if __name__ == '__main__': app.run("0.0.0.0", 5000, debug=True)
使用postman發送一個json數據
查看返回值
查看Pycharm控制台輸出：
{'id': 1}
本文參考鏈接：
https://www.cnblogs.com/DragonFire/p/9259395.html
四、模板語言 Jinja2
Jinja2
是時候開始寫個前端了,Flask中默認的模板語言是Jinja2
現在我們來一步一步的學習一下 Jinja2 捎帶手把 render_template 中留下的疑問解決一下
首先我們要在后端定義幾個字符串,用於傳遞到前端
STUDENT = {'name': '韓雪', 'age': 24, 'gender': '女'}
STUDENT_LIST = [
{'name': '韓雪', 'age': 24, 'gender': '女'},
{'name': '舒暢', 'age': 23, 'gender': '女'},
{'name': '唐嫣', 'age': 25, 'gender': '女'}
]
STUDENT_DICT = {
1: {'name': '韓雪', 'age': 24, 'gender': '女'},
2: {'name': '舒暢', 'age': 23, 'gender': '女'},
3: {'name': '唐嫣', 'age': 25, 'gender': '女'},
}
但是前提我們要知道Jinja2模板中的流程控制:
for
Jinja2模板語言中的 for
{% for foo in g %}
{{ foo }}
{% endfor %}
if
Jinja2模板語言中的 if
{% if g %}
{% elif g %}
{% else %}
{% endif %}
接下來,我們對這幾種情況分別進行傳遞,並在前端顯示成表格
字典
1. 使用STUDENT字典傳遞至前端
后端demo.py
from flask import Flask # 導入Flask類 from flask import render_template # 導入flask中的render_template from flask import request # 導入flask中的request app = Flask(__name__) STUDENT = {'name': '韓雪', 'age': 24, 'gender': '女'} STUDENT_LIST = [ {'name': '韓雪', 'age': 24, 'gender': '女'}, {'name': '舒暢', 'age': 23, 'gender': '女'}, {'name': '唐嫣', 'age': 25, 'gender': '女'} ] STUDENT_DICT = { 1: {'name': '韓雪', 'age': 24, 'gender': '女'}, 2: {'name': '舒暢', 'age': 23, 'gender': '女'}, 3: {'name': '唐嫣', 'age': 25, 'gender': '女'}, } @app.route("/student") def student(): return render_template("student.html", student=STUDENT) if __name__ == '__main__': app.run("0.0.0.0", 5000, debug=True)
前端student.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h3>學生列表</h3> <div>{{ student }}</div> <table border="1px"> <tr> <td>{{ student.name }}</td> <td>{{ student["age"] }}</td> <td>{{ student.get("gender") }}</td> </tr> </table> </body> </html>
重新flask，訪問頁面
從這個例子中,可以看出來,字典傳入前端Jinja2 模板語言中的取值操作, 與Python中的Dict操作極為相似,並且多了一個student.name的對象操作
列表
2. STUDENT_LIST 列表傳入前端Jinja2 模板的操作:
后端：
from flask import Flask # 導入Flask類 from flask import render_template # 導入flask中的render_template from flask import request # 導入flask中的request app = Flask(__name__) STUDENT = {'name': '韓雪', 'age': 24, 'gender': '女'} STUDENT_LIST = [ {'name': '韓雪', 'age': 24, 'gender': '女'}, {'name': '舒暢', 'age': 23, 'gender': '女'}, {'name': '唐嫣', 'age': 25, 'gender': '女'} ] STUDENT_DICT = { 1: {'name': '韓雪', 'age': 24, 'gender': '女'}, 2: {'name': '舒暢', 'age': 23, 'gender': '女'}, 3: {'name': '唐嫣', 'age': 25, 'gender': '女'}, } @app.route("/student_list") def student_list(): return render_template("student.html", student=STUDENT_LIST) if __name__ == '__main__': app.run("0.0.0.0", 5000, debug=True)
前端：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h3>學生列表</h3> <div>{{ student }}</div> <table border="1px"> {% for foo in student %} <tr> <td>{{ foo }}</td> <td>{{ foo.name }}</td> <td>{{ foo.get("age") }}</td> <td>{{ foo["gender"] }}</td> </tr> {% endfor %} </table> </body> </html>
訪問頁面，注意：路徑改了，效果如下：
這里我們可以看出，如果是需要循環遍歷的話,Jinja2 給我們的方案是
{% for foo in student %}
<tr>
<td>{{ foo }}</td>
</tr>
{% endfor %}
修改前端：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h3>學生列表</h3> <div>{{ student }}</div> <table border="1px"> {% for foo in student %} <tr> <td>{{ foo }}</td> </tr> {% endfor %} </table> </body> </html>
訪問頁面，注意：路徑改了，效果如下：
大字典
3.STUDENT_DICT 大字典傳入前端 Jinja2 模板
后端：
from flask import Flask # 導入Flask類 from flask import render_template # 導入flask中的render_template from flask import request # 導入flask中的request app = Flask(__name__) STUDENT = {'name': '韓雪', 'age': 24, 'gender': '女'} STUDENT_LIST = [ {'name': '韓雪', 'age': 24, 'gender': '女'}, {'name': '舒暢', 'age': 23, 'gender': '女'}, {'name': '唐嫣', 'age': 25, 'gender': '女'} ] STUDENT_DICT = { 1: {'name': '韓雪', 'age': 24, 'gender': '女'}, 2: {'name': '舒暢', 'age': 23, 'gender': '女'}, 3: {'name': '唐嫣', 'age': 25, 'gender': '女'}, } @app.route("/student_dict") def student_dict(): return render_template("student.html", student=STUDENT_DICT) if __name__ == '__main__': app.run("0.0.0.0", 5000, debug=True)
前端：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h3>學生列表</h3> <div>{{ student }}</div> <table border="1px"> {% for foo in student %} <tr> <td>{{ foo }}</td> <td>{{ student.get(foo).name }}</td> <td>{{ student[foo].get("age") }}</td> <td>{{ student[foo]["gender"] }}</td> </tr> {% endfor %} </table> </body> </html>
在遍歷字典的時候,foo 其實是相當於拿出了字典中的Key
訪問頁面，注意：路徑改了，效果如下：
數據集合
4.結合所有的字符串兒全部專遞前端Jinja2 模板
后端：
from flask import Flask # 導入Flask類 from flask import render_template # 導入flask中的render_template from flask import request # 導入flask中的request app = Flask(__name__) STUDENT = {'name': '韓雪', 'age': 24, 'gender': '女'} STUDENT_LIST = [ {'name': '韓雪', 'age': 24, 'gender': '女'}, {'name': '舒暢', 'age': 23, 'gender': '女'}, {'name': '唐嫣', 'age': 25, 'gender': '女'} ] STUDENT_DICT = { 1: {'name': '韓雪', 'age': 24, 'gender': '女'}, 2: {'name': '舒暢', 'age': 23, 'gender': '女'}, 3: {'name': '唐嫣', 'age': 25, 'gender': '女'}, } @app.route("/allstudent") def allstudent(): return render_template("student.html", student=STUDENT, student_list=STUDENT_LIST, student_dict=STUDENT_DICT) if __name__ == '__main__': app.run("0.0.0.0", 5000, debug=True)
前端：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h3>學生列表</h3> <div> _____________________________________</div> Welcome to : student <div>{{ student }}</div> <table border="1px"> <tr> <td>{{ student.name }}</td> <td>{{ student["age"] }}</td> <td>{{ student.get("gender") }}</td> </tr> </table> <div> _____________________________________</div> Welcome to : student_list <div>{{ student_list }}</div> <table border="1xp"> {% for foo in student_list %} <tr> <td>{{ foo }}</td> <td>{{ foo.name }}</td> <td>{{ foo.get("age") }}</td> <td>{{ foo["gender"] }}</td> </tr> {% endfor %} </table> <div> _____________________________________</div> Welcome to : student_dict <div>{{ student_dict }}</div> <table border="1xp"> {% for foo in student_dict %} <tr> <td>{{ foo }}</td> <td>{{ student_dict.get(foo).name }}</td> <td>{{ student_dict[foo].get("age") }}</td> <td>{{ student_dict[foo]["gender"] }}</td> </tr> {% endfor %} </table> </body> </html>
訪問頁面，注意：路徑改了，效果如下：
這里可以看出來,render_template中可以傳遞多個關鍵字
**{}字典
5.利用 **{}字典的方式傳遞參數
前端不變(標題4的前端代碼)
后端：
from flask import Flask # 導入Flask類 from flask import render_template # 導入flask中的render_template from flask import request # 導入flask中的request app = Flask(__name__) STUDENT = {'name': '韓雪', 'age': 24, 'gender': '女'} STUDENT_LIST = [ {'name': '韓雪', 'age': 24, 'gender': '女'}, {'name': '舒暢', 'age': 23, 'gender': '女'}, {'name': '唐嫣', 'age': 25, 'gender': '女'} ] STUDENT_DICT = { 1: {'name': '韓雪', 'age': 24, 'gender': '女'}, 2: {'name': '舒暢', 'age': 23, 'gender': '女'}, 3: {'name': '唐嫣', 'age': 25, 'gender': '女'}, } @app.route("/allstudent") def allstudent(): return render_template("student.html", **{"student": STUDENT, "student_list": STUDENT_LIST, "student_dict": STUDENT_DICT}) if __name__ == '__main__': app.run("0.0.0.0", 5000, debug=True)
刷新頁面，效果同上！
Jinja2 的高階用法
Jinja2 模板語言為我們提供了很多功能接下來看一下它有什么高級的用法
safe
6.1. safe : 此時你與HTML只差一個 safe
后端代碼：
from flask import Flask # 導入Flask類 from flask import render_template # 導入flask中的render_template app = Flask(__name__) @app.route("/") def index(): tag = "<input type='text' name='user' value='xiao'>" return render_template("index.html",tag=tag) if __name__ == '__main__': app.run("0.0.0.0", 5000, debug=True)
在templates目錄下新建文件index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {{ tag }} </body> </html>
訪問首頁，效果如下：
似乎和我們想要結果不太一樣,有兩種解決方案,
第一種,從前端入手
前端代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {{ tag|safe }} </body> </html>
刷新頁面，效果如下：
還有一種方式是從后端入手
后端代碼：
from flask import Flask # 導入Flask類 from flask import render_template # 導入flask中的render_template from flask import Markup # 導入 flask 中的 Markup 模塊 app = Flask(__name__) @app.route("/") def index(): tag = "<input type='text' name='user' value='xiao'>" # Markup幫助咱們在HTML的標簽上做了一層封裝,讓Jinja2模板語言知道這是一個安全的HTML標簽 markup_tag = Markup(tag) # <input type='text' name='user' value='DragonFire'> <class 'markupsafe.Markup'> print(markup_tag,type(markup_tag)) return render_template("index.html", tag=markup_tag) if __name__ == '__main__': app.run("0.0.0.0", 5000, debug=True)
修改前端，還原代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {{ tag }} </body> </html>
刷新頁面，效果同上！
執行Python函數
模板中執行函數，首先在文件中定義一個函數
后端代碼：
from flask import Flask # 導入Flask類 from flask import render_template # 導入flask中的render_template app = Flask(__name__) #定義一個函數,把它傳遞給前端 def a_b_sum(a,b): return a+b @app.route("/") def index(): return render_template("index.html", tag=a_b_sum) if __name__ == '__main__': app.run("0.0.0.0", 5000, debug=True)
前端代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {{ tag }} <br> {#傳入2個參數#} {{ tag(99,1) }} </body> </html>
刷新頁面，效果如下：
看到結果就是,函數加()執行得到結果
還可以定義全局函數,無需后端傳遞給前端,Jinja2直接就可以執行的函數
后端代碼：
from flask import Flask # 導入Flask類 from flask import render_template # 導入flask中的render_template app = Flask(__name__) @app.template_global() # 定義全局模板函數 def a_b_sum(a, b): return a + b @app.template_filter() # 定義全局模板函數 def a_b_c_sum(a, b, c): return a + b + c @app.route("/") def index(): return render_template("index.html", tag="") if __name__ == '__main__': app.run("0.0.0.0", 5000, debug=True)
前端代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {#函數#} {{ a_b_sum(99,1) }} <br> {#過濾器#} {{ 1 | a_b_c_sum(197,2) }} </body> </html>
兩個函數的調用方式不太一樣
尤其是@app.template_filter() 它的調用方式比較特別,這是兩個Flask中的特殊裝飾器
刷新頁面，效果如下：
模板復用 block
如果我們前端頁面有大量重復頁面,沒必要每次都寫,可以使用模板復用的方式復用模板
前端代碼：
index.html 文件中的內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>Welcome to My</h1> <h2>下面的內容是不一樣的</h2> {% block content %} {% endblock %} <h2>上面的內容是不一樣的,但是下面的內容是一樣的</h2> <h1>My is Good</h1> </body> </html>
login.html 文件中的內容
{% extends "index.html" %}
{% block content %}
<h4>歡迎登陸</h4>
<form>
用戶名:<input type="text" name="user">
密碼:<input type="text" name="pwd">
<input type="submit" value="提交">
</form>
{% endblock %}
home.html 文件中的內容
{% extends "index.html" %}
{% block content %}
<h1>歡迎來到py3study.com</h1>
{% endblock %}
后端demo.py代碼:
from flask import Flask # 導入Flask類 from flask import render_template # 導入flask中的render_template app = Flask(__name__) @app.route("/login") def login(): return render_template("login.html") @app.route("/home") def home(): return render_template("home.html") if __name__ == '__main__': app.run("0.0.0.0", 5000, debug=True)
重啟flask，訪問登錄頁面：
查看home頁面
大概是這樣一個效果
在這兩個頁面中,只有 block 中的內容發生了變化,其他的位置完全一樣
引用 include
6.4 Jinja2模板語言的模塊引用 include
login.html 文件中的內容:
<h4>歡迎登陸</h4> <form> 用戶名:<input type="text" name="user"> 密碼:<input type="text" name="pwd"> <input type="submit" value="提交"> </form>
index.html 文件中的內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>Welcome to My</h1> {% include "login.html" %} <h2>上面的內容是不一樣的,但是下面的內容是一樣的</h2> <h1>My is Good</h1> </body> </html>
后端demo.py代碼:
from flask import Flask # 導入Flask類 from flask import render_template # 導入flask中的render_template app = Flask(__name__) @app.route("/") def index(): return render_template("index.html") if __name__ == '__main__': app.run("0.0.0.0", 5000, debug=True)
重啟flask，訪問頁面：
這就是將 login.html 當成一個模塊,加載到 index.html 頁面中
宏定義
6.5 Jinja2模板語言中的宏定義
前端index.html 文件中的內容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>Welcome to My</h1> {#type_text接收2個參數name,type#} {% macro type_text(name,type) %} {#渲染2個參數#} <input type="{{ type }}" name="{{ name }}" value="{{ name }}"> {% endmacro %} <h2>在下方是使用宏來生成input標簽</h2> {#執行宏定義#} {{ type_text("one","text") }} {{ type_text("two","text") }} </body> </html>
后端代碼不變，重啟flask，訪問頁面
宏定義一般情況下很少應用到,但是要知道有這么個概念
本文參考鏈接：
https://www.cnblogs.com/DragonFire/p/9259999.html
五、用戶登錄例子
做一個用戶登錄之后查看學員信息的小例子
需求:
- 1. 用戶名: xiao 密碼: 123
- 2. 用戶登錄成功之后跳轉到列表頁面
- 3. 失敗有消息提示,重新登錄
- 4.點擊學生名稱之后,可以看到學生的詳細信息
后端
demo.py
from flask import Flask # 導入Flask類 from flask import render_template # 導入flask中的render_template from flask import request from flask import redirect app = Flask(__name__) USER = {'username': 'xiao', 'password': "123"} STUDENT_DICT = { 1: {'name': '韓雪', 'age': 24, 'gender': '女'}, 2: {'name': '舒暢', 'age': 23, 'gender': '女'}, 3: {'name': '唐嫣', 'age': 25, 'gender': '女'}, } app = Flask(__name__) # 只允許GET和POST請求 @app.route("/login", methods=["GET", "POST"]) def login(): if request.method == "POST": if request.form["username"] == USER["username"] and request.form["password"] == USER["password"]: return redirect("/student_list") return render_template("login.html", msg="用戶名密碼錯誤") return render_template("login.html", msg="") # 如果前端Jinja2模板中使用了msg,這里就算是傳遞""也要出現msg @app.route("/student_list") def student(): # 學生列表 return render_template("student_list.html", student=STUDENT_DICT) @app.route("/info") def student_info(): # 學生的詳細信息 # 獲取id stu_id = int(request.args["id"]) stu_info = STUDENT_DICT[stu_id] return render_template("student.html", student=stu_info, stu_id=stu_id) if __name__ == '__main__': app.run("0.0.0.0", 5000, debug=True)
前端
login.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form method="post"> 用戶名:<input type="text" name="username"> 密碼:<input type="text" name="password"> <input type="submit" value="登錄"> {{ msg }} </form> </body> </html>
student_list.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="2xp"> <thead> <tr> <td>id</td> <td>name</td> <td>option</td> </tr> </thead> <tbody> {% for foo in student %} <tr> <td>{{ foo }}</td> <td>{{ student[foo].name }}</td> <td><a href="/info?id={{ foo }}">詳細</a></td> </tr> {% endfor %} </tbody> </table> </body> </html>
student.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1px"> <thead> <tr> <td>id</td> <td>name</td> <td>age</td> <td>gender</td> </tr> </thead> <tbody> <tr> <td>{{ stu_id }}</td> <td>{{ student.name }}</td> <td>{{ student["age"] }}</td> <td>{{ student.get("gender") }}</td> </tr> </tbody> </table> <div><a href="/student_list">返回</a></div> </body> </html>
重啟flask，訪問登錄頁面
登錄之后，跳轉到學生列表頁面
點擊詳細
思考題:
1.如果我直接訪問 /student_list 和 /student 是不是也可以?
2.怎么才能在所有的url地址中校驗是否登錄?
本文參考鏈接：
https://www.cnblogs.com/DragonFire/p/9260124.html
六、內置Session
Flask中的Session非常的奇怪,他會將你的SessionID存放在客戶端的Cookie中,使用起來也非常的奇怪
secret_key
1. Flask 中 session 是需要 secret_key 的
from flask import session app = Flask(__name__) app.secret_key = "ask"
secret_key 實際上是用來加密字符串的,如果在實例化的app中沒有 secret_key 那么開啟session一定會拋異常的
使用session
2. session 要這樣用
@app.route("/login", methods=["GET", "POST"]) def login(): if request.method == "POST": if request.form["username"] == USER["username"] and request.form["password"] == USER["password"]: session["user"] = USER["username"] return redirect("/student_list") return render_template("login.html", msg="用戶名密碼錯誤") return render_template("login.html", msg="") # 如果前端Jinja2模板中使用了msg,這里就算是傳遞""也要出現msg
session["user"] = USER["username"] 這樣用就代表這個請求帶上來的session中保存了一個user=name
如果想要驗證session的話,就用這種方法吧
cookies 中的 session 是什么
3. cookies 中的 session 是什么
cookies 中 session 存儲的是通過 secret_key 加密后的 key , 通過這個 key 從flask程序的內存中找到用戶對應的session信息
session 驗證
4. 怎么用 session 進行驗證呢?
@app.route("/student_list") def student(): if session.get("user"): return render_template("student_list.html", student=STUDENT_DICT) return redirect("/login")
如果這個你要是看不明白的,我只能從基礎給你講了
作業
寫一個裝飾器，除了/login以外，其他視圖函數都要登錄才行！
使用session驗證
本文參考鏈接：
https://www.cnblogs.com/DragonFire/p/9260228.html