【开源】基于Vue.js和微信小程序的班级考勤管理系统

在这里插入图片描述

$\color{red}{文末获取源码，项目编号：S080。}$

一、摘要
- 1.1 项目介绍
- 1.2 项目录屏
二、功能模块
- 2.1 系统基础支持模块
- 2.2 班级学生教师支持模块
- 2.3 考勤签到管理
- 2.4 学生请假管理
三、系统设计
- 3.1 功能设计
- - 3.1.1 系统基础支持模块
  - 3.1.2 班级学生教师档案模块
  - 3.1.3 考勤签到管理模块
  - 3.1.4 学生请假管理模块
- 3.2 数据库设计
- - 3.2.1 用户配置表
  - 3.2.2 学生档案表
  - 3.2.3 教师档案表
  - 3.2.4 学生请假表
  - 3.2.5 考勤档案表
四、系统展示
五、核心代码
- 5.1 发起考勤签到
- 5.2 考勤补录
- 5.3 学生请假
- 5.4 考勤签到小程序界面
- 5.5 小程序登录页面
六、免责说明

一、摘要

1.1 项目介绍

基于JAVA+Vue+SpringBoot+MySQL的班级考勤管理系统，分为微信小程序端和管理后台，包含了学生档案、班级档案、教师档案、学生考勤、学生请假模块，还包含系统自带的用户管理、部门管理、角色管理、菜单管理、日志管理、数据字典管理、文件管理、图表展示等基础模块，班级考勤管理系统基于角色的访问控制，给教师、学生使用，可将权限精确到按钮级别，您可以自定义角色并分配权限，系统适合设计精确的权限约束需求。

考勤是高校管理学生的基本方式，也是考核学生成绩的重要一环。随着高校考勤数量的快速增长，面对大类的考勤数据，人工记录的方式存在很多弊端。手动考勤很有可能出现记录错误、计算错误的情况，传统的考勤记录方式已经不能满足现有的需求，完善高校考勤管理模式势在必行。

开发一套基于 Vue.js 的班级考勤管理系统，正是为了解决考勤信息管理难的问题，系统化的管理模式可以减轻考勤人员的工作任务，提高考勤效率，系统还支持生成各式各样的图表，让原本枯燥的考勤工作变得简单而有趣。

1.2 项目录屏

源码下载

二、功能模块

目前，高校对于班级考勤系统的需求包括打卡和请假两大方面，另外还包括对班级、学生等基础档案的管理，因为还需要对考勤这样的数据进行合理存储，打卡数据的准确性在高校考勤事务中非常重要，接下来将详细阐述班级考勤管理系统的系统需求。

通过对高校实际需求的研究，我将班级考勤管理系统的功能模块分为系统基础支持模块、班级学生教师档案支持模块、考勤签到支持模块、学生请假支持模块，在使用场景上分为浏览器PC端和微信小程序端。

在这里插入图片描述

2.1 系统基础支持模块

系统基础支持模块包括支撑班级考勤管理系统运行的管理模块。比如系统的菜单管理，维护了菜单的名称、前端路由、前端组件信息，是支撑系统运行的基础内容。比如日志模块，用于基础学生的登陆、打卡、请假操作，用于留档。

2.2 班级学生教师支持模块

班级档案、学生档案、教师档案是班级考勤管理系统的基础档案信息。班级是学生的承载体，班级和学生是一对多的关系。
班级档案包括各个年级段行政班级的档案，包含了班级名称、班级代码、年级、班主任、学生数量、学习委员等，可以通过此模块进行班级基础数据的维护。
学生档案管理是对班级内学生的信息进行管理，其中包括各个班级下学生的档案，包含了学生姓名、性别、手机号、年龄等信息，可以通过此模块进行学生基础数据的维护。
教师档案管理是对高校在职教师的信息进行管理，其中包括各分院在职教师的档案，包含了教师姓名、学历、职称、开始工作时间等，可以通过此模块进行教师基础数据的维护。

2.3 考勤签到管理

考勤签到管理模块，录入了教师发起的考勤信息，包括考勤的开始时间、结束时间、考勤缘由、参与班级等，可以通过此模块来发起考勤、操作考勤补录、查询考勤报表。

2.4 学生请假管理

高校学生可以在此模块中发起请假，该学生所属班级的班主任可以对请假单进行审批，学习委员可以查看班级学生的请假情况，班级考勤系统所有关于请假的功能，都在学生请假管理下。

在这里插入图片描述

三、系统设计

3.1 功能设计

3.1.1 系统基础支持模块

系统基础支持模块的功能包括了登陆用户、用户角色、系统菜单、日志、数据字典的模块支持。

数据字典需要包括字典名称、字典ID、创建人、字典内容、字典类型字段，字典值和数据字典是一对多的关系，需要分为两张表进行存储。

日志需要包括操作名称、操作IP、操作人、记录时间字段，一张关系表存储即可。

系统菜单包括了菜单名称、菜单ID、菜单路由、菜单备注、创建人，一张关系表存储即可。

用户角色包括了角色名称、角色ID、菜单权限、备注信息，其中角色和菜单是一对多的关系，需要分两张表进行存储。

在这里插入图片描述

3.1.2 班级学生教师档案模块

该模块是对班级、学生、教师进行管理。包括对学习委员进行管理，主要有班级、学生、教师的信息以及学习委员的设置，其中包含了对班级、学生、教师的信息进行添加，搜索，该模块可以详细查看班主任的信息档案。

在这里插入图片描述

3.1.3 考勤签到管理模块

该模块是对考勤签到的管理，主要是教师发起考勤、修改考勤信息、取消考勤、学生参与考勤、考勤补录、考勤报表。该模块主要针对考勤的一些信息进行维护。

其中学生考勤打卡部分，位于微信小程序端，学生可以进入手机微信完成打卡操作，既方便又高校。管理人员可以对这些信息进行修改，包括了基础的增、删、改、查。

考勤补录部分，又具体详细显示了考勤的详细信息，具体包括了考勤的应参与人数、实际参与人数等，这样可以更好的分析班级的考勤状态。同时，管理人员也可以对这些考勤信息进行补录，也包括基础的增、删、改、查。

在这里插入图片描述

3.1.4 学生请假管理模块

该模块是维护学生的请假数据，该模块包含了高校学生发起的所有请假信息，经过学生所在行政班班主任审核后生效。同时，在该模块当中，也可以对这些请假数据进行搜索、查看以及修改。

3.2 数据库设计

3.2.1 用户配置表

在这里插入图片描述

3.2.2 学生档案表

在这里插入图片描述

3.2.3 教师档案表

在这里插入图片描述

3.2.4 学生请假表

在这里插入图片描述

3.2.5 考勤档案表

在这里插入图片描述

四、系统展示

在这里插入图片描述

五、核心代码

5.1 发起考勤签到

@RequestMapping(value = "/addAttendance", method = RequestMethod.GET)
@ApiOperation(value = "发起签到")
public Result<Attendance> addAttendance(@RequestParam String classId, @RequestParam String date, @RequestParam String type, @RequestParam String ansNumber, @RequestParam String startTime, @RequestParam String endTime, @RequestParam String title, @RequestParam String remark){
    User currUser = securityUtil.getCurrUser();
    ClassArchives ca = iClassArchivesService.getById(classId);
    if(ca == null) {
        return ResultUtil.error("班级不存在");
    }
    Attendance at = new Attendance();
    at.setTeacherId(currUser.getId());
    at.setTeacherName(currUser.getNickname());
    at.setTitle(title);
    at.setClassId(ca.getId());
    at.setClassTitle(ca.getClassName());
    at.setDate(date);
    at.setStartTime(startTime);
    at.setEndTime(endTime);
    at.setType(type);
    at.setNumber(ansNumber);
    at.setRemark(remark);
    at.setStatus("正常");
    iAttendanceService.saveOrUpdate(at);
    AttendanceClass ac = new AttendanceClass();
    ac.setAttendanceId(at.getId());
    ac.setClassId(classId);
    iAttendanceClassService.saveOrUpdate(ac);
    QueryWrapper<StudentArchives> stuQw = new QueryWrapper<>();
    stuQw.eq("class_id",classId);
    List<StudentArchives> studentArchivesList = iStudentArchivesService.list(stuQw);
    for (StudentArchives sa : studentArchivesList) {
        AttendanceItem item = new AttendanceItem();
        item.setAttendanceId(at.getId());
        item.setAttendanceName(at.getTitle());
        item.setStudentId(sa.getId());
        item.setStudentName(sa.getUserName());
        item.setStudentNumber(sa.getStudyNumber());
        item.setTeacherId(currUser.getId());
        item.setTeacherName(currUser.getNickname());
        item.setDate(date);
        item.setStartTime(startTime);
        item.setEndTime(endTime);
        item.setStatus("未参与");
        iAttendanceItemService.saveOrUpdate(item);
    }
    return ResultUtil.success();
}

5.2 考勤补录

@RequestMapping(value = "/buLu", method = RequestMethod.POST)
@ApiOperation(value = "考勤补录")
public Result<Object> buLu(@RequestParam String id){
    AttendanceItem ai = iAttendanceItemService.getById(id);
    if(ai != null) {
        ai.setStatus("已参与");
        iAttendanceItemService.saveOrUpdate(ai);
    }
    return ResultUtil.success();
}

5.3 学生请假

@RequestMapping(value = "/addStudentLeaveOnApp", method = RequestMethod.GET)
@ApiOperation(value = "新增请假-移动端")
public Result<Object> addStudentLeaveOnApp(@RequestParam String userId,@RequestParam String type,@RequestParam String startTime,@RequestParam String endTime,@RequestParam String reason,@RequestParam String remark) {
    User currUser = iUserService.getById(userId);
    if(currUser == null) {
        return ResultUtil.error("用户不存在");
    }
    QueryWrapper<StudentArchives> stuQw = new QueryWrapper<>();
    stuQw.eq("user_id",currUser.getId());
    StudentArchives sa = iStudentArchivesService.getOne(stuQw);
    if(sa == null) {
        return ResultUtil.error("非学生账号");
    }
    StudentLeave leave = new StudentLeave();
    leave.setType(type);
    leave.setStartTime(startTime);
    leave.setEndTime(endTime);
    leave.setStatus("待审批");
    leave.setReason(reason);
    leave.setStudentId(sa.getId());
    leave.setStudentName(sa.getUserName());
    leave.setRemark(remark);
    iStudentLeaveService.saveOrUpdate(leave);
    return ResultUtil.success();
}

5.4 考勤签到小程序界面

<view class="page-body">
  <view class="page-section page-section-gap">
    <map
      id="myMap"
      style="width: 100%; height: 300px;"
      latitude="{{latitude}}"
      longitude="{{longitude}}"
      markers="{{markers}}"
      covers="{{covers}}"
      show-location
    ></map>
  </view>
  <view class="page-body">
  <view class="page-section">
    <view class="weui-cells__title">考勤数字</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" auto-focus placeholder="请输入老师约定的数字" value="{{myNumber}}" bindblur="changeInputNumber"/>
      </view>
    </view>
  </view>
  </view>
  <view class="btn-area" style="margin-top: 10px;">
    <button bindtap="moveToLocation2" class="page-body-button" type="primary">刷新定位</button>
    <button bindtap="moveToLocation" class="page-body-button" type="primary">完成打卡</button>
  </view>
  <view wx:for="{{cardList}}" wx:key="index" wx:for-item="item">
  待签到{{index}} : {{item.attendanceName}}
  </view>
</view>

5.5 小程序登录页面

<!-- 郑为中 -->
<!-- 登入界面的HTML文件 -->

<view class="page">
  <view class="page__hd">
    <view class="page__title">班级考勤系统</view>
    <view class="page__desc">请提供您的相关信息，帮助我们核对您的身份</view>
  </view>
  <view class="section">
  </view>
  <view class="swiper-tab">
    <view bindtap="swithNav" wx:for="{{tabCont}}" wx:key="item.index" class="swiper-tab-list {{currentTab==item.index?'active':''}}" data-current='{{item.index}}'>{{item.title}}</view>
  </view>
  <radio-group bindchange="changeRadioFx">
    <radio value="学生" checked>学生</radio>
    <radio value="学习委员">学习委员</radio>
    <radio value="教师">教师</radio>
  </radio-group>
  <swiper class="swiper-box" current="{{currentTab}}" duration="300" style="height:420px" bindchange="GetCurrentTab" data-current='6'>
    <swiper-item wx:for="{{tabCont}}" wx:key="item.index">
      <view wx:if="{{item.index==0}}">
        <view class="section">
        </view>
        <button type="primary" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
          手机一键登入
        </button>
      </view>
      <view wx:if="{{item.index==1}}">
        <view class="section">
          <input placeholder="登入账号" bindblur="logincode" />
        </view>
        <view class="section">
          <input placeholder="登入密码" bindblur="loginpassword" password="true" />
        </view>
        <view class="section"></view>
        <view wx:if='{{islogin==""}}' class='btn_box'>
          <button type="primary" bindtap="loginTo">登入</button>
        </view>
        <view wx:else class='btn_box'>
          <button type="primary" bindtap="returnmain">退出</button>
        </view>
      </view>
    </swiper-item>
  </swiper>
</view>