BYChoo / Record
Vue + Nodejs + Mongodb构建的校园打卡系统,支持csv文件上传名单🚀
Stars: ✭ 94
Projects that are alternatives of or similar to Record
vue2-element
基于vue2 + vue-router2 + element-ui + vuex2 + fetch + webpack2 企业级后台管理系统最佳实践
Stars: ✭ 115 (+22.34%)
Mutual labels: vue2, vuex2
Magicmusic
🎵帅气的手机端音乐播放器(vue vue-router vuex flex ...)
Stars: ✭ 350 (+272.34%)
Mutual labels: vuex2, vue2
lavas-cnode
A PWA for cnodejs.org written by Baidu-Lavas.
Stars: ✭ 13 (-86.17%)
Mutual labels: vue2, vuex2
Vue Entity Adapter
Package to maintain entities in Vuex.
Stars: ✭ 20 (-78.72%)
Mutual labels: vuex2, vue2
Vue Admin Element
(Vue2 演示项目)物业后台管理系统 - ElementUI ( 基本结构已完成, 剩下的就是具体业务开发; 如有疑问请留言 )
Stars: ✭ 73 (-22.34%)
Mutual labels: vuex2, vue2
Vue Blog
A single-user blog built with vue2, koa2 and mongodb which supports Server-Side Rendering
Stars: ✭ 586 (+523.4%)
Mutual labels: vuex2, vue2
Vue2 Element
基于vue2 + vue-router2 + element-ui + vuex2 + fetch + webpack2 企业级后台管理系统最佳实践
Stars: ✭ 112 (+19.15%)
Mutual labels: vuex2, vue2
Vue Cnode
基于vue2 + vue-router + vuet + ES6 + less + flex.css重写vue版cnode社区,使用webpack2打包
Stars: ✭ 1,134 (+1106.38%)
Mutual labels: vuex2, vue2
Fans
这是一个app(android/iOS)项目,但页面视图全部都用的是html5页,没有使用app的原生页面。 前端h5是基于mui + vue2 + vue-router2 + es6 + webpack2 + vuex + signalR 的前端webApp单页项目框架,项目可以直接在PC上运行html5页面。 app打包技术是用HBuilder IDE工具一键打包成APP。
Stars: ✭ 416 (+342.55%)
Mutual labels: vuex2, vue2
Multiselect
Vue 3 multiselect component with single select, multiselect and tagging options.
Stars: ✭ 92 (-2.13%)
Mutual labels: vue2
record
使用vue全家桶(vue2.x + vue-router + vue-resource + vuex) + nodeJs + mongodb开发的学校老师上课考勤应用
说在前面
初学vue配合后台语言开发的时候,完全不知从何下手,网上的Demo更是少之又少。经过一段时间的学习积累,总算掳清vue单页面与服务器的关系,碰巧实训课程也有vue配合后台开发的要求,于是就动手做这个项目。
导入的csv文件在static->file->demo.csv
运行项目
# 先在你的电脑安装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
部分截图
登录注册
导入csv文件,登记缺勤学生,查看缺勤学生
项目布局
.
├── 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文件
.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].