PHP 및 Vue를 통해 직원 출석에 대한 초과 근무 정산 모듈을 생성하는 방법
요약: 이 기사에서는 PHP 및 Vue 기술을 통해 직원 출석에 대한 초과 근무 정산 모듈을 구현하는 방법을 소개합니다. 먼저, PHP를 사용하여 데이터 요청을 처리하고 초과 근무 시간을 계산하는 서버 측 코드를 작성하겠습니다. 그런 다음 Vue 프레임워크를 사용하여 사용자가 웹 페이지를 통해 출석 기록을 제출하고 초과 근무 시간 및 초과 근무 비용과 같은 정보를 볼 수 있도록 프런트 엔드 인터페이스를 구축하겠습니다. 기사 마지막에는 독자가 더 잘 이해하고 연습할 수 있도록 몇 가지 구체적인 코드 예제를 제공합니다.
키워드: PHP, Vue, 초과근무수당, 직원 출석
1. 소개
경영에 있어서 초과근무수당은 중요한 과정입니다. 직원과 관리자가 근무 시간을 쉽게 계산하고 계산할 수 있도록 PHP 및 Vue 기술을 사용하여 초과 근무 정산 모듈을 구축할 수 있습니다. 직원들은 웹 인터페이스를 통해 초과 근무 기록을 제출하고 초과 근무 시간, 초과 근무 수당 등의 정보를 확인할 수 있습니다.
2. 서버측 코드 작성
- 데이터베이스 테이블 디자인
먼저 직원 출석 정보를 저장할 데이터베이스 테이블을 디자인해야 합니다. 테이블 구조에는 출석 날짜, 출근 시간, 초과 근무 시작 시간, 초과 근무 종료 시간, 초과 근무 기간 등의 필드가 포함될 수 있습니다. - PHP 코드 작성
먼저, 데이터 요청을 처리하고 초과 근무 시간을 계산하는 PHP 스크립트를 작성해야 합니다. 이 스크립트에는 다음 기능이 포함될 수 있습니다. - 클라이언트가 제출한 출석 기록을 받아 데이터베이스에 삽입합니다.
- 직원의 출근 시간을 기준으로 직원의 초과 근무 시간을 계산하고 근무 시간을 설정합니다.
- 회사의 초과근무 수당 규정에 따라 직원의 초과근무 수당을 계산합니다.
다음은 간단한 PHP 코드 예제입니다.
<?php // 连接数据库 $db = new PDO('mysql:host=localhost;dbname=test', 'root', 'password'); // 接收POST请求,插入考勤记录 if ($_SERVER['REQUEST_METHOD'] === 'POST') { $attendanceData = $_POST['attendanceData']; // 将考勤数据插入数据库 $insertAttendanceStmt = $db->prepare('INSERT INTO attendance (date, start_time, end_time) VALUES (?, ?, ?)'); $insertAttendanceStmt->execute([$attendanceData['date'], $attendanceData['start_time'], $attendanceData['end_time']]); } // 计算加班时长和加班费用 $calculateOvertimeStmt = $db->prepare('SELECT SUM(TIME_TO_SEC(TIMEDIFF(end_time, start_time))) AS overtimeDuration FROM attendance'); $calculateOvertimeStmt->execute(); $overtimeDuration = $calculateOvertimeStmt->fetchColumn(); $overtimeFee = $overtimeDuration * 10; // 假设每小时加班费用为10元 // 将加班时长和加班费用返回给客户端 $response = [ 'overtimeDuration' => $overtimeDuration, 'overtimeFee' => $overtimeFee ]; echo json_encode($response); ?>
3. 프런트 엔드 인터페이스 구성
-
Vue 및 Vue Router 설치
먼저 Vue 및 Vue Router를 설치해야 합니다. npm 명령을 통해 설치할 수 있습니다:$ npm install vue vue-router
- Create Vue 구성 요소
다음으로 직원 출석 기록 및 초과 근무 정보를 표시하는 Vue 구성 요소를 만들 수 있습니다. 구성 요소의data
속성에서 필수 변수를 정의한 다음 표시할 템플릿에서 이러한 변수를 사용할 수 있습니다.
다음은 간단한 Vue 구성 요소 예입니다.
<template> <div> <h2 id="员工加班记录">员工加班记录</h2> <ul> <li v-for="record in attendanceRecords"> {{ record.date }} - {{ record.start_time }} ~ {{ record.end_time }} </li> </ul> <h2 id="加班信息">加班信息</h2> <p>加班时长:{{ overtimeDuration }}</p> <p>加班费用:{{ overtimeFee }}</p> </div> </template> <script> export default { data() { return { attendanceRecords: [], overtimeDuration: 0, overtimeFee: 0 }; }, mounted() { // 向服务器请求加班信息 fetch('/calculate-overtime.php') .then(response => response.json()) .then(data => { this.overtimeDuration = data.overtimeDuration; this.overtimeFee = data.overtimeFee; }); // 向服务器请求考勤记录 fetch('/attendance-records.php') .then(response => response.json()) .then(data => { this.attendanceRecords = data; }); } }; </script>
-
라우팅 구성
페이지 라우팅을 관리하려면 Vue Router도 구성해야 합니다. 기본 파일에 다음 코드를 추가하여 라우팅 인스턴스를 생성하고 구성 요소를 경로와 연결할 수 있습니다.import Vue from 'vue'; import VueRouter from 'vue-router'; import AttendanceComponent from './components/AttendanceComponent.vue'; Vue.use(VueRouter); const routes = [ { path: '/attendance', component: AttendanceComponent } ]; const router = new VueRouter({ routes }); new Vue({ router }).$mount('#app');
4. 요약
PHP 및 Vue 기술을 사용하여 직원 초과근무 정산 모듈을 쉽게 구현할 수 있습니다. 직원들은 웹 인터페이스를 통해 초과 근무 기록을 제출하고 초과 근무 시간, 초과 근무 수당 등의 정보를 확인할 수 있습니다. 이 기사에서는 독자가 더 잘 이해하고 연습할 수 있도록 간단한 코드 예제를 제공합니다. 물론 실제 프로젝트에서는 더 많은 기능 및 보안 문제를 고려해야 하며, 이는 특정 상황에 따라 조정 및 개선이 필요합니다.
위 내용은 PHP 및 Vue를 통해 직원 출석에 대한 초과근무 정산 모듈을 생성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

이 기사는 PHP에 대해 설명하고, 전체 형식, 웹 개발의 주요 용도, Python 및 Java와의 비교 및 초보자를위한 학습 용이성을 자세히 설명합니다.

PHP는 유효성 검사, 소독 및 보안 데이터베이스 상호 작용을 통해 보안을 보장하면서 $ \ _ post 및 $ \ _를 사용하여 데이터 양식 데이터를 처리합니다.

이 기사는 PHP와 ASP.NET을 비교하여 대규모 웹 응용 프로그램, 성능 차이 및 보안 기능에 대한 적합성에 중점을 둡니다. 둘 다 대규모 프로젝트에서는 실용적이지만 PHP는 오픈 소스 및 플랫폼 독립적이며 ASP.NET,

PHP의 사례 감도는 다양합니다. 함수는 무감각하고 변수와 클래스는 민감합니다. 모범 사례에는 일관된 이름 지정 및 비교를위한 사례 감수 기능 사용이 포함됩니다.

이 기사는 PHP의 페이지 리디렉션에 대한 다양한 방법에 대해 설명하고 헤더 () 함수에 중점을두고 "헤더가 이미 보낸 헤더"오류와 같은 일반적인 문제를 해결합니다.

기사는 기능의 예상 데이터 유형을 지정하는 기능인 PHP의 유형 힌트에 대해 설명합니다. 주요 문제는 유형 시행을 통해 코드 품질과 가독성을 향상시키는 것입니다.

이 기사에서는 PHP Data Objects (PDO)에 대해 설명합니다. PHP의 데이터베이스 액세스 확장. 데이터베이스 추상화 및 더 나은 오류 처리를 포함하여 준비된 진술과 MySQLI에 대한 이점을 통해 보안을 향상시키는 데 PDO의 역할을 강조합니다.

기사는 PHP API 생성 및 보호, Laravel 및 Best Security Practices와 같은 프레임 워크를 사용하여 엔드 포인트 정의에서 성능 최적화에 이르는 단계를 자세히 설명합니다.


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!

Dreamweaver Mac版
시각적 웹 개발 도구

WebStorm Mac 버전
유용한 JavaScript 개발 도구

SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
