使用react+antd实现登录注册功能
时间: 2023-12-26 17:03:52 浏览: 53
好的,下面是一个简单的示例代码:
首先安装所需依赖:
```bash
npm install react antd axios --save
```
然后创建一个 `Login` 组件和一个 `Register` 组件,分别用于登录和注册的页面展示。其中,我们使用了 `Form` 和 `Input` 组件来实现表单输入,以及 `Button` 组件来实现按钮的功能。
```jsx
// Login.jsx
import React, { useState } from 'react';
import { Form, Input, Button, message } from 'antd';
import axios from 'axios';
const Login = () => {
const [loading, setLoading] = useState(false);
const onFinish = async (values) => {
setLoading(true);
try {
const response = await axios.post('/api/login', values);
message.success(response.data.message);
setLoading(false);
} catch (error) {
message.error(error.response.data.message);
setLoading(false);
}
};
return (
<Form name="login" onFinish={onFinish}>
<Form.Item
name="email"
rules={[{ required: true, message: 'Please input your email!' }]}
>
<Input placeholder="Email" />
</Form.Item>
<Form.Item
name="password"
rules={[{ required: true, message: 'Please input your password!' }]}
>
<Input.Password placeholder="Password" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" loading={loading}>
Login
</Button>
</Form.Item>
</Form>
);
};
export default Login;
```
```jsx
// Register.jsx
import React, { useState } from 'react';
import { Form, Input, Button, message } from 'antd';
import axios from 'axios';
const Register = () => {
const [loading, setLoading] = useState(false);
const onFinish = async (values) => {
setLoading(true);
try {
const response = await axios.post('/api/register', values);
message.success(response.data.message);
setLoading(false);
} catch (error) {
message.error(error.response.data.message);
setLoading(false);
}
};
return (
<Form name="register" onFinish={onFinish}>
<Form.Item
name="name"
rules={[{ required: true, message: 'Please input your name!' }]}
>
<Input placeholder="Name" />
</Form.Item>
<Form.Item
name="email"
rules={[{ required: true, message: 'Please input your email!' }]}
>
<Input placeholder="Email" />
</Form.Item>
<Form.Item
name="password"
rules={[{ required: true, message: 'Please input your password!' }]}
>
<Input.Password placeholder="Password" />
</Form.Item>
<Form.Item
name="confirmPassword"
rules={[
{ required: true, message: 'Please confirm your password!' },
({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue('password') === value) {
return Promise.resolve();
}
return Promise.reject(new Error('The two passwords do not match!'));
},
}),
]}
>
<Input.Password placeholder="Confirm Password" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" loading={loading}>
Register
</Button>
</Form.Item>
</Form>
);
};
export default Register;
```
在这里我们使用了 `axios` 来发送登录和注册的请求,需要注意的是,这里的请求地址是 `/api/login` 和 `/api/register`,而不是实际的后端接口地址,根据实际情况进行修改。
最后在需要展示登录和注册功能的页面中引入 `Login` 和 `Register` 组件即可。
```jsx
import React from 'react';
import Login from './Login';
import Register from './Register';
const LoginPage = () => {
return (
<div>
<h1>Login</h1>
<Login />
<hr />
<h1>Register</h1>
<Register />
</div>
);
};
export default LoginPage;
```
以上就是一个简单的使用 `react` 和 `antd` 实现登录和注册功能的示例代码,希望对你有帮助。