python dash 写一个登陆页 4

界面

在这里插入图片描述

代码：

这里引入了dash_bootstrap_components 进行界面美化，要记一些className，也不是原来说的不用写CSS了。

from dash import Dash, html, dcc, callback, Output, Input, State
import dash_bootstrap_components as dbcapp = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])app.layout = dbc.Container([dbc.Row(dbc.Col(html.H1("登录页"), width=12)),dbc.Row([dbc.Col(html.Label("手机号："), width=2),dbc.Col(dcc.Input(id='input-phone', type='text', placeholder='请输入11位手机号'), width=10),],className="mb-3",),dbc.Row([dbc.Col(html.Label("密码："), width=2),dbc.Col(dcc.Input(id='input-password', type='password', placeholder='请输入6位密码'), width=10),],className="mb-3",),dbc.Row(dbc.Col(html.Button('登录', id='login-button', className="btn btn-primary"), width=12),className="mb-3",),dcc.Store(id='toast-store', data={'is_open': False, 'message': ''}),dbc.Row(dbc.Col(html.Div(id='toast-container', children='', className="alert alert-warning"), width=12),className="mb-3",),],className="mt-5",
)@app.callback([Output('toast-store', 'data'),Output('toast-container', 'children')],[Input('login-button', 'n_clicks')],[State('input-phone', 'value'),State('input-password', 'value')]
)
def check_login(n_clicks, phone='', password=''):if n_clicks is None:message = ''return {'is_open': True, 'message': message}, messageelse:# 这里可以添加具体的登录验证逻辑# 为了演示，此处只是简单判断手机号和密码是否都是数字if phone is None or password is None:message = '手机号或密码格式不正确，请重新输入！'return {'is_open': True, 'message': message}, messageif not phone.isdigit() or not password.isdigit():message = '手机号或密码格式不正确，请重新输入！'return {'is_open': True, 'message': message}, messageelse:message = '登录成功！'return {'is_open': True, 'message': message}, message
if __name__ == '__main__':app.run_server(debug=True)