【源码】基于 TypeScript 和 React 框架的通用后台管理系统

项目简介

本项目基于 TypeScript、React、Ant Design 和 Redux 构建通用后台管理系统。采用模块化开发理念，拥有登录、侧边栏导航、异步操作等实用功能，易于扩展和维护，为开发者快速搭建后台管理系统提供良好基础。

项目的主要特性和功能

1. 多样化的页面与组件
   • 登录页面：用 canvas 绘制星空背景，支持验证码获取和登录验证，可自定义样式与登录逻辑。
   • 侧边栏：实现嵌套路由，有菜单组件抽取功能，支持手风琴效果、编程式导航，点击获取路径，刷新页面保持当前项选中并展开。
2. 高效的状态管理与异步处理
   • 状态管理：使用 React Redux 管理状态，支持模块化 reducer，优化 switch...case 语句，方便新增数据模块。
   • 异步操作：采用 redux - thunk 解决异步问题，手动封装异步函数。
3. 规范的数据交互
   • 请求封装：封装 axios 进行网络请求，抽取 API，支持请求和返回参数类型约束。
   • 业务逻辑：包含获取验证码、登录等业务逻辑，实现前置路由守卫，拦截和重定向未登录用户。
4. 样式管理与路径配置
   • 样式管理：用 reset - css 初始化样式，支持 SCSS 并模块化管理，避免样式冲突。
   • 路径配置：配置路径别名，输入 @/ 显示路径提示。

安装使用步骤

环境要求

确保已安装 node@16 和 npm@8。

安装依赖

下载项目源码文件后，在项目根目录下执行以下命令安装依赖： bash npm install

配置项目

1. 路径别名配置：若使用路径别名 @ 指向 src 目录，确保 tsconfig.json 中有如下配置： json "compilerOptions": { ..., "baseUrl": "./", "paths": { "@/*": [ "src/*" ] } }
2. Antd 样式按需引入：若需 Antd 样式自动按需引入，确保 vite.config.ts 中有如下配置： ```ts import styleImport, { AntdResolve } from 'vite-plugin-style-import';

export default defineConfig({ plugins: [ react(), styleImport({ resolves: [ AntdResolve() ] }) ], ... }); ```

运行项目

安装完依赖并完成配置后，在项目根目录下执行以下命令启动项目： bash npm start 启动成功后，在浏览器中访问 http://localhost:3000 即可查看项目。

开发调试

使用开发工具（如 VS Code）进行代码修改和测试。若需调试，可在浏览器中使用开发者工具进行调试。

部署上线

完成开发后，根据项目需求进行部署上线。可使用 npm run build 命令进行项目打包，然后将打包后的文件部署到服务器上。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】