# react-manage-cms

**Repository Path**: viktor028/react-ygcms

## Basic Information

- **Project Name**: react-manage-cms
- **Description**: react 全家桶技术 实现后台管理
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-04-14
- **Last Updated**: 2021-08-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## react后台管理项目

### 1. 界面效果

![59fa3b0c673715af63290c6d75f549f](./media/59fa3b0c673715af63290c6d75f549f.png)

![ff96a6b407f87c8373bd61700b7392b](./media/ff96a6b407f87c8373bd61700b7392b.png)

### 2. 通用功能

1. 统一登录认证
2. token鉴权
3. 动态权限菜单
4. 动态标签导航
5. 分页
6. 图片文件上传
7. 列表显示
8. 编辑、删除功能

## 功能详解

### 1. 统一登录认证，vue使用的是全局路由导航实现， react中使用高阶组件(hoc)实现

![6b4eaeeefda027d83e046da65d7e1a1](./media/6b4eaeeefda027d83e046da65d7e1a1.png)

### 2. 网络统一使用axios库进行封装

![1cbecbdc23ff579085075f7af901225](./media/1cbecbdc23ff579085075f7af901225.png)

### 3. 数据存储方法

  1>cookie和localstore 封装， 
  2>  redux状态管理![492c2f8bf1925d43a9ca09819914c18](./media/492c2f8bf1925d43a9ca09819914c18.png)

### 4. redux 状态管理

![2a8a46c19d5aa21514bb2c81cd5cef4](./media/2a8a46c19d5aa21514bb2c81cd5cef4.png)

### 5. tag标签组件封装，实现标签导航

![3f9e318b6b075f3112cb70eaebc0ebb](./media/3f9e318b6b075f3112cb70eaebc0ebb.png)



### 6. 图片上传功能

实现方式： ant组件库 或者 自己实现

![c8b69efc08f3eebd8f77dae01abcd31](./media/c8b69efc08f3eebd8f77dae01abcd31.png)



### 7. 动态权限菜单, 实现方式和vue类似： 从网络获取菜单接口数据，做映射.

难点 1. 组件字符名映射成组件实例   如: 'userAdd'  => component('useradd)

1. 图标映射

![715a846c44698efae125b70bba660b1](./media/715a846c44698efae125b70bba660b1.png)