如何使用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()) {
}
}
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()) {
}#}
echo json_encode($rows );
- $employee_id = $_POST['employee_id'];
$clock_in = $_POST['clock_in'];
$clock_out = $_POST['clock_out'];
$sql = "INSERT INTO attendance (employee_id, clock_in, clock_out) VALUES ('$employee_id', '$clock_in', '$clock_out ')";
if ($conn->query($sql) === TRUE) {
echo "Clock in/out recorded successfully";
登入後複製
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
登入後複製
登入後複製
}
#四、前端開發：
- 建立一個Vue元件用於顯示員工清單、新增員工和打卡記錄。
員工名單
{{ employee.name }} - {{ employee.department }}登入後複製
新增員工
打卡記錄
員工|
| 上班時間
| 下班時間
|
{{ record.name }}|
| {{ record.clock_in }}
| {{ record.clock_out }}
|
在Vue组件中，发送HTTP请求并获取数据：
作者最新文章
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31
