Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/pmg1989/react_app_dashboard

react_app_dashboard
https://github.com/pmg1989/react_app_dashboard

Last synced: about 21 hours ago
JSON representation

react_app_dashboard

Host: GitHub
URL: https://github.com/pmg1989/react_app_dashboard
Owner: pmg1989
License: mit
Created: 2018-05-31T03:17:57.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2018-05-31T03:24:30.000Z (over 6 years ago)
Last Synced: 2024-05-21T07:41:59.646Z (6 months ago)
Language: JavaScript
Size: 4.05 MB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # react_app_dashboard

[![React Native](https://img.shields.io/badge/react-^15.4.1-brightgreen.svg?style=flat-square)](https://github.com/facebook/react)

[![Ant Design](https://img.shields.io/badge/ant--design-^2.7.0-yellowgreen.svg?style=flat-square)](https://github.com/ant-design/ant-design)

[![dva](https://img.shields.io/badge/dva-^1.1.0-orange.svg?style=flat-square)](https://github.com/dvajs/dva)

[![GitHub issues](https://img.shields.io/github/issues/zuiidea/antd-admin.svg?style=flat-square)](https://git.coding.net/newband-dev/app_dashboard.git)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://coding.net/t/newband-dev/p/app_dashboard/git/merges)

[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT)

## 特性

- 基于[react](https://github.com/facebook/react)，[ant-design](https://github.com/ant-design/ant-design)，[dva](https://github.com/dvajs/dva)，[Mock](https://github.com/nuysoft/Mock) 企业级后台管理系统最佳实践

- 基于[Mock](https://github.com/nuysoft/Mock)实现脱离后端独立开发

- 基于Antd UI 设计语言，提供后台管理系统常见使用场景

- 基于[dva](https://github.com/dvajs/dva)动态加载 Model 和路由，按需加载

- 浅度响应式设计

## 开发及构建

### 目录结构

```bash

├── /mock/           # 数据mock的接口文件

├── /dist/           # 项目输出目录

├── /src/            # 项目源码目录

│ ├── /components/   # 项目组件

│ ├── /routes/       # 路由组件

│ ├── /models/       # 数据模型

│ ├── /services/     # 数据接口

│ ├── /utils/        # 工具函数

│ ├── route.js       # 路由配置

│ ├── index.js       # 入口文件

│ └── index.html     

├── package.json     # 项目信息

└── proxy.config.js  # 数据mock配置

```

### 快速开始

克隆项目文件:

```

git clone [email protected]:pmg1989/react_app_dashboard.git

```

进入目录安装依赖:

```

npm i 或者 yarn install

```

开发：

```bash

npm run dev    # 使用mock拦截请求，数据存储在localStroge里

打开 http://localhost:8000

```

构建：

```bash

npm run build

将会生成dist目录

```

### 注意事项

- 生产环境中，已有数据接口，请将`webpack.config.js`中的 `webpackConfig.plugins.push(new webpack.DefinePlugin({ 'newband.admin.isMock': true }))`改为false

- 开发环境中，如再mock目录新增文件，请在`src/utils/mock.js`第二行的`mockData`数组中添加

- 如需重写antd样式配置，请修改`src/theme.js`

- 项目配置文件在`src/utils/config.js`

- 如需重写异步请求函数，请修改`src/utils/request.js`

  （关于为什么使用robe-ajax而不是fetch：在一个无服务器的环境中模拟数据请求，[Mock](https://github.com/nuysoft/Mock)不能拦截Fetch，只能拦截XHR，所以我选了一个类似jquery Ajax的库robe-ajax）

## 参考

用户列表：https://github.com/dvajs/dva/tree/master/examples/user-dashboard

dashboard设计稿：https://dribbble.com/shots/3108122-Dashboard-Admin （已征得作者同意）

## 截屏

web

![](assets/demo4.gif)

移动

![](assets/demo3.gif)