Skip to content
React+webpack+redux+ant design+axios+less全家桶后台管理框架
JavaScript CSS HTML
Branch: master
Clone or download
Latest commit 7e61ecd Aug 12, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci dupi 解决readme乱码的问题 May 29, 2019
app dupi 解决readme乱码的问题 May 29, 2019
scripts dupi 项目公用npm包dll化 May 29, 2019
test dupi 新增md5加密,去除im模块,去除按需加载模块 Apr 17, 2019
.babelrc jest Feb 28, 2019
.eslintignore dupi 解决readme乱码的问题 May 29, 2019
.eslintrc.json jest Feb 28, 2019
.gitattributes jest Feb 28, 2019
.gitignore jest Feb 28, 2019
.lintstagedrc jest Feb 28, 2019
.travis.yml jest Feb 28, 2019
LICENSE jest Feb 28, 2019
_config.yml jest Feb 28, 2019
package-lock.json dupi 解决readme乱码的问题 May 29, 2019
package.json dupi 项目公用npm包dll化 May 29, 2019
readme.md dupi 更新readme Aug 12, 2019

readme.md

CircleCI branch GitHub forks GitHub stars GitHub issues GitHub license Coverage Status

项目技术栈

node8.7.0 + react@16.5.2 + redux@3.7.2 + react-router@3.2.0 + webpack@3.10.0 + axios@0.18.0 + less@2.7.1 + antd@3.18.2

交流

QQ群:159697743

项目运行

git clone --depth 1 https://github.com/duxianwei520/react.git  

cd react 

npm install 

npm run dll

注意,由于对公用的npm库做了dll化,所以要先运行npm run dll生成相应的代码

npm start 

对了,如果有小伙伴因为网络原因npm包下载不下来,那么可以试用我已经下载好的安装包,地址在

https://github.com/duxianwei520/resource/blob/master/react/node_modules.rar

欢迎下载

screenshots

login

echart

set center

webpack bundle analysis

build dist folder

最后的构建命令

npm run build (打包,部署)

对了,服务端返回的格式我们是这样子一个数据结构

{
  data: {
    totalCount: 100,
    currentPage: 1,
    pageSize: 10,
    'list': [
    ],
  },
  msg: '',
  status: 1,
}

所有异步请求返回都会经过configs里面的ajax.js做处理,如果请求没有任何问题,那status返回值是1; 如果请求错误,比如说参数错误或者其他报错之类的,那status返回值就是0; 如果status值是-1,表示登录超时,那么就会跳出登录。 这些参数都可以根据实际情况进行调整,报错或者成功的提示信息放在msg里面返回。 当前项目集成了完整的用户管理、角色管理、模块管理等基本的权限管理功能,小伙伴们一定要同时启动npm run mock才可以看到噢

这个react的项目我有在跟nodejs的express框架配合做接口的开发,可以不靠后端输出数据库真实的数据,仓库地址在

https://github.com/duxianwei520/express

还有一个原生的nodejs版本的,仓库库地址是

https://github.com/duxianwei520/node

基本功能差不多,目前实现了注册登录以及获取用户信息等3个接口的真实api

说明

开发环境 win10 Chrome 63.0.3239.132(正式版本) (32 位) nodejs 8.7.0

如果npm install太慢导致有些npm依赖包下载失败 你可以看控制台的报错信息,再手动npm install 具体的开发包,推荐使用淘宝的注册源,直接运行,

npm install -g cnpm --registry=https://registry.npm.taobao.org 

如有问题请直接在 Issues 中提,或者您发现问题并有非常好的解决方案,欢迎 PR 👍

大部分人项目启动不起来的原因,要么是node版本太高后者太低,要么就是npm安装的时候有些依赖包没有下载完全,当前的demo肯定是可以跑起来的

取消http请求示例:

import axios from 'axios'
const axiosHandle = axios.CancelToken.source()

login(){
  this.props.dispatch(fetchLogin(values, (res) => {},(error)=>{},axiosHandle)
  取消请求的操作
  setTimeout(() => {
    axiosHandle.cancel('手动取消。')
  }, 3000)
}

功能一览

  • [√] 项目按路由模块加载
  • [√] 登录,以及登录权限控制
  • [√] 项目公用npm模块dll化
  • [√] 欢迎主页
  • [√] 左侧菜单,正常mini切换
  • [√] redux完整示范
  • [√] mockjs模拟后端返回接口
  • [√] 页面高度flex自适应
  • [√] axios数据跨域的设置
  • [√] 实时的webpack包大小预览,方便优化
  • [√] draftjs编辑器

License

MIT

交流

想跟其他的使用react的小伙伴们交流的话,可以加入我创建的reactQQ群:159697743

You can’t perform that action at this time.