Home >Backend Development >PHP Tutorial >How to use PHP and Vue to build a leave approval process for employee attendance

How to use PHP and Vue to build a leave approval process for employee attendance

王林Original: 2023-09-25 15:46:471433browse

As the scale of the enterprise continues to expand, the employee leave approval process has become more and more cumbersome. In order to improve work efficiency, many companies have begun to adopt electronic methods for leave approval, among which PHP and Vue are a very powerful combination. This article will introduce how to use PHP and Vue to build a leave approval process for employee attendance, and provide some specific code examples.

1. Preparation
First, we need to build a simple environment to run PHP and Vue. We can use software such as XAMPP or WAMP to build a local server. Then, create a database on the server to store employees' leave records. Next, create a database table named "attendance" with the following fields:

id: a unique identifier used to distinguish each leave record
name: employee Name
start_date: Leave start date
end_date: Leave end date
reason: Reason for leave
status: Leave approval status (pending approval/passed /Rejected)

2. Back-end development

Create a file named "api.php" to handle front-end requests and database operations. The following is a simple code example:

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

Create a file named "config.php" to store the database connection information. The following is a simple code example:

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

3. Front-end development

Create a file named "index.html" to display employee leave records and submit the leave request form. The following is a simple code example:

<!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. Running effect
Save the above code to the corresponding files, and place these files in the corresponding directories of the server. Then, open the browser and visit "http://localhost/index.html" to see the effect. The employee's leave records are displayed in the form, and leave requests can be submitted in the form.

The above is a brief introduction and code example of using PHP and Vue to build the leave approval process for employee attendance. Through this simple example, it can help enterprises realize electronic management of leave approval, improve work efficiency, and reduce tedious manual operations. Of course, this is just a simple implementation, and specific application scenarios require further adjustments and improvements.

The above is the detailed content of How to use PHP and Vue to build a leave approval process for employee attendance. For more information, please follow other related articles on the PHP Chinese website!

php html 标识符数据库 http

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use PHP and Vue to develop the function of obtaining member points after paymentNext article：How to use PHP and Vue to develop the function of obtaining member points after payment

See more

How to use PHP and Vue to build a leave approval process for employee attendance

Related articles