PHP와 Vue를 사용하여 직원 출석에 대한 휴가 승인 프로세스를 구축하는 방법
기업 규모가 계속 확장됨에 따라 직원의 휴가 승인 프로세스가 점점 더 복잡해졌습니다. 업무 효율성을 높이기 위해 많은 회사에서 휴가 승인을 전자 방식으로 채택하기 시작했으며 그중 PHP와 Vue가 매우 강력한 조합입니다. 이 기사에서는 PHP와 Vue를 사용하여 직원 출석에 대한 휴가 승인 프로세스를 구축하는 방법을 소개하고 몇 가지 구체적인 코드 예제를 제공합니다.
1. 준비
먼저 PHP와 Vue를 실행할 수 있는 간단한 환경을 구축해야 합니다. XAMPP 또는 WAMP와 같은 소프트웨어를 사용하여 로컬 서버를 구축할 수 있습니다. 그런 다음 직원의 휴가 기록을 저장하기 위해 서버에 데이터베이스를 만듭니다. 다음으로, 다음 필드를 포함하는 "attendance"라는 데이터베이스 테이블을 생성합니다.
2. 백엔드 개발
<?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. 프론트 엔드 개발
<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!