首頁 > 文章 > 後端開發 > 如何使用PHP和Vue開發線上員工考勤的打卡記錄查詢

如何使用PHP和Vue開發線上員工考勤的打卡記錄查詢

WBOY原創: 2023-09-24 16:45:041080瀏覽

在現代企業中，員工的考勤管理是非常重要的一項任務。傳統的手動記錄容易出現錯誤，且不便於查詢和統計。借助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微服務架構

看更多