# react-admin

**Repository Path**: react_my_learning/react-admin

## Basic Information

- **Project Name**: react-admin
- **Description**: 一个用react+reducer+ant+axios开发的后台管理系统
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2020-07-07
- **Last Updated**: 2022-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 文件介绍
    mock 
        用于模拟数据
    pubilc
        公共文件
    src
        assets
            放置静态文件
        common
            用于放置公共组件
        View
            文件页面
        service
            用于请求数据
        utils
            工具文件夹,可以用于封装一些公共的js方法(如请求方法,时间)
        index.js
            用于控制逻辑的地方
        package.json
            配置我们所用到的依赖
        Reducer
            用于数据统一管理
        store.js
            作为中间件让reducer和Atction连接起来
        Action


### UI框架用到Ant Design

### 预编译器用到sass
        cnpm i sass-loader node-sass --save-dev
### 安装路由
        npm install react-router-dom --save-dev

### 项目功能
        页面重定向 app.js
              跳转页面登录前记录当前页面请求的页面,登录成功之后现跳回用户之前要登录的页面

### 配置代理
        "proxy":"http://localhost:8888"

### 表单验证
    https://www.npmjs.com/package/react-form-validator-core
    cnpm install react-form-validator-core --save

### 数据请求
        cnpm isntall axios --save

### 安装UI组件库
        cnpm install antd --save

### 安装redux
        cnpm install redux --save
        安装中间件
            安装下redux异步调用的库redux-thunk：
                npm install redux-thunk
            npm i redux react-redux --save-dev

### 数据调用三种方法
        1. 在userMger.js页面把所有请求放入redux中
            区别写在redux中,通过Import引入调用方法,全局可用
            创建一个window.store = createStore(reducer)，然后在需要的地方通过store.getState()去获取数据，通过store.dispatch去更新数据，通过store.subscribe去订阅数据变化然后进行setState...如果很多地方都这样做一遍，实在是不堪其重，而且，还是没有避免掉全局变量的不优雅。
        2.在RoleMgr.js页面会把所有请求放入loaddata()方法中;然后在页面调用,
            区别写在当前页面中用方法调用
        3.在perMgr/index.js(权限管理)使用react-redux
            npm install react-redux

            由于全局变量有诸多的缺点，那就换个思路，把store直接集成到React应用的顶层props里面，只要各个子组件能访问到顶层props就行了，比如这样：
ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>
    ,
    document.getElementById('root')
);
            通过高阶组件把store.getState()、store.dispatch、store.subscribe封装起来，子组件对store就无感知了，子组件正常使用props获取数据以及正常使用callback触发回调，相当于没有store存在一样

         使用了三种 不一样的请求方式存放位置
            效果都是一样的;可随意选择请求方法


### 安装antdesign字体颜色
    https://ant.design/docs/spec/colors-cn
        npm install @ant-design/colors --save
        页面使用 SetRolePer.js
            import { blue } from '@ant-design/colors';

### 动态获取用户查看菜单权限
    页面components/MenuBar/index.js