PHP 및 Vue를 사용하여 직원 출석을 위한 체크인 위치 설정 기능을 구축하는 방법
최근 기술 발전과 사회 발전으로 인해 점점 더 많은 기업과 기관에서 전자 방식을 사용하기 시작했습니다. 직원 출석을 관리합니다. 중요한 링크 중 하나는 직원 체크인 위치 설정입니다. 이번 글에서는 PHP와 Vue를 활용하여 직원 출석체크인 위치 설정 기능을 구축하는 방법을 소개하고, 구체적인 코드 예시를 제공하겠습니다.
1. 준비
시작하기 전에 필요한 개발 환경을 준비해야 합니다. Apache 또는 Nginx를 사용하여 구축할 수 있는 서버가 필요합니다. 동시에 백엔드 개발 언어 및 데이터베이스로 PHP와 MySQL도 설치해야 합니다. 또한 프런트엔드 개발 도구로 Node.js와 Vue.js도 설치해야 합니다.
2. 데이터베이스 만들기
먼저 직원 관련 정보와 체크인 위치를 저장할 데이터베이스를 만들어야 합니다. Navicat 또는 phpMyAdmin과 같은 도구를 사용하여 "attendance"라는 데이터베이스를 생성하고 그 안에 "employees" 및 "locations"라는 두 개의 테이블을 생성할 수 있습니다.
직원 테이블의 구조는 다음과 같습니다.
CREATE TABLE employees ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(50) NOT NULL, job_title VARCHAR(50) NOT NULL, department VARCHAR(50) NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP );
위치 테이블의 구조는 다음과 같습니다.
CREATE TABLE locations ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(50) NOT NULL, address VARCHAR(100) NOT NULL, latitude DECIMAL(10, 6) NOT NULL, longitude DECIMAL(10, 6) NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP );
3. 백엔드 개발
<?php header('Content-Type: application/json'); $method = $_SERVER['REQUEST_METHOD']; // 处理GET请求,查询数据库中的员工和签到地点信息 if ($method === 'GET') { $action = $_GET['action']; // 查询员工信息 if ($action === 'employees') { // 连接数据库 $conn = new mysqli('localhost', 'root', '', 'attendance'); mysqli_set_charset($conn, "utf8"); // 查询数据库中的员工信息 $result = $conn->query('SELECT * FROM employees'); $employees = $result->fetch_all(MYSQLI_ASSOC); // 返回员工信息 echo json_encode($employees); // 关闭数据库连接 $conn->close(); } // 查询签到地点信息 else if ($action === 'locations') { // 连接数据库 $conn = new mysqli('localhost', 'root', '', 'attendance'); mysqli_set_charset($conn, "utf8"); // 查询数据库中的签到地点信息 $result = $conn->query('SELECT * FROM locations'); $locations = $result->fetch_all(MYSQLI_ASSOC); // 返回签到地点信息 echo json_encode($locations); // 关闭数据库连接 $conn->close(); } } // 处理POST请求,添加员工和签到地点信息到数据库 else if ($method === 'POST') { $data = json_decode(file_get_contents('php://input'), true); $action = $data['action']; // 添加员工信息 if ($action === 'addEmployee') { // 连接数据库 $conn = new mysqli('localhost', 'root', '', 'attendance'); mysqli_set_charset($conn, "utf8"); // 添加员工信息到数据库 $name = $data['name']; $job_title = $data['job_title']; $department = $data['department']; $conn->query("INSERT INTO employees (name, job_title, department) VALUES ('$name', '$job_title', '$department')"); // 返回成功信息 echo json_encode(['status' => 'success']); // 关闭数据库连接 $conn->close(); } // 添加签到地点信息 else if ($action === 'addLocation') { // 连接数据库 $conn = new mysqli('localhost', 'root', '', 'attendance'); mysqli_set_charset($conn, "utf8"); // 添加签到地点信息到数据库 $name = $data['name']; $address = $data['address']; $latitude = $data['latitude']; $longitude = $data['longitude']; $conn->query("INSERT INTO locations (name, address, latitude, longitude) VALUES ('$name', '$address', '$latitude', '$longitude')"); // 返回成功信息 echo json_encode(['status' => 'success']); // 关闭数据库连接 $conn->close(); } } ?>
4. 프론트엔드 개발
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>员工考勤签到地点设置</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2>员工信息</h2> <table> <tr> <th>姓名</th> <th>职位</th> <th>部门</th> </tr> <tr v-for="employee in employees"> <td>{{ employee.name }}</td> <td>{{ employee.job_title }}</td> <td>{{ employee.department }}</td> </tr> </table> <form @submit.prevent="addEmployee"> <input type="text" v-model="newEmployee.name" placeholder="姓名" required> <input type="text" v-model="newEmployee.job_title" placeholder="职位" required> <input type="text" v-model="newEmployee.department" placeholder="部门" required> <button type="submit">添加员工</button> </form> <h2>签到地点</h2> <table> <tr> <th>名称</th> <th>地址</th> <th>经度</th> <th>纬度</th> </tr> <tr v-for="location in locations"> <td>{{ location.name }}</td> <td>{{ location.address }}</td> <td>{{ location.latitude }}</td> <td>{{ location.longitude }}</td> </tr> </table> <form @submit.prevent="addLocation"> <input type="text" v-model="newLocation.name" placeholder="名称" required> <input type="text" v-model="newLocation.address" placeholder="地址" required> <input type="text" v-model="newLocation.latitude" placeholder="经度" required> <input type="text" v-model="newLocation.longitude" placeholder="纬度" required> <button type="submit">添加签到地点</button> </form> </div> <script> new Vue({ el: '#app', data: { employees: [], newEmployee: { name: '', job_title: '', department: '' }, locations: [], newLocation: { name: '', address: '', latitude: '', longitude: '' } }, methods: { addEmployee() { fetch('api.php', { method: 'POST', body: JSON.stringify({ action: 'addEmployee', name: this.newEmployee.name, job_title: this.newEmployee.job_title, department: this.newEmployee.department }) }) .then(() => { this.employees.push(this.newEmployee); this.newEmployee = { name: '', job_title: '', department: '' }; }); }, addLocation() { fetch('api.php', { method: 'POST', body: JSON.stringify({ action: 'addLocation', name: this.newLocation.name, address: this.newLocation.address, latitude: this.newLocation.latitude, longitude: this.newLocation.longitude }) }) .then(() => { this.locations.push(this.newLocation); this.newLocation = { name: '', address: '', latitude: '', longitude: '' }; }); } }, mounted() { fetch('api.php?action=employees') .then(response => response.json()) .then(employees => { this.employees = employees; }); fetch('api.php?action=locations') .then(response => response.json()) .then(locations => { this.locations = locations; }); } }); </script> </body> </html>
5. 프로젝트를 실행합니다.
위 단계를 통해 PHP와 Vue를 사용하여 직원 출석을 위한 체크인 위치 설정 기능을 성공적으로 구축했으며, 구체적인 코드 예제가 도움이 되길 바랍니다. 물론 실제 적용에서는 특정 요구에 따라 추가 개발과 개선이 필요합니다.
위 내용은 PHP와 Vue를 사용하여 직원 출석체크인 위치 설정 기능을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!