# react-ant-admin
**Repository Path**: labike/react-ant-admin
## Basic Information
- **Project Name**: react-ant-admin
- **Description**: react-admin适用于快速搭建中后台页面，管理系统架构。react全家桶。admin管理系统
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://azhengpersonalblog.top/react-ant-admin/
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 217
- **Created**: 2021-09-23
- **Last Updated**: 2022-05-31
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# react-ant-admin
[](https://github.com/kongyijilafumi/react-ant-admin)
[](https://github.com/kongyijilafumi/react-ant-admin/network/members)
[](https://gitee.com/kong_yiji_and_lavmi/react-ant-admin/stargazers)
[](https://gitee.com/kong_yiji_and_lavmi/react-ant-admin/members)
TypeScript 版[GitHub(国外地址)](https://github.com/kongyijilafumi/react-ant-admin-ts) |
TypeScript 版[码云(国内镜像)](https://gitee.com/kong_yiji_and_lavmi/react-ant-admin-ts)
此框架使用与二次开发，前端框架使用react，UI框架使用ant-design，全局数据状态管理使用redux，ajax使用库为axios。用于快速搭建中后台页面。欢迎各位提[issue](https://github.com/kongyijilafumi/react-ant-admin/issues)
* [react](https://react.docschina.org/)
* [react-router-cache-route](https://www.npmjs.com/package/react-router-cache-route)
* [ant-design](https://ant.design/index-cn)
* [redux](https://redux.js.org/)
* [axios](http://www.axios-js.com/)
## 预览地址
[react-ant-admin](http://azhengpersonalblog.top/react-ant-admin/)
nodejs后台web服务:[react-ant-admin-server](https://gitee.com/kong_yiji_and_lavmi/react-ant-admin-server)
## 文档地址
[react-ant-admin文档地址](https://azhengpersonalblog.top/doc-react-ant-admin/)
更多建议欢迎骚扰~
[qq交流群:532948540](https://qm.qq.com/cgi-bin/qm/qr?k=Wo_kXUOA-mTBviZ6gF4H912AKdE5vTML&jump_from=webapi)
欢迎各位提出建议与问题!
## 特性
- 菜单配置:扁平化数据组织,方便编写,存库,页面菜单,标题,侧边栏,顶部导航栏同步
- 页面懒加载:使用[@loadable/component](https://loadable-components.com/docs/getting-started/)来解决首次打开页面过慢的问题.
- Ajax请求：restful规范，自动错误提示，提示可配置；自动打断未完成的请求；
- 权限控制: 根据不用角色的功能类型显示菜单,路由页面拦截.
- 自定义主题，可以自己定义界面颜色。
- 代理转发，解决前端请求跨域问题。
- 路由自动生成，去中心化。
系统提供了一些基础的页面
- 登录页
- 详情页
- 表单页
- 列表页
- 权限管理
- 结果页
## 快速使用
1. 下载本项目到本地
```
D:> git clone https://github.com/kongyijilafumi/react-ant-admin.git //github地址 慢
D:> git clone https://gitee.com/kong_yiji_and_lavmi/react-ant-admin.git //码云地址 快
```
2. 安装依赖
```js
// npm 慢
npm i
// cnpm 国内镜像 快
cnpm i
```
3. 启动
```
npm run "start mock" // 启动本地mock数据 (暂时没有后台接口,请用此模式预览项目)
npm run start // 启动本地API接口来获取数据
浏览器打开 http://localhost:3000 即可
```
## 创建一个新的页面
1. 在src/pages文件夹下创建一个test.js文件,代码如下
```js
// 函数组件
import React from "react";
export default function Test() {
return test页面
;
}
// 类组件
export default class Test extends React.Component {
render() {
return test页面
;
}
}
/**
* 给 pages 组件追加路由信息
* export default 组件的原型上添加route信息,或者向外暴露一个 route
* 会被webpack的webpack-router-generator插件捕获信息
*/
// 1.被捕获 export default 原型上的route
Test.route={
tile : "test页面",
key : "test",
path: "/test"
}
// 2.被捕获 暴露的route信息 优先级比上面高
export const route = {
tile : "test页面",
key : "test",
path: "/test"
}
```
2. 浏览器访问 http://localhost:3000/react-ant-admin/test 即可
## 创建一个菜单
该添加方式适用于 npm run "start mock" 启动的项目
1. 在``src/mock/index.js`` 找到``menu``变量,往里添加一条菜单信息.代码如下所示
```js
import dayjs from "dayjs";
let menu = [
{
menu_id: 2,
title: "详情页",
path: "/details",
key: "details",
parentKey: "",
icon: "icon_edit",
order: 1,
keepAlive: "true",
},
{
menu_id: 1,
title: "个人中心",
path: "/person",
key: "detailsPerson",
parentKey: "details",
icon: "icon_infopersonal",
order: 1,
keepAlive: "true",
},
// .... 开始添加菜单信息 ....
{
menu_id: 9, // 菜单id 用于关联权限
title: "test", // 标题
path: "/test",// 访问路径
key: "test", // 唯一key
parentKey: "",// 空表示 为主菜单而非子菜单
icon: "icon_infopersonal",// 菜单图标
order:1,// 菜单排序 越小越靠前
keepAlive: "true", // 页面保持状态
}
// .....
]
```
2. 由于菜单会走本地会话存储``window.sessionStorage``,所以保存代码后需要关闭当前窗口,重新打开地址 http://localhost:3000/react-ant-admin
>打开之后,会发现菜单会多出一个``test``栏目,点击会打开之前我们创建的test页面.这样就完成了菜单和页面的编写.
## 脚本启动
在完成依赖安装之后,有以下几种启动方式。
- npm run start
请求接口数据，通过后台返回数据显示项目信息
- npm run "start color"
请求接口数据，通过后台返回数据显示项目信息，并且开启主题色配置。
- npm run "start mock"
本地模拟数据，假数据来显示项目信息
- npm run "start mock color"
本地模拟数据，假数据来显示项目信息，并且开启主题色配置。
- npm run build
普通打包模式。
- npm run "build color"
打包主题色。项目体积会有所增加。
### vscode快速启动项目
使用[vscode编辑器](https://code.visualstudio.com/)[下载地址](https://blog.csdn.net/bielaiwuyang1999/article/details/117814237)
把此项目文件夹拖入`vscode编辑器`,找到左下角`npm 脚本栏目`选择快速启动，免命令。
## 项目截图
* 登录
* 详情页
* 列表
* 权限管理
* 结果页
