집 > 기사 > 백엔드 개발 > PHP와 Vue를 사용하여 직원 출석에 대한 휴가 승인 프로세스를 구축하는 방법

PHP와 Vue를 사용하여 직원 출석에 대한 휴가 승인 프로세스를 구축하는 방법

王林원래의: 2023-09-25 15:46:471421검색

기업 규모가 계속 확장됨에 따라 직원의 휴가 승인 프로세스가 점점 더 복잡해졌습니다. 업무 효율성을 높이기 위해 많은 회사에서 휴가 승인을 전자 방식으로 채택하기 시작했으며 그중 PHP와 Vue가 매우 강력한 조합입니다. 이 기사에서는 PHP와 Vue를 사용하여 직원 출석에 대한 휴가 승인 프로세스를 구축하는 방법을 소개하고 몇 가지 구체적인 코드 예제를 제공합니다.

1. 준비
먼저 PHP와 Vue를 실행할 수 있는 간단한 환경을 구축해야 합니다. XAMPP 또는 WAMP와 같은 소프트웨어를 사용하여 로컬 서버를 구축할 수 있습니다. 그런 다음 직원의 휴가 기록을 저장하기 위해 서버에 데이터베이스를 만듭니다. 다음으로, 다음 필드를 포함하는 "attendance"라는 데이터베이스 테이블을 생성합니다.

id: 각 휴가 기록을 구별하기 위한 고유 식별자
name: 직원 이름
start_date: 휴가 시작 날짜
end_date: 휴가 종료 날짜
이유: 탈퇴 이유
상태: 탈퇴 승인 상태(승인 보류/통과/거절)

2. 백엔드 개발

프론트 엔드를 처리하는 데 사용되는 "api.php"라는 파일을 만듭니다. 요청 및 데이터베이스 작업. 다음은 간단한 코드 예시입니다.

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

데이터베이스 연결 정보를 저장하기 위해 "config.php"라는 파일을 생성합니다. 다음은 간단한 코드 예시입니다.

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

3. 프론트 엔드 개발

직원의 휴가 기록을 표시하고 휴가 신청서를 제출하려면 "index.html"이라는 파일을 만듭니다. 다음은 간단한 코드 예제입니다.

<!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. 실행 효과
위 코드를 해당 파일에 저장하고 이 파일을 서버의 해당 디렉터리에 배치합니다. 그런 다음 브라우저를 열고 "http://localhost/index.html"을 방문하여 효과를 확인하세요. 해당 직원의 휴가 기록이 양식에 표시되며, 양식을 통해 휴가 요청을 제출할 수 있습니다.

위는 PHP와 Vue를 사용하여 직원 출석에 대한 휴가 승인 프로세스를 구축하는 간단한 소개와 코드 예제입니다. 이 간단한 예를 통해 기업은 휴가 승인의 전자 관리를 실현하고 업무 효율성을 향상하며 지루한 수동 작업을 줄이는 데 도움을 줄 수 있습니다. 물론 이는 단순한 구현일 뿐이며 특정 애플리케이션 시나리오에는 추가 조정과 개선이 필요합니다.

위 내용은 PHP와 Vue를 사용하여 직원 출석에 대한 휴가 승인 프로세스를 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

php html 标识符数据库 http

성명：

이전 기사：PHP와 Vue를 활용하여 결제 후 회원포인트 획득 기능 개발하는 방법다음 기사：PHP와 Vue를 활용하여 결제 후 회원포인트 획득 기능 개발하는 방법