WHCSRL 技术网

Python+Dash:快速开发一个在线调查问卷❥举办聚会,再也不用挨个问同事了,甩手就是一个问卷❥

做一个会写有用代码的人!调查问卷这种东西随处可见,主要为了采集用户的信息,保存到文件或数据库里,供查看或分析用户。那么,做起来难不难呢,别想的太多,做就完了!

点击这里,可跳转至:在线调查问卷Demo

1.导入相关依赖库

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
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

2.编写Dash页面布局

在这里插入图片描述
在这里插入图片描述

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': 'M'},
                    {'label': '女', 'value': 'F'}
                ]
            ),
            html.Br(),

            html.P('2.常用编程语言:'),
            html.Hr(),
            dbc.Checklist(
                id='code-language',
                inline=True,
                options=[
                    {'label': 'Python', 'value': 'python'},
                    {'label': 'Javascript', 'value': 'javascript'},
                    {'label': 'Java', 'value': 'java'},
                    {'label': 'Scala', 'value': 'scala'},
                    {'label': 'C', 'value': 'c'},
                    {'label': '其他', 'value': 'other'},
                ]
            ),
            html.Br(),

            html.P('3.使用dash的程度:'),
            html.Hr(),
            dbc.RadioItems(
                id='frequency',
                inline=True,
                options=[
                    {'label': '经常', 'value': 'often'},
                    {'label': '偶尔', 'value': 'little'},
                    {'label': '没用过', 'value': 'no-use'}
                ]
            ),
            html.Br(),

            html.P('4.对以下哪些感兴趣:'),
            html.Hr(),
            dbc.Checklist(
                id='hobbies',
                options=[
                    {'label': '构建在线数据可视化作品', 'value': 'web'},
                    {'label': '制作机器学习demo', 'value': 'ml'},
                    {'label': '为企业开发BI仪表盘', 'value': 'bi'},
                    {'label': '为企业开发酷炫的指标监控大屏', 'value': 'screen'},
                    {'label': '开发有用的在线小工具', 'value': 'tools'},
                    {'label': '其他', 'value': 'other'},
                ]
            ),
            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('6.手机号码:'),
            html.Hr(),
            dbc.Input(
                id='tel',
                placeholder='填写常用手机号',
                autoComplete='off',
                style={
                    'width': '300px'
                }
            ),
            html.Hr(),

            dbc.Button(
                '点击提交',
                id='submit'
            ),

            html.P(id='user-info')

        ],
        style={
            'margin-top': '50px',
            'margin-bottom': '200px'
        }
    )
)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107

3.编写回调函数

在这里插入图片描述

@app.callback(
    Output('user-info', 'children'),
    Input('submit', 'n_clicks'),
    [
        State('gender', 'value'),
        State('code-language', 'value'),
        State('frequency', 'value'),
        State('hobbies', 'value'),
        State('tel', 'value')
    ],
    prevent_initial_call=True
)
def fetch_info(n_clicks, gender, code_language, frequency, hobbies, tel):
    if all([gender, code_language, frequency, hobbies, tel]):
        with open(tel + '.json', mode='w', encoding='utf-8') as jf:
            json.dump(
                {
                    'gender': gender,
                    'code_language': code_language,
                    'frequency': frequency,
                    'hobbies': hobbies,
                }, jf
            )
        return 'submit success!'
    else:
        return '信息未填写完全!'


@app.callback(
    [Output('tel', 'valid'),
     Output('tel', 'invalid')],
    Input('tel', 'value'),
    prevent_initial_call=True
)
def check_tel(value):
    try:
        if re.findall('d+', value)[0] == value and len(value) == 11:
            return True, False
    except:
        pass
    return False, True
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

4.Debug启动

if __name__ == '__main__':
    app.run_server(debug=True)
  • 1
  • 2

5.完整代码

# 制作在线问卷调查

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': 'M'},
                    {'label': '女', 'value': 'F'}
                ]
            ),
            html.Br(),

            html.P('2.常用编程语言:'),
            html.Hr(),
            dbc.Checklist(
                id='code-language',
                inline=True,
                options=[
                    {'label': 'Python', 'value': 'python'},
                    {'label': 'Javascript', 'value': 'javascript'},
                    {'label': 'Java', 'value': 'java'},
                    {'label': 'Scala', 'value': 'scala'},
                    {'label': 'C', 'value': 'c'},
                    {'label': '其他', 'value': 'other'},
                ]
            ),
            html.Br(),

            html.P('3.使用dash的程度:'),
            html.Hr(),
            dbc.RadioItems(
                id='frequency',
                inline=True,
                options=[
                    {'label': '经常', 'value': 'often'},
                    {'label': '偶尔', 'value': 'little'},
                    {'label': '没用过', 'value': 'no-use'}
                ]
            ),
            html.Br(),

            html.P('4.对以下哪些感兴趣:'),
            html.Hr(),
            dbc.Checklist(
                id='hobbies',
                options=[
                    {'label': '构建在线数据可视化作品', 'value': 'web'},
                    {'label': '制作机器学习demo', 'value': 'ml'},
                    {'label': '为企业开发BI仪表盘', 'value': 'bi'},
                    {'label': '为企业开发酷炫的指标监控大屏', 'value': 'screen'},
                    {'label': '开发有用的在线小工具', 'value': 'tools'},
                    {'label': '其他', 'value': 'other'},
                ]
            ),
            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('6.手机号码:'),
            html.Hr(),
            dbc.Input(
                id='tel',
                placeholder='填写常用手机号',
                autoComplete='off',
                style={
                    'width': '300px'
                }
            ),
            html.Hr(),

            dbc.Button(
                '点击提交',
                id='submit'
            ),

            html.P(id='user-info')

        ],
        style={
            'margin-top': '50px',
            'margin-bottom': '200px'
        }
    )
)


@app.callback(
    Output('user-info', 'children'),
    Input('submit', 'n_clicks'),
    [
        State('gender', 'value'),
        State('code-language', 'value'),
        State('frequency', 'value'),
        State('hobbies', 'value'),
        State('tel', 'value')
    ],
    prevent_initial_call=True
)
def fetch_info(n_clicks, gender, code_language, frequency, hobbies, tel):
    if all([gender, code_language, frequency, hobbies, tel]):
        with open(tel + '.json', mode='w', encoding='utf-8') as jf:
            json.dump(
                {
                    'gender': gender,
                    'code_language': code_language,
                    'frequency': frequency,
                    'hobbies': hobbies,
                }, jf
            )
        return 'submit success!'
    else:
        return '信息未填写完全!'


@app.callback(
    [Output('tel', 'valid'),
     Output('tel', 'invalid')],
    Input('tel', 'value'),
    prevent_initial_call=True
)
def check_tel(value):
    try:
        if re.findall('d+', value)[0] == value and len(value) == 11:
            return True, False
    except:
        pass
    return False, True


if __name__ == '__main__':
    app.run_server(debug=True)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164

一次不够看,收藏之后,下次再看,爱你们呦!

推荐阅读