Comment implémenter la fonction de génération automatique de présence des employés via PHP et Vue

Comment réaliser la fonction de génération automatique de la présence des employés via PHP et Vue

Introduction :
La présence des employés est une partie très importante de la gestion d'entreprise. L'enregistrement manuel traditionnel des données de présence prend du temps, demande beaucoup de travail et. sujet aux erreurs. Avec l'aide de deux outils de développement puissants, PHP et Vue, nous pouvons facilement réaliser la fonction de génération automatique de la présence des employés et améliorer la précision des données de présence et l'efficacité du travail. Cet article présentera en détail comment implémenter la fonction de génération automatique de la présence des employés via PHP et Vue, et joindra des exemples de code spécifiques.

1. Préparation

1. Installer les environnements de développement associés à PHP et Vue
2. Créer une base de données comprenant la table des employés et la table de présence
3. Ajouter des champs dans la table de présence comprenant : l'identifiant de l'employé, la date de présence, le temps de travail, les heures de repos

2. Développement back-end (PHP)

1. Créez un fichier PHP nommé "attendance.php", qui est utilisé pour gérer les requêtes front-end et interagir avec la base de données
2. Écrivez le code dans "attendance.php" fichier, Implémentez les fonctions suivantes :
   a) Connectez-vous à la base de données
   b) Recevez l'identifiant de l'employé et la date de présence transmis par le front-end
   c) Interrogez le relevé de présence de l'employé à cette date
   d) S'il y a un enregistrement, renvoyez les données existantes ; sinon, générez automatiquement les enregistrements de présence et insérez-les dans la base de données

3. Ce qui suit est une version simplifiée de l'exemple de code :

   <?php
   // 连接数据库
   $conn = new mysqli("localhost", "username", "password", "database");
   
   // 检查连接
   if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
   }
   
   // 接收员工ID和考勤日期
   $empId = $_POST["empId"];
   $date = $_POST["date"];
   
   // 查询考勤记录
   $sql = "SELECT * FROM attendance WHERE emp_id = $empId AND date = $date";
   $result = $conn->query($sql);
   
   // 如果有记录，则返回已有的数据
   if ($result->num_rows > 0) {
    $row = $result->fetch_assoc();
    echo json_encode($row);
   } else {
    // 自动生成考勤记录
    $insertSql = "INSERT INTO attendance (emp_id, date, clock_in_time, clock_out_time)
                  VALUES ($empId, $date, '09:00:00', '18:00:00')";
   
    if ($conn->query($insertSql) === TRUE) {
        echo "考勤记录已生成";
    } else {
        echo "生成考勤记录失败: " . $conn->error;
    }
   }
   
   $conn->close();
   ?>

3. Développement front-end (Vue)

1. Créer une Vue. projetez et utilisez la bibliothèque axios pour envoyer des requêtes au backend
2. Écrivez du code dans le fichier Vue pour implémenter les fonctions suivantes :
   a) Créez la page, y compris la zone de saisie de l'ID de l'employé, le sélecteur de date de présence et le bouton de soumission
   b) Écoutez à l'événement de soumission du formulaire et obtenez l'identifiant de l'employé et la date de présence saisies par l'utilisateur
   c) Utilisez la bibliothèque axios pour envoyer une requête POST au fichier "attendance.php" sur le backend
   d) pour traiter les données renvoyées par le arrière-plan et mettez à jour l'affichage de la page

3. Ce qui suit est une version simplifiée de l'exemple de code :

   <template>
     <div>
    <label for="empId">员工ID:</label>
    <input type="text" id="empId" v-model="empId">
    <label for="date">考勤日期:</label>
    <input type="date" id="date" v-model="date">
    <button @click="submit">提交</button>
    <p v-if="attendance">上班时间：{{ attendance.clock_in_time }}，下班时间：{{ attendance.clock_out_time }}</p>
     </div>
   </template>
   
   <script>
   import axios from 'axios';
   
   export default {
     data() {
    return {
      empId: '',
      date: '',
      attendance: null
    }
     },
     methods: {
    submit() {
      axios.post('attendance.php', {
        empId: this.empId,
        date: this.date
      })
      .then(response => {
        this.attendance = response.data;
      })
      .catch(error => {
        console.log(error);
      });
    }
     }
   }
   </script>

Four Run

1. Exécutez le projet Vue dans le terminal et visitez l'URL correspondante
2. Entrez l'identifiant de l'employé et date de présence sur la page, cliquez sur le bouton Soumettre
3. La page affichera le relevé de présence de l'employé à cette date. S'il n'y a pas d'enregistrement, une fonction sera automatiquement générée. Les relevés de présence seront générés et affichés sur la page

Résumé. :
Grâce à la combinaison de PHP et Vue, nous avons réalisé la fonction de génération automatique de la présence des employés. PHP est responsable du traitement back-end et de l'interaction avec la base de données, et Vue est responsable de la construction des pages frontales et de la communication avec le back-end. Cette méthode peut considérablement améliorer la précision et l'efficacité du travail des données de présence des employés, et réduire les erreurs et la pénibilité causées par l'enregistrement manuel. Bien entendu, il ne s’agit que d’une version simplifiée de l’exemple, et les projets réels doivent être développés et optimisés de manière appropriée en fonction des besoins. J'espère que cet article sera utile aux lecteurs qui apprennent et pratiquent PHP et Vue.

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!