Heim > Artikel > Backend-Entwicklung > So erstellen Sie mit PHP und Vue einen Urlaubsgenehmigungsprozess für die Anwesenheit von Mitarbeitern

So erstellen Sie mit PHP und Vue einen Urlaubsgenehmigungsprozess für die Anwesenheit von Mitarbeitern

王林Original: 2023-09-25 15:46:471366Durchsuche

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:

id: eine eindeutige Kennung zur Unterscheidung der einzelnen Abwesenheitsdatensätze
Name: Mitarbeitername
Start_Datum: Beginndatum des Urlaubs
Enddatum: Enddatum des Urlaubs
reason: Grund für den Urlaub
status: Genehmigungsstatus des Urlaubs (ausstehende Genehmigung/bestanden/abgelehnt)

2. Backend-Entwicklung

Erstellen Sie eine Datei mit dem Namen „api.php“, die für die Verwaltung des Frontends verwendet wird Anfragen und Datenbankoperationen. Das Folgende ist ein einfaches Codebeispiel:

<?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();
}
?>

Erstellen Sie eine Datei mit dem Namen „config.php“, um die Datenbankverbindungsinformationen zu speichern. Das Folgende ist ein einfaches Codebeispiel:

<?php
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASS', '123456');
define('DB_NAME', 'attendance');
?>

3. Front-End-Entwicklung

Erstellen Sie eine Datei mit dem Namen „index.html“, um die Urlaubsdatensätze der Mitarbeiter anzuzeigen und Urlaubsantragsformulare einzureichen. Das Folgende ist ein einfaches Codebeispiel:

<!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!

php html 标识符数据库 http

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So entwickeln Sie mithilfe von PHP und Vue die Funktion zum Erhalten von Mitgliedspunkten nach der ZahlungNächster Artikel：So entwickeln Sie mithilfe von PHP und Vue die Funktion zum Erhalten von Mitgliedspunkten nach der Zahlung

In Verbindung stehende Artikel

Mehr sehen