一个实际项目(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项目的更多相关文章

  1. 【招聘App】—— React/Nodejs/MongoDB全栈项目:个人中心&退出登录

    前言:最近在学习Redux+react+Router+Nodejs全栈开发高级课程,这里对实践过程作个记录,方便自己和大家翻阅.最终成果github地址:https://github.com/66We ...

  2. react + redux 完整的项目,同时写一下个人感悟

    先附上项目源码地址和原文章地址:https://github.com/bailicangd... 做React需要会什么? react的功能其实很单一,主要负责渲染的功能,现有的框架,比如angula ...

  3. 【前端】react学习阶段总结,学习react、react-router与redux的这些事儿

    前言 借用阮一峰的一句话:真正学会 React 是一个漫长的过程. 这句话在我接触react深入以后,更有感触了.整个react体系都是全新的,最初做简单的应用,仅仅使用react-tools打包js ...

  4. react聊天室|react+redux仿微信聊天IM实例|react仿微信界面

    一.项目概况 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开 ...

  5. react,react-router,redux+react-redux 构建一个React Demo

    创建初始化应用 加速我们的npm. npm install -g cnpm --registry=https://registry.npm.taobao.org 利用create-react-app ...

  6. react、react-router、redux 也许是最佳小实践1

    小前言 这是一个小小的有关react的小例子,希望通过一个小例子,可以让新手更好的了解到react.react-router4.0.redux的集中使用方法. 这是基于create-react-app ...

  7. 【转】浅谈React、Flux 与 Redux

    本文转自<浅谈React.Flux 与 Redux>,转载请注明出处. React React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化 利用 props 形成 ...

  8. 前端笔记之React(五)Redux深入浅出

    一.Redux整体感知 Redux是JavaScript状态管理容器,提供了可被预测状态的状态管理容器.来自于Flux思想,Facebook基于Flux思想,在2015年推出Redux库. 中文网站: ...

  9. 【React】360- 完全理解 redux(从零实现一个 redux)

    点击上方"前端自习课"关注,学习起来~ 前言 记得开始接触 react 技术栈的时候,最难理解的地方就是 redux.全是新名词:reducer.store.dispatch.mi ...

随机推荐

  1. java利用poi生成/读取excel表格

    1.引入jar包依赖 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi< ...

  2. linkin大话面向对象--组合

    继承是实现类重用的重要手段,但是它有一个最大的坏处:破坏封装.相比之下,组合也是实现类重用的重要方式,但是采用组合方式实现类重用则能提供更好的封装性.比如人有手一样,在人的类中增加一个手的属性. 何时 ...

  3. Git知识总览(四) git分支管理之rebase 以及 cherry-pick相关操作

    上篇博客聊了<Git知识总览(三) 分支的创建.删除.切换.合并以及冲突解决>,本篇博客我们主要来看一下 rebase 变基相关的操作.rebase 操作和 merge 操作最终都可以达到 ...

  4. PHP判断变量是否为空的几种方法小结

    1. isset功能:判断变量是否被初始化 说明:它并不会判断变量是否为空,并且可以用来判断数组中元素是否被定义过注意:当使用isset来判断数组元素是否被初始化过时,它的效率比array_key_e ...

  5. IOS 疯狂基础之 页面间跳转

    常用的就两种 一种通过导航,一种直接跳 第一种 直接跳转 思路大致就是new一个目的页面,然后设置下页面跳转动画 中间还可以做点目的页面的数据初始化: ValueInputView *valueVie ...

  6. Centos更改镜像源

    阿里云Linux安装镜像源: 1.备份原镜像文件以便于恢复. [root@localhost ~]#mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repo ...

  7. Linux下查找大文件以及目录

    转自:http://www.cnblogs.com/kerrycode/p/4391859.html 在Windows系统中,我们可以使用TreeSize工具查找一些大文件或文件夹,非常的方便高效,在 ...

  8. ABP官方文档翻译 8.1 通知系统

    通知系统 介绍 发送模型 通知类型 通知数据 通知严重性 关于通知持久化 订阅通知 发布通知 用户通知管理 实时通知 客户端 通知存储 通知定义 介绍 在系统中通知用来基于特定的事件告知用户.ABP提 ...

  9. hadoop初学

    Hadoop: 官网(hadoop.apache.org)的定义: 一:Hadoop Common: 为Hadoop其它模块提供通用的支持 二:HDFS: 是Hadoop的分布式文件系统,其特点是高度 ...

  10. 洛谷 [P1963] [NOI2009] 变换序列

    这是一道二分图匹配的题 先%dalao博客 建图并没有什么难的,但是关键在于如何使字典序最小. 一个很显然的想法是先求出一个完美匹配,然后从x集合的第一个元素开始,如果该元素匹配的较小的一个,那么继续 ...