Comment utiliser PHP et Vue pour créer un panneau de gestion des présences des employés

Comment utiliser PHP et Vue pour créer un panneau de gestion des présences des employés

Avec l'expansion de l'entreprise, la gestion des employés et la supervision des présences sont devenues des aspects importants du travail quotidien. Afin d'améliorer l'efficacité du travail et de réduire les coûts de main-d'œuvre, de nombreuses entreprises choisissent d'utiliser la technologie informatique pour gérer les registres de présence des employés. Cet article explique comment utiliser PHP et Vue pour créer un panneau de gestion des présences des employés simple et efficace.

1. Préparation

Avant de commencer à construire le panneau de gestion des présences des employés, nous devons nous assurer que les préparations suivantes sont en place :

1. Environnement serveur : Assurez-vous que PHP et MySQL ont été installés sur le serveur.
2. Environnement de développement : il est recommandé d'utiliser un environnement de développement intégré (IDE) tel que xampp, wamp, etc., qui peut faciliter l'écriture de code et le débogage.
3. Front-end framework : Nous avons choisi d'utiliser Vue comme framework front-end car il est facile à utiliser et possède des fonctions riches.
4. Base de données : nous utiliserons MySQL comme base de données pour stocker les enregistrements de présence des employés.

2. Créer une base de données et une structure de table

Créez une base de données nommée « présence » dans MySQL et créez la structure de table suivante :

Table des employés (employés) :

CREATE TABLE employees (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(255) NOT NULL,
  department VARCHAR(255) NOT NULL
);

Table des enregistrements de présence (assiduité_records) :

CREATE TABLE attendance_records (
  id INT AUTO_INCREMENT PRIMARY KEY,
  employee_id INT NOT NULL,
  date DATE NOT NULL,
  time_in TIME NOT NULL,
  time_out TIME,
  FOREIGN KEY (employee_id) REFERENCES employees(id)
);

3 . Développement back-end

1. Connexion à la base de données

En PHP, nous devons utiliser des extensions telles que mysqli ou PDO pour nous connecter à la base de données. Voici un exemple de code pour se connecter à une base de données MySQL :

<?php
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "attendance";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}
?>

2. Créer une interface API

Nous devons créer de nombreuses interfaces API pour gérer les opérations d'ajout, de suppression, de modification et de requête des employés et des enregistrements de présence. Voici un exemple de code pour obtenir la liste des employés :

<?php
// 获取员工列表
$sql = "SELECT * FROM employees";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    $employees = array();

    while($row = $result->fetch_assoc()) {
        $employees[] = $row;
    }

    // 将结果转成JSON格式
    echo json_encode($employees);
} else {
    echo "暂无员工";
}
?>

De la même manière, nous pouvons créer d'autres interfaces API pour gérer les opérations d'ajout, de suppression, de modification et d'interrogation des employés et des enregistrements de présence.

4. Développement front-end

1. Créer un projet Vue

Exécutez la commande suivante sur la ligne de commande pour créer un projet Vue :

vue create attendance-management-panel

Sélectionnez la configuration par défaut en fonction des invites.

2. Créer des itinéraires et des vues

Utilisez Vue Router pour créer des itinéraires et des vues afin d'afficher les listes d'employés, les enregistrements de présence, etc.

3. Initier une requête

Utilisez axios ou d'autres bibliothèques Ajax pour lancer des requêtes HTTP afin d'obtenir des données back-end. Voici un exemple de code qui obtient une liste d'employés et l'affiche sur la page :

import axios from 'axios';

export default {
    data() {
        return {
            employees: []
        }
    },

    mounted() {
        axios.get('/api/employees')
            .then(response => {
                this.employees = response.data;
            })
            .catch(error => {
                console.log(error);
            });
    }
}

Si nécessaire, d'autres composants peuvent être créés pour implémenter les fonctions d'ajout, de suppression, de modification et d'interrogation des enregistrements de présence des employés.

5. Déploiement et tests

Emballez le code front-end et placez-le dans le répertoire Web du serveur, puis téléchargez le code back-end sur le serveur. Assurez-vous que PHP et MySQL sont correctement configurés sur le serveur.

Vous pouvez tester la fonction du panneau de gestion des présences des employés en accédant au site Web via votre navigateur.

Conclusion

Cet article explique comment utiliser PHP et Vue pour créer un panneau de gestion des présences des employés et fournit des exemples de code pertinents. Bien entendu, il ne s’agit que d’un exemple simple et les applications réelles doivent être ajustées et étendues en fonction des besoins spécifiques. Mais je pense qu'à travers cet exemple, vous avez déjà une certaine compréhension de la façon d'utiliser PHP et Vue pour créer un panneau de gestion des présences des employés. J'espère que cet article vous aidera !

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!