# react-ant-admin-ts

**Repository Path**: feifandeni_1/react-ant-admin-ts

## Basic Information

- **Project Name**: react-ant-admin-ts
- **Description**: 使用TypeScript开发的admin管理系统。采用前后端分离，使用react,and-design,axios,redux等技术手段实现。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 35
- **Created**: 2022-02-08
- **Last Updated**: 2022-07-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-ant-admin(TypeScript 版)

此框架使用与二次开发，前端框架使用 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 文档地址](https://azhengpersonalblog.top/doc-react-ant-admin/)

## 特性

- 菜单配置:扁平化数据组织,方便编写,存库,页面菜单,标题,侧边栏,顶部导航栏同步
- 页面懒加载:使用[@loadable/component](https://loadable-components.com/docs/getting-started/)来解决首次打开页面过慢的问题.
- Ajax 请求：restful 规范，自动错误提示，提示可配置；自动打断未完成的请求；
- 权限控制: 根据不用角色的功能类型显示菜单,路由页面拦截.
- 自定义主题，可以自己定义界面颜色。
- 代理转发，解决前端请求跨域问题。
- 路由自动生成，去中心化。

系统提供了一些基础的页面

- 登录页
- 详情页
- 表单页
- 列表页
- 权限管理
- 结果页

## 快速使用

1. 下载本项目到本地

```


```

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 <div>test页面</div>;
}

// 类组件
export default class Test extends React.Component {
  render() {
    return <div>test页面</div>;
  }
}

/**
 * 给 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"

打包主题色。项目体积会有所增加。