react+react-router+react-redux+nodejs+mongodb项目
一个实际项目(OA系统)中的部分功能。这个demo中引入了数据库,数据库使用了mongodb。安装mongodb才能运行完整的功能。要看完整的项目可以移步我的github
技术栈
- React v15.6.2
- react-redux
- redux
- react-router-dom
- webpack
- nodeJs
- mongodb
- axios
项目结构
```
.
├─ exampleImg/ # 截图
├─ note/ # 学习笔记
├─ my-app/ # 源码目录(开发都在这里进行)
│ ├─ config/ # 服务配置文件
| |── controller # 处理网络请求
│ ├─ model/ # mongoose Model
│ ├─ route/ # nodeJs 路由配置
│ ├── schema/ # mongoose Schema
│ ├── scripts/ # 启动服务的文件
│ ├── src/ # react代码从这里开始
│ │ ├─ components/ # 全局组件
│ │ ├─ css/ # 全局css样式
| | |── global/ # 全局方法
| | |── pages/ # 页面
| | | |── att/ # 考勤分组模块
| | | |── attendance/ # 通讯录模块
| | | |── department/ # 部门管理模块
| | | |── holiday/ # 假期管理
| | | |── member/ # 员工管理
| | |── router/ # router
| | |── store/ # redux
| | |── App.css
| | |── App.js
| | |── index.css
| | |── index.js # 入口
```
项目截图
1.通讯录

2.假期管理

3.考勤分组

4.选择人员

5.员工管理

6.部门管理

react+react-router+react-redux+nodejs+mongodb项目的更多相关文章
- 【招聘App】—— React/Nodejs/MongoDB全栈项目:个人中心&退出登录
前言:最近在学习Redux+react+Router+Nodejs全栈开发高级课程,这里对实践过程作个记录,方便自己和大家翻阅.最终成果github地址:https://github.com/66We ...
- react + redux 完整的项目,同时写一下个人感悟
先附上项目源码地址和原文章地址:https://github.com/bailicangd... 做React需要会什么? react的功能其实很单一,主要负责渲染的功能,现有的框架,比如angula ...
- 【前端】react学习阶段总结,学习react、react-router与redux的这些事儿
前言 借用阮一峰的一句话:真正学会 React 是一个漫长的过程. 这句话在我接触react深入以后,更有感触了.整个react体系都是全新的,最初做简单的应用,仅仅使用react-tools打包js ...
- react聊天室|react+redux仿微信聊天IM实例|react仿微信界面
一.项目概况 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开 ...
- react,react-router,redux+react-redux 构建一个React Demo
创建初始化应用 加速我们的npm. npm install -g cnpm --registry=https://registry.npm.taobao.org 利用create-react-app ...
- react、react-router、redux 也许是最佳小实践1
小前言 这是一个小小的有关react的小例子,希望通过一个小例子,可以让新手更好的了解到react.react-router4.0.redux的集中使用方法. 这是基于create-react-app ...
- 【转】浅谈React、Flux 与 Redux
本文转自<浅谈React.Flux 与 Redux>,转载请注明出处. React React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化 利用 props 形成 ...
- 前端笔记之React(五)Redux深入浅出
一.Redux整体感知 Redux是JavaScript状态管理容器,提供了可被预测状态的状态管理容器.来自于Flux思想,Facebook基于Flux思想,在2015年推出Redux库. 中文网站: ...
- 【React】360- 完全理解 redux(从零实现一个 redux)
点击上方"前端自习课"关注,学习起来~ 前言 记得开始接触 react 技术栈的时候,最难理解的地方就是 redux.全是新名词:reducer.store.dispatch.mi ...
随机推荐
- JAVA中double类型运算结果异常的解决
问题: 对两个double类型的值进行运算,有时会出现结果值异常的问题.比如: System.out.println(19.99+20); System.out.println(1.0-0.66); ...
- Gsp
Gsp 接触到了groovy开发,自然就接触到了gsp.在grails开发中,gsp作为Grails的视图技术,事实上, 不过是标准 HTML 加上一些提供动态内容的 Grails 标记而已. gsp ...
- win10汇编如何debug(小白向)
先引用别人的方法 http://blog.csdn.net/lcr_happy/article/details/52491107 按他所说的下完对应软件后,安装其中的dosbox,然后将debug.e ...
- shell第一篇
前两天不停的再看内核相关的内容,了解内核的形成.内核的执行流程.内核的作用,结果是舍近求远. 其实我只是想了解一下shell的工作,shell与内核有关,但并不需要我么真正去做什么,至少对于我这样额初 ...
- Redis的部署
笔者Q:972581034 交流群:605799367 欢迎加群交流 官方网站 redis.io 下载 cd /usr/local/src wget http://download.redis.io/ ...
- ng机器学习视频笔记(十六) ——从图像处理谈机器学习项目流程
ng机器学习视频笔记(十六) --从图像处理谈机器学习项目流程 (转载请附上本文链接--linhxx) 一.概述 这里简单讨论图像处理的机器学习过程,主要讨论的是机器学习的项目流程.采用的业务示例是O ...
- 浅探element-ui2组件源码之upload
最近不小心更新了element-ui的版本,已经到了2.1.0,以前修改的源码都失效了. 于是重新尝试下面的指令重新修改: git clone https://github.com/ElemeFE/e ...
- Django跨域请求之JSONP和CORS
现在来新建一个Django项目server01,url配置为 url(r'^getData.html$',views.get_data) 其对应的视图函数为get_data: from django. ...
- 用js脚本一键下载网页所有图片
年前这两天稍微闲一点了,琢磨了一点js脚本,功能是把当前网页页面上的所有图片一次性保存到本地,免得每次都要对图片右键保存. 测试环境:Chrome开发者模式下(启动Chrome,按F12即可) 测试网 ...
- 对JavaScript中的静态属性和原型属性的理解
首先是在访问上的区别,当访问实例对象的某个属性但它本身没有时,它就会到原型中去查找,但不会去查找静态属性. // 实例对象不会去查找静态属性 function Foo(){} Foo.a = 1; v ...