文章目录
- 概要
- 整体架构流程
- 技术名词解释
- React
- Express
- React Router
- Ant Design
- 技术细节
- 前端设计
- 后端逻辑
- 数据交互
- 小结
概要
本项目是一个基于React和Express的简单登录注册系统。通过前后端分离的方式，实现了用户的注册、登录和查看用户列表等功能。前端使用React框架构建了用户界面，后端使用Express框架处理用户请求。借助`Ant Design组件库，我们不仅实现了基本的用户认证功能，还为用户提供了友好的界面体验。
整体架构流程
- 用户在
Ant Design组件库提供的UI组件组成的前端界面输入邮箱和密码进行登录或注册操作。 - 前端通过
React Router实现页面导航，通过axios库将用户输入的数据发送HTTP请求至后端。 - 后端
Express服务器接收到请求后，根据路由管理不同请求，通过Controller层处理业务逻辑，并与数据库进行数据交互。 - 对于登录请求，后端查询数据库验证用户信息，返回登录成功或失败的响应。
- 对于注册请求，后端将新用户信息插入数据库，并返回注册成功或失败的响应。
- 对于查看用户列表的请求，后端从数据库中获取所有用户信息，并将其返回给前端。
- 前端接收到后端返回的数据后，根据需要更新界面展示用户列表或处理其他业务。
技术名词解释
React
React是一个用于构建用户界面的JavaScript库，它提供了组件化开发的思想和一系列工具，使得构建复杂用户界面更加简单和可维护。
Express
Express是一个基于Node.js的Web应用开发框架，它提供了一系列的功能和工具，使得构建高性能、可扩展的Web应用变得更加容易。
React Router
React Router是React的官方路由库，用于管理应用的路由和页面导航，使得构建单页面应用更加简单和灵活。
Ant Design
一套基于React的企业级UI组件库，提供了丰富的UI组件和设计模式，帮助开发者快速构建美观的用户界面。
技术细节
前端设计
使用React框架构建了登录注册页面，并采用Ant Design组件库提供的Input、Button等组件，使得界面清晰易用。
首先构建一个基础的react APP名字为react-study
npx create-react-app react-study
在src目录下新建一个components文件夹，里面存放各个组件，例如登录注册，用户列表等
导入整体布局layout.js，如下图所示：
登录Login.js
import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Form, Input, Button,message } from 'antd';
import axios from 'axios';
const Login = () => {
const navigate = useNavigate();
const onFinish = (n) => {
console.log(n.email);
console.log(n.password);
axios({
method: 'post',
url: 'http://localhost:2531/login',
data: {
email: n.email,
password: n.password
}
}).then((res) => {
if (res.data.success) {
message.success('登陆成功');
// console.log(`Object ${res.data}`);
console.log(res.data);
navigate('/users')
} else {
message.success('用户名或密码不正确');
console.log(res.data);
}
}).catch(() => {
console.log("Something went wrong. Plase try again later");
});
};
return (
<div className="login1">
<Form
name="normal_login"
labelCol={{
span: 8,
}}
wrapperCol={{
span: 16,
}}
style={{
maxWidth: 600,
}}
className="login-form"
initialValues={{ remember: true }}
onFinish={onFinish}
>
<Form.Item
name="email"
label="邮箱"
rules={[{ required: true, message: '请输入邮箱！' }]}
>
<Input placeholder="邮箱"
/>
</Form.Item>
<Form.Item
name="password"
label="密码"
rules={[{ required: true, message: '请输入密码！' }]}
>
<Input.Password
placeholder="密码"
/>
</Form.Item>
<Form.Item
wrapperCol={{
offset: 8,
span: 16,
}}
>
<Button type="primary" htmlType="submit" className="login-form-button">
登录
</Button>
<span className="zhuce">
<Link to="/register">没有账号？去注册吧！</Link>
</span>
</Form.Item>
</Form>
</div>
);
};
export default Login;
注册Register.js
import React from 'react';
import "./Login.css"
import { useNavigate } from 'react-router-dom';
import { Form, Checkbox, Input, Button, message } from 'antd';
// import { LockOutlined } from '@ant-design/icons';
import axios from 'axios';
const tailFormItemLayout = {
wrapperCol: {
xs: {
span: 24,
offset: 0,
},
sm: {
span: 16,
offset: 8,
},
},
};
const Register = () => {
// const [email, setEmail] = useState('');
// const [password, setPassword] = useState('');
const navigate = useNavigate();
const onFinish = (n) => {
axios({
method: 'post',
url: 'http://127.0.0.1:2531/register',
data: {
email: n.email,
password: n.password
}
}).then((res) => {
if (res.data.success) {
message.success('注册成功');
console.log(res.data);
navigate('/login')
} else {
message.success('注册失败');
console.log(res.data);
}
}).catch(() => {
console.log("Something went wrong. Plase try again later");
});
};
return (
<div className="login1">
<Form
name="normal_register"
labelCol={{
span: 8,
}}
wrapperCol={{
span: 16,
}}
style={{
maxWidth: 600,
}}
className="register-form"
initialValues={{ remember: true }}
onFinish={onFinish}
>
{/* 邮箱 */}
<Form.Item
name="email"
label="邮箱"
rules={[{ required: true, message: '请输入邮箱！' }]}
>
<Input
placeholder="邮箱"
// value={email}
// onChange={(e) => setEmail(e.target.value)}
/>
</Form.Item>
{/* 密码 */}
<Form.Item
name="password"
label="密码"
rules={[{ required: true, message: '请输入密码！' }]}
hasFeedback
>
<Input.Password
placeholder="密码"
// value={password}
// onChange={(e) => setPassword(e.target.value)}
/>
</Form.Item>
{/* 重新输入密码 */}
<Form.Item
name="confirm1"
label="验证密码"
dependencies={['password']}
hasFeedback
rules={[
{
required: true,
message: '请再一次填入密码!',
},
({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue('password') === value) {
return Promise.resolve();
}
return Promise.reject(new Error('两次密码不符!'));
},
}),
]}
>
<Input.Password
placeholder="重新输入密码"
/>
</Form.Item>
{/* 接受同意 */}
<Form.Item
name="agreement"
valuePropName="checked"
rules={[
{
validator: (_, value) =>
value ? Promise.resolve() : Promise.reject(new Error('Should accept agreement')),
},
]}
{...tailFormItemLayout}
>
<Checkbox>
I have read the <span>agreement</span>
</Checkbox>
</Form.Item>
{/* 注册按钮 */}
<Form.Item {...tailFormItemLayout}>
<Button type="primary" htmlType="submit" className="register-form-button">
注册
</Button>
</Form.Item>
</Form>
</div>
);
};
export default Register;
用户列表UserList.js
import React, { useState, useEffect } from "react";
import axios from 'axios';
const UserList = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get('http://localhost:2531/users');
setUsers(response.data);
} catch (error) {
console.error(error);
}
};
fetchData();
}, []);
return (
<div>
<h1>用户列表</h1>
<ul>
{users.map(user => (
<li key={user.id}>{user.email}</li>
))}
</ul>
</div>
)
}
export default UserList;
然后里面的组件都放在routes.js里面，使用 react-router-dom 实现路由功能，然后在 App.js 中引入 routes.js。
后端逻辑
后端通过Express框架处理了登录、注册和用户列表展示等请求，并利用Controller层来处理业务逻辑，从数据库中读取和存储用户信息。
在 react-study目录下创建server目录，在这个文件夹下创建db.js封装连接数据库的操作
在控制器controller.js里封装数据库的操作，查询user表的所有信息，插入数据，根据邮箱和密码查询数据
用路由POST挂载提交登录和注册的操作，GET得到所有列表
app.js里挂载路由的方法，用跨域访问不同的端口，npm run server启动服务
数据交互
前端通过axios库发送HTTP请求与后端通信，后端接收请求后进行相应的业务处理，并将处理结果返回给前端。
在react前端提交表单的时候，onFinish函数可以用axios库去提交login的请求，注册和登录的方法是相同的
获取用户列表也可以用axios库去得到数据库里的数据
小结
通过本项目的实践，我们深入了解了React、Express和Ant Design这些流行的前端和后端技术。通过将它们结合起来，我们成功构建了一个简单而完整的登录注册系统，为今后开发更复杂的应用奠定了基础。
