react-redux-antd-es6 / react

基于react的企业后台管理开发框架

项目技术栈

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

克隆下来说缺文件？

`ERROR in ./app/pages/house/roomDetail.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./detail/Check in /root/reactEnterpriseBackend/react/app/pages/house
@ ./app/pages/house/roomDetail.js 66:13-38

ERROR in ./app/pages/house/houseDetail.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./detail/Check in /root/reactEnterpriseBackend/react/app/pages/house
@ ./app/pages/house/houseDetail.js 66:13-38`

npm run chat报错

package.json的scripts里没有chat命令 运行报错

Antd

您好 您这个架子很好 如果把antd换成4.x的版本 我想很多读者或者新手 上手更快 我重新梳理了当前项目中用的插件 可惜我没有权限 提交不了

修改mock返回数据，不支持热更新？强制刷新了，接口还是返回旧数据

修改mock返回数据，不支持热更新？强制刷新了，接口还是返回旧数据

Implement Login Component using React Hooks

Create a functional Login component in React using hooks for state management. The component should:

• Use useState to manage username and password fields.
• Include a styled login form with the following features:
  • Username and Password input fields
  • Submit button
  • Basic form validation ensuring both fields are required
• On form submission, display an alert with the entered username and password (for demonstration). Actual authentication logic can be added later.
• Apply inline styles for a simple, user-friendly interface.

Sample implementation for reference:

import React, { useState } from 'react';

function Login() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    // You can handle actual login logic here
    alert(`Username: ${username}\nPassword: ${password}`);
  };

  return (
    <div style={{ maxWidth: 320, margin: '100px auto', padding: 24, border: '1px solid #ccc', borderRadius: 8 }}>
      <h2>Login</h2>
      <form onSubmit={handleSubmit}>
        <div style={{ marginBottom: 16 }}>
          <label>
            Username:
            <input
              type="text"
              value={username}
              onChange={e => setUsername(e.target.value)}
              style={{ width: '100%', padding: 8, marginTop: 4 }}
              required
            />
          </label>
        </div>
        <div style={{ marginBottom: 24 }}>
          <label>
            Password:
            <input
              type="password"
              value={password}
              onChange={e => setPassword(e.target.value)}
              style={{ width: '100%', padding: 8, marginTop: 4 }}
              required
            />
          </label>
        </div>
        <button type="submit" style={{ width: '100%', padding: 10 }}>Login</button>
      </form>
    </div>
  );
}

export default Login;

You can enhance this further by wiring it up with actual authentication logic and error handling in the future.

Sponsored issue: react redux

Priority Support

• @Ayeobasan is using Mintycode to fund this issue.
• You can receive if you provide priority support to @Ayeobasan.
• To view the support request and terms go to Mintycode.
• Thank you in advance for helping.

npm start 的时候报错

module.js:487
throw err;
^

Error: Cannot find module 'accepts'
at Function.Module._resolveFilename (module.js:485:15)
at Function.Module._load (module.js:437:25)
at Module.require (module.js:513:17)
at require (internal/module.js:11:18)
at Object. (D:\zongju\react\node_modules\express\lib\request.js:16:15)
at Module._compile (module.js:569:30)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: webpack-dev-server --history-api-fallback --hot --inline --process --colors --port 3000
npm ERR! Exit status 1

聊天室

我想问下怎么实现多人在线

Ensure elements with ARIA role that require child roles contain them

when we are having a show more button..

Issue - div[role="row"] is having button[tabindex]

强烈建议升级一下

强烈建议升级一下

运行起来我电脑就发热

这个框架运行起来好费性能，运行起来我电脑就发热。是电脑性能不好么

请问tableList.json需要建在什么目录下？

本地登录这个系统的账号是多少呀？

说一下本地登录这个系统的账号吧！

禁用与服务器的通信

嗨！ 有没有一种快速的方法来禁用与服务器的通信，用于不受控制的授权？

这又是刷出来的 star ?

这玩意刷出来的 star 占了 query top 的位置你不知道吗，很烦你知道吗

spa 什么鬼? sap吧 .嘿嘿嘿

运行报错

有人跑起来了吗？按照文档的步骤npm start 的时候就不行了，窗口一直在闪，很多throw er;

项目目录

你好，我是react新手，我想问一下，这样的项目工程目录是用什么工具创建的，还是自己配置的呢

Ensures elements with an ARIA role that require parent roles are contained by them

getting thus accesibility issue
.Area required parent
Actual Result:
Elements with an ARIA role that require parent roles are not contained by them.

Expected Result:
Ensures elements with an ARIA role that require parent roles are contained by them

User Experience:
It will impact the screen reader user if the screen reader does not convey the message to the user.

react version
"^18.2.0",

Error when npm install

clone code and install packages. Below error:

F:\gitDemo\react>npm install
npm WARN tarball tarball data for [email protected] (sha512-q9M0errodeX/786uPifro76x0elbrUQkbSHh235QzbkaASuvP9AQoMErhGBno4iC/yq6kFDLqgmm3XCPWQGLzA==) seems to be corrupted. Trying one more time.
npm WARN tarball tarball data for [email protected] (sha512-+qF1bgU7rUkPIkggIIV0fmm+9pPacl50BBd6NNUR2+kKJOFYjwrnP39ZqJRsYNy5bX9VgR454fz9KEuW7HPjog==) seems to be corrupted. Trying one more time.
npm ERR! path F:\gitDemo\react\node_modules\.staging\antd-968e5766\dist\antd-with-locales.js.map
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall unlink
npm ERR! Error: EPERM: operation not permitted, unlink 'F:\gitDemo\react\node_modules\.staging\antd-968e5766\dist\antd-with-locales.js.map'
npm ERR!  { [Error: EPERM: operation not permitted, unlink 'F:\gitDemo\react\node_modules\.staging\antd-968e5766\dist\antd-with-locales.js.map']
npm ERR!   cause:
npm ERR!    { Error: EPERM: operation not permitted, unlink 'F:\gitDemo\react\node_modules\.staging\antd-968e5766\dist\antd-with-locales.js.map'
npm ERR!      errno: -4048,
npm ERR!      code: 'EPERM',
npm ERR!      syscall: 'unlink',
npm ERR!      path:
npm ERR!       'F:\\gitDemo\\react\\node_modules\\.staging\\antd-968e5766\\dist\\antd-with-locales.js.map' },
npm ERR!   stack:
npm ERR!    'Error: EPERM: operation not permitted, unlink \'F:\\gitDemo\\react\\node_modules\\.staging\\antd-968e5766\\dist\\antd-with-locales.js.map\'',
npm ERR!   errno: -4048,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'unlink',
npm ERR!   path:
npm ERR!    'F:\\gitDemo\\react\\node_modules\\.staging\\antd-968e5766\\dist\\antd-with-locales.js.map',
npm ERR!   parent: 'react' }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\gw00179760\AppData\Roaming\npm-cache\_logs\2020-02-19T01_47_44_795Z-debug.log

F:\gitDemo\react>

I use the administrator's permission to execute, Can you help to solve and why this happened?

Ensure <li> elements are used semantically

Ensure

elements are used semantically

how to fixed this issue

react version:"^18.2.0",

please help me to fixed this Accessibility Issue

Required ARIA parents role not present: group, tree

Getting following issue
"Required ARIA parents role not present: group, tree"
how to fixed this issue please let me know
Also, getting the below issue
"Using a negative tabindex on an element inside an interactive control does not prevent assistive technologies from focusing the element (even with aria-hidden="true"--how to fixed this issue

react version:"^18.2.0",

React

Question

安装依赖包的时候报错

安装依赖包的时候报错
No value found for key gulp-mocha at 1:5370 npm ERR! h":"1.0.0","gulp-webpack":"0.4.1","gulp-jshint":"1.8.4","gulp-mocha":

a

a