❤ React-用户注册页面和功能的实现
1、用户注册编写
学会了上面userState的用法，接下来我们实现一个用户注册功能
新建pages文件夹，下面新建一个register.js 文件
function register()
{
return (
<div>
Register
</div>
)
}
export default register;
在app.js文件之中进行导入和使用
import Register from './pages/register.js'
function App() {
return (
<div className="App">
<Register></Register>
</div>
);
}
export default App;
查看一下我们的用户注册页面，没问题
Register
接下来我们就完善一下我们的注册页面
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 rel="nofollow" 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 rel="nofollow" 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');
};
用户注册以后可以直接去登陆！
我们的登陆注册功能就完善了！
这个时候查看我们的用户，我们的用户已经正常增加了！
