duxianwei520/react

React+webpack+redux+ant design+axios+less全家桶后台管理框架

项目技术栈

node10.15.3 + [email protected] + [email protected] + [email protected] + [email protected] + [email protected] + [email protected] + [email protected]

交流

QQ群：159697743

项目运行

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

cd react (进入项目)

npm install (安装依赖包)

npm start (启动服务)

如果有小伙伴因为网络原因npm包下载不下来，那么可以最好挂在一个vpn之类的去下载，cnpm不靠谱，不推荐使用

screenshots

login

echart

set center

webpack bundle analysis

build dist folder

最后的构建命令

npm run build (正式环境的打包部署)
npm run testing (测试环境的打包部署命令，可以根据具体需求自行配置修改)

服务端返回的数据格式也是标准的json，如下所示

{
  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

说明

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

大部分人项目启动不起来的原因，绝大部分的情况都是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化
• [√] redux完整示范
• [√] mockjs模拟后端返回接口
• [√] axios异步请求跨域的设置
• [√] 实时的webpack包大小预览,方便优化
• [√] draftjs编辑器
• [√] cypress自动化测试

License

MIT

交流

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

react's Issues

来个热更新就完美了

修改代码保存后发现不会自动刷新

一点小建议

打着技术的擦边球去招亲，这样好吗 |=V=| @duxianwei520

不好意思，请管理员查看

我刚才问题这里 不小心提交了一个问题，随后就关闭了，但是现在每次我登陆githhub，库的列表里面还有你的库名字，怎么给去掉呢，不好意思

我也是报错，运行不了。麻烦您看一下哦。

ERROR in ./app/history.js
Module not found: Error: Cannot resolve module 'history/lib/createHashHistory' i
n C:\Users\acer1\Desktop\react\app
@ ./app/history.js 11:25-65

ERROR in ./app/components/searchForm/index.js
Module not found: Error: Cannot resolve module 'lodash' in C:\Users\acer1\Deskto
p\react\app\components\searchForm
@ ./app/components/searchForm/index.js 135:14-31
Child html-webpack-plugin for "index.html":
chunk {0} index.html 541 kB [rendered]
[0] .//._html-webpack-plugin@2.22.0@html-webpack-plugin/lib/loader.js!.
/app/index.html 1.38 kB {0} [built]
[1] .//._lodash@4.17.4@lodash/lodash.js 540 kB {0} [built]
[2] (webpack)/buildin/module.js 241 bytes {0} [built]
webpack: Failed to compile.

node 版本不兼容

我是8.2，有个包写明 4<= node < 6，导致拉不下依赖

ncaught Error: Cannot find module "history/lib/createHashHistory"

ncaught Error: Cannot find module "history/lib/createHashHistory"报错

json 一直报错

导致一直报错 端口号改成一直就好

项目运行报错呢

用户和密码是多少

用户和密码是多少

failed to fetch

npm install 过程中出现问题

提示的问题如下：
npm WARN deprecated [email protected]: babel-plugin-antd is renamed to babel-plugin-import
npm WARN deprecated [email protected]: Babel's CLI commands have been moved from the babel package to the babel-cli package
npm WARN deprecated [email protected]: Use npmjs.com/husky instead, see ghooks-org/ghooks#166

该怎么解决啊？

socket.io没有设置disconnect的函数

当用户退出账户时，未通知socket服务终止连接，也没删除socket用户缓存池中的当前用户名，导致再次登录后，进入chat模块，提示‘登录用户名重复，请重新登录设置不同的用户名’

搜react竟然搜到肚皮叔的项目，给肚皮叔点赞，来自dwd问候

mark

请问一下这个项目弹出新页面效果如何实现的？

请问一下点击侧边栏，然后右边弹出新的页面。如果右边已经有页面，则跳到那个页面。这个效果事如何实现的，如何切换页面的时候如何保存数据

开启mock数据服务之后，还要做哪些才能让前台housemanage页面获取到数据呢？

肚皮哥：
两个服务我都打开了，为什么我的页面还是刷新不出数据来呢？

interfaceFilter.js是空文件？？

http.js下的const _filter = require('./interfaceFilter')；根本没有引入东西

提问关于react-router

我看官方说不应该直接用react-router, 而是用react-router-dom.
那为什么这个repo用的是 core 呢？

gForm 中的 bind

看错了。。。

Mock数据

用Koa2+Mysql搭建了一下后台请求的数据，可以实现分页数据和查询数据的展示了。

createAjaxAction 中的dispatch 如何传进去的？

export const createAjaxAction = (api, startAction, endAction) => (data, cb, reject) =>
(dispatch) => { //dispatch 怎么传进来的
let respon
startAction && dispatch(startAction())
// eslint-disable-next-line no-param-reassign
// 每个请求带上token
const token = sessionStorage.getItem('token')
if (token) {
if (!data) {
data = {}
}
data.token = token || null
}
data = isArray(data) ? data : [data]
api(...data)
.then(checkStatus) // eslint-disable-line no-use-before-define
.then(response => response.json())
.then((resp) => {
respon = resp
endAction && dispatch(endAction({ req: data, res: resp }))
})
.then(() => {
if (respon.status === 1) {
cb && cb(respon)
} else {
if (respon.errorCode == '101') {
logOut()
} else {
if (typeof (reject) === 'function') {
reject(respon)
} else {
message.error(respon.msg)
}
}
}
})
.catch(catchError) // eslint-disable-line no-use-before-define
}

然后在组件中调用 this.props.dispatch(fetchHouseCheckList({ currentPage: 1 }))
在这里dispatch 不应该是一个action 么？
fetchHouseCheckList({ currentPage: 1 }) 返回的是一个function，
并且 上面中的 参数 dispatch 是如何传进去的呢？
蟹蟹。

Uncaught SyntaxError: Unexpected token export

点击echarts页面， 抱错：Uncaught SyntaxError: Unexpected token export

哪个express的服务端项目怎么启动呢?

没有start选项啊

左边侧边栏 伸缩之后二级菜单样式显示混乱

二次开发

我想问下大神是用的什么软件开发

ERROR in Cannot find module '../../modules/es6.string.iterator'

这个是不是少装了什么模块？
我运行cnpm install es6.string.iterator之后还是没有用哦
求指导一下

分享

看看分享好使吗

使用css 的伪类时不支持

在js文件添加div class为dd
import './dd.css';

肚皮叔：行，我等你

dd.css 文件内容
.dd, .dd::before, .dd::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

    .dd {
      width: 200px;
      height: 200px;
      margin: auto;
      /*background: url("img/Button-White-Large.png") no-repeat 50%/70% rgba(0, 0, 0, 0.1);*/
      background: rgba(0, 0, 0, 0.1);
      color: #69ca62;
      box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
    }
    .dd::before, .dd::after {
      content: '';
      z-index: -1;
      margin: -5%;
      box-shadow: inset 0 0 0 2px;
      animation: clipMe 8s linear infinite;
    }
    .dd::before {
      animation-delay: -4s;
    }
    .dd:hover::after, .dd:hover::before {
      background-color: rgba(255, 0, 0, 0.3);
    }
     
    @keyframes clipMe {
      0%, 100% {
        clip: rect(0px, 220.0px, 2px, 0px);
      }
      25% {
        clip: rect(0px, 2px, 220.0px, 0px);
      }
      50% {
        clip: rect(218.0px, 220.0px, 220.0px, 0px);
      }
      75% {
        clip: rect(0px, 220.0px, 220.0px, 218.0px);
      }
    }  

这个例子在自己的项目中可以使用， 你的这个项目里不行， 测试过 对 ::before 等无法解析， 但是找不到webpack配置的问题

项目瘦身

我想以你这个项目为基础构建自己的应用，但是上手开发还需要一些读代码。
能否再精简一些文件。。谢谢

登录密码账号是？？？

如题

关于登录、以及登录权限控制

sessionStorage可以在客户端手动设置token值，如何做到严格的权限控制呢？

关于webpack的配置

请教一下，我用create-react-app搭建的项目没有webpack配置之类的文件，你是怎么搭建项目跟配置webpack的呢？

有做过页面的兼容性测试吗？

win10下Ubuntu子系统打开浏览器报错

如题，webpack-dev-server自带打开浏览器的功能。可以使用--open

运行出错

安装依赖后，等陆不上，不知道什么问题
报错：： TypeError: Failed to fetch
#求指教

json请求失败

请求时报错：“POST http://localhost:8080/mockapi/data.json net::ERR_CONNECTION_REFUSED”，路径被拼成了“localhost:8080”，应该是“localhost:3000”吧？

聊天功能支持多聊天室吗？

如题。

兼容IE8吗？

路由怎么不用4.x？代码分割和懒加载的方式还是webpack2.x吗？

RT

npm start 会报错

Uncaught Error: Module build failed: SyntaxError: Unexpected token =
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:387:25)
at Object.Module._extensions..js (module.js:422:10)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at Object. (F:\react-master\react-master\node_modules@babel\helper-module-imports\lib\index.js:23:46)
at Module._compile (module.js:413:34)
at Object.Module._extensions..js (module.js:422:10)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at Object. (F:\react-master\react-master\node_modules\babel-plugin-import\lib\Plugin.js:10:28)
at Module._compile (module.js:413:34)
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:387:25)
at Object.Module._extensions..js (module.js:422:10)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at Object. (F:\react-master\react-master\node_modules@babel\helper-module-imports\lib\index.js:23:46)
at Module._compile (module.js:413:34)
at Object.Module._extensions..js (module.js:422:10)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at Object. (F:\react-master\react-master\node_modules\babel-plugin-import\lib\Plugin.js:10:28)
at Module._compile (module.js:413:34)
at Object.25 (http://localhost:3010/client.115f.js:39:7)
at webpack_require (http://localhost:3010/common.bundle.js:55:30)
at Object.2 (http://localhost:3010/client.115f.js:7:18)
at webpack_require (http://localhost:3010/common.bundle.js:55:30)
at webpackJsonpCallback (http://localhost:3010/common.bundle.js:26:23)
at http://localhost:3010/client.115f.js:1:1

聊天功能

发送的消息页面不会显示 显示到命令窗口

包没写进依赖

各种包缺失。。 request、classnames、lodash。

kindEditor errors

请教，关于readme.md文件最下面的 项目结构 和 构建完成的包的分析截图，使用什么工具生成的。

本地json链接不上

询问一下大神本地json为什么链接不上呢/需要修改申明配置活着我少了神马？

可以写下注释吗，有的地方看不懂

npm run build 打包后 routes里所有的js都会被单独打包到dist中

没弄明白什么地方导致这样的结果， 暂时不需要这样的打包配置

参数传值是怎么运作的？

1、this.props.dispatch(fetchLogin(value,(res)=>{..},(res)=>{..));
2、export const fetchLogin = createAjaxAction(common.login)；
3、export const createAjaxAction=(httpHandle,startAction,endAction)=>(resData,cb,reject,handleCancel)=>(dispatch)=>{...}
4、export const login = ajax.fetchJSONByPost('/login'); //commom目录下的
5、const fetchJSONByPost = (url, target) => (reqData, handleCancel) => axiosPost(url, reqData, target, handleCancel)
这条逻辑链上value是怎么传递的？？

项目建议

看完了这个项目，觉得做得很棒，而且公司目前采用的技术栈也是React+React-Router+Redux+Ant design。希望楼主后期能继续完善这个项目，另外如果能同步文档就更👍了。

能问下那个包的分析截图是用什么软件生成的吗？

关于引用静态资源图片的问题

你好，我看你在react里面引用图片直接写的相对路径，但是我这边也是设置相对路径页面为什么不显示图片呢？我尝试使用require引用，但是页面dom结构上面显示的是//img/***.jpg，变成绝对路径并且不带有域，请问是什么问题呢？