Comment utiliser PHP et Vue pour développer une fonction de rappel d'enregistrement pour la présence en ligne des employés-tutoriel php-php.cn

Comment utiliser PHP et Vue pour développer une fonction de rappel d'enregistrement pour la présence en ligne des employés

WBOY

Libérer： 2023-09-26 09:20:02

original

1450 Les gens l'ont consulté

Comment utiliser PHP et Vue pour développer une fonction de rappel denregistrement pour la présence en ligne des employés

Comment utiliser PHP et Vue pour développer une fonction de rappel de présence des employés en ligne

Avec le développement de la technologie, de nombreuses entreprises ont commencé à adopter des systèmes de présence des employés en ligne pour mieux gérer les heures de travail et la présence des employés. L'une des fonctions importantes est le rappel de connexion, qui permet aux employés de se connecter à temps et garantit un enregistrement précis des heures de travail. Cet article expliquera comment utiliser PHP et Vue pour développer la fonction de rappel d'enregistrement pour la présence en ligne des employés et fournira des exemples de code spécifiques.

Comment mettre en œuvre la fonction de rappel d'enregistrement
Afin de mettre en œuvre la fonction de rappel d'enregistrement, nous devons définir une période horaire d'enregistrement dans le système et envoyer des rappels d'enregistrement aux employés d'une manière ou d'une autre. Lorsque les employés reçoivent le rappel de connexion, ils peuvent terminer l'opération de connexion dans le délai spécifié. Afin de faciliter la gestion et les rappels, nous pouvons stocker les informations d'enregistrement dans la base de données pour des requêtes et des analyses ultérieures.
Développement backend PHP
Tout d'abord, nous devons créer un fichier PHP pour gérer l'opération d'enregistrement et stocker les informations d'enregistrement dans la base de données. Voici un exemple de code PHP :

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

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

// 获取员工信息
$employeeId = $_POST["employee_id"];
$signInTime = date("Y-m-d H:i:s");

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

if ($conn->query($sql) === TRUE) {
    echo "签到成功";
} else {
    echo "签到失败";
}

$conn->close();
?>

Copier après la connexion

Dans le code ci-dessus, nous nous connectons d'abord à la base de données, puis obtenons l'ID de l'employé et l'heure actuelle. Ensuite, nous insérons ces informations dans un tableau nommé présence, qui contient deux champs : identifiant d'employé et heure d'arrivée. Selon le résultat de l'opération, les informations d'invite correspondantes sont émises. attendance的表中，该表包含员工ID和签到时间两个字段。根据操作结果，输出相应的提示信息。

Vue前端开发
接下来，我们需要在Vue前端应用程序中实现签到提醒功能。以下是一个示例的Vue组件代码：

<template>
  <div>
    <p v-if="!isSignedIn">请在指定时间段内完成签到</p>
    <button v-if="!isSignedIn" @click="signIn">签到</button>
    <p v-else>已完成签到</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSignedIn: false
    };
  },
  methods: {
    signIn() {
      // 发送签到请求
      axios.post("/api/signin", {
        employee_id: 123 // 员工ID
      })
      .then(response => {
        if (response.data === '签到成功') {
          this.isSignedIn = true;
        }
      })
      .catch(error => {
        console.error(error);
      });
    }
  }
};
</script>

Copier après la connexion

在以上代码中，我们首先定义了一个isSignedIn变量来表示是否已完成签到。根据这个变量的值，我们可以控制显示相应的提示信息和签到按钮。当用户点击签到按钮时，会发送一个POST请求到后端的/api/signin路由，并传递员工ID。根据后端返回的结果，我们更新isSignedIn