vue2.x全家桶+nodeJs+mongodb实现学校老师考勤应用
发布于 7 年前 作者 bychoo 4691 次浏览 最后一次编辑是 7 年前 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

record

使用vue全家桶(vue2.x + vue-router + vue-resource + vuex) + nodeJs + mongodb实现的考勤打卡记录应用

项目地址

github地址

说在前面

经过几个版本的变更,目前record已经增加了几个小功能,例如:滑动加载数据,增加记录时间戳等
欢迎pull request,如果觉得还不错,欢迎star~

运行项目

# 先在你的电脑安装mongodb数据库,然后启动数据库
mongod --dbpath=f:\mongodb\db

# 进入到项目文件,安装依赖包
npm install

# 运行nodeJs服务器
npm start

# 运行项目
npm run dev

使用技术

vue2.x+ vue-router+ vuex+ vue-resource+ vue-cli+ scss+ node.js+ express+ mongodb+ async+ es6

项目布局

.
├── api                                         // 服务器逻辑处理
├── build                                       // webpack配置文件
├── config                                      // 项目打包路径
├── src                                         // 源码目录
│   ├── components                              // 组件
│   │   ├── common                              // 公共组件
│   │   ├── calendar.vue                        // 日历组件
│   │   ├── check_work.vue                      // 查看缺勤组件
│   │   ├── cls_call.vue                        // 登记缺勤组件
│   │   ├── import_roster.vue                   // 导入组件
│   │   ├── login.vue                           // 租金组件
│   │   ├── register.vue                        // 注册组件
│   │   ├── restor.vue                          // 列表组件
│   │   ├── select_cls.vue                      // 选择班级组件
│   │   ├── select_restor.vue                   // 查看班级组件
│   ├── router
│   │   └── index.js                            // 路由配置
│   ├── store                                   // vuex的状态管理
│   │   ├── index.js                            // 引用vuex,创建store
│   │   ├── modules                             // store模块
│   │   └── mutations.js                        // 配置mutations
│   └── style
│       ├── common.scss                         // 公共样式文件
│       ├── mixin.scss                          // 样式配置文件
│       └── swiper.min.css
│   └── App.vue                                 // 页面入口文件
├── static                                      // 静态资源
│   ├── css                                     // css文件
│   ├── file                                    // 上传的csv文件
│   ├── fonts                                   // 字体图标
├── index.html                                  // 入口html文件
.
回到顶部