炫酷,纯Python开发LOL英雄信息查询平台
簡介:
今天的文章內容非常精彩實用,最后一部分會教大家純Python編寫出下面這樣炫酷的應用(動圖錄制出來太大,所以壓縮完之后看起來有點卡,但實際運行非常流暢推薦大家親自運行體驗。
正文:
今天的教程我們將繼續來學習Dash中有關表單控件的一些高級知識,get到這些知識之后,我們就有能力開發出更加完善和先進的網頁表單功能。
2 Dash表單控件進階
在正式的開發網頁表單時,不僅僅是將表單控件排列擺放出來那么簡單隨意,我們往往需要為控件添置一些補充內容,從而更好地引導用戶使用它們,或是擴充出更多功能,這在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?dbcapp?=?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,?Outputapp?=?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?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()為表單控件添加說明
除了前面介紹的利用dbc.FormText()等部件為對應的表單控件生成外部說明文字之外,dash_bootstrap_components還提供了基于InputGroup()的一系列部件,使得我們可以方便地創建出與控件本身渾然一體的說明內容:
?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)效果如下,通過InputGroupAddon()可以很方便地為輸入控件添加前綴或后綴說明:
3 動手寫一個英雄聯盟英雄資料查看器!
有了今天的知識內容基礎,加上之前教程內容的鋪墊,我們可以開始用Dash書寫一些形式更加豐富多樣的web應用,比如一個「在線英雄聯盟英雄資料查看器」,后臺通過爬取LOL官網的實時數據,實現全英雄資料查詢,先來一睹效果如何吧~
可以看到效果非常不錯,并且純Python編寫,下面我大致介紹一下整體思路:
1.「抓包」LOL官網,爬取全英雄名稱與id信息,并繼續抓包找到傳遞每個英雄單獨詳細信息的異步請求;
2.利用今天所學的Form()和FormGroup()輕松搭建出界面上方的三個控件;
3.編寫回調,基于用戶選擇內容,以及「查詢」按鈕的點擊情況,來異步渲染出下方Tabs()+Tab()區域內容,其中大量使用到列表推導非常的方便;
4.最后「皮膚一覽」區域的輪播圖片結合了bootstrap的知識,也是個非常有用的技巧!
結尾:
限于篇幅,此處并沒有直接放出全部代碼
最后完整代碼已經打包整理好了,有需要的小伙伴,可以點擊這行字體,要么私信小編!
總結
以上是生活随笔為你收集整理的炫酷,纯Python开发LOL英雄信息查询平台的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 2.1安装前的准备工作---安装Red
- 下一篇: 如何从 OpenVINO 的主分支构建