本文示例代碼已上傳至我的
Github倉庫https://github.com/CNFeffery/DataScienceStudyNotes
1 簡介
這是我的系列教程Python+Dash快速web應用開發的第十期，在上一期的教程中，我們針對Dash中常用的幾種表單輸入控件進行了介紹，結合以前學習過的其他部件，已經可以滿足基本的網頁表單提交需求。
而今天的教程我們將繼續來學習Dash中有關表單控件的一些高級知識，get到這些知識之后，我們就有能力開發出更加完善和先進的網頁表單功能。
我們在上一期教程中已經對常見的幾種具有不同功能的表單控件進行了比較詳細的介紹，而在正式的開發網頁表單時，不僅僅是將表單控件排列擺放出來那么簡單隨意，我們往往需要為控件添置一些補充內容，從而更好地引導用戶使用它們，或是擴充出更多功能，這在Dash中我們可以借助dash_bootstrap_components的力量：
2.1 利用Form()、FormGroup()更好地組織表單
dash_bootstrap_components中的Form()與FormGroup()被設計用於更快捷地排布我們的表單控件，使用邏輯是先用FormGroup()組織好每一個表單控件，再將若干個FormGroup()形成的列表作為Form()的children即可，從下面這個簡單的例子出發：
app1.py
import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
app = dash.Dash(__name__)
app.layout = html.Div(
dbc.Container(
dbc.Form(
[
dbc.FormGroup(
[
dbc.Label("用戶名", html_for="username"),
dbc.Input(id="username", placeholder="請輸入用戶名", autoComplete='off')
]
),
dbc.FormGroup(
[
dbc.Label("賬號密碼", html_for="password"),
dbc.Input(
type="password",
id="password",
placeholder="請輸入密碼",
),
dbc.FormText(
"密碼必須同時包含大寫字母、小寫字母和數字！", color="secondary"
),
]
),
dbc.FormGroup(
[
dbc.Button('注 冊')
]
)
]
),
style={
'margin-top': '200px',
'max-width': '400px'
}
)
)
if __name__ == '__main__':
app.run_server(debug=True)
可以看到，在上面例子中的網頁表單，共包含了兩個輸入框和一個按鈕共三個控件，通過將控件組織在FormGroup()+Form()的結構中，使得這些控件在布局上自成一體非常方便。
相信你也注意到我們有些FormGroup()中除了控件自身，還添置了一些額外的輔助性質的部件，常用的有：
- dbc.Label()
利用dbc.Label()部件，我們可以在對應控件之前添加說明文字，利用html_for參數可為其綁定具有某個id的控件，利用color參數可以快捷修改其顏色；
- dbc.FormText()
利用dbc.FormText()可以在表單控件之后為其添加格式美觀的說明文字；
- dbc.FormFeedback()
dbc.FormFeedback()的作用比較有意思，它可以幫助我們簡化對表單控件輸入內容的驗證過程，其參數valid同之前介紹過的Input()部件的valid參數，只不過這里我們在同一個FormGroup()中為指定表單控件添置valid參數相反的兩種預設的FormFeedback()內容部件，接着只需要寫個回調關聯控件自身即可：
app2.py
import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
app.layout = html.Div(
dbc.Container(
dbc.Form(
[
dbc.FormGroup(
[
dbc.Label("賬號密碼", html_for="password"),
dbc.Input(
id="password",
placeholder="請輸入密碼",
autoComplete='off'
),
dbc.FormText(
"密碼至少同時包含大寫字母、小寫字母和數字！", color="secondary"
),
dbc.FormFeedback(
"密碼格式滿足要求！", valid=True
),
dbc.FormFeedback(
"密碼格式不滿足要求！",
valid=False,
),
]
)
]
),
style={
'margin-top': '200px',
'max-width': '400px'
}
)
)
@app.callback(
[Output('password', 'valid'),
Output('password', 'invalid')],
Input('password', 'value')
)
def check_password_format(value):
import re
if value:
# 檢查是否滿足密碼格式要求
if all([
re.search('[a-z]', value),
re.search('[A-Z]', value),
re.search('[0-9]', value),
value.__len__() != 0
]):
return True, False
else:
return False, True
return dash.no_update
if __name__ == '__main__':
app.run_server(debug=True)
2.2 利用InputGroup()為表單控件添加說明
除了前面介紹的利用dbc.FormText()等部件為對應的表單控件生成外部說明文字之外，dash_bootstrap_components還提供了基於InputGroup()的一系列部件，使得我們可以方便地創建出與控件本身渾然一體的說明內容：
app3.py
import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div(
dbc.Container(
[
dbc.InputGroup(
[
dbc.InputGroupAddon("https://www.cnblogs.com/", addon_type="prepend"),
dbc.Input(placeholder="輸入博客園用戶名")
]
),
html.Br(),
dbc.InputGroup(
[
dbc.Input(placeholder="輸入qq郵箱"),
dbc.InputGroupAddon("@qq.com", addon_type="append")
]
)
],
style={
'margin-top': '200px',
'max-width': '400px'
}
)
)
if __name__ == '__main__':
app.run_server(debug=True)
效果如下，通過InputGroupAddon()可以很方便地為輸入控件添加前綴或后綴說明：
3 動手寫一個英雄聯盟英雄資料查看器！
有了今天的知識內容基礎，加上之前教程內容的鋪墊，我們可以開始用Dash書寫一些形式更加豐富多樣的web應用，比如一個在線英雄聯盟英雄資料查看器，后台通過爬取LOL官網的實時數據，實現全英雄資料查詢，先來一睹效果如何吧~
可以看到效果非常不錯，並且純Python編寫，下面我大致介紹一下整體思路：
1.抓包LOL官網，爬取全英雄名稱與id信息，並繼續抓包找到傳遞每個英雄單獨詳細信息的異步請求；
2.利用今天所學的Form()和FormGroup()輕松搭建出界面上方的三個控件；
3.編寫回調，基於用戶選擇內容，以及查詢按鈕的點擊情況，來異步渲染出下方Tabs()+Tab()區域內容，其中大量使用到列表推導非常的方便；
4.最后皮膚一覽區域的輪播圖片結合了bootstrap的知識，對https://www.runoob.com/try/try.php?filename=trybs4_carousel#demo的例子進行了Dash化改寫，也是個非常有用的技巧！
最后，限於篇幅，此處並沒有直接放出全部代碼，你可以在文章開頭的Github倉庫找到本期全部代碼+附件。
以上就是本文的全部內容，歡迎在評論區與我進行討論，下一期的Dash教程下周見~