首页 >后端开发 >php教程 >如何使用PHP和Vue开发在线员工考勤的打卡记录查询

如何使用PHP和Vue开发在线员工考勤的打卡记录查询

WBOY原创: 2023-09-24 16:45:041112浏览

在现代企业中，员工的考勤管理是非常重要的一项任务。传统的手工记录容易出现错误，且不便于查询和统计。借助PHP和Vue的强大功能，我们可以开发一个在线员工考勤的打卡记录查询系统，使得考勤管理更加高效、方便和准确。

一、项目准备
在开始之前，我们需要准备好以下的开发环境和工具：

一个PHP的开发环境（比如XAMPP）
一个文本编辑器（比如Sublime Text、Visual Studio Code等）
一个MySQL数据库
Vue.js的开发环境（可以使用Vue CLI）

二、数据库设计
我们需要创建一个MySQL数据库，用于存储员工的信息和打卡记录。设计一个名为"attendance_management"的数据库，包含两张表：employees和attendance。employees表用于存储员工的基本信息，包含字段：id（自增主键），name（员工姓名），department（所属部门）等。attendance表用于存储考勤记录，包含字段：id（自增主键），employee_id（员工id），check_in_time（打卡时间），check_out_time（下班打卡时间）等。

三、后台开发

创建一个名为"attendance_management"的项目文件夹。
在项目文件夹下创建一个名为"backend"的文件夹，用于存放后台相关的代码。
在backend文件夹下创建一个名为"config"的文件夹，用于存放配置文件。
在backend文件夹下创建一个名为"api"的文件夹，用于存放API相关的代码。
在config文件夹下创建一个名为"database.php"的文件，用于配置数据库连接信息。

return [

'host' => 'localhost',
'username' => 'root',
'password' => 'your_password',
'database' => 'attendance_management',

];
?>

在api文件夹下创建一个名为"employees.php"的文件，用于处理员工相关的API请求。

require_once '../config/database.php';

class Employees {

private $conn;
private $table = 'employees';

public function __construct($db) {
    $this->conn = $db;
}

public function getEmployees() {
    $query = 'SELECT * FROM ' . $this->table;

    $stmt = $this->conn->prepare($query);
    $stmt->execute();

    return $stmt;
}

}
?>

在api文件夹下创建一个名为"attendance.php"的文件，用于处理考勤相关的API请求。

require_once '../config/database.php';

class Attendance {

private $conn;
private $table = 'attendance';

public function __construct($db) {
    $this->conn = $db;
}

public function getAttendanceByEmployeeId($employeeId) {
    $query = 'SELECT * FROM ' . $this->table . ' WHERE employee_id = ?';

    $stmt = $this->conn->prepare($query);
    $stmt->bindParam(1, $employeeId);
    $stmt->execute();

    return $stmt;
}

}
?>

四、前端开发

在项目文件夹下打开命令行，执行以下命令安装Vue CLI（需要确保已安装Node.js）：

npm install -g @vue/cli

在项目文件夹下执行以下命令创建一个名为"frontend"的Vue项目：

vue create frontend

进入frontend文件夹并执行以下命令安装Vue Router和Axios：

cd frontend
npm install vue-router axios

在frontend/src目录下创建一个名为"components"的文件夹，用于存放Vue组件。
在components文件夹下创建一个名为"Attendance.vue"的文件，用于显示考勤记录。

<div>
    <h2>员工考勤记录</h2>
    <select v-model="selectedEmployee" @change="onEmployeeChange">
        <option v-for="employee in employees" :value="employee.id">{{ employee.name }}</option>
    </select>
    <table>
        <thead>
            <tr>
                <th>打卡时间</th>
                <th>下班打卡时间</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="record in attendance">
                <td>{{ record.check_in_time }}</td>
                <td>{{ record.check_out_time }}</td>
            </tr>
        </tbody>
    </table>
</div>

data() {
    return {
        employees: [],
        selectedEmployee: null,
        attendance: []
    };
},
mounted() {
    this.getEmployees();
},
methods: {
    getEmployees() {
        axios.get('http://localhost/backend/api/employees.php')
            .then(response => {
                this.employees = response.data;
            })
            .catch(error => {
                console.log(error);
            });
    },
    onEmployeeChange() {
        axios.get('http://localhost/backend/api/attendance.php?employeeId=' + this.selectedEmployee)
            .then(response => {
                this.attendance = response.data;
            })
            .catch(error => {
                console.log(error);
            });
    }
}

};

在frontend/src/router/index.js文件中添加路由配置。

import Vue from 'vue';
import VueRouter from 'vue-router';
import Attendance from '../components/Attendance.vue';

Vue.use(VueRouter);

const routes = [

{
    path: '/',
    name: 'Attendance',
    component: Attendance
}

];

const router = new VueRouter({

mode: 'history',
base: process.env.BASE_URL,
routes

});

export default router;

五、运行项目

首先启动PHP的开发环境（比如XAMPP），确保数据库连接正常。
在backend文件夹下创建一个名为".htaccess"的文件，用于配置URL重写。

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1 [L]

在frontend文件夹下执行以下命令运行Vue项目：

npm run serve

打开浏览器，访问http://localhost:8080，即可看到员工考勤记录的界面。
选择员工后，页面会根据员工的id调用后台API获取该员工的打卡记录，并显示在表格中。

通过以上的开发步骤，我们成功实现了一个使用PHP和Vue开发的在线员工考勤的打卡记录查询系统。用户可以通过选择员工来查看其考勤记录，既提高了考勤管理的效率，也减少了人为错误的发生。同时，这个项目也为我们展示了如何结合PHP和Vue来进行全栈开发的基本步骤和技术要点。希望这篇文章对您有所帮助，祝您编程顺利！

以上是如何使用PHP和Vue开发在线员工考勤的打卡记录查询的详细内容。更多信息请关注PHP中文网其他相关文章！

php mysql npm const 栈 class JS default visual studio visual studio code sublime text database 数据库 http router axios

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：如何设计一个高性能的PHP微服务架构下一篇：如何在PHP中实现实时聊天功能

查看更多