簡(jiǎn)介：

今天的文章內(nèi)容非常精彩實(shí)用，最后一部分會(huì)教大家純Python編寫出下面這樣炫酷的應(yīng)用（動(dòng)圖錄制出來(lái)太大，所以壓縮完之后看起來(lái)有點(diǎn)卡，但實(shí)際運(yùn)行非常流暢推薦大家親自運(yùn)行體驗(yàn)。

正文：

今天的教程我們將繼續(xù)來(lái)學(xué)習(xí)Dash中有關(guān)表單控件的一些高級(jí)知識(shí)，get到這些知識(shí)之后，我們就有能力開(kāi)發(fā)出更加完善和先進(jìn)的網(wǎng)頁(yè)表單功能。

2 Dash表單控件進(jìn)階

在正式的開(kāi)發(fā)網(wǎng)頁(yè)表單時(shí)，不僅僅是將表單控件排列擺放出來(lái)那么簡(jiǎn)單隨意，我們往往需要為控件添置一些補(bǔ)充內(nèi)容，從而更好地引導(dǎo)用戶使用它們，或是擴(kuò)充出更多功能，這在Dash中我們可以借助dash_bootstrap_components的力量：

2.1 利用Form()、FormGroup()更好地組織表單

dash_bootstrap_components中的Form()與FormGroup()被設(shè)計(jì)用于更快捷地排布我們的表單控件，使用邏輯是先用FormGroup()組織好每一個(gè)表單控件，再將若干個(gè)FormGroup()形成的列表作為Form()的children即可，從下面這個(gè)簡(jiǎn)單的例子出發(fā)：

?

app1.py

? import?dash import?dash_html_components?as?html import?dash_bootstrap_components?as?dbcapp?=?dash.Dash(__name__)app.layout?=?html.Div(dbc.Container(dbc.Form([dbc.FormGroup([dbc.Label("用戶名",?html_for="username"),dbc.Input(id="username",?placeholder="請(qǐng)輸入用戶名",?autoComplete='off')]),dbc.FormGroup([dbc.Label("賬號(hào)密碼",?html_for="password"),dbc.Input(type="password",id="password",placeholder="請(qǐng)輸入密碼",),dbc.FormText("密碼必須同時(shí)包含大寫字母、小寫字母和數(shù)字！",?color="secondary"),]),dbc.FormGroup([dbc.Button('注?冊(cè)')])]),style={'margin-top':?'200px','max-width':?'400px'}) )if?__name__?==?'__main__':app.run_server(debug=True)

可以看到，在上面例子中的網(wǎng)頁(yè)表單，共包含了兩個(gè)輸入框和一個(gè)按鈕共三個(gè)控件，通過(guò)將控件組織在FormGroup()+Form()的結(jié)構(gòu)中，使得這些控件在布局上自成一體非常方便。

相信你也注意到我們有些FormGroup()中除了控件自身，還添置了一些額外的輔助性質(zhì)的部件，常用的有：

• 「dbc.Label()」

利用dbc.Label()部件，我們可以在對(duì)應(yīng)控件之前添加說(shuō)明文字，利用html_for參數(shù)可為其綁定具有某個(gè)id的控件，利用color參數(shù)可以快捷修改其顏色；

• 「dbc.FormText()」

利用dbc.FormText()可以在表單控件之后為其添加格式美觀的說(shuō)明文字；

• 「dbc.FormFeedback()」

dbc.FormFeedback()的作用比較有意思，它可以幫助我們簡(jiǎn)化對(duì)表單控件輸入內(nèi)容的驗(yàn)證過(guò)程，其參數(shù)valid同之前介紹過(guò)的Input()部件的valid參數(shù)，只不過(guò)這里我們?cè)谕粋€(gè)FormGroup()中為指定表單控件添置valid參數(shù)相反的兩種預(yù)設(shè)的FormFeedback()內(nèi)容部件，接著只需要寫個(gè)回調(diào)關(guān)聯(lián)控件自身即可：

?

app2.py

? import?dash import?dash_html_components?as?html import?dash_bootstrap_components?as?dbc from?dash.dependencies?import?Input,?Outputapp?=?dash.Dash(__name__)app.layout?=?html.Div(dbc.Container(dbc.Form([dbc.FormGroup([dbc.Label("賬號(hào)密碼",?html_for="password"),dbc.Input(id="password",placeholder="請(qǐng)輸入密碼",autoComplete='off'),dbc.FormText("密碼至少同時(shí)包含大寫字母、小寫字母和數(shù)字！",?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?reif?value:#?檢查是否滿足密碼格式要求if?all([re.search('[a-z]',?value),re.search('[A-Z]',?value),re.search('[0-9]',?value),value.__len__()?!=?0]):return?True,?Falseelse:return?False,?Truereturn?dash.no_updateif?__name__?==?'__main__':app.run_server(debug=True)

2.2 利用InputGroup()為表單控件添加說(shuō)明

除了前面介紹的利用dbc.FormText()等部件為對(duì)應(yīng)的表單控件生成外部說(shuō)明文字之外，dash_bootstrap_components還提供了基于InputGroup()的一系列部件，使得我們可以方便地創(chuàng)建出與控件本身渾然一體的說(shuō)明內(nèi)容：

?

app3.py

? import?dash import?dash_bootstrap_components?as?dbc import?dash_html_components?as?htmlapp?=?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)

效果如下，通過(guò)InputGroupAddon()可以很方便地為輸入控件添加前綴或后綴說(shuō)明：

3 動(dòng)手寫一個(gè)英雄聯(lián)盟英雄資料查看器！

有了今天的知識(shí)內(nèi)容基礎(chǔ)，加上之前教程內(nèi)容的鋪墊，我們可以開(kāi)始用Dash書寫一些形式更加豐富多樣的web應(yīng)用，比如一個(gè)「在線英雄聯(lián)盟英雄資料查看器」，后臺(tái)通過(guò)爬取LOL官網(wǎng)的實(shí)時(shí)數(shù)據(jù)，實(shí)現(xiàn)全英雄資料查詢，先來(lái)一睹效果如何吧~

可以看到效果非常不錯(cuò)，并且純Python編寫，下面我大致介紹一下整體思路：

1.「抓包」LOL官網(wǎng)，爬取全英雄名稱與id信息，并繼續(xù)抓包找到傳遞每個(gè)英雄單獨(dú)詳細(xì)信息的異步請(qǐng)求；

2.利用今天所學(xué)的Form()和FormGroup()輕松搭建出界面上方的三個(gè)控件；

3.編寫回調(diào)，基于用戶選擇內(nèi)容，以及「查詢」按鈕的點(diǎn)擊情況，來(lái)異步渲染出下方Tabs()+Tab()區(qū)域內(nèi)容，其中大量使用到列表推導(dǎo)非常的方便；

4.最后「皮膚一覽」區(qū)域的輪播圖片結(jié)合了bootstrap的知識(shí)，也是個(gè)非常有用的技巧！

結(jié)尾：

限于篇幅，此處并沒(méi)有直接放出全部代碼

最后完整代碼已經(jīng)打包整理好了，有需要的小伙伴，可以點(diǎn)擊這行字體，要么私信小編！

總結(jié)

以上是生活随笔為你收集整理的炫酷，纯Python开发LOL英雄信息查询平台的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。