（數據科學學習手札112）Python+Dash快速web應用開發——表單控件篇（上）
本文示例代碼已上傳至個人
Github倉庫https://github.com/CNFeffery/DataScienceStudyNoteshtml
1 簡介
這是個人系列教程Python+Dash快速web應用開發的第九期，在以前三期的教程中，咱們針對Dash中常常會用到的一些靜態部件進行了較爲詳細的介紹，從而get到在Dash應用中組織靜態內容的經常使用方法。git
而從今天的教程開始，我將帶你們來認識和學習Dash生態中很是實用的一些交互式部件，配合回調函數，能夠幫助咱們構建一個形式豐富的可接受輸入，並反饋輸出的交互式應用，今天要介紹的交互部件爲表單輸入類部件的基礎知識，下面來學習吧~github
2 Dash中經常使用的表單輸入類交互部件
交互部件跟以前介紹的一系列靜態部件的區別在於它們不只具備供用戶交互操做的特色，還承擔了接受用戶輸入，並傳遞這些輸入參數的做用。而網頁開發中，表單輸入類部件則是交互部件中最經常使用到的。web
在Dash生態中經常使用到的表單輸入類交互部件有：算法
2.1 輸入框部件Input()
其實在以前的教程內容中咱們已經使用過不少次輸入框部件Input()了，而我比較推薦使用的是dash_bootstrap_components中封裝的Input()，它相較於dash_core_components中自帶的Input()擁有更多特性。編程
除了幾乎全部部件都具備的id、className以及style參數以外，Input()中還有一個特殊的參數type，它的不一樣取值從根本上奠基了Input()的角色，經常使用的有：json
- text、password、search
當Input()的type參數取值爲'text'、'password'以及'search'之一時，它分別扮演文本輸入框、密碼輸入框以及搜索框等角色，也擁有了一些特別的經常使用參數&屬性：bootstrap
value屬性對應它當前的輸入值；瀏覽器
placeholder用於設置未輸入時輸入框內的提示文字；app
maxLength用於設置最多可輸入的字符數量；
n_submit用於記錄光標在輸入框內部時鍵盤Enter鍵被點按的次數；
debounce設置爲True時會強制每次用戶按下Enter鍵或點擊其餘部件時才同步value值給後臺Dash服務。
valid和invalid參數都接受Bool型參數，分別用來控制輸入框顯示正確狀態以及錯誤狀態，咱們能夠在檢查用戶名、密碼等是否正確時經過回調輸出設置這些參數爲True來告知用戶相關提示信息。
咱們來經過下面的示例來直觀感覺這些特性：
app1.py
import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
app.layout = html.Div(
dbc.Container(
[
dbc.Input(id='input-text',
placeholder='text模式，長度限制4',
type='text',
maxLength=4,
style={'width': '300px'}),
html.P(id='output-text'),
dbc.Input(id='input-password',
placeholder='password模式，綁定Enter鍵',
type='password',
style={'width': '300px'},
debounce=True),
html.P(id='output-password'),
dbc.Input(id='input-search',
placeholder='search模式，可快速清除內容',
type='search',
style={'width': '300px'}),
html.P(id='output-search'),
],
style={'margin-top': '100px'}
)
)
@app.callback(
Output('output-text', 'children'),
Input('input-text', 'value')
)
def output_text(value):
return value
@app.callback(
Output('output-password', 'children'),
[Input('input-password', 'value'),
Input('input-password', 'n_submit')]
)
def output_password(value, n_submit):
if value:
return '密碼爲：'+value+' '+f'第{n_submit}次按下Enter'
return dash.no_update
if __name__ == '__main__':
app.run_server(debug=True)
- number、range
當Input()部件的type屬性設置爲'number'時，它便搖身一變成了數值輸入框，並擁有了一些特殊的參數&屬性：
min與max參數用來約束數值輸入框的輸入值上下限；
step參數用來設定數值輸入框右側上下箭頭點按一次後數值變化的步長
而當type設置爲range時就更有意思了，咱們的Input()這時變成了一個滑桿，也是經過上述三個參數來限制範圍和拖動的步長值。
app2.py
import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
app.layout = html.Div(
dbc.Container(
[
dbc.Input(id='input-number',
placeholder='number模式',
type='number',
min=0,
max=100,
step=0.5,
style={'width': '300px'}),
html.P(id='output-number'),
dbc.Input(id='input-range',
placeholder='range模式',
type='range',
style={'width': '300px'},
min=0,
max=100,
step=10,),
html.P(id='output-range')
],
style={'margin-top': '100px'}
)
)
@app.callback(
Output('output-number', 'children'),
Input('input-number', 'value')
)
def output_number(value):
return value
@app.callback(
Output('output-range', 'children'),
Input('input-range', 'value')
)
def output_range(value):
return value
if __name__ == '__main__':
app.run_server(debug=True)
2.2 下拉選擇部件Dropdown()
接下來咱們來深刻學習以前也使用過不少次的下拉選擇部件Dropdown()，直接使用dash_core_components中的Dropdown()便可，它的主要屬性&參數有：
options用於設置咱們的下拉選擇部件中顯示的選項，傳入列表，列表每一個元素爲字典，必填鍵有：'label'，用於設置對應選項顯示的標籤名稱；'value'，對應當前選項的值，也是咱們書寫回調函數接受的輸入；'disabled'，通常狀況下不用設置，除非你想指定對應選項不可點選就設置爲True；
multi，bool型，用於設置是否容許多選；
optionHeight，用於設置每一個選項的顯示像素高度，默認35；
placeholder，同Input()同名參數；
searchable，bool型，用於設置是否能夠在輸入框中搜索下拉選項；
search_value，可用做回調的輸入，記錄了用戶的搜索內容；
value，記錄用戶已選擇的選項，單選模式下爲對應單個選項的'value'值，多選模式下爲對應多個選項'value'值組成的列表；
app3.py
import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash_core_components as dcc
import json
app = dash.Dash(__name__)
app.layout = html.Div(
dbc.Container(
[
dcc.Dropdown(
id='dropdown-input-1',
placeholder='單選',
options=[
{'label': item, 'value': item}
for item in list('ABCD')
],
style={
'width': '300px'
}
),
html.Pre(id='dropdown-output-1',
style={'background-color': '#d4d4d420',
'width': '300px'}),
dcc.Dropdown(
id='dropdown-input-2',
placeholder='多選',
multi=True,
options=[
{'label': item, 'value': item}
for item in list('ABCD')
],
style={
'width': '300px'
}
),
html.Pre(id='dropdown-output-2',
style={'background-color': '#d4d4d420',
'width': '300px'})
],
style={'margin-top': '100px'}
)
)
@app.callback(
Output('dropdown-output-1', 'children'),
Input('dropdown-input-1', 'value')
)
def dropdown_output_1(value):
if value:
return json.dumps(value, indent=4)
return dash.no_update
@app.callback(
Output('dropdown-output-2', 'children'),
Input('dropdown-input-2', 'value')
)
def dropdown_output_2(value):
if value:
return json.dumps(value, indent=4)
return dash.no_update
if __name__ == '__main__':
app.run_server(debug=True)
2.3 單選框與複選框
咱們分別可使用dash_bootstrap_components中的RadioItems與Checklist來建立單選框與複選框：
- 單選框RadioItems
單選框的特色是咱們只能在其展現的一組選項中選擇1項。
它的參數options格式同Dropdown()；
inline參數設置爲True時會橫向佈局全部選項；
switch設置爲True時會將每一個選項樣式切換爲開關；
app4.py
import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash_core_components as dcc
import json
app = dash.Dash(__name__)
app.layout = html.Div(
dbc.Container(
[
dbc.RadioItems(
id='radio-items-input',
inline=True,
switch=True,
options=[
{'label': item, 'value': item}
for item in list('ABCD')
],
style={
'width': '300px'
}
),
html.P(id='radio-items-output')
],
style={'margin-top': '100px'}
)
)
@app.callback(
Output('radio-items-output', 'children'),
Input('radio-items-input', 'value')
)
def radio_items_output(value):
if value:
return '已選擇：'+value
return dash.no_update
if __name__ == '__main__':
app.run_server(debug=True)
- 複選框Checklist
與單選框相對的，是複選框，它的參數與RadioItems徹底一致，惟一不一樣的是它是能夠多選的：
app5.py
import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash_core_components as dcc
import json
app = dash.Dash(__name__)
app.layout = html.Div(
dbc.Container(
[
dbc.Checklist(
id='check-list-input',
inline=True,
options=[
{'label': item, 'value': item}
for item in list('ABCD')
],
style={
'width': '300px'
}
),
html.P(id='check-list-output')
],
style={'margin-top': '100px'}
)
)
@app.callback(
Output('check-list-output', 'children'),
Input('check-list-input', 'value')
)
def check_list_output(value):
if value:
return '已選擇：'+'、'.join(value)
return dash.no_update
if __name__ == '__main__':
app.run_server(debug=True)
而除了上述兩種供用戶對多個選項進行單選或多選的部件以外，dash_bootstrap_components中還有能夠建立單個選擇部件的RadioButton與Checkbox，它們只能進行勾選操做，對應回調用的的輸入值爲checked，是個Bool型屬性，用來區分是否被勾選上，這裏就再也不贅述。
3 動手編寫在線調查問卷
學習完今天的內容以後，咱們就能夠將它們應用到實際需求中，譬如咱們如今須要向其餘人發放一份調查問卷，其中涉及到很多輸入文字或單選或多選內容，最後咱們還須要將用戶填寫完成的表單內容保存到本地，用Dash就能夠很快速地完成這項工做：
對應的代碼以下：
app6.py
import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State
import json
import re
app = dash.Dash(__name__)
app.layout = html.Div(
dbc.Container(
[
html.H1('關於Dash用戶的調查'),
html.Br(),
html.P('1. 您的性別爲：'),
html.Hr(),
dbc.RadioItems(
id='gender',
inline=True,
options=[
{'label': '男', 'value': '男'},
{'label': '女', 'value': '女'}
]
),
html.Br(),
html.P('2. 您經常使用的編程語言有：'),
html.Hr(),
dbc.Checklist(
id='programming-language',
inline=True,
options=[
{'label': 'Python', 'value': 'Python'},
{'label': 'R', 'value': 'R'},
{'label': 'JavaScript', 'value': 'JavaScript'},
{'label': 'Java', 'value': 'Java'},
{'label': 'Julia', 'value': 'Julia'},
{'label': 'C#', 'value': 'C#'},
{'label': 'C++', 'value': 'C++'},
{'label': '其餘', 'value': '其餘'},
]
),
html.Br(),
html.P('3. 您使用Dash的頻繁程度：'),
html.Hr(),
dbc.RadioItems(
id='frequency',
inline=True,
options=[
{'label': '常常', 'value': '常常'},
{'label': '偶爾', 'value': '偶爾'},
{'label': '不多使用', 'value': '不多使用'},
{'label': '沒據說過', 'value': '沒據說過'},
]
),
html.Br(),
html.P('4. 您對如下哪些方面感興趣：'),
html.Hr(),
dbc.Checklist(
id='interests',
options=[
{'label': '構建在線數據可視化做品', 'value': '構建在線數據可視化做品'},
{'label': '製做機器學習demo', 'value': '製做機器學習demo'},
{'label': '爲企業開發BI儀表盤', 'value': '爲企業開發BI儀表盤'},
{'label': '爲企業開發酷炫的指標監控大屏', 'value': '爲企業開發酷炫的指標監控大屏'},
{'label': '開發有用的在線小工具', 'value': '開發有用的在線小工具'},
{'label': '其餘', 'value': '其餘'},
]
),
html.Br(),
html.P('5. 您的職業：'),
html.Hr(),
dbc.RadioItems(
id='career',
options=[
{'label': '科研人員', 'value': '科研人員'},
{'label': '運營', 'value': '運營'},
{'label': '數據分析師', 'value': '數據分析師'},
{'label': '算法工程師', 'value': '算法工程師'},
{'label': '大數據開發工程師', 'value': '大數據開發工程師'},
{'label': '金融分析師', 'value': '金融分析師'},
{'label': '爬蟲工程師', 'value': '爬蟲工程師'},
{'label': '學生', 'value': '學生'},
{'label': '其餘', 'value': '其餘'},
]
),
html.Br(),
html.P('您的聯繫方式：'),
html.Hr(),
dbc.Input(
id='tel',
placeholder='填入您的電話或手機號碼！',
autoComplete='off', # 關閉瀏覽器自動補全
style={
'width': '300px'
}
),
html.Hr(),
dbc.Button(
'點擊提交',
id='submit'
),
html.P(id='feedback')
],
style={
'margin-top': '50px',
'margin-bottom': '200px',
}
)
)
@app.callback(
Output('feedback', 'children'),
Input('submit', 'n_clicks'),
[
State('gender', 'value'),
State('programming-language', 'value'),
State('frequency', 'value'),
State('interests', 'value'),
State('tel', 'value'),
],
prevent_initial_call=True
)
def fetch_info(n_clicks, gender, programming_language, frequency, interests, tel):
if all([gender, programming_language, frequency, interests, tel]):
# 簡單以寫出到本地指定json文件爲例來演示寫出過程
with open(tel+'.json', 'w') as j:
json.dump(
{
'gender': gender,
'programming_language': programming_language,
'frequency': frequency,
'interests': interests
},
j
)
return '提交成功！'
else:
return '您的信息未填寫完整，請檢查後提交！'
@app.callback(
[Output('tel', 'valid'),
Output('tel', 'invalid')],
Input('tel', 'value'),
prevent_initial_call=True
)
def check_if_tel_completed(value):
try:
if re.findall('\d+', value)[0] == value and value.__len__() == 11:
return True, False
except:
pass
return False, True
if __name__ == '__main__':
app.run_server(debug=True)
以上就是本文的所有內容，歡迎在評論區與我進行討論，分享你的看法~
- 1. （數據科學學習手札115）Python+Dash快速web應用開發——交互表格篇（上）
- 2. （數據科學學習手札116）Python+Dash快速web應用開發——交互表格篇（中）
- 3. （數據科學學習手札104）Python+Dash快速web應用開發——回調交互篇（上）
- 4. （數據科學學習手札109）Python+Dash快速web應用開發——靜態部件篇（中）
- 5. （數據科學學習手札110）Python+Dash快速web應用開發——靜態部件篇（下）
- 6. （數據科學學習手札103）Python+Dash快速web應用開發——頁面佈局篇
- 7. （數據科學學習手札61）xpath進階用法
- 8. （數據科學學習手札57）用ggplotly()美化ggplot2圖像
- 9. （數據科學學習手札70）面向數據科學的Python多進程簡介及應用
- 10. （數據科學學習手札68）pandas中的categorical類型及應用
- 更多相關文章...
- • Maven Web 應用 - Maven教程
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • TiDB 在摩拜單車在線數據業務的應用和實踐
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. （數據科學學習手札115）Python+Dash快速web應用開發——交互表格篇（上）
- 2. （數據科學學習手札116）Python+Dash快速web應用開發——交互表格篇（中）
- 3. （數據科學學習手札104）Python+Dash快速web應用開發——回調交互篇（上）
- 4. （數據科學學習手札109）Python+Dash快速web應用開發——靜態部件篇（中）
- 5. （數據科學學習手札110）Python+Dash快速web應用開發——靜態部件篇（下）
- 6. （數據科學學習手札103）Python+Dash快速web應用開發——頁面佈局篇
- 7. （數據科學學習手札61）xpath進階用法
- 8. （數據科學學習手札57）用ggplotly()美化ggplot2圖像
- 9. （數據科學學習手札70）面向數據科學的Python多進程簡介及應用
- 10. （數據科學學習手札68）pandas中的categorical類型及應用