Giter VIP home page Giter VIP logo

react-admin's Introduction

react-admin system solution

logo

travis-ci PRs Welcome

文档地址:wiki

问题和方案汇总:issue

更新日志迁移至CHANGELOG.md😁(重要!对于了解项目部分功能和代码很有用!)

cli 安装和使用 react-admin 🔥

使用 saigao 快速安装和下载 react-admin 模板来开发项目:

npm i -g saigao

saigao myapp
// 或者使用npx 下载模板
npx saigao myapp

前言

网上 react 后台管理开源免费的完整版项目比较少,所以利用空余时间集成了一个版本出来,已放到 GitHub 启动和打包的时间都稍长,请耐心等待两分钟

依赖模块

项目是用 create-react-app 创建的,主要还是列出新加的功能依赖包

点击名称可跳转相关网站 😄😄

  • react
  • react-router(react 路由,4.x 的版本,如果还使用 3.x 的版本,请切换分支(ps:分支不再维护))
  • redux(基础用法,但是封装了通用 action 和 reducer,demo 中主要用于权限控制(ps:目前可以用 16.x 的 context api 代替),可以简单了解下)
  • antd(蚂蚁金服开源的 react ui 组件框架)
  • axios(http 请求模块,可用于前端任何场景,很强大 👍)
  • echarts-for-react(可视化图表,别人基于 react 对 echarts 的封装,足够用了)
  • recharts(另一个基于 react 封装的图表,个人觉得是没有 echarts 好用)
  • nprogress(顶部加载条,蛮好用 👍)
  • react-draft-wysiwyg(别人基于 react 的富文本封装,如果找到其他更好的可以替换)
  • react-draggable(拖拽模块,找了个简单版的)
  • screenfull(全屏插件)
  • photoswipe(图片弹层查看插件,不依赖 jQuery,还是蛮好用 👍)
  • animate.css(css 动画库)
  • react-loadable(代码拆分,按需加载,预加载,样样都行,具体见其文档,推荐使用)
  • redux-alita 极简的 redux2react 工具
  • 其他小细节省略

功能模块

备注:项目只引入了 ant-design 的部分组件,其他的组件 antd 官网有源码,可以直接复制到项目中使用,后续有时间补上全部组件。

项目使用了 antd 的自定义主题功能-->黑色,若想替换其他颜色,具体操作请查看 antd 官网

  • 首页
    • 完整布局
    • 换肤(全局功能,暂时只实现了顶部导航的换肤,后续加上其他模块)
  • 导航菜单
    • 顶部导航(菜单伸缩,全屏功能)
    • 左边菜单(增加滚动条以及适配路由的 active 操作)
  • UI 模块
    • 按钮(antd 组件)
    • 图标(antd 组件并增加彩色表情符)
    • 加载中(antd 组件并增加顶部加载条)
    • 通知提醒框(antd 组件)
    • 标签页(antd 组件)
    • 轮播图(ant 动效组件)
    • 富文本
    • 拖拽
    • 画廊
  • 动画
    • 基础动画(animate.css 所有动画)
    • 动画案例
  • 表格
    • 基础表格(antd 组件)
    • 高级表格(antd 组件)
    • 异步表格(数据来自掘金酱的接口)
  • 表单
    • 基础表单(antd 组件)
  • 图表
    • echarts 图表
    • recharts 图表
  • 页面
    • 登录页面(包括 GitHub 第三方登录)
    • 404 页面

功能截图

首页

截图

按钮图标等

截图

轮播图

截图

富文本

截图

拖拽

截图

画廊

截图

动画

截图

表格

截图

表单

截图

图表

截图

页面

截图

菜单拖拽

截图

代码目录

+-- build/                                  ---打包的文件目录
+-- config/                                 ---npm run eject 后的配置文件目录
+-- node_modules/                           ---npm下载文件目录
+-- public/
|   --- index.html							---首页入口html文件
|   --- npm.json							---echarts测试数据
|   --- weibo.json							---echarts测试数据
+-- src/                                    ---核心代码目录
|   +-- axios                               ---http请求存放目录
|   |    --- index.js
|   +-- components                          ---各式各样的组件存放目录
|   |    +-- animation                      ---动画组件
|   |    |    --- ...
|   |    +-- charts                         ---图表组件
|   |    |    --- ...
|   |    +-- dashboard                      ---首页组件
|   |    |    --- ...
|   |    +-- forms                          ---表单组件
|   |    |    --- ...
|   |    +-- pages                          ---页面组件
|   |    |    --- ...
|   |    +-- tables                         ---表格组件
|   |    |    --- ...
|   |    +-- ui                             ---ui组件
|   |    |    --- ...
|   |    --- BreadcrumbCustom.jsx           ---面包屑组件
|   |    --- HeaderCustom.jsx               ---顶部导航组件
|   |    --- Page.jsx                       ---页面容器
|   |    --- SiderCustom.jsx                ---左边菜单组件
|   +-- style                               ---项目的样式存放目录,主要采用less编写
|   +-- utils                               ---工具文件存放目录
|   --- App.js                              ---组件入口文件
|   --- index.js                            ---项目的整体js入口文件,包括路由配置等
--- .env                                    ---启动项目自定义端口配置文件
--- .eslintrc                               ---自定义eslint配置文件,包括增加的react jsx语法限制
--- package.json

安装运行

1.下载或克隆项目源码
2.yarn 安装依赖(国内建议增加淘宝镜像源,不然很慢,你懂的 😁)

有些老铁遇到运行时报错,首先确定下是不是最新稳定版的 nodejs 和 yarn,切记不要用 cnpm

// 首推荐使用yarn装包,避免自动升级依赖包
yarn;
3.启动项目
yarn start
4.打包项目
yarn build

Q&A(点击问题查看答案)

License

MIT

结尾

该项目会不定时更新,后续时间会添加更多的模块

欢迎和感谢大家 PR~~👏👏

若有问题,可加 QQ 群与我交流

  • 1 群:264591039(已满)
  • 2 群:592688854(已满)
  • 3 群:743490497 (已满)
  • 4 群:150131600 (已满)

如果对你有帮助,给个 star 哟~~❤️❤️❤️❤️

react-admin's People

Contributors

brickspert avatar dependabot[bot] avatar victorfu avatar yezihaohao avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-admin's Issues

登陆页面问题

你好,Uncaught TypeError: Cannot read property 'push' of undefined
这个有计划解决吗

npm install 失败

npm 5.6.0
node 9.0.0
npm ERR! Unexpected end of JSON input while parsing near '..."2.x - 4.x"},"directo'

npm ERR! A complete log of this run can be found in:
npm ERR! D:\node\node_global_cache_logs\2018-05-21T07_30_33_055Z-debug.log

能google到的方法都试了

调整窗口大小时,有问题

当任意调整窗口大小时会导致内容显示页面重新渲染
routes/index.js render()方法中的...应该在componentWillMount时存入state中比较合适

大大

可以更新下项目目录结构吗 

获取请求数据

非常不好意思,由于自己react redux这块不是很熟悉,所以遇到了一个问题

console.log('allDataBase');
        console.log(allDataBase.data);
        console.log('allDataBase');
        let listOptions = [];
        allDataBase.map((value,index)=>{
            listOptions.push(<Option value={value} key={index}>{value}</Option>)
        })
        return listOptions;

我看控制台已经请求有数据了,在react插件里面显示props里也有allDataBase这个数据,
那我应该怎么拿出来这个数据呢?我用const {allDataBase} = this.props是返回undifine....

如何做到 手机端对滚动很慢的处理 & Content高度 的两全?

App.js
// 手机端对滚动很慢的处理 responsive.data.isMobile && ( <style> #root{ height: auto; } </style> )

你加的这个之后(我并不知道有没有对手机端滚动快慢有影响),但是在Content里面内容不多的情况下会比较难看(Footer会跑到屏幕**等),有没有什么建议做到两全?

编译失败

./src/components/index.js
Line 26: Unexpected '!' in 'bundle-loader?lazy!./ui/Wysiwyg'. Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax

Search for the keywords to learn more about each error.

npm install 失败

clone博主最新版本的项目到本地后,执行npm i,直接报错,报错信息如下:
npm ERR! Unexpected end of input at 1:72287
npm ERR! ","optimist":"0.2.x","uglify-js":"2.2.x","async":"0.1.x","enhanced-re
npm ERR! ^

ps:本人开发环境为:node:8.2.1,npm:5.3.0

如何修改ant design颜色

table中hover的时候颜色是深色,因为文字是黑色的,导致看不清楚所以想修改这个颜色。

请问webpack的代理怎么设置

在webpack.config.dev.js中添加了代理的相关设置,但是在测试环境中每次fetch的时候 请求地址还是没有成功代理,

devServer: { historyApiFallback: true, host: 'localhost', port: '3006', hot: true, inline: true, stats: { colors: true }, proxy: { '/api/*': { target: 'http://XXXXX', pathRewrite: {'^/api' : '/api'}, changeOrigin: true } } },

请作者解惑。

dk 9 6lho 1 ieart2_gbq
图中圈住的部分,请问要表达什么意思?请恕我看来看去也感觉它没什么意义。

兼容问题

请问是否考虑过兼容问题,再测试中发现项目在ie9环境中整体布局出现较大幅度的错位,经审查元素发现使用了flex布局,只兼容ie10+,

项目中redirect方法请教

项目中
page.js中
<Route exact path="/" render={() => } />
index.js中

page页面redirect到index.页面里的首页,是怎么工作的。为什么没掉成功呢

导入依赖出错。

你好。我把项目down下来以后,运行npm install 安装相关依赖,但是报错:
npm WARN deprecated [email protected]: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: 1.2.0 should have been a major version bump
npm ERR! Unexpected end of JSON input while parsing near '..."rc-tooltip":"~2.6.4"'

babel-preset-es2015需要升级了

npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs
.io/env to update!

npm install,出项上面的提示。辛苦

fails to run build

react-admin zhongbingda$ npm run build

[email protected] build /Users/zhongbingda/work/web/git/react-admin
node scripts/build.js

Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve '@/components/BreadcrumbCustom' in '/Users/zhongbingda/work/web/git/react-admin/src/components/auth'

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.