基于微信小程序的考勤打卡系统

基于微信小程序的考勤打卡系统

系统功能

不同角色的用户可通过登录进入到不同的页面,管理员从网页端成功登录后进入到人员管理页面,人事经理进入到考勤信息页面,员工通过小程序端登录到打卡页面。当员工身处公司时,可在规定时间进行上下班打卡,若不曾打卡则被记为迟到或早退,若员工不在公司则无法打卡,员工也可填写请假信息提交申请,查看请假申请状况,如是否被审批,审批结果如何,人事经理能够及时的审批员工的请假信息,查看和总结员工的考勤信息,实现规范化、科学化、效率化考勤管理。另外设置管理员管理所有人员信息,可对所有员工的信息编辑。

系统实现方式

分析企业不同角色的用户及其工作内容后,总结出管理员、人事经理、员工三个角色,进行需求研究,设计角色功能模块及模块之间的联系,进行系统总体功能的设计与开发。该系统小程序端使用微信开发者工具开发,利用json技术完成页面展示,使用JS技术完成主要功能事件,实现用户和系统之间的交互,使用WXML完成页面结构。利用Java接收客户端发起的请求,调取相应的动作,响应客户端的请求。使用IDEA工具完成代码的编写,整体基于SSM框架,前端页面采用JSP+CSS的技术实现。数据存储采用MySQL数据库,最后用Tomcat服务器进行发布。在编码结束后选择白盒测试和黑盒测试两种方法进行测试,根据测试结果,进一步完善和调试系统,最终实现了基于微信小程序的考勤打卡系统。

系统功能图

基于微信小程序的考勤打卡系统_第1张图片

核心业务即打卡流程图

基于微信小程序的考勤打卡系统_第2张图片

系统详细设计

登录功能

网页端

用户输入地址即可访问登录页面,当管理员或人事经理在网页端正确输入工号和密码,则管理员直接跳转到用户信息页面,人事经理直接跳转到考勤列表页面。当用户输入不合法的工号如字母时,则提示工号不合法,界面仍停留在登录页面。当用户的工号和密码输入错误时,则提示工号密码错误,界面仍停留在登录页面。

基于微信小程序的考勤打卡系统_第3张图片

小程序端

员工在微信上扫描小程序码或搜索小程序,即可进入登录页面,需要输入工号、姓名、密码,成功后跳转到打卡页面。当输入错误的信息时,则提示登录失败。

基于微信小程序的考勤打卡系统_第4张图片

管理员模块

管理员成功登录后,便进入到人员信息管理页面,显示所有员工的信息如工号、姓名、职位、手机和邮箱。可对人员信息进行增加、修改、删除等操作。

基于微信小程序的考勤打卡系统_第5张图片

人事经理模块

人事经理成功登录后,便进入到考勤管理页面,显示员工的上下班时间和上下班状态等。可查询员工的考勤情况、请假情况,并可审批请假信息。

基于微信小程序的考勤打卡系统_第6张图片

基于微信小程序的考勤打卡系统_第7张图片

员工模块

员工成功登录后,便进入到打卡页面,当员工不在公司时,用户点击按钮,则提示用户距离不能大于一千米。当员工所处位置为公司时,且上下班均未打卡时,按钮均可用。当上班打卡后,则显示已打卡,按钮禁用。当上下班均打卡后,则均显示已打卡。

基于微信小程序的考勤打卡系统_第8张图片

基于微信小程序的考勤打卡系统_第9张图片

员工点击请假icon,即可进入到请假页面。点击选择请假类型,填写请假原因,选择开始时间和结束时间,填写完成后,点击确认提交按钮即可,成功后则提示提交成功。

基于微信小程序的考勤打卡系统_第10张图片

员工点击我的icon,即可进入到个人信息页面。输入新的手机号或者邮箱号,点击手机或邮箱右侧的图标即可修改成功。点击打卡记录栏,可查看考勤情况。点击请假记录栏,可查看请假情况。

基于微信小程序的考勤打卡系统_第11张图片

基于微信小程序的考勤打卡系统_第12张图片

基于微信小程序的考勤打卡系统_第13张图片

你可能感兴趣的:(Java,微信小程序,小程序)