夜猫子的知识栈
神说要有光
2025-03-10
目录

聊天室：登录、注册页面开发

先不着急开发聊天功能，我们先来写一下前端页面。

先来写下用户注册、登录这两个：

新建个 react 项目：

npx create-vite chat-room-frontend
1

进入项目目录，把开发服务跑起来：

npm install
npm run dev
1
2

浏览器访问 http://localhost:5173 可以看到这个界面：

就说明 react 项目成功跑起来了。

然后我们添加 router：

npm install --save react-router-dom
1

在 main.tsx 加上路由的配置：

import ReactDOM from 'react-dom/client';
import { RouterProvider, createBrowserRouter, Link, Outlet } from 'react-router-dom';

function Aaa() {
  return <div>aaa</div>;
}

function Bbb(){
  return <div>bbb</div>;
}

function Layout() {
  return <div>
    <div><Link to="/aaa">to aaa</Link></div>
    <div><Link to="/bbb">to bbb</Link></div>
    <div>
      <Outlet/>
    </div>
  </div>
}

const routes = [
  {
    path: "/",
    element: <Layout/>,
    children: [
      {
        path: "aaa",
        element: <Aaa />,
      },
      {
        path: "bbb",
        element: <Bbb />,
      }    
    ],
  }
];
const router = createBrowserRouter(routes);

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(<RouterProvider router={router}/>);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

配置了 3 个路由：

访问 / 的时候，渲染 Layout 组件。

访问 /aaa 的时候，渲染 Aaa 组件。

访问 /bbb 的时候，渲染 Bbb 组件。

以及出错的时候，渲染 ErrorPage 组件。

其中，aaa 和 bbb 是 / 的子路由，渲染在 Layout 组件的 Outlet 的地方。

这就是 React Router 的基本用法。

测试下：

都没问题。

然后创建 3 个组件：Login、Register、UpdatePassword

pages/Login/index.tsx

export function Login() {
    return <div>login</div>   
}
1
2
3

pages/Register/index.tsx

export function Register() {
    return <div>register</div>
}
1
2
3

pages/UpdatePassword/index.tsx

export function UpdatePassword() {
    return <div>UpdatePassword</div>
}
1
2
3

改下 index.tsx 配置对应的路由：

import ReactDOM from 'react-dom/client';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import { Register } from './pages/Register';
import { Login } from './pages/Login';
import { UpdatePassword } from './pages/UpdatePassword';

const routes = [
  {
    path: "/",
    element: <div>index</div>,
  },
  {
    path: "login",
    element: <Login />,
  },
  {
    path: "register",
    element: <Register />,
  },
  {
    path: "update_password",
    element: <UpdatePassword />,
  }
];
const router = createBrowserRouter(routes);

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(<RouterProvider router={router}/>);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

测试下：

都没啥问题。

然后来写 Login 页面，也就是这个：

引入 Ant Design 组件库：

npm install antd --save
1

在 Login 组件引入 DatePicker 组件：

import { DatePicker } from "antd";

export function Login() {
    return <div><DatePicker/></div>   
}
1
2
3
4
5

没啥问题，说明 antd 引入成功了。

然后我们把登录页面写一下：

import { Button, Checkbox, Form, Input } from 'antd';
import './index.css';

interface LoginUser {
    username: string;
    password: string;
}

const onFinish = (values: LoginUser) => {
    console.log(values);
};


const layout1 = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 }
}

const layout2 = {
    labelCol: { span: 0 },
    wrapperCol: { span: 24 }
}

export function Login() {
    return <div id="login-container">
        <h1>聊天室</h1>
        <Form
            {...layout1}
            onFinish={onFinish}
            colon={false}
            autoComplete="off"
        >
            <Form.Item
                label="用户名"
                name="username"
                rules={[{ required: true, message: '请输入用户名!' }]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="密码"
                name="password"
                rules={[{ required: true, message: '请输入密码!' }]}
            >
                <Input.Password />
            </Form.Item>

            <Form.Item
                {...layout2}
            >
                <div className='links'>
                    <a href='/register'>创建账号</a>
                    <a href='/update_password'>忘记密码</a>
                </div>
            </Form.Item>

            <Form.Item
                {...layout2}
            >
                <Button className='btn' type="primary" htmlType="submit">
                    登录
                </Button>
            </Form.Item>
        </Form>
    </div>   
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

其中，layout 是 label 和 wrapper 的比例分配，antd 的栅格系统一共分了 24 份。

上面两个 Form.Item 是 label 4 份，wrapper 20 份。

下面两个 Form.Item 是 label 0 份，wrapper 24 份。

colon 为 false 是去掉 label 后的冒号

然后 css 部分如下：

#login-container {
    width: 400px;
    margin: 100px auto 0 auto;
    text-align: center;
}
#login-container .links {
    display: flex;
    justify-content: space-between;
}
#login-container .btn {
    width: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12

访问 /login，可以看到现在的登录页面：

输入用户名、密码，点击登录：

控制台打印了拿到的表单值。

我们在前端项目安装下 axios：

npm install --save axios
1

我们把后端服务端口改为 3005，并且开启跨域：

然后把后端项目跑起来：

npm run start:dev
1

在前端项目创建个 interfaces/index.ts

import axios from "axios";

const axiosInstance = axios.create({
    baseURL: 'http://localhost:3005/',
    timeout: 3000
});

export async function login(username: string, password: string) {
    return await axiosInstance.post('/user/login', {
        username, password
    });
}
1
2
3
4
5
6
7
8
9
10
11
12

在这里集中管理接口。

然后在 Login 组件 onFinish 里调用：

const onFinish = async (values: LoginUser) => {
    try {
        const res = await login(values.username, values.password);
        if(res.status === 201 || res.status === 200) {
            message.success('登录成功');

            console.log(res.data);
        } 
    } catch(e: any){
        message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
    }
};
1
2
3
4
5
6
7
8
9
10
11
12

登录下：

然后完善下 onFinish 方法：

const onFinish = async (values: LoginUser) => {
    try {
        const res = await login(values.username, values.password);
        if(res.status === 201 || res.status === 200) {
            message.success('登录成功');

            localStorage.setItem('token', res.data.token);
            localStorage.setItem('userInfo', JSON.stringify(res.data.user));
        } 
    } catch(e: any){
        message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13

返回 success 的时候，把 token 和 userInfo 存入 localStorage

测试下：

这样，登录的前后端功能就都完成了。

然后来写下注册：

实现下 Register 页面组件：

import { Button, Form, Input, message } from 'antd';
import './index.css';
import { useForm } from 'antd/es/form/Form';

export interface RegisterUser {
    username: string;
    nickName: string;
    password: string;
    confirmPassword: string;
    email: string;
    captcha: string;
}

const onFinish = async (values: RegisterUser) => {
    console.log(values);
};


const layout1 = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 }
}

const layout2 = {
    labelCol: { span: 0 },
    wrapperCol: { span: 24 }
}

export function Register() {
    const [form] = useForm();

    return <div id="register-container">
        <h1>聊天室</h1>
        <Form
            form={form}
            {...layout1}
            onFinish={onFinish}
            colon={false}
            autoComplete="off"
        >
            <Form.Item
                label="用户名"
                name="username"
                rules={[{ required: true, message: '请输入用户名!' }]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="昵称"
                name="nickName"
                rules={[{ required: true, message: '请输入昵称!' }]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="密码"
                name="password"
                rules={[{ required: true, message: '请输入密码!' }]}
            >
                <Input.Password />
            </Form.Item>

            <Form.Item
                label="确认密码"
                name="confirmPassword"
                rules={[{ required: true, message: '请输入确认密码!' }]}
            >
                <Input.Password />
            </Form.Item>

            <Form.Item
                label="邮箱"
                name="email"
                rules={[
                    { required: true, message: '请输入邮箱!' },
                    { type: "email", message: '请输入合法邮箱地址!'}
                ]}
            >
                <Input />
            </Form.Item>

            <div className='captcha-wrapper'>
                <Form.Item
                    label="验证码"
                    name="captcha"
                    rules={[{ required: true, message: '请输入验证码!' }]}
                >
                    <Input />
                </Form.Item>
                <Button type="primary">发送验证码</Button>
            </div>

            <Form.Item
                {...layout2}
            >
                <div className='links'>
                    已有账号？去<a href='/login'>登录</a>
                </div>
            </Form.Item>

            <Form.Item
                {...layout1}
                label=" "
            >
                <Button className='btn' type="primary" htmlType="submit">
                    注册
                </Button>
            </Form.Item>
        </Form>
    </div>   
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

和登录页面差不多，只不过多了一个验证码。

对应的 register.css 如下：

#register-container {
    width: 400px;
    margin: 100px auto 0 auto;
    text-align: center;
}
#register-container .links {
    display: flex;
    justify-content: flex-end;
}
#register-container .btn {
    width: 100%;
}
#register-container .captcha-wrapper {
    display: flex;
    justify-content: flex-end;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

浏览器访问下

填入信息，点击注册，控制台会打印表单值：

然后来调用下注册接口和发送验证码的接口。

在 interfaces 里添加这两个接口：

export async function registerCaptcha(email: string) {
    return await axiosInstance.get('/user/register-captcha', {
        params: {
            address: email
        }
    });
}

export async function register(registerUser: RegisterUser) {
    return await axiosInstance.post('/user/register', registerUser);
}
1
2
3
4
5
6
7
8
9
10
11

先调用发送验证码接口：

绑定点击事件。

使用 useForm 来拿到 form 的 api

async function sendCaptcha() {
    const address = form.getFieldValue('email');
    if(!address) {
        return message.error('请输入邮箱地址');
    }

    try {
        const res = await registerCaptcha(address);
        if(res.status === 201 || res.status === 200) {
            message.success('发送成功');
        }
    } catch(e: any) {
        message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在 sendCaptcha 里调用接口发送验证码。

测试下：

没啥问题。

然后再来调用注册接口：

const onFinish = async (values: RegisterUser) => {
    if(values.password !== values.confirmPassword) {
        return message.error('两次密码不一致');
    }
    const res = await register(values);

    if(res.status === 201 || res.status === 200) {
        message.success('注册成功');

    } else {
        message.error(res.data.data || '系统繁忙，请稍后再试');
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

测试下：

填入信息，点击发送验证码：

去邮箱里看一下验证码：

填入验证码，点击注册：

注册成功，数据库里也看到了这条记录：

这样，注册的前后端流程就走完了。

然后调用 useNavigate 的 navigate 方法，注册成功后导航到登录页：

const onFinish = async (values: RegisterUser) => {
    if(values.password !== values.confirmPassword) {
        return message.error('两次密码不一致');
    }
    try {
    const res = await register(values);

    if(res.status === 201 || res.status === 200) {
        message.success('注册成功');
        setTimeout(() => {
            navigate('/login');
        }, 1000);
    } 
    } catch(e: any) {
        message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

同理，login 成功也要加上跳转逻辑：

这样，登录和注册的前后端功能就都完成了。

案例代码在小册仓库：

前端代码 (opens new window)

后端代码 (opens new window)

# 总结

这节我们打通了前后端，加上了登录、注册、首页等页面。

首先，引入了 React Router 来做路由，引入了 antd 来做 UI 组件库。

然后，引入了 axios 来发请求。

发送邮件验证码正常，注册之后数据库也多了记录，登录成功之后 localStorage 也有了用户信息。

这样，注册登录就实现了完整的前后端功能。

编辑 (opens new window)
上次更新: 2025/10/27 10:53:52
聊天室：创建聊天室、加入群聊
聊天室：修改密码、信息页面开发

← 聊天室：修改密码、信息页面开发→

最近更新
01
UNiAPP中使用虚拟列表
01-09
02
uni统计使用
11-12
03
原生三方SDK集成探索
11-12
更多文章>
Copyright © 2019-2026 Study | MIT License