How to implement PHP and Vue development of employee attendance function

How to implement PHP and Vue development of employee attendance function

With the expansion of enterprise scale and the complexity of operation and management, employee attendance management has become something that every enterprise cannot ignore. an important task. In order to manage employee attendance conveniently and efficiently, many companies choose to use PHP and Vue for development. This article will introduce how to use PHP and Vue to develop employee attendance functions and provide specific code examples.

1. Project preparation
Before starting development, you first need to prepare the development environment. Make sure you have installed PHP, Vue and related extensions or dependencies.

2. Database design
The core of the attendance system is the recording and management of employee attendance information. In the database, employee tables and attendance tables need to be designed.
The employee table can include basic information such as employee ID, name, position, etc. The attendance sheet can include attendance record information such as attendance ID, employee ID, date, work time, and off work time.

3. Back-end development

1. Connecting to the database
   In PHP, you can use extensions such as PDO or mysqli to connect to the database. The following is a sample code that uses PDO to connect to a MySQL database:

<?php
$host = 'localhost';
$dbname = 'your_database_name';
$username = 'your_username';
$password = 'your_password';

try {
    $conn = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    echo "Connected successfully"; 
}
catch(PDOException $e) {
    echo "Connection failed: " . $e->getMessage();
}
?>

2. Query employee attendance information
   We can use SQL statements to query employee attendance information. The following is a sample code to query employee attendance information:

<?php
$employeeId = $_POST['employeeId'];

$stmt = $conn->prepare("SELECT * FROM 考勤表 WHERE 员工ID = :employeeId");
$stmt->bindParam(':employeeId', $employeeId);
$stmt->execute();

$result = $stmt->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($result);
?>

3. Add employee attendance record
   When an employee goes to work or gets off work, we can record the employee's attendance record by inserting an attendance record Attendance status. The following is a sample code for inserting employee attendance records:

<?php
$employeeId = $_POST['employeeId'];
$date = $_POST['date'];
$startTime = $_POST['startTime'];
$endTime = $_POST['endTime'];

$stmt = $conn->prepare("INSERT INTO 考勤表 (员工ID, 日期, 上班时间, 下班时间) VALUES (:employeeId, :date, :startTime, :endTime)");
$stmt->bindParam(':employeeId', $employeeId);
$stmt->bindParam(':date', $date);
$stmt->bindParam(':startTime', $startTime);
$stmt->bindParam(':endTime', $endTime);
$stmt->execute();

echo "Record inserted successfully";
?>

4. Front-end development

1. Creating a Vue instance
   In Vue, we can use Vue’s basic module to create a Vue instance. The following is a simple sample code to create a Vue instance:

new Vue({
    el: '#app',
    data: {
        employeeId: '',
        date: '',
        startTime: '',
        endTime: '',
        attendanceList: []
    },
    methods: {
        getAttendanceList() {
            // 发送Ajax请求，获取考勤列表数据
            axios.post('getAttendanceList.php', {
                employeeId: this.employeeId
            })
            .then((response) => {
                this.attendanceList = response.data;
            })
            .catch((error) => {
                console.log(error);
            });
        },
        addAttendance() {
            // 发送Ajax请求，添加员工考勤记录
            axios.post('addAttendance.php', {
                employeeId: this.employeeId,
                date: this.date,
                startTime: this.startTime,
                endTime: this.endTime
            })
            .then((response) => {
                console.log(response.data);
            })
            .catch((error) => {
                console.log(error);
            });
        }
    }
});

2. Building a front-end page
   In HTML, we can use Vue's data binding function for dynamic display Employee attendance list and processing employee attendance record submission. The following is a simple front-end page example:

   <div id="app">
    <h1 id="员工考勤管理系统">员工考勤管理系统</h1>
    <div>
        <label for="employeeId">员工ID：</label>
        <input type="text" v-model="employeeId">
        <button @click="getAttendanceList">查询考勤列表</button>
    </div>
    <table>
        <tr>
            <th>日期</th>
            <th>上班时间</th>
            <th>下班时间</th>
        </tr>
        <tr v-for="attendance in attendanceList">
            <td>{{ attendance.日期 }}</td>
            <td>{{ attendance.上班时间 }}</td>
            <td>{{ attendance.下班时间 }}</td>
        </tr>
    </table>
    <div>
        <label for="date">日期：</label>
        <input type="text" v-model="date">
        <label for="startTime">上班时间：</label>
        <input type="text" v-model="startTime">
        <label for="endTime">下班时间：</label>
        <input type="text" v-model="endTime">
        <button @click="addAttendance">提交考勤记录</button>
    </div>
   </div>

The above is an example of how to use PHP and Vue to develop employee attendance function. Through reasonable database design and background processing logic, combined with the friendly front-end interactive interface, we can quickly implement a simple and efficient employee attendance system. Developers can further optimize and expand based on specific needs. Hope this article can be helpful to you.

The above is the detailed content of How to implement PHP and Vue development of employee attendance function. For more information, please follow other related articles on the PHP Chinese website!