(数据科学学习手札112)Python+Dash快速web应用开发——表单控件篇(上) (3)

  而除了上述两种供用户对多个选项进行单选或多选的部件之外,dash_bootstrap_components中还有可以创建单个选择部件的RadioButton与Checkbox,它们只能进行勾选操作,对应回调用的的输入值为checked,是个Bool型属性,用来区分是否被勾选上,这里就不再赘述。

3 动手编写在线调查问卷

  学习完今天的内容之后,我们就可以将它们应用到实际需求中,譬如我们现在需要向其他人发放一份调查问卷,其中涉及到不少输入文字或单选或多选内容,最后我们还需要将用户填写完成的表单内容保存到本地,用Dash就可以很快速地完成这项工作:

(数据科学学习手札112)Python+Dash快速web应用开发——表单控件篇(上)

图7

  对应的代码如下:

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(, inline=True, options=[ {'label': '男', 'value': '男'}, {'label': '女', 'value': '女'} ] ), html.Br(), html.P('2. 您常用的编程语言有:'), html.Hr(), dbc.Checklist(, 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(, inline=True, options=[ {'label': '经常', 'value': '经常'}, {'label': '偶尔', 'value': '偶尔'}, {'label': '很少使用', 'value': '很少使用'}, {'label': '没听说过', 'value': '没听说过'}, ] ), html.Br(), html.P('4. 您对以下哪些方面感兴趣:'), html.Hr(), dbc.Checklist(, 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(, 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(, placeholder='填入您的电话或手机号码!', autoComplete='off', # 关闭浏览器自动补全 style={ 'width': '300px' } ), html.Hr(), dbc.Button( '点击提交', ), 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)

  以上就是本文的全部内容,欢迎在评论区与我进行讨论,分享你的见解~

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zydsfx.html