Comment combiner PHP et Vue pour implémenter la fonction d'enregistrement et de départ pour la présence des employés

Comment combiner PHP et Vue pour implémenter la fonction de connexion et de départ de la présence des employés

La présence des employés est un lien de gestion essentiel pour chaque entreprise Grâce à la connexion et à la déconnexion, le statut de travail et. la présence des employés peut être suivie efficacement. Cet article expliquera comment combiner PHP et Vue pour implémenter la fonction d'enregistrement et de départ de la présence des employés, et fournira des exemples de code spécifiques.

1. Sélection technologique

Pour réaliser la fonction d'enregistrement et de départ de la présence des employés, nous choisissons PHP comme langage de développement back-end et Vue comme cadre de développement front-end. PHP peut gérer la logique d'arrière-plan et Vue peut être responsable de l'affichage frontal. Les deux travaillent ensemble pour implémenter rapidement des fonctions.

2. Conception de la base de données

Tout d'abord, nous devons concevoir une base de données pour stocker les informations de présence des employés. Ce qui suit est un exemple simple de conception de feuille de présence d'un employé :

Feuille de présence de l'employé (présence)

• id : identifiant du dossier de présence (clé primaire)
• employee_id : identifiant de l'employé
• sign_in_time : heure de connexion
• sign_out_time : Heure de déconnexion

3. Implémentation du backend

1. Créez un fichier PHP, nommé assistance.php, et introduisez le fichier de connexion à la base de données.

<?php
include 'db_connect.php';

2. Implémentez la fonction de connexion des employés.

// 接收从前台传来的员工ID
$employee_id = $_POST['employee_id'];

// 获取当前时间
$sign_in_time = date('Y-m-d H:i:s');

// 将签到信息插入到数据库
$sql = "INSERT INTO attendance (employee_id, sign_in_time) VALUES ('$employee_id', '$sign_in_time')";
$result = mysqli_query($conn, $sql);

if ($result) {
  echo "签到成功";
} else {
  echo "签到失败";
}

3. Implémentez la fonction de déconnexion des employés.

// 接收从前台传来的员工ID
$employee_id = $_POST['employee_id'];

// 获取当前时间
$sign_out_time = date('Y-m-d H:i:s');

// 更新签退时间
$sql = "UPDATE attendance SET sign_out_time = '$sign_out_time' WHERE employee_id = '$employee_id'";
$result = mysqli_query($conn, $sql);

if ($result) {
  echo "签退成功";
} else {
  echo "签退失败";
}

4. Implémentation front-end

1. Dans le projet front-end, utilisez le framework Vue pour créer une page de présence des employés, où vous pouvez choisir de vous connecter ou de vous déconnecter.

<template>
  <div>
    <h2>员工考勤</h2>
    <select v-model="employeeId">
      <option v-for="employee in employees" :key="employee.id" :value="employee.id">{{ employee.name }}</option>
    </select>
    <button @click="signIn">签到</button>
    <button @click="signOut">签退</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      employeeId: '',
      employees: [],
      message: ''
    }
  },
  mounted() {
    // 获取员工列表
    // 可以通过接口请求后台获取员工列表，这里直接模拟数据
    this.employees = [
      { id: 1, name: '张三' },
      { id: 2, name: '李四' },
      { id: 3, name: '王五' }
    ]
  },
  methods: {
    signIn() {
      // 向后台发送签到请求
      fetch('attendance.php', {
        method: 'POST',
        body: JSON.stringify({ employee_id: this.employeeId })
      })
        .then(response => response.text())
        .then(data => {
          this.message = data
        })
    },
    signOut() {
      // 向后台发送签退请求
      fetch('attendance.php', {
        method: 'POST',
        body: JSON.stringify({ employee_id: this.employeeId })
      })
        .then(response => response.text())
        .then(data => {
          this.message = data
        })
    }
  }
}
</script>

2. Utilisez Vue CLI pour l'empaquetage et générez des fichiers statiques pour l'introduction en arrière-plan.

5. Résumé

En combinant PHP et Vue, nous pouvons rapidement implémenter la fonction de connexion et de déconnexion pour la présence des employés. PHP est responsable du traitement de la logique d'arrière-plan, et Vue est responsable de l'affichage frontal et envoie les requêtes en arrière-plan via l'interface. Ce qui précède est un exemple simple, vous pouvez l'étendre et l'optimiser en fonction des besoins réels. Pour résumer, nous pouvons utiliser PHP et Vue pour implémenter la fonction d'enregistrement et de départ de la présence des employés.

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!