Position actuelle: Accueil> Derniers articles> Guide de développement pour la mise en œuvre du module d'application de remplacement de carte de présence des employés en ligne avec PHP et Vue

Guide de développement pour la mise en œuvre du module d'application de remplacement de carte de présence des employés en ligne avec PHP et Vue

M66 2025-10-10

introduction

Avec les progrès de l'informatisation des entreprises, de plus en plus d'entreprises utilisent des systèmes de présence en ligne pour gérer la présence des employés. Dans le cadre de leur travail réel, les employés peuvent être amenés à remplacer leurs cartes pour des raisons particulières. Cet article expliquera comment utiliser PHP et Vue pour développer un module d'application de remplacement de carte de présence des employés en ligne et fournira des exemples de code spécifiques.

Sélection technologique

Pendant le processus de développement, le backend utilise PHP pour gérer la logique du serveur et les opérations de base de données, et le frontend utilise Vue pour créer une interface interactive permettant d'implémenter la soumission de formulaires et l'affichage des données.

développement back-end

Tout d'abord, vous devez créer un fichier PHP pour traiter la logique de l'application de remplacement de la carte, y compris la connexion à la base de données, la vérification des données et le fonctionnement.

 //Connectez-vous à la base de données $conn = new mysqli("localhost", "username", "password", "database");

// Vérifiez si la connexion à la base de données réussit if ($conn->connect_error) {
    die("Échec de la connexion à la base de données : " . $conn->connect_error);
}

// Opération logique de traitement de la demande de remplacement de carte si ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Récupère les données du formulaire soumises pour la demande de remplacement de carte $employee_id = $_POST["employee_id"];
    $date = $_POST["date"];
    $raison = $_POST["raison"];

    // Écrivez des instructions SQL pour insérer les données d'application de remplacement de carte dans la base de données $sql = "INSERT INTO présence (employee_id, date, Reason) VALUES ("$employee_id", '$date', '$reason')" ;

    if ($conn->query($sql) === VRAI) {
        echo "Demande de remplacement de carte réussie" ;
    } autre {
        echo "La demande de remplacement de carte a échoué : " . $conn->erreur ;
    }

    $conn->close();
}

Développement front-end

Le front-end utilise Vue pour implémenter le formulaire de demande de remplacement de carte et l'interaction avec le back-end, et améliore la maintenabilité grâce au développement de composants.

<form @submit="submitForm">
  <label for="employee_id">Numéro d&#39;employé :</label>
  <input type="text" id="employee_id" v-model="employeeId">
  <br>
  <label for="date">date:</label>
  <input type="date" id="date" v-model="date">
  <br>
  <label for="reason">raison:</label>
  <textarea id="reason" v-model="reason"></textarea>
  <br>
  <button type="submit">soumettre</button>
</form>
exporter par défaut {
  données() {
    retour {
      ID employé : &#39;,
      date: &#39;&#39;,
      raison: &#39;&#39;
    }
  },
  méthodes : {
    soumettreFormulaire() {
      //Envoyer la requête POST au backend axios.post(&#39;api/apply.php&#39;, {
        employ_id : this.employeeId,
        date : cette.date,
        raison : cette.raison
      })
      .then(réponse => {
        console.log(response.data);
        //Traitement des résultats de la demande de remplacement de carte})
      .catch(erreur => {
        console.erreur(erreur);
      });
    }
  }
}

Résumer

Grâce aux étapes ci-dessus, nous avons développé avec succès un module d'application de remplacement de carte de présence des employés en ligne à l'aide de PHP et Vue. Les employés peuvent remplir des formulaires de candidature sur une page Web et soumettre les données au backend pour traitement. Cet article fournit des idées de développement complètes et des exemples de code pour permettre aux développeurs de démarrer rapidement et de réaliser l'automatisation de la gestion des présences internes de l'entreprise.

Connexe
Derniers articles