How to use PHP and Vue to design statistical chart display of employee attendance system-PHP Tutorial-php.cn

How to use PHP and Vue to design statistical chart display of employee attendance system

WBOY

Release： 2023-09-24 10:04:01

Original

1426 people have browsed it

How to use PHP and Vue to design statistical chart display of employee attendance system

In recent years, with the continuous development of technology, enterprises have increasing requirements for employee attendance management The higher. In order to better count and display employee attendance data, it is very important to design an employee attendance system and achieve visual display of data.

This article will introduce how to use PHP and Vue to design an employee attendance system and display statistical charts.

1. System design

First, we need to design a database to store employee attendance data. Attendance data includes employee name, attendance date, work time, off work time and other information. You can use MySQL or other relational databases to create the database and design the corresponding table structure.

2. Back-end development

Use PHP to implement the back-end logic of the system. We need to create some PHP files to handle requests from the front end and interact with the database.

First, create an interface file for handling front-end requests, such as api.php. In this file, you can define some interface functions to handle the addition, deletion, modification and query operations of employee attendance data.

<?php

// 连接数据库
$conn = new mysqli('localhost', 'username', 'password', 'database');
// 设定字符集
$conn->set_charset('utf8');

// 增加员工考勤数据
function addAttendance($name, $date, $start, $end) {
    global $conn;
    // 执行插入操作
    $sql = "INSERT INTO attendance (name, date, start, end) VALUES ('$name', '$date', '$start', '$end')";
    $conn->query($sql);
    // 返回结果
    return ['status' => 'success'];
}

// 获取员工考勤数据
function getAttendance($name, $date) {
    global $conn;
    // 执行查询操作
    $sql = "SELECT * FROM attendance WHERE name = '$name' AND date = '$date'";
    $result = $conn->query($sql);
    // 返回结果
    return ['status' => 'success', 'data' => $result->fetch_assoc()];
}

// ...其他接口函数，比如更新和删除员工考勤数据的函数

?>

Copy after login

Next, we need to create a file for interacting with the front-end page, such as index.php. In this file, we can use Vue to handle the display of the front-end page and user interaction.

First, introduce Vue related files and create a Vue instance.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>员工考勤系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue/dist/vue.css">
</head>
<body>
    <div id="app">
        <!-- 前端页面内容 -->
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            // 前端页面逻辑
        });
    </script>
</body>
</html>

Copy after login

Then, in the Vue instance, define some methods to handle the user's interactive behavior, and interact with the backend through the interface functions defined earlier.

new Vue({
    el: '#app',
    data: {
        name: '',
        date: '',
        start: '',
        end: '',
        attendance: null
    },
    methods: {
        addAttendance: function() {
            // 调用后端接口来增加员工考勤数据
            // 可以使用axios等库发送POST请求到api.php
        },
        getAttendance: function() {
            // 调用后端接口来获取员工考勤数据
            // 可以使用axios等库发送GET请求到api.php
        }
        // ...其他方法
    }
});

Copy after login

3. Front-end development

Use Vue to design the front-end page, and use some chart libraries to display employee attendance statistics. In the Vue instance, data is obtained through the interface function defined previously and rendered into the page.

Introduce a chart library, such as ECharts, into the front-end page, and use this library to draw charts. Different charts can be designed according to specific needs, such as bar charts, line charts, etc.

<div id="app">
    <h2>员工考勤系统</h2>
    <input type="text" v-model="name" placeholder="请输入员工姓名">
    <input type="text" v-model="date" placeholder="请输入考勤日期">
    <input type="text" v-model="start" placeholder="请输入上班时间">
    <input type="text" v-model="end" placeholder="请输入下班时间">
    <button @click="addAttendance">提交</button>
    <button @click="getAttendance">查询</button>
    <div v-if="attendance">
        <h3>员工考勤详情</h3>
        <p>姓名：{{ attendance.name }}</p>
        <p>日期：{{ attendance.date }}</p>
        <p>上班时间：{{ attendance.start }}</p>
        <p>下班时间：{{ attendance.end }}</p>
    </div>
    <!-- 使用ECharts展示图表 -->
    <div id="chart" style="width: 600px;height:400px;"></div>
</div>

<!-- 引入ECharts脚本 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            name: '',
            date: '',
            start: '',
            end: '',
            attendance: null
        },
        methods: {
            addAttendance: function() {
                // 调用后端接口来增加员工考勤数据
                // 可以使用axios等库发送POST请求到api.php
            },
            getAttendance: function() {
                // 调用后端接口来获取员工考勤数据
                // 可以使用axios等库发送GET请求到api.php
            }
            // ...其他方法
        },
        mounted: function() {
            // 页面加载时获取员工考勤数据，并绘制图表
            // 在getAttendance函数中获取数据后，调用绘制图表的方法
        }
    });
</script>

Copy after login

Through the implementation of the above steps, we can design an employee attendance system implemented using PHP and Vue, and display employee attendance statistics through charts. Of course, the specific implementation still needs to be adjusted and improved according to specific needs.

The above is the detailed content of How to use PHP and Vue to design statistical chart display of employee attendance system. For more information, please follow other related articles on the PHP Chinese website!