%20(2).svg)
项目简介
本项目是用于快速搭建中后台页面的系统。前端采用 React 框架，搭配 Ant Design 作为 UI 框架。使用 Redux 进行全局数据状态管理，通过 Axios 处理 Ajax 请求。同时支持 TypeScript 和 JavaScript 两种版本，为开发者提供便利。
项目的主要特性和功能
特性
- 菜单配置采用扁平化数据组织，便于编写和存库，能实现页面菜单、标题、侧边栏和顶部导航栏同步。
- 运用
@loadable/component实现页面懒加载，解决首次打开页面过慢问题。 - Ajax 请求遵循 restful 规范，有自动错误提示且提示可配置，还能自动打断未完成的请求。
- 具备权限控制功能，可根据不同角色的功能类型显示菜单，并对路由页面进行拦截。
- 支持自定义主题，允许用户自行定义界面颜色。
- 利用代理转发解决前端请求跨域问题。
- 路由可自动生成，采用去中心化设计。
功能
系统提供登录页、详情页、表单页、列表页、权限管理页和结果页等基础页面。
安装使用步骤
环境准备
假设用户已下载项目源码文件，需确保本地安装 Node.js 环境。
安装依赖
在项目根目录下，打开终端执行以下命令安装项目依赖：
bash
npm i
cnpm i
启动项目
项目提供多种启动方式：
- 请求接口数据，通过后台返回数据显示项目信息：
bash
npm run start
- 请求接口数据，通过后台返回数据显示项目信息，并且开启主题色配置：
bash
npm run "start:color"
- 本地模拟数据，使用假数据来显示项目信息：
bash
npm run "start:mock"
- 本地模拟数据，使用假数据来显示项目信息，并且开启主题色配置：
bash
npm run "start:mock_color"
启动成功后，在浏览器中打开 http://localhost:3000 访问项目。
打包项目
- 普通打包模式：
bash npm run build - 打包主题色（项目体积会有所增加）：
bash npm run "build:color"
创建新页面
- 在
src/pages文件夹下创建新文件，如test.js，编写页面组件代码： ```js // 函数组件 import React from "react";
export default function Test() { return
// 类组件 export default class Test extends React.Component { render() { return
// 添加路由信息 Test.route = {
};
// 或者使用以下方式添加路由信息，优先级更高 export const route = {
};
``
2. 浏览器访问http://localhost:3000/react-ant-admin/test` 查看新页面。
创建菜单
此添加方式适用于 npm run "start:mock" 启动的项目：
1. 在 src/mock/index.js 中找到 menu 变量，添加新的菜单信息：
js
let menu = [
// 原有菜单信息...
{
menu_id: 11, // 菜单id 用于关联权限
[MENU_TITLE]: "test", // 标题
[MENU_PATH]: "/test", // 访问路径
[MENU_KEY]: "test", // 唯一key
[MENU_PARENTKEY]: "", // 空表示 为主菜单而非子菜单
[MENU_ICON]: "icon_infopersonal", // 菜单图标
order: 1, // 菜单排序 越小越靠前
[MENU_KEEPALIVE]: "true" // 页面保持状态
}
];
2. 因菜单会存储在本地会话 window.sessionStorage 中，保存代码后需关闭当前窗口，重新打开地址 http://localhost:3000/react-ant-admin 查看新菜单。
切换 Vite 版本
- 切换分支：
bash D:\react-ant-admin>git checkout vite - 安装依赖：
bash D:\react-ant-admin>cnpm i - 启动项目：
bash D:\react-ant-admin>npm run dev
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】