So erstellen Sie mit PHP und Vue einen Urlaubsgenehmigungsprozess für die Anwesenheit von Mitarbeitern
Da die Größe der Unternehmen weiter wächst, ist der Urlaubsgenehmigungsprozess für Mitarbeiter immer umständlicher geworden. Um die Arbeitseffizienz zu verbessern, haben viele Unternehmen damit begonnen, elektronische Methoden zur Urlaubsgenehmigung einzuführen, darunter PHP und Vue, eine sehr leistungsstarke Kombination. In diesem Artikel wird erläutert, wie Sie mithilfe von PHP und Vue einen Urlaubsgenehmigungsprozess für die Anwesenheit von Mitarbeitern erstellen, und einige spezifische Codebeispiele bereitstellen.
1. Vorbereitung
Zuerst müssen wir eine einfache Umgebung zum Ausführen von PHP und Vue erstellen. Wir können Software wie XAMPP oder WAMP verwenden, um einen lokalen Server aufzubauen. Erstellen Sie dann eine Datenbank auf dem Server, um die Urlaubsdaten der Mitarbeiter zu speichern. Erstellen Sie als Nächstes eine Datenbanktabelle mit dem Namen „attendance“, die die folgenden Felder enthält:
2. Backend-Entwicklung
<?php
require_once 'config.php';
// 查询请假记录
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
$conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
$sql = "SELECT * FROM attendance";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$data = [];
while ($row = $result->fetch_assoc()) {
$data[] = $row;
}
echo json_encode($data);
} else {
echo "没有找到请假记录";
}
$conn->close();
}
// 创建请假记录
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// 获取前端传递的数据
$name = $_POST['name'];
$start_date = $_POST['start_date'];
$end_date = $_POST['end_date'];
$reason = $_POST['reason'];
$conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
$sql = "INSERT INTO attendance (name, start_date, end_date, reason, status) VALUES ('$name', '$start_date', '$end_date', '$reason', '待审批')";
if ($conn->query($sql) === TRUE) {
echo "请假申请已提交";
} else {
echo "请假申请提交失败";
}
$conn->close();
}
?><?php
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASS', '123456');
define('DB_NAME', 'attendance');
?>3. Front-End-Entwicklung
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>员工考勤请假审批流程</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
</head>
<body>
<div id="app" class="container">
<h1>员工考勤请假审批流程</h1>
<h2>请假记录</h2>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>开始日期</th>
<th>结束日期</th>
<th>请假原因</th>
<th>审批状态</th>
</tr>
</thead>
<tbody>
<tr v-for="(record, index) in records" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ record.name }}</td>
<td>{{ record.start_date }}</td>
<td>{{ record.end_date }}</td>
<td>{{ record.reason }}</td>
<td>{{ record.status }}</td>
</tr>
</tbody>
</table>
<h2>提交请假申请</h2>
<form @submit.prevent="submitForm">
<div class="form-group">
<label for="name">姓名</label>
<input type="text" class="form-control" id="name" v-model="name" required>
</div>
<div class="form-group">
<label for="start_date">开始日期</label>
<input type="text" class="form-control" id="start_date" v-model="start_date" required>
</div>
<div class="form-group">
<label for="end_date">结束日期</label>
<input type="text" class="form-control" id="end_date" v-model="end_date" required>
</div>
<div class="form-group">
<label for="reason">请假原因</label>
<textarea class="form-control" id="reason" v-model="reason" required></textarea>
</div>
<button type="submit" class="btn btn-primary">提交申请</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
name: '',
start_date: '',
end_date: '',
reason: '',
records: []
},
mounted() {
this.getRecords();
},
methods: {
getRecords() {
fetch('api.php')
.then(response => response.json())
.then(data => {
this.records = data;
});
},
submitForm() {
fetch('api.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: `name=${this.name}&start_date=${this.start_date}&end_date=${this.end_date}&reason=${this.reason}`
})
.then(response => response.text())
.then(data => {
alert(data);
this.getRecords();
});
}
}
});
</script>
</body>
</html> 4. Ausführungseffekt
Speichern Sie den obigen Code in den entsprechenden Dateien und legen Sie diese Dateien in den entsprechenden Verzeichnissen des Servers ab. Öffnen Sie dann den Browser und besuchen Sie „http://localhost/index.html“, um den Effekt zu sehen. Im Formular werden die Urlaubsunterlagen des Mitarbeiters angezeigt und Urlaubsanträge können im Formular eingereicht werden.
Das Obige ist eine kurze Einführung und ein Codebeispiel für die Verwendung von PHP und Vue zum Aufbau des Urlaubsgenehmigungsprozesses für die Anwesenheit von Mitarbeitern. Durch dieses einfache Beispiel kann es Unternehmen dabei helfen, die elektronische Verwaltung der Urlaubsgenehmigung zu realisieren, die Arbeitseffizienz zu verbessern und mühsame manuelle Vorgänge zu reduzieren. Natürlich handelt es sich dabei nur um eine einfache Implementierung und spezifische Anwendungsszenarien erfordern weitere Anpassungen und Verbesserungen.
Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit PHP und Vue einen Urlaubsgenehmigungsprozess für die Anwesenheit von Mitarbeitern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
So öffnen Sie eine PHP-Datei
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
