Comment utiliser PHP et Vue pour concevoir l'affichage des données pour le système de présence des employés

Comment utiliser PHP et Vue pour concevoir l'affichage des données du système de présence des employés

Introduction :
Dans les entreprises modernes, le système de présence est un élément très important, qui peut gérer efficacement la présence des employés et améliorer l'efficacité du travail. Avec l'aide de PHP et Vue, nous pouvons concevoir un système de présence des employés simple et efficace et afficher intuitivement l'état de présence des employés via la fonction d'affichage des données. Cet article expliquera comment utiliser PHP et Vue pour concevoir l'affichage des données du système de présence des employés et fournira des exemples de code spécifiques.

1. Construire l'environnement
Pour utiliser PHP et Vue pour concevoir l'affichage des données du système de présence des employés, nous devons d'abord créer l'environnement correspondant. Veuillez suivre les étapes ci-dessous :

1. Installer PHP
   Vous pouvez télécharger la dernière version de PHP depuis le site officiel de PHP (https://www.php.net/downloads.php) et l'installer conformément au guide d'installation. Une fois l'installation terminée, vous pouvez entrer php -v dans le terminal ou l'invite de commande pour vérifier si PHP est installé avec succès.

2. Installer Vue CLI
   Vue CLI est un outil d'échafaudage permettant de créer rapidement des projets Vue. Vous pouvez utiliser npm (gestionnaire de packages Node.js) pour l'installer. Entrez la commande suivante dans le terminal ou l'invite de commande pour installer Vue CLI :

   npm install -g @vue/cli

3. Créez un projet Vue
   Dans l'invite de commande, basculez vers le répertoire dans lequel vous souhaitez créer le projet et entrez la commande suivante pour créer un nouveau projet Vue Projet :

   vue create employee-attendance-system

4. Créer un script PHP
   Dans le répertoire racine de votre nouveau projet Vue, créez un fichier de script PHP nommé api.php. Ce fichier sera utilisé pour traiter les requêtes envoyées depuis le front-end Vue et renvoyer les données correspondantes.

2. Écrivez le code frontal
Ensuite, nous écrirons le code frontal Vue pour afficher les données de présence des employés. Veuillez suivre les étapes ci-dessous :

1. Modifier App.vue
   Ouvrez le fichier App.vue dans le répertoire src et modifiez-le comme suit :

   <template>
     <div>
       <h1>员工考勤系统</h1>
       <table>
         <thead>
           <tr>
             <th>员工姓名</th>
             <th>日期</th>
             <th>上班时间</th>
             <th>下班时间</th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="record in records" :key="record.id">
             <td>{{ record.name }}</td>
             <td>{{ record.date }}</td>
             <td>{{ record.startTime }}</td>
             <td>{{ record.endTime }}</td>
           </tr>
         </tbody>
       </table>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         records: [],
       };
     },
     mounted() {
       this.fetchRecords();
     },
     methods: {
       fetchRecords() {
         // 使用axios发送GET请求到后端的api.php脚本
         axios.get('api.php')
           .then(response => {
             this.records = response.data;
           })
           .catch(error => {
             console.error(error);
           });
       },
     },
   };
   </script>

2. Modifiez main.js
   Ouvrez main.js dans le fichier du répertoire src et modifiez-le comme suit :

   import Vue from 'vue';
   import App from './App.vue';
   
   Vue.config.productionTip = false;
   
   new Vue({
     render: h => h(App),
   }).$mount('#app');

3. Écrivez le code back-end
Maintenant, nous allons écrire le code PHP back-end pour traiter la requête envoyée depuis le front-end Vue et renvoyer les données correspondantes. Veuillez suivre les étapes ci-dessous :

1. Écrivez api.php
   Ouvrez le fichier api.php dans le répertoire racine et modifiez-le comme suit :

   <?php
   
   // 模拟员工考勤数据
   $records = [
     [
       'id' => 1,
       'name' => '员工1',
       'date' => '2020-01-01',
       'startTime' => '09:00:00',
       'endTime' => '18:00:00',
     ],
     [
       'id' => 2,
       'name' => '员工2',
       'date' => '2020-01-02',
       'startTime' => '08:30:00',
       'endTime' => '17:30:00',
     ],
   ];
   
   // 设置响应头，允许跨域访问
   header('Access-Control-Allow-Origin: *');
   header('Content-Type: application/json');
   
   // 将员工考勤数据以JSON格式返回给前端
   echo json_encode($records);

2. Exécutez le code front-end et back-end
   Dans la commande À l'invite, passez au répertoire racine de votre projet et entrez les commandes suivantes pour démarrer le code front-end et back-end :

   npm run serve

   Cela démarrera un serveur de développement local écoutant sur http://localhost:8080. Vous pouvez accéder à cette adresse dans votre navigateur pour voir la page d'affichage des données du système de présence des employés.

Conclusion : 
Grâce aux étapes ci-dessus, nous avons conçu avec succès un système de présence des employés simple et efficace en utilisant PHP et Vue, et implémenté la fonction d'affichage des données. Bien entendu, il ne s’agit que d’un exemple simple et vous pouvez étendre et améliorer le code en fonction de vos propres besoins. J'espère que cet article vous sera utile et je vous souhaite du succès dans la conception de l'affichage des données pour les systèmes de présence des employés à l'aide de PHP et Vue !

Remarque : les exemples de code ci-dessus sont uniquement destinés à la démonstration et peuvent présenter des problèmes de sécurité ou de performances. Veuillez apporter les améliorations et optimisations appropriées en fonction de vos besoins dans les applications réelles.

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!