%20(2).svg)
项目简介
本项目是基于React框架和Ant Design（antd）UI库构建的后台管理模板。运用了现代前端开发常用技术栈，如React、Redux、React Router等，结合antd丰富的UI组件，助力开发者快速搭建后台管理界面。项目结构清晰，代码易于维护，适用于企业级后台管理系统开发。
项目的主要特性和功能
1. 技术栈
- React：构建用户界面的JavaScript库。
- Ant Design：提供丰富UI组件，可快速构建美观的后台管理界面。
- Redux：用于全局状态管理，支持复杂状态逻辑。
- React Router：进行路由管理，支持动态路由和嵌套路由。
2. 组件化开发
- 采用组件化开发模式，便于复用和拓展。
- 支持按需加载，减少项目体积。
3. 路由管理
- 使用React Router进行路由管理，支持懒加载和动态加载。
- 支持嵌套路由，方便构建复杂页面结构。
- 实现基于角色的页面访问控制，需登录才能访问有权限的页面。
4. 接口管理
- 通过axios进行接口请求，便于与后端进行数据交互。
- 支持拦截器，方便处理请求和响应。
5. 代理配置
- 通过
http-proxy-middleware配置代理，便于在开发环境下请求后端接口。
6. 状态管理
- 使用Redux进行全局状态管理，支持复杂状态逻辑。
- 通过
react-redux连接React组件与Redux状态。
安装使用步骤
1. 安装依赖
确保已安装Node.js和Yarn（或npm），在项目根目录下运行以下命令安装依赖：
bash
yarn install
2. 配置代理
在src目录下创建setupProxy.js文件，并配置代理服务器地址：
```javascript
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) { app.use( createProxyMiddleware('/baseApis', { target: 'http://域名/baseApis/', changeOrigin: true, pathRewrite: { '^/baseApis': '/' } }) ); }; ```
3. 启动项目
安装完依赖后，运行以下命令启动项目：
bash
yarn start
项目启动后，默认在浏览器中打开后台管理页面，可按需登录并使用其他功能。
4. 自定义配置
若需对项目进行自定义配置，可使用react-app-rewired和customize-cra。在根目录下创建config-overrides.js文件并按需配置：
```javascript
const { override, addWebpackAlias, fixBabelImports, addLessLoader, addDecoratorsLegacy, addWebpackPlugin } = require('customize-cra');
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
const path = require('path');
const resolve = (dir) => path.join(__dirname, dir);
module.exports = override( fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: true }), addLessLoader({ javascriptEnabled: true, modifyVars: { '@primary-color': '#4e72b8' } }), addWebpackAlias({ '@': resolve('src') }), addDecoratorsLegacy(), addWebpackPlugin(new AntdDayjsWebpackPlugin()) ); ```
5. 路由配置
项目的路由配置在src/router目录下，可按需修改路由配置，添加新页面或组件。
6. 状态管理
项目的状态管理逻辑在src/redux目录下，可按需修改reducers和actions，添加新的状态管理逻辑。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】