员工打卡系统

付强

2021.01.23

65人浏览

使用VUE框架技术实现让用户打卡和发布博客并且可以查询打卡详细信息和博客详细信息,可以根据发卡数量,积分,博客数量来排行

开发项目:VUE.JS

开发环境:WebStrom

开发者:付强

项目详情:

1.界面展示

这次创作的是一个PC端的员工打卡系统

 员工打卡系统

模拟真实情况下的员工打卡功能和查询打卡详细信息功能

 

 

2.功能介绍

 员工打卡系统

员工打卡系统

注册登录后,进入大厅,左上有自己的用户头像,昵称,和积分,旁边的的红色字体按钮可以退出用户登录状态

 

正中间的绿色按钮“我要发布”点击后可以进入到打卡窗口

 员工打卡系统

 

进入到打卡窗口后,选择自己要发布的文字和图片然后点击发布就可以再大厅里看到自己的打卡记录了

 员工打卡系统

再点击我的打卡数据接口的按钮来查看我所有发布的打卡数据

 员工打卡系统

 

点击我要发布blog按钮,可以跳转到发布blog页面,此页面是由quill组件来支持功能的,可以发布文字,图片视频和链接并可以编辑排版字号等功能

 员工打卡系统

 

 

 

 

点击查询所有人blog,可以查看所有员工发布的blog,再点开相应blog标题,来展示blog的详细内容

 员工打卡系统

员工打卡系统

员工打卡系统

 

点击查询排行榜,可以查看员工按照积分,打卡数量,blog数量的排行榜

员工打卡系统

员工打卡系统

员工打卡系统

老师评分: 4.7分

老师评语: 还未获得评语哦~

付强    166 河北省秦皇岛市海港区 设计师杨冰是女孩 1996.11.15
京ICP备17020986号-1
筑坐极2021版