react+react-router+react-redux+nodejs+mongodb项目

时间:2024-06-19 18:04:50

一个实际项目(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.通讯录

react+react-router+react-redux+nodejs+mongodb项目

2.假期管理

react+react-router+react-redux+nodejs+mongodb项目

3.考勤分组

react+react-router+react-redux+nodejs+mongodb项目

4.选择人员

react+react-router+react-redux+nodejs+mongodb项目

5.员工管理

react+react-router+react-redux+nodejs+mongodb项目

6.部门管理

react+react-router+react-redux+nodejs+mongodb项目