PHP와 Vue를 사용하여 직원 출석에 대한 온라인 펀치인 기록 쿼리를 개발하는 방법
현대 기업에서 직원 출석 관리는 매우 중요한 작업입니다. 기존의 수동 기록은 오류가 발생하기 쉽고 쿼리 및 통계에 불편합니다. PHP와 Vue의 강력한 기능을 사용하여 온라인 직원 출석 펀치 기록 쿼리 시스템을 개발하여 출석 관리를 보다 효율적이고 편리하며 정확하게 만들 수 있습니다.
1. 프로젝트 준비
시작하기 전에 다음 개발 환경과 도구를 준비해야 합니다.
2. 데이터베이스 설계
직원 정보와 출근 기록을 저장할 MySQL 데이터베이스를 만들어야 합니다. 직원과 출석이라는 두 개의 테이블이 포함된 "attendance_management"라는 데이터베이스를 디자인합니다. 직원 테이블은 ID(자동 증가 기본 키), 이름(직원 이름), 부서(소속 부서) 등의 필드를 포함하여 직원의 기본 정보를 저장하는 데 사용됩니다. 출석 테이블은 id(자동 증가 기본 키), Employee_id(직원 ID), check_in_time(시간), check_out_time(시간) 등의 필드를 포함하여 출석 기록을 저장하는 데 사용됩니다.
3. 백엔드 개발
return [
'host' => 'localhost', 'username' => 'root', 'password' => 'your_password', 'database' => 'attendance_management',
];
?>
require_once '../config/database.php';
class Employees {
private $conn; private $table = 'employees'; public function __construct($db) { $this->conn = $db; } public function getEmployees() { $query = 'SELECT * FROM ' . $this->table; $stmt = $this->conn->prepare($query); $stmt->execute(); return $stmt; }
}
?>
require_once '../config/database.php';
수업 출석 {
private $conn; private $table = 'attendance'; public function __construct($db) { $this->conn = $db; } public function getAttendanceByEmployeeId($employeeId) { $query = 'SELECT * FROM ' . $this->table . ' WHERE employee_id = ?'; $stmt = $this->conn->prepare($query); $stmt->bindParam(1, $employeeId); $stmt->execute(); return $stmt; }
}
?>
4 프론트엔드 개발
npm install -g @vue/cli
vue create frontend
cd frontend
npm install vue-router axios
<div> <h2>员工考勤记录</h2> <select v-model="selectedEmployee" @change="onEmployeeChange"> <option v-for="employee in employees" :value="employee.id">{{ employee.name }}</option> </select> <table> <thead> <tr> <th>打卡时间</th> <th>下班打卡时间</th> </tr> </thead> <tbody> <tr v-for="record in attendance"> <td>{{ record.check_in_time }}</td> <td>{{ record.check_out_time }}</td> </tr> </tbody> </table> </div>
<script><br>frontend/src/router/index.js 파일에서 기본 {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>data() { return { employees: [], selectedEmployee: null, attendance: [] }; }, mounted() { this.getEmployees(); }, methods: { getEmployees() { axios.get('http://localhost/backend/api/employees.php') .then(response => { this.employees = response.data; }) .catch(error => { console.log(error); }); }, onEmployeeChange() { axios.get('http://localhost/backend/api/attendance.php?employeeId=' + this.selectedEmployee) .then(response => { this.attendance = response.data; }) .catch(error => { console.log(error); }); } }</pre><div class="contentsignin">로그인 후 복사</div></div><p>};<br></script>
'vue'에서 Vue 가져오기;
'vue-router'에서 VueRouter 가져오기;
'../comComponents/Attendance.vue'에서 출석 가져오기;
Vue.use(VueRouter);
const 경로 = [
{ path: '/', name: 'Attendance', component: Attendance }
];
const router = new VueRouter({
mode: 'history', base: process.env.BASE_URL, routes
});
export default router;
5. 프로젝트를 실행하세요
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1 [L]
npm run submit
위의 개발 단계를 통해 우리는 PHP와 Vue를 사용하여 개발된 온라인 직원 근태 기록 조회 시스템을 성공적으로 구현했습니다. 사용자는 직원을 선택하여 자신의 출석 기록을 확인할 수 있어 근태 관리의 효율성이 향상될 뿐만 아니라 인적 오류 발생도 줄어듭니다. 동시에 이 프로젝트는 풀 스택 개발을 위해 PHP와 Vue를 결합하는 방법에 대한 기본 단계와 기술 포인트도 보여줍니다. 이 글이 여러분에게 도움이 되기를 바라며 프로그래밍에 행운이 있기를 바랍니다!
위 내용은 PHP와 Vue를 사용하여 온라인 직원 출석 펀치 기록 쿼리를 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!