ReactJS登录表单实现输入值与数据库值校验及提示功能

你的代码存在几个核心问题，导致无法实现和数据库比对用户名密码的需求：

• 前端未获取数据库中的用户数据，直接使用未定义的employee变量进行判断，逻辑完全不成立
• 表单提交事件绑定错误，应该用onSubmit而非onClick
• 错误判断逻辑混乱，且前端直接做密码比对存在安全风险（正确做法是后端完成数据库比对后返回结果）

以下是修正后的完整代码：

import React, { useState } from 'react'
import { Button, Form } from 'semantic-ui-react'
import axios from 'axios'
import { useNavigate } from 'react-router'

export default function Login() {
    const navigate = useNavigate()

    const [username, setUsername] = useState('');
    const [employeePassword, setEmployeePassword] = useState('');
    
    const handleLogin = async (e) => {
        e.preventDefault();
        
        try {
            // 发送登录请求到后端，由后端完成数据库比对
            const response = await axios.post('http://localhost:5000/emp/login', {
                username,
                employee_password: employeePassword // 注意字段名要和后端接口要求一致
            });
            
            // 后端返回登录成功的响应（比如返回用户信息或token）
            console.log('登录成功');
            navigate('/read');
        } catch (error) {
            // 后端返回登录失败（比如用户名密码不匹配），这里捕获错误并弹出提示
            if (error.response?.status === 401) {
                alert('Username or Password does not match!');
            } else {
                console.error('登录请求出错:', error);
                alert('登录失败，请稍后重试');
            }
        }
    }

    return (
        <div>
            <Form onSubmit={handleLogin} className='create-form'>
                <h2>登录已有账号</h2>
                <Form.Field>
                    <label>输入用户名</label>
                    <input 
                        type='text' 
                        placeholder='Username' 
                        value={username} // 增加value绑定，确保受控组件
                        onChange={(e) => setUsername(e.target.value)}
                    />
                </Form.Field>
                <Form.Field>
                    <label>密码</label>
                    <input 
                        type='password' 
                        placeholder='Password' 
                        value={employeePassword} // 增加value绑定
                        onChange={(e) => setEmployeePassword(e.target.value)}
                    />
                </Form.Field>
                <Button type='submit'>登录</Button>
            </Form>
        </div>
    )
}

关键修正点说明： #

• 事件绑定：将表单的onClick改为onSubmit，这是表单提交的标准事件绑定方式
• 受控组件优化：给输入框添加value属性，确保输入状态完全由React状态控制，避免状态不一致
• 登录逻辑调整：删除前端无效的判断逻辑，改为通过axios请求后端接口，由后端负责和数据库中的用户名密码进行比对
• 错误处理：通过try/catch捕获请求错误，根据后端返回的状态码（比如401代表未授权/用户名密码不匹配）弹出对应提示
• 变量命名规范：将Employee_password改为小驼峰式的employeePassword，符合React代码规范

后端配合要求： #

你的后端接口http://localhost:5000/emp/login需要完成以下逻辑：

1. 接收前端发送的username和employee_password参数
2. 查询数据库，找到对应用户名的记录
3. 比对密码（注意要使用加密后的密码比对，不能明文存储密码）
4. 若比对成功，返回200状态码和用户信息/token；若失败，返回401状态码，前端捕获后弹出提示

内容的提问来源于stack exchange，提问作者Aman Pradhan