Maison > Article > développement back-end > Comment générer un module de calcul du salaire de présence des employés via PHP et Vue

Comment générer un module de calcul du salaire de présence des employés via PHP et Vue

WBOYoriginal: 2023-09-25 09:17:02617parcourir

Aperçu :
Dans chaque entreprise, la présence des employés et le calcul du salaire sont une tâche très importante. Afin de simplifier et d'automatiser ce processus, nous pouvons utiliser PHP et Vue.js pour créer un module de calcul de salaire pour la présence des employés. Cet article expliquera comment utiliser ces deux outils pour réaliser cette fonction et fournira des exemples de code spécifiques.

Étape 1 : Créer une base de données
Tout d’abord, nous devons créer une base de données pour stocker les relevés de présence et les informations sur les salaires des employés. Vous pouvez utiliser MySQL ou d'autres systèmes de gestion de bases de données pour créer et gérer des bases de données. Voici un exemple de table d'employé simple et de table d'enregistrement des présences :

Table des employés (employé) :

id : identifiant de l'employé
nom (nom) : nom de l'employé
Salary (salary) : salaire de l'employé

Tableau d'enregistrement des présences (présence) :

id : ID d'enregistrement
Identifiant de l'employé (employee_id) : ID de l'employé
Date (date) : Date de présence
Temps de travail (start_time) : Temps de travail
Heure de fin (end_time ) : Après les heures de travail

Étape 2 : Créer une API back-end
Utilisez PHP pour implémenter l'API back-end et fournir une interaction avec la base de données. Voici un exemple de code pour obtenir les relevés de présence des employés :

<?php
// 数据库连接信息
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";

// 创建数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接是否成功
if ($conn->connect_error) {
    die("数据库连接失败： " . $conn->connect_error);
}

// 获取员工考勤记录
$sql = "SELECT * FROM attendance";
$result = $conn->query($sql);

// 将结果转化为JSON格式并输出
$res = [];
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $res[] = $row;
    }
}
echo json_encode($res);

// 关闭数据库连接
$conn->close();
?>

Étape 3 : Créer une page frontale
Utilisez Vue.js pour créer une page frontale permettant d'afficher les relevés de présence des employés et de calculer le salaire. Voici un exemple de code pour une simple page d'enregistrement des présences des employés :

<html>
<head>
    <title>员工考勤记录</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>员工考勤记录</h1>
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>日期</th>
                    <th>上班时间</th>
                    <th>下班时间</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="record in attendanceRecords">
                    <td>{{ record.id }}</td>
                    <td>{{ record.name }}</td>
                    <td>{{ record.date }}</td>
                    <td>{{ record.start_time }}</td>
                    <td>{{ record.end_time }}</td>
                </tr>
            </tbody>
        </table>
        <button @click="calculateSalary">计算薪资</button>
        <div v-if="calculateSalaryResult">
            <p>薪资：{{ calculateSalaryResult }}</p>
        </div>
    </div>
    <script>
        // 创建Vue实例
        new Vue({
            el: '#app',
            data: {
                attendanceRecords: [],
                calculateSalaryResult: null
            },
            mounted() {
                // 获取员工考勤记录
                axios.get('api.php')
                    .then(response => {
                        this.attendanceRecords = response.data;
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            methods: {
                calculateSalary() {
                    // 计算薪资的逻辑在这里实现
                    // 可以从this.attendanceRecords中获取考勤记录，并进行相应的计算
                    // 最后将计算结果赋值给this.calculateSalaryResult
                }
            }
        });
    </script>
</body>
</html>

Comme le montre l'exemple de code ci-dessus, Vue.js est utilisé pour restituer et afficher les données, tandis que PHP est utilisé pour fournir l'interface back-end de les données. Dans la page, nous utilisons la bibliothèque axios pour envoyer des requêtes HTTP afin d'obtenir des données back-end et enregistrer les résultats de la réponse dans l'attribut data de l'instance Vue. Enfin, nous déclenchons la logique de calcul du salaire grâce à l'événement clic du bouton.

Résumé :
Avec PHP et Vue.js, nous pouvons facilement créer un module de calcul de salaire pour la présence des employés. L'utilisation de l'API back-end PHP pour interagir avec la base de données, puis l'utilisation du framework frontal Vue.js pour afficher les données et implémenter la logique de calcul peuvent grandement simplifier le processus de calcul des présences et des salaires. L'exemple de code fourni ci-dessus n'est qu'une simple démonstration. Dans les projets réels, une mise en œuvre plus détaillée et une extension fonctionnelle sont nécessaires en fonction des besoins spécifiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php mysql 前端框架 date 接口 JS 事件数据库 http 自动化 axios

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser PHP pour développer la fonction de rappel comptable du système comptable - Fournit un guide de développement pour la fonction de rappel comptableArticle suivant：Comment utiliser PHP pour développer la fonction de rappel comptable du système comptable - Fournit un guide de développement pour la fonction de rappel comptable

Articles Liés

Voir plus