# react-admin-common

**Repository Path**: shandongren/react-admin-common

## Basic Information

- **Project Name**: react-admin-common
- **Description**: react、react-redux、react-router-dom、antd
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2017-08-01
- **Last Updated**: 2022-05-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#react-admin-common
期望通过react、react-redux、react-router-dom、antd实现一套简单的后台管理端模板，配合koa接口系统，实现前后端分离。

## 依赖的模块
* redux
* react-router
* react-redux
* react-router-redux
* antd
* ~~react-router-dom~~

## todo
* 基础框架
	* ~~通过react-redux管理权限~~
	* ~~通过react-router管理路由~~
	* ~~集成antd，按需加载~~
	* ~~less编译，正常添加样式~~
* ~~登录页优化，用antd搞的漂亮一些~~
* 主页面，实现左右结构
	* ~~左：logo + 导航栏~~
	* ~~右：面包屑 + 主页面 + footer~~
* API接口调用
	* ~~确定接口调用方案~~
	* ~~解决跨域问题~~
* 工程打包
* 项目发布

## 更新日志
#### 2017-08-03（晚）
* package.json添加proxy，解决跨域请求问题
* axios请求数据
* 添加 src/libs/http/index.js，集中管理所有的API请求
* async/await进行数据请求
* redux异步请求数据的方案，也集成了，暂不使用
* 主页面，左侧menu抽离出组件，并实现主页面的同步切换
* 添加了babel相关的库，支持async/await的支持

#### 2017-08-03（早）
* react-router从v4版本降为v2.8.1版本
    * 通过IndexRedirect，默认跳转到/login
    * 通过IndexRoute实现，主页面默认显示/dashboard
* 添加react-router-redux
* 主页面，实现左右结构
* 主页面-右，抽取形成Header组件，显示"通知消息数"、"头像"

#### 2017-08-02
* 登录页面，antd实现并美化；
* 登录与主页面的跳转；

#### 2017-08-01
* 主框架
* 集成react-router v4
* 集成react-redux v4
* 集成react-antd

## 解决方案汇总

### 1. 跨域问题
先描述一下背景，通过create-react-app创建的工程，我希望通过post方式访问http://1.2.3.4:8002/api/home获取数据，然后就出现了跨域问题 **"No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access"**

##### 解决方案：
> 1. 本来应该是请求 http://1.2.3.4:8002/api/home 的，改为 http://localhost:3000/home， 意思就是说，我要从 http://localhost:3000/home 去获取数据，但是我们心里明白，真正的数据在 http://1.2.3.4:8002/api/home 呢，怎么办，进行下一步
> 2. 在package.json中添加 "proxy":"http://1.2.3.4:8002/api/"，就是说，会把所有 http://localhost:3000/ 的请求，全部转到 http://1.2.3.4:8002/api/ 上去
> 3. 经过上面两个步骤，最终的请求，就变成了，发往 http://localhost:3000/home 的请求，被转成了 http://1.2.3.4:8002/api/home， 跟期望的完全匹配

##### 说明：
> 用create-react-app创建的工程，看scripts/start.js的源码，最终发现会从package.json中去取proxy，所以改package.json才是关键
> npm start，其实是执行的 scripts/start.js，start.js的第60行 `const proxySetting = require(paths.appPackageJson).proxy;` 说的很明白了，会从`paths.appPackageJson`去取proxy，摁住ctrl点击`appPackageJson`发现指向的是`package.json`，这下子明白了，需要到package.json中去添加proxy

##### 错误方案：
改webpack.config.dev.js，添加devServer
> 因为`script/start.js`不会从`webpack.config.dev.js`去取，就算改了也没用

##### 官方文档（我没看懂）
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development