前排提示:项目源码已放在文末

基于Vue+Springboot+mysql员工考勤管理系统(多角色登录、请假、打卡)

mysql员工考勤数据库结构 员工考勤系统数据库_mysql


mysql员工考勤数据库结构 员工考勤系统数据库_mysql员工考勤数据库结构_02


开发环境:Springboot+Mysql+Vue+Nodejs+Maven+JDK1.8

技术栈:spring-boot、mysql、mybatis-plus、druid连接池。

与【023】相比,【024】增加了轮播图功能,数据库的测试用例创建也比较清晰,而且有两份课设报告,绝对物超所值!

身份目录:

mysql员工考勤数据库结构 员工考勤系统数据库_mysql_03

源码、数据库、课设获取:

百度云链接:https://pan.baidu.com/s/1qXJwWxwh2PUD-BnM9N9jjg 
提取码:6wsw

部分功能及代码介绍:
1.员工类型:部门经理、副总经理、总经理、人事人员、财务人员

<el-form-item label="员工角色">
    <el-select v-model="employer.role" placeholder="请选择员工类型">
        <el-option label="员工" value="0"></el-option>
        <el-option label="部门经理" value="1"></el-option>
        <el-option label="副总经理" value="2"></el-option>
        <el-option label="总经理" value="3"></el-option>
        <el-option label="人事人员" value="4"></el-option>
        <el-option label="财务人员" value="5"></el-option>
    </el-select>

2.打卡类型

<el-button type="primary" @click="changeState(0)" :disabled='isHere'>上班打卡</el-button>
            <el-button type="success" @click="changeState(1)" :disabled='!isHere'>下班打卡</el-button>
            <el-button type="danger" @click="changeState(2)" :disabled='!isHere'>外出打卡</el-button>
            <el-button type="warning" @click="changeState(3)" :disabled='isHere'>返回打卡</el-button>

3.请假类型

formatType(row){
            if (row.type == 0) {
                return '事假';
            } else if (row.type == 1) {
                return '年假';
            } else if (row.type == 2) {
                return '婚假';
            } else if (row.type == 3) {
                return '产检';
            } else if (row.type == 4) {
                return '产假';
            } else if (row.type == 5) {
                return '哺乳';
            } else if (row.type == 6) {
                return '陪产';
            } else if (row.type == 7) {
                return '外出';
            } 
        },

4.员工信息展示

<el-table
        :data="page"
        border
        style="width: 100%"
        >
    <el-table-column
        prop="empId"
        label="员工ID"
    >
    </el-table-column>
    <el-table-column
        prop="account"
        label="工号">
    </el-table-column>
    
    <el-table-column
        prop="name"
        label="姓名"
        >
    </el-table-column>
    <el-table-column
        prop="gender"
        label="性别"
        :formatter="formatGender"
        >
    </el-table-column>
    <el-table-column
        prop="phone"
        label="手机号"
        >
    </el-table-column>
    <el-table-column
        prop="role"
        label="职位"
        :formatter="formatRole">
    </el-table-column>
</el-table>

部分报告截图:

mysql员工考勤数据库结构 员工考勤系统数据库_mysql_04


mysql员工考勤数据库结构 员工考勤系统数据库_数据库_05


mysql员工考勤数据库结构 员工考勤系统数据库_mysql员工考勤数据库结构_06


mysql员工考勤数据库结构 员工考勤系统数据库_数据库_07


mysql员工考勤数据库结构 员工考勤系统数据库_mysql_08

mysql员工考勤数据库结构 员工考勤系统数据库_spring boot_09


mysql员工考勤数据库结构 员工考勤系统数据库_spring boot_10


mysql员工考勤数据库结构 员工考勤系统数据库_spring_11


mysql员工考勤数据库结构 员工考勤系统数据库_spring_12


mysql员工考勤数据库结构 员工考勤系统数据库_数据库_13


mysql员工考勤数据库结构 员工考勤系统数据库_mysql员工考勤数据库结构_14


mysql员工考勤数据库结构 员工考勤系统数据库_spring_15


mysql员工考勤数据库结构 员工考勤系统数据库_spring_16


mysql员工考勤数据库结构 员工考勤系统数据库_spring boot_17


mysql员工考勤数据库结构 员工考勤系统数据库_spring_18


mysql员工考勤数据库结构 员工考勤系统数据库_mysql_19


mysql员工考勤数据库结构 员工考勤系统数据库_spring boot_20


mysql员工考勤数据库结构 员工考勤系统数据库_mysql员工考勤数据库结构_21


mysql员工考勤数据库结构 员工考勤系统数据库_mysql_22


mysql员工考勤数据库结构 员工考勤系统数据库_mysql_23


一.vscode前端运行过程:

1.安装依赖

mysql员工考勤数据库结构 员工考勤系统数据库_数据库_24

npm i

或者

npm i

2.启动项目

mysql员工考勤数据库结构 员工考勤系统数据库_mysql员工考勤数据库结构_25

npm run dev

6.跳转即可打开

mysql员工考勤数据库结构 员工考勤系统数据库_mysql员工考勤数据库结构_26

(数据库请自行导入,这里就不展开)

IDEA后端连接数据库 教程(保姆级):

(注意:建议使用jdk1.8)

mysql员工考勤数据库结构 员工考勤系统数据库_mysql_27


选择对应目录

mysql员工考勤数据库结构 员工考勤系统数据库_spring_28

选择从外部模型导入maven项目

mysql员工考勤数据库结构 员工考勤系统数据库_spring_29

在右侧连接数据库

mysql员工考勤数据库结构 员工考勤系统数据库_spring boot_30


分别填入用户名、数据库密码、数据库名称

mysql员工考勤数据库结构 员工考勤系统数据库_spring_31

记得修改springboot-vue-student-master\springboot-vue-student-master\src\main\resources下application.yml配置文件的密码为自己数据库的密码。

mysql员工考勤数据库结构 员工考勤系统数据库_数据库_32

更新maven文件

mysql员工考勤数据库结构 员工考勤系统数据库_spring_33


运行成功

mysql员工考勤数据库结构 员工考勤系统数据库_spring boot_34

以上操作配置完,便可以打开

http://localhost:8080/#/login

运行啦

源码获取:
百度云链接:https://pan.baidu.com/s/1CKMhVbtp8UTu7YRs2PDZug
提取码:6r5m