GithubHelp home page GithubHelp logo
react

duxianwei520 / react Goto Github PK

View Code? Open in 1sVSCode Editor NEW
4.5K 200.0 1.6K 2.8 MB

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

License: MIT License

JavaScript 85.49% CSS 0.61% HTML 0.12% Less 13.79%
react webpack antd es6 redux babel es7 ant-design-pro

react's Introduction

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

项目技术栈

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编辑器

License

MIT

交流

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

react's People

Contributors

duxianwei520 avatar FengYangLiu avatar jinxedjkldsa avatar dependabot[bot] avatar One-boy avatar

Stargazers

Lin avatar Sisyphus avatar  avatar  avatar 小小小太阳 avatar hu0502 avatar Yağız Aydın avatar  avatar Kevin Michaud avatar  avatar Jonathan Xi avatar  avatar  avatar Hai Jun avatar  avatar  avatar  avatar shijinfang avatar leibaio avatar  avatar woshierha avatar  avatar CORE avatar Nidheesh avatar mala_d avatar waiting avatar  avatar  avatar  avatar  avatar  avatar  avatar Jack avatar  avatar Leesing avatar  avatar  avatar  avatar 大明 avatar smarteng avatar  avatar  avatar  avatar  avatar WaikeiChan avatar  avatar aliakbar motallebi avatar  avatar sur avatar  avatar  avatar  avatar  avatar iCloud.Yin avatar 职场打工人 avatar  avatar wpfuller avatar yazid hanniche avatar Rorschach avatar  avatar  avatar  avatar Ecoiiot avatar  avatar  avatar eemv avatar  avatar Rose avatar  avatar Lee avatar Nicole avatar  avatar 一蔚蓝 avatar  avatar  avatar 请叫我「吉先生」 avatar 阳光少年 avatar  avatar  avatar  avatar Nusoah avatar  avatar  avatar Johnny Hardaway avatar  avatar ggyy avatar Abdelmawla avatar 仰仗 avatar  avatar liviuscn avatar Bruce avatar MengYa avatar sataniel avatar  avatar 缪冰 avatar Radish  avatar  avatar Thomas Amdu avatar 月下大庚角 avatar fabuhaokan avatar

Watchers

Dario Alves Junior avatar Benny avatar Donosn avatar net_hare avatar  avatar Jamacy avatar xiaoxian avatar 黄霖懿 avatar  avatar DavidDing avatar 大漠穷秋 avatar  avatar vinely avatar  avatar  avatar kraussyin avatar sha avatar Jimmy avatar kunyunfang avatar  avatar  avatar dcboy avatar  avatar  avatar  avatar Mokhtari Afef avatar Mr.Co avatar wangle avatar  avatar stonewl avatar Chen,Yongze avatar  jeffy avatar 张江平 avatar  avatar fred avatar  avatar carter.su avatar xumin avatar  avatar 幻魂 avatar  avatar facebooksyo avatar Felix Chen avatar  avatar wangwenxiu avatar ZhangYu avatar  avatar YongChun avatar Michealmiker avatar Jonham.Chen avatar weng avatar Bambo_oGre_en avatar  avatar  avatar  avatar Md. Abu Talha avatar kaichao ou avatar IrrElephant avatar Nadya avatar quzhengping avatar Johnber avatar HuaJie avatar 石磊 avatar 淑云邓 avatar  avatar  avatar  avatar aries avatar 小桥流水 avatar  avatar  avatar  avatar _smilecc avatar 李万里 avatar 苍月 avatar Felix_Yao avatar tangkepeng avatar SunLikeALWW avatar  avatar hankcheng avatar 千古不见一人闲 avatar 高师傅 avatar bingmax avatar Su Autumn avatar HanQ avatar  avatar  avatar Agnes avatar 樊正彪 avatar cd0281 avatar  avatar liuil avatar sun_sunyali avatar gottaboy avatar  avatar  avatar wangtao avatar bobo avatar andy avatar  avatar

react's Issues

参数传值是怎么运作的?

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是怎么传递的??

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

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] .//[email protected]@html-webpack-plugin/lib/loader.js!.
/app/index.html 1.38 kB {0} [built]
[1] ./
/[email protected]@lodash/lodash.js 540 kB {0} [built]
[2] (webpack)/buildin/module.js 241 bytes {0} [built]
webpack: Failed to compile.

提问关于react-router

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

不好意思,请管理员查看

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

运行出错

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

项目建议

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

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 是如何传进去的呢?
蟹蟹。

Mock数据

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

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

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

项目瘦身

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

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\[email protected]\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\[email protected]\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

socket.io没有设置disconnect的函数

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

聊天功能

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

本地json链接不上

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

分享

看看分享好使吗

关于webpack的配置

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

使用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配置的问题

二次开发

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

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.