vue2.x全家桶+nodeJs+mongodb实现学校老师考勤应用
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
record
使用vue全家桶(vue2.x + vue-router + vue-resource + vuex) + nodeJs + mongodb实现的考勤打卡记录应用
项目地址
说在前面
经过几个版本的变更,目前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文件
.