如何使用PHP和Vue開發線上員工考勤系統
Sep 25, 2023 pm 01:45 PM
如何使用PHP和Vue開發線上員工考勤系統
考勤系統是企業管理的重要工具之一，它可以幫助企業即時監控員工的出勤情況，提高工作效率和管理水準。本文將介紹如何使用PHP和Vue框架來開發一個簡單的線上員工考勤系統，並提供具體的程式碼範例。
一、環境準備：
在開始之前，你需要安裝以下軟體和工具：
- PHP環境：在你的開發環境中，確保已經安裝了PHP ，並且能夠運行PHP腳本。
- MySQL資料庫：考勤系統需要使用資料庫來儲存員工的資訊和考勤記錄。你需要安裝MySQL並建立一個資料庫來儲存相關的資料。
- Vue.js：Vue.js是一個流行的JavaScript框架，用來建立使用者介面。你需要在專案中引入Vue.js，並且了解其基本用法。
二、建立資料庫表：
為了儲存員工資訊和考勤記錄，我們需要建立兩個資料庫表：員工表和考勤記錄表。
- 員工表結構：
CREATE TABLE employees (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
department VARCHAR(100) NOT NULL
); - 考勤記錄表結構：
CREATE TABLE attendance (
id INT AUTO_INCREMENT PRIMARY KEY,
employee_id INT NOT NULL,
clock_in DATETIME NOT NULL,
#clock_out DATETIME,
FOREIGN KEY (employee_id) REFERENCES employees(id)
);
三、後端開發：
- #建立一個PHP檔案作為後端接口，命名為attendance.php。
- 連接資料庫：
$conn = new mysqli("localhost", "username", "password", "database");
if ($conn- >connect_error) {
die("Connection failed: " . $conn->connect_error);
} -
取得所有員工資訊：
$sql = "SELECT * FROM employees";
$result = $conn->query($sql);
$rows = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {$rows[] = $row;
登入後複製登入後複製}
}
echo json_encode($rows); - #新增員工：
$name = $_POST['name'];
$department = $_POST['department'];
#$sql = "INSERT INTO employees (name, department) VALUES ('$name', '$department')";
if ($conn->query($sql) === TRUE) {
echo "New employee added successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
#取得考勤記錄：
$sql = "SELECT attendance.* , employees.name FROM attendance INNER JOIN employees ON attendance.employee_id = employees.id";
$result = $conn->query($sql);
$rows = array();##if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {}$rows[] = $row;
登入後複製登入後複製#}
echo json_encode($rows ); 打卡：- $employee_id = $_POST['employee_id'];
$clock_in = $_POST['clock_in'];
$clock_out = $_POST['clock_out'];
if ($conn->query($sql) === TRUE) {
echo "Clock in/out recorded successfully";
echo "Error: " . $sql . "<br>" . $conn->error;
- 建立一個Vue元件用於顯示員工清單、新增員工和打卡記錄。
員工名單
{{ employee.name }} - {{ employee.department }}登入後複製
新增員工
打卡記錄
員工 {{ record.name }} 在Vue组件中，发送HTTP请求并获取数据：
熱門文章
擊敗分裂小說需要多長時間？3 週前 By DDD倉庫：如何復興隊友3 週前 By 尊渡假赌尊渡假赌尊渡假赌Hello Kitty Island冒險：如何獲得巨型種子3 週前 By 尊渡假赌尊渡假赌尊渡假赌R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）1 週前 By 尊渡假赌尊渡假赌尊渡假赌公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？3 週前 By 王林
熱門文章
擊敗分裂小說需要多長時間？3 週前 By DDD倉庫：如何復興隊友3 週前 By 尊渡假赌尊渡假赌尊渡假赌Hello Kitty Island冒險：如何獲得巨型種子3 週前 By 尊渡假赌尊渡假赌尊渡假赌R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）1 週前 By 尊渡假赌尊渡假赌尊渡假赌公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？3 週前 By 王林
熱門文章標籤
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
See all articles
適用於 Ubuntu 和 Debian 的 PHP 8.4 安裝和升級指南
Dec 24, 2024 pm 04:42 PM
適用於 Ubuntu 和 Debian 的 PHP 8.4 安裝和升級指南
如何設定 Visual Studio Code (VS Code) 進行 PHP 開發
Dec 20, 2024 am 11:31 AM
如何設定 Visual Studio Code (VS Code) 進行 PHP 開發
