当前位置：首页 > news >正文

FastAPI+React18开发通用后台管理系统用户功能实战

news 2025/11/24 17:48:38

最近开发了一个React18的后台管理系统，登录界面如下：
在这里插入图片描述

如果登录成功了则提示并跳转到首页：
在这里插入图片描述

点击注销按钮则提示退出系统成功：
在这里插入图片描述

没有登录就访问首页则提示请先登录。
在这里插入图片描述

这些功能是怎么实现的呢？

先看看登录功能使用FastAPI是怎么开发的。

from fastapi import FastAPI, HTTPException
from pydantic import BaseModel
from fastapi.middleware.cors import CORSMiddlewareapp = FastAPI()
app.add_middleware(CORSMiddleware,allow_origins=["*"],allow_credentials=True,allow_methods=["*"],allow_headers=["*"],
)class LoginSchema(BaseModel):username: strpassword: str@app.post("/login")
async def login(user: LoginSchema):if user.username == "admin" and user.password == "123456":return {"token": "xxx"}raise HTTPException(400, "用户名或密码错误")if __name__ == '__main__':import uvicornuvicorn.run(app, host='0.0.0.0', port=8888)

再来看看登录功能的前端代码是怎么写的：

import "./login.css"
import {Button, Checkbox, Form, Input, message} from 'antd';
import req from "../utils/request.js"
import {useNavigate} from "react-router-dom";
import storage from "../utils/storage.js";function Login() {const navigate = useNavigate();// 点击登录const onFinish = (values) => {const data = {username: values.username,password: values.password,}req.post("/login", data).then(res => {message.success("登录成功");storage.set("token", res.token)navigate("/")}).catch(err => {console.log("登录失败", err)})};return <div className="login"><div className="login-form"><Formname="basic"onFinish={onFinish}><Form.Itemlabel="账号"name="username"rules={[{required: true,message: '账号不能为空',},]}><Input/></Form.Item><Form.Itemlabel="密码"name="password"rules={[{required: true,message: '密码不能为空',},]}><Input.Password/></Form.Item><Form.Itemname="remember"valuePropName="checked"style={{marginLeft: '50px'}}><Checkbox>记住我</Checkbox></Form.Item><Form.Item style={{marginLeft: '50px'}}><Button type="primary" htmlType="submit">立即登录</Button></Form.Item></Form></div></div>
}export default Login

首页的代码则相对比较简单：

import {useEffect} from "react";
import req from "../utils/request"
import money from "../utils/money"
import date from "../utils/date"
import {useNavigate} from "react-router-dom";
import storage from "../utils/storage.js";
import {message} from "antd";function Index() {const navigate = useNavigate();useEffect(() => {if (!storage.get("token")) {message.error("请先登录！")navigate("/login")}}, [])useEffect(() => {req.get("/").then(resp => {console.log("xxx", resp)}).catch(err => {console.log("错误了", err)})}, [])// 用户注销const logout = () => {storage.delete("token")navigate("/login")message.success("退出系统成功！")}return (<div className="container"><h1>首页</h1><h3>格式化金额：{money.formatYuan(333444555)}</h3><h3>格式化日期：{date.format()}</h3><button onClick={logout}>注销</button></div>)
}export default Index