[024] Vue+Springboot+mysql employee attendance management system (multi-role login, leave, check in) (including source code, database, operation tutorial, experiment report)

Tips in the front row: The source code of the project has been placed at the end of the article.
Based on Vue+Springboot+mysql employee attendance management system (multi-role login, leave, check-in)


development environment : Springboot+Mysql+Vue+Nodejs+Maven+JDK1.8
technology stack : spring- boot, mysql, mybatis-plus, druid connection pool.
Compared with [023], [024] has added the carousel function, and the test case creation of the database is also relatively clear, and there are two course design reports , which are absolutely worth the money!
Identity directory:

Source code, database, curriculum acquisition:

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

Some functions and code introduction:
1. Employee type : department manager, deputy general manager, general manager, personnel personnel, financial personnel

<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. Punch type

             <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. Leave type :

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. Employee information display

<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>

Screenshots of some reports:

1. Vscode front-end running process:
1. Installation dependencies

npm i

or

npm i

2. Start the project

npm run dev

6. Jump to open

(Please import the database by yourself, it will not be expanded here)

IDEA Backend Connection Database Tutorial (Nanny Level):
(Note: It is recommended to use jdk1.8)

Select the corresponding directory

Option to import maven project from external model

Connect to the database on the right

and fill in the user name, database password, and database name respectively

Remember to modify the password of the application.yml configuration file under springboot-vue-student-master\springboot-vue-student-master\src\main\resources to the password of your own database.

Update the maven file

and run successfully

After the above operations are configured, you can open

http://localhost:8080/#/login

run it

Source code acquisition:
Baidu cloud link: https://pan.baidu.com/s/1CKMhVbtp8UTu7YRs2PDZug
Extraction code: 6r5m

You can also add cynm-2233acquisition, note the intention, the code word is not easy, please give me a thumbs up~