完善验证页面和后端接口的链接
> 1. 配置了开发环境的端口转发 -> localhost:8080\
> 2. 完成了注册，登录，忘记密码页的功能
> 3. 为项目配置了vitest测试框架
> 4. 对这三个页面进行了测试
> 重写了/test/setup.ts
Change-Id: I46c600ce06d698dae6953b2e1e3ff4a98b0f3de4
diff --git a/src/feature/auth/Register.tsx b/src/feature/auth/Register.tsx
index 08edc70..0023b71 100644
--- a/src/feature/auth/Register.tsx
+++ b/src/feature/auth/Register.tsx
@@ -1,9 +1,12 @@
import { useEffect, useState } from 'react';
import { LockOutlined, MailOutlined, NumberOutlined, UserOutlined } from '@ant-design/icons';
-import {Button, Checkbox, Form, Input, Space} from 'antd';
-import { NavLink } from 'react-router';
-import authApi from "../../api/authApi.ts";
+import { Button, Checkbox, Form, Input, message, Space } from 'antd';
+import { NavLink, useNavigate } from 'react-router';
+import authApi from "../../api/authApi";
+import type { RejisterRequest } from "../../api/type";
+import type { AxiosResponse } from 'axios';
+// 定义表单字段的类型
interface FormValues {
name: string;
email: string;
@@ -16,42 +19,65 @@
function Register() {
const [countdown, setCountdown] = useState(0);
const [form] = Form.useForm<FormValues>();
- const emailValue = Form.useWatch('email', form)
+ const emailValue = Form.useWatch('email', form);
+ const [messageApi, contextHolder] = message.useMessage();
+ const nav = useNavigate(); // 用于页面跳转
- //
+ // 校验邮箱格式
function isValidEmail(email: string): boolean {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-
return emailRegex.test(email);
}
+ // 发送验证码
const sendVerificationCode = () => {
- // 如果邮箱校验不通过，则触发表单校验提示，并中断
if (!isValidEmail(emailValue)) {
form.validateFields(['email']);
return;
}
- // 发起 POST 请求到后端 /sendVerification
- authApi.sendVerificationCode(emailValue).catch()
- setCountdown(60);
+ authApi.sendVerificationCode(emailValue).then(() => {
+ setCountdown(60); // 开始倒计时
+ }).catch((error) => {
+ messageApi.error(error?.message || '验证码发送失败');
+ });
};
- // 发送表单倒计时
+ // 倒计时处理
useEffect(() => {
- if (countdown > 0) {
- const timer = setTimeout(() => {
- setCountdown(prev => prev - 1);
- }, 1000);
+ if (countdown === 0) return;
+ const timer = setInterval(() => {
+ setCountdown(prev => {
+ if (prev === 1) clearInterval(timer); // 倒计时结束
+ return prev - 1;
+ });
+ }, 1000);
- return () => clearTimeout(timer);
- }
+ return () => clearInterval(timer);
}, [countdown]);
-
// 表单提交
const onFinish = (values: FormValues) => {
- console.log('注册成功:', values);
+ const registerRequest: RejisterRequest = {
+ username: values.name,
+ email: values.email,
+ verificationCode: values.verifyCode,
+ password: values.password,
+ };
+
+ authApi.register(registerRequest).then((response: AxiosResponse) => {
+ if (response.data.code === 200) {
+ messageApi.success("注册成功");
+ form.resetFields(); // 清空表单
+ setTimeout(() => {
+ nav('/login'); // 注册成功后跳转到登录页面
+ }, 1500);
+ } else {
+ messageApi.error(response.data.message);
+ }
+ }).catch((error) => {
+ messageApi.error(error?.message || '注册失败，请重试');
+ });
};
return (
@@ -62,6 +88,7 @@
scrollToFirstError
>
<h2>注册</h2>
+ {contextHolder}
<Form.Item
name="name"
@@ -72,7 +99,6 @@
<Form.Item
name="email"
-
rules={[{ required: true, message: '请输入邮箱' }, { type: 'email', message: '邮箱格式错误' }]}
>
<Input
@@ -163,4 +189,4 @@
);
}
-export default Register;
\ No newline at end of file
+export default Register;