文章目录
- 概要
- 整体架构流程
- 技术名词解释
- 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 (
{ span: 8, }} wrapperCol={{ span: 16, }} style={{ maxWidth: 600, }} className="login-form" initialValues={{ remember: true }} onFinish={onFinish} [{ required: true, message: '请输入邮箱!' }]} [{ required: true, message: '请输入密码!' }]} { offset: 8, span: 16, }} 登录 没有账号?去注册吧!); }; 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 (
{ span: 8, }} wrapperCol={{ span: 16, }} style={{ maxWidth: 600, }} className="register-form" initialValues={{ remember: true }} onFinish={onFinish} {/* 邮箱 */} [{ required: true, message: '请输入邮箱!' }]} setEmail(e.target.value)} /> {/* 密码 */} [{ required: true, message: '请输入密码!' }]} hasFeedback setPassword(e.target.value)} /> {/* 重新输入密码 */} ['password']} hasFeedback rules={[ { required: true, message: '请再一次填入密码!', }, ({ getFieldValue }) = ({ validator(_, value) { if (!value || getFieldValue('password') === value) { return Promise.resolve(); } return Promise.reject(new Error('两次密码不符!')); }, }), ]} > {/* 接受同意 */} [ { validator: (_, value) = value ? Promise.resolve() : Promise.reject(new Error('Should accept agreement')), }, ]} {...tailFormItemLayout} > I have read the agreement {/* 注册按钮 */} ...tailFormItemLayout} 注册); }; 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 (
用户列表
-
{users.map(user => (
user.id}{user.email}
))}
然后里面的组件都放在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这些流行的前端和后端技术。通过将它们结合起来,我们成功构建了一个简单而完整的登录注册系统,为今后开发更复杂的应用奠定了基础。
还没有评论,来说两句吧...