Coder Social home page Coder Social logo

react's Introduction

Readme for English

Technology stack

[email protected] + [email protected] + [email protected] + [email protected] + [email protected] + [email protected] + [email protected]

Project introduce

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

cd react 

npm install 

npm start 

Open another node service to open the mock interface service,if you don't start the mock interface service, you won't login into the inner page

npm run mock 

Notice

If you wan to experience the chatroom, you need to start socket service first, so you need to run another node service like this

npm run chat

and if you want to publish your app, use the following line of commands

npm run build 

This is the basic structure of the data returned by the server.

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

All asynchronous request returns will be processed by 'ajax.js' in configs folder. If there is no problem with the request, the status return value is 1; If the request is wrong, such as a parameter error or other error, the status return value is 0; If the status value is -1, indicating that the login timed out, then the login will pop up. These parameters can be adjusted according to the actual situation, and the error message or successful prompt information is returned in msg. The current project integrates basic user management, role management, module management and other basic rights management functions. The small partners must start npm run mock at the same time to see

Description

development environment: win10 Chrome 63.0.3239.132  nodejs 8.7.0

If you have any questions, please mention them directly in the Issues. I will answer in the first time, or you find that the problem has a very good solution, welcome PR

Cancel http request example:

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

login(){
  this.props.dispatch(fetchLogin(values, (res) => {},(error)=>{},axiosHandle)
  setTimeout(() => {
    axiosHandle.cancel('cancel handle')
  }, 3000)
}

Reatures list

  • [√] The project is loaded by the routing module
  • [√] login
  • [√] logt out
  • [√] welcome page
  • [√] menu
  • [√] redux demo
  • [√] mockjs to mock interface
  • [√] use flex to adapt page height
  • [√] cors
  • [√] webpack bundle analyzer
  • [√] editor draftjs
  • [√] chatroom

screenshots

login

echart

chatroom

set center

webpack bundle analysis

build dist folder

License

MIT

communication

If you want to communicate with other friends who use react,you can join the react QQ group I created:159697743~


中文readme

项目技术栈

[email protected] + [email protected] + [email protected] + [email protected] + [email protected] + [email protected] + [email protected]

项目运行

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

cd react 

npm install 

npm start 

注意

如果不启动mock服务,那么登录不进去内页,所以务必再开启个node进程启动mockjs服务

npm run mock 

想要体验聊天室功能 先开启socket服务 运行命令

npm run chat

最后的构建命令

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

注意:如果你更新代码发现登录界面进不去,而且没有用到真实的api,那就进入login.js里直接在handleSubmit方法里面把sessionStorage.setItem('token', 'dupi');hashHistory.push('/');这两行的注释打开,用户名密码界面不报错就可以登录跳转到内页

说明

开发环境 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 👍

取消http请求示例:

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

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

功能一览

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

总结

1、这整个技术栈是我们公司前端部门在用的,写熟悉了之后,用来做后台管理系统类的实在是很方便,大家都表示再也不要用jQuery来做这样子的系统了

2、目前来说,不足的地方是在于没有很好的区分dev环境跟pro环境,这个后面弄好了再补充上来;mock数据现在还不是那么的方便,需要自己一个个的添加api的json文件

License

MIT

交流

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

react's People

Contributors

duxianwei520 avatar leidenglai avatar cqm1994617 avatar

Stargazers

 avatar Fajar Antono avatar yang avatar  avatar 陈枭 avatar  avatar miaomiao avatar  avatar HaoGIthubStore avatar  avatar Jason He avatar StevenZhang avatar  avatar  avatar 77supaercc avatar  avatar  avatar 忆梦 avatar YI-ZHEN , LU avatar  avatar mzy007 avatar  avatar zgw avatar  avatar 希川 avatar Ivan Spetter avatar  avatar  avatar 飞天小女警 avatar  avatar Pirensen avatar  avatar StormyTalent avatar 残海清风 avatar  avatar  avatar  avatar Milo avatar  avatar Magneto avatar Md. Ikhtear Alam Shawon Mollah avatar 范二先生 avatar Mykhail avatar Lin avatar Tomás Canales avatar 灰太狼的大智慧 avatar  avatar  avatar Jonathan Xi avatar  avatar Stark avatar leibaio avatar  avatar  avatar  avatar Doge OW avatar Jack avatar lvxiaohui avatar  avatar  avatar  avatar  avatar 阿虫 avatar  avatar Mehrdad Shokri avatar yuanlee avatar zengjun avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar Lany-小生 avatar  avatar Chen,Yongze avatar  avatar Samuel Silva avatar  avatar Nicole avatar 三鱼 avatar  avatar 月下大庚角 avatar dwq avatar huyunlei avatar Vijayakumar S avatar  avatar Bernard avatar JerryLocker avatar  avatar  avatar Darren avatar  avatar  avatar langelee avatar thisiswenli avatar  avatar Xu avatar bewilder-cell avatar

Watchers

James Cloos avatar 黄霖懿 avatar Jesse avatar WuChangwei avatar kraussyin avatar 大方大方 avatar wuhujun avatar  avatar 豆皮 avatar  avatar Andy.Han avatar  avatar  avatar R91 avatar  avatar  avatar  avatar 村长 avatar Tiffa avatar  avatar 周风 avatar  avatar  avatar Yuuuu avatar xixixixixixixix avatar  avatar  avatar  avatar  avatar dataknower avatar  avatar  avatar  avatar  avatar ShunqiHuang avatar Xing MAO avatar RobertLin avatar 鄢栋 avatar  avatar  avatar zhaohongran avatar  avatar icedcoco avatar 张雨凡 avatar langfanZcf avatar  avatar  avatar  avatar Mohammed Mahdy avatar  avatar

react's Issues

项目目录

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

a

a

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?

Antd

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

聊天室

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

运行报错

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

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

克隆下来说缺文件?

`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`

安装依赖包的时候报错

安装依赖包的时候报错
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":

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.