❤ React-用户注册页面和功能的实现

1、用户注册编写

学会了上面userState的用法，接下来我们实现一个用户注册功能

新建pages文件夹，下面新建一个register.js 文件

function register()
{
    return (
        <div>
            <h1>Register</h1>
        </div>
    )
}
export default register;

在app.js文件之中进行导入和使用

import Register from './pages/register.js'
function App() {
  return (
    <div className="App">
      <Register></Register>
    </div>
  );
}
export default App;

查看一下我们的用户注册页面，没问题

接下来我们就完善一下我们的注册页面

2、处理报错问题

这里我们尝试一下请求然后弹出我们的选择整个页面，发现页面上有个小报错

报错内容是： react.development.js:209 Warning: Each child in a list should have a unique "key" prop.

之前我们的代码是这样子
 <Modal
        title="窗口提示"
        open={visible}
        onCancel={onCancel}
        footer={[
            <div className="flex justify-center">
                <button key="register" onClick={onRegister} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-2">去注册</button>
                <button  key="login" onClick={onLogin} className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mx-2">去登录</button>
                <button key="not-login" onClick={onCancel} className="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded ml-2">暂不登录</button>
            </div>
          ]}
      >
        <div className="text-xl font-bold text-center bg-gradient-to-b from-blue-500 to-purple-600 bg-clip-text text-shadow-md">
            请选择您的操作
        </div>
 </Modal>

报错的含义就是说我们每个循环的部分都是唯一的key值，猜测一下，会不会在渲染footer的过程中其实本质是将外层元素进行循环进行渲染呢

那我们给他外层增加一下key 值试试

更改代码

<Modal
        title="窗口提示"
        open={visible}
        onCancel={onCancel}
        footer={
          <div className="flex justify-center">
            <div key="register">
              <button onClick={onRegister} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-2">
                去注册
              </button>
            </div>
            <div key="login">
              <button onClick={onLogin} className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mx-2">
                去登录
              </button>
            </div>
            <div key="not-login">
              <button onClick={onCancel} className="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded ml-2">
                暂不登录
              </button>
            </div>
          </div>
        }
      >
        <div className="text-xl font-bold text-center bg-gradient-to-b from-blue-500 to-purple-600 bg-clip-text text-shadow-md">
          请选择您的操作
        </div>
 </Modal>

看了一下效果，我们发现错误已经给解决了！

点击对应的部分我们可以去对应页面！

2、用户注册部分开发

先搭建一下注册的页面部分

<div>
<div className="backbaige  min-h-screen flex items-center justify-center">
    <div className="max-w-md w-full p-8 bg-white rounded-lg shadow-lg">
        <h2 className="text-2xl font-bold mb-4 text-center">登录</h2>

        <div className="sm:mx-auto sm:w-full sm:max-w-sm">
            <img
                className="mx-auto h-10 w-auto"
                src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
                alt="Your Company"
            />
            <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
                Sign in to your account
            </h2>
        </div>

        <div className="mb-4">
            <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
                <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
                    <form className="space-y-6" action="#" method="POST" onSubmit={handleSubmit}>
                        <div>
                            <label htmlFor="username" className="block text-sm font-medium leading-6 text-gray-900">
                                账号
                            </label>
                            <div className="mt-2">
                                <input
                                    id="username"
                                    name="username"
                                    type="text"
                                    autoComplete="false"
                                    required
                                    value={username}
                                    onChange={handleUsernameChange}
                                    className="forminput block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 pl-1.5"
                                />
                            </div>
                        </div>

                        <div>
                            <div className="flex items-center justify-between">
                                <label htmlFor="password" className="block text-sm font-medium leading-6 text-gray-900">
                                    密码
                                </label>
                            </div>
                            <div className="mt-2">
                                <input
                                    id="password"
                                    name="password"
                                    type="password"
                                    autoComplete="current-password"
                                    required
                                    value={password}
                                    onChange={handlePasswordChange}
                                    className="forminput block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 pl-1.5"
                                />
                            </div>
                        </div>

                        <div>
                            <div className="flex items-center justify-between">
                                <label htmlFor="password2" className="block text-sm font-medium leading-6 text-gray-900">
                                    确认密码
                                </label>
                                <div className="text-sm">
                                    <a href="#" className="font-semibold text-indigo-600 hover:text-indigo-500">
                                        Forgot password?
                                    </a>
                                </div>
                            </div>
                            <div className="mt-2">
                                <input
                                    id="password2"
                                    name="password2"
                                    type="password"
                                    autoComplete="current-password"
                                    required
                                    value={confirmPassword}
                                    onChange={handleConfirmPasswordChange}
                                    className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 pl-1.5"
                                />
                            </div>
                        </div>

                        <div>
                            <button
                                type="submit"
                                className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                            >
                                Sign in
                            </button>
                        </div>
                    </form>

                    <p className="mt-10 text-center text-sm text-gray-500">
                        Not a member?{' '}
                        <a href="#" className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">
                            Start a 14 day free trial
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

先来预览一下我们的注册页面

完善一下逻辑 主要其实就是注册的方法

 // 处理表单提交的函数
    const handleSubmit = async(event) => {
        event.preventDefault();
        // 在实际应用中，这里可以发送注册请求到服务器进行用户注册
        // 这里简单地假设密码和确认密码相同才能注册成功
        console.log(username, 'username');
        console.log(password, 'password');
        console.log(confirmPassword, 'confirmPassword');

        if (password === confirmPassword) {
            let params={
                username,
                password,
            }
            if (username === '' || password === '') {
                alert('用户名和密码不能为空');
                return;
            }else{
                console.log(params, 'params');
                try {
                    const res:any = await registerUser(params);
                    // const data = response.data;
                    console.log(res,'res');
                    if(res.code==200){
                        alert(res.message);
                        console.log('token',res.token);
                        // 更新登录状态和 Token
                        // dispatch(loginSuccess({ token: res.token }));
                        console.log('跳转到登录页面');
                        // 跳转到主页
                        //  window.location.href = '/admin/home';
                    }else{
                        alert(res.message);
                    }
                } catch (error) {
                    console.log('获取数据详情失败，请重试！',error);
                } finally {
                    console.log('完！');
                }
            }
            return;
            // setIsRegistered(true);
        } else {
            alert('密码和确认密码不一致');
        }
    };

注册成功以后会提示我们！

当用户已经存在的时候告知用户，必须注册其他的用户名才可以！

3、完善注册部分

接下来我们就可以直接去登陆页面然后进行登陆！

完善一下登陆成功以后直接去登陆

 <div onClick={() => toLogin()}> </div>
 
 const toLogin = () => {
        navigate('/login');
 };

用户注册以后可以直接去登陆！

我们的登陆注册功能就完善了！

这个时候查看我们的用户，我们的用户已经正常增加了！