flask入門實例
目錄
1. 什么是flask
flask是個輕量級的web應用框架.
flask是使用python編寫的.
2. 第一個實例
2.1 編寫app.py
app.py
#導入flask相關模塊
from flask import Flask
from flask import render_template
#Flask實例,
# 第一個參數是應用模塊的名稱,
# template_folder指定了html模板的路徑,
# static_folder指定了靜態文件(圖片, bootstrap等)的路徑,
app = Flask(__name__, template_folder='./templates', static_folder='./static')
@app.route('/') # 這是個裝飾器, 指定了在瀏覽器訪問時的URL
def home():
name = '二狗' # 定義了一個變量
# 返回html模板(flask使用的是jinja2模板), 並給該模板傳了個參數
return render_template('home.html', name=name)
if __name__ == '__main__':
# 指定port, 運行app
app.run(debug=True, port='8000')
2.2 編寫html模板
home.html
<html lang="zh">
<head>
</head>
<body>
<!-->這時有一個4級標題, 標題內容是Hello {{name}}, 其中name是個變量, 在app.py中調用模板時傳遞進來<-->
<h4>Hello {{ name }}</h4>
</body>
</html>
2.3 運行app
E:\flask_demo> python app.py
* Serving Flask app "app" (lazy loading)
* Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
* Debug mode: on
* Restarting with stat
* Debugger is active!
* Debugger PIN: 161-473-587
* Running on http://127.0.0.1:8000/ (Press CTRL+C to quit)
127.0.0.1 - - [08/Jan/2022 14:34:14] "[37mGET / HTTP/1.1[0m" 200 -
2.4 查看網頁
打開瀏覽器, 在地址欄輸入: 127.0.0.1:8000
其中8000是app.py中app.run的port參數.
3. 頁面美化
默認的html樣式(按鈕, 表格等)可以通過css來美化, 不過直接使用css會很繁瑣, 可以使用bootstrap和font-awesome, 它們定義好了一系列樣式, 我們直接使用即可.
3.1 下載bootstrap和font-awesome
bootstrap: https://www.bootcss.com/, 點擊Bootstrap3中文文檔(v3.x.x)下載, 點擊"CSS全局樣式"查看可用的樣式.
font-awesome: https://fontawesome.dashgame.com/, 點擊"立即下載", 點擊"圖標"查看可用的圖標.
下載下來的文件放到app.py同級別的static目錄中:
.\flask_demo\static\bootstrap-3.3.7-dist
.\flask_demo\static\font-awesome-4.7.0
3.2 指定bootstrap和font-awesome所在路徑
在app.py中生成Flask實例時, 指定static_folder選項.
app = Flask(name, template_folder='./templates', static_folder='./static')
3.3 在html中引入bootstrap和font-awesome, 並使用相應樣式
home.html
<html lang="zh">
<head>
<meta charset="UTF-8">
<!--引入bootstrap和font-awesome-->
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-3.3.7-dist/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='font-awesome-4.7.0/css/font-awesome.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<body>
<h4>Hello {{ name }}</h4>
<!--使用bootstrap的btn和btn-default樣式-->
<a class='btn btn-default' href='/class?cls_name=cls0'>class_0</a>
<a class='btn btn-default' href='/class?cls_name=cls1'>class_1</a>
</body>
</html>
效果:
4. 通URL給頁面傳參數
4.1 發出參數
看上一節的home.html中, 兩個button都有個href屬性, 表示點擊該按鈕后, 會跳轉到對應的URL:
href='/class?=cls0'
href='/class?=cls1'
其中cls0和cls1是傳給URL的參數.
不過現在我們沒有class這個URL, 需要在app.py中添加
4.2 添加URL: class, 並獲取參數
在app.py中添加URL class
獲取參數需要導入request
import collections
from flask import Flask
from flask import request
from flask import render_template
app = Flask(__name__, template_folder='./templates', static_folder='./static')
@app.route('/')
def home():
name = '二狗'
return render_template('home.html', name=name)
@app.route('/class') #URL class
def _class(): #函數名使用class的話與保留關鍵字沖突, 所以加了個下划線
#定義了一堆數據
dict_cls = dict()
dict_cls['cls0'] = collections.OrderedDict()
dict_cls['cls0']['student0'] = {'name':'李雷' , 'age':38}
dict_cls['cls0']['student1'] = {'name':'韓梅梅', 'age':37}
dict_cls['cls1'] = collections.OrderedDict()
dict_cls['cls1']['student0'] = {'name':'Jim' , 'age':39}
dict_cls['cls1']['student1'] = {'name':'Kate', 'age':40}
#從URL獲取參數cls_name
cls_name = request.args.get('cls_name')
return render_template('class.html', cls_name=cls_name, dict_cls=dict_cls)
if __name__ == '__main__':
app.run(debug=True, port='8000')
這個URL要用到class.html, 目前還沒有.
4.3 編寫class.html
編寫class.html, 並在模板中使用多維變量
注意, 多維變量使用時最好先賦值給臨時變量, 直接使用的話可能引起語法錯誤.
class.html
<html lang="zh">
<head>
<meta charset="UTF-8">
<!--引入bootstrap和font-awesome-->
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-3.3.7-dist/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='font-awesome-4.7.0/css/font-awesome.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<body>
<h4>{{ cls_name }}</h4>
<table class='table table-bordered table-hover center-block' style='widht: 500px;'>
<thead>
<th style='text-align: center; width: 200px;'>ID</th>
<th style='text-align: center; width: 200px;'>姓名</th>
<th style='text-align: center; width: 100px;'>年齡</th>
</thead>
<!--使用for循環-->
{% for _s_id in dict_cls[cls_name].keys() %}
<!--使用set給臨時變量賦值-->
{% set _s_name = dict_cls[cls_name][_s_id]['name'] %}
{% set _s_age = dict_cls[cls_name][_s_id]['age' ] %}
<tr>
<td>{{ _s_id }}</td>
<td>{{ _s_name }}</td>
<td>{{ _s_age }}</td>
</tr>
{% endfor %}
</table>
</body>
</html>
效果:
點擊class_0后:
點擊class_1后:
5. jinja2模板
一系列頁面頂部/底部都一樣
- 定義一個base模板, 把頁面主要框架都填上, 其它頁面都從base頁面擴展, 添加不同的內容.
- 不同頁面重復使用的元素可以單獨放到forms.html中, 其它頁面直接調用元素即可.
- 多維的變量, 如果key嵌套了變量, 可以使用set先獲取該變量.