développement back-end
tutoriel php
Comment combiner PHP et Vue pour implémenter la fonction de statistiques de présence des employés
Comment combiner PHP et Vue pour implémenter la fonction de statistiques de présence des employés
Comment combiner PHP et Vue pour implémenter la fonction de statistiques de présence des employés ?
À mesure que la taille des entreprises continue de croître, les statistiques de présence des employés sont devenues un élément important de la gestion de l'entreprise. Avec l'aide de deux technologies puissantes, PHP et Vue, nous pouvons facilement implémenter la fonction de statistiques de présence des employés et offrir une bonne expérience utilisateur.
Ci-dessous, j'utiliserai un exemple simple pour montrer comment implémenter cette fonction en combinant PHP et Vue. Tout d’abord, nous devons créer une interface backend simple pour obtenir les données de présence des employés.
Le code backend PHP est le suivant :
<?php
// 获取员工考勤数据
function getAttendanceData() {
// 这里可以连接数据库，查询员工考勤数据并返回
$attendanceData = [
['name' => '张三', 'date' => '2022-01-01', 'status' => '正常'],
['name' => '李四', 'date' => '2022-01-02', 'status' => '迟到'],
['name' => '王五', 'date' => '2022-01-03', 'status' => '早退'],
// 其他员工考勤数据
];
return json_encode($attendanceData);
}
// 输出员工考勤数据
echo getAttendanceData();
?>Le code ci-dessus définit une fonction simple getAttendanceData, qui est utilisée pour obtenir les données de présence des employés. Ici, nous simulons simplement certaines données et produisons les données au format JSON via la fonction json_encode. getAttendanceData，用于获取员工考勤数据。这里只是模拟了一些数据，并通过json_encode函数将数据以JSON格式输出。
接下来，我们使用Vue来构建前端界面，并使用Ajax来请求后端接口获取员工考勤数据。
前端代码如下：
<!DOCTYPE html>
<html>
<head>
<title>员工考勤统计</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<h1 id="员工考勤统计">员工考勤统计</h1>
<table>
<thead>
<tr>
<th>姓名</th>
<th>日期</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr v-for="attendance in attendances" :key="attendance.name">
<td>{{ attendance.name }}</td>
<td>{{ attendance.date }}</td>
<td>{{ attendance.status }}</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el: '#app',
data: {
attendances: []
},
mounted() {
this.getAttendanceData();
},
methods: {
getAttendanceData() {
axios.get('api.php') // 调用后端接口
.then(response => {
this.attendances = response.data;
})
.catch(error => {
console.log(error);
});
}
}
});
</script>
</body>
</html>上述代码中，我们使用了Vue和Axios库。在Vue的mounted生命周期钩子中调用了getAttendanceData方法，该方法使用Axios发送GET请求到后端接口api.php获取员工考勤数据，并将返回的数据赋值给attendances
rrreee
Dans le code ci-dessus, nous utilisons les bibliothèques Vue et Axios. La méthodegetAttendanceData est appelée dans le hook de cycle de vie monté de Vue, qui utilise Axios pour envoyer une requête GET à l'interface backend api.php pour obtenir données de présence des employés et attribuez les données renvoyées au tableau présences. Grâce à la liaison bidirectionnelle de Vue, nous pouvons afficher les données de présence des employés dans le tableau. 🎜🎜Il convient de noter que dans les projets réels, vous devez apporter les modifications et extensions appropriées en fonction de vos propres besoins, telles que l'ajout de champs de données supplémentaires, l'ajout, la suppression, la modification et la vérification des données. 🎜🎜En combinant PHP et Vue, nous avons réussi à implémenter une fonction simple de statistiques de présence des employés et à offrir aux utilisateurs une bonne expérience utilisateur. Ceci n'est qu'un exemple de base, j'espère qu'il vous sera utile dans le développement de projets réels. 🎜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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1359
52
Comment pouvez-vous empêcher une classe d'être prolongée ou une méthode d'être remplacée en PHP? (mot-clé final)
Apr 08, 2025 am 12:03 AM
Dans PHP, le mot-clé final est utilisé pour empêcher les classes d'être héritées et les méthodes écrasées. 1) Lors du marquage de la classe comme final, la classe ne peut pas être héritée. 2) Lors du marquage de la méthode comme final, la méthode ne peut pas être réécrite par la sous-classe. L'utilisation de mots clés finaux garantit la stabilité et la sécurité de votre code.
Comment référencer le fichier JS avec Vue.js
Apr 07, 2025 pm 11:27 PM
Il existe trois façons de se référer aux fichiers JS dans Vue.js: spécifiez directement le chemin à l'aide du & lt; script & gt; étiqueter;; importation dynamique à l'aide du crochet de cycle de vie monté (); et l'importation via la bibliothèque de gestion de l'État Vuex.
Comment utiliser Bootstrap en Vue
Apr 07, 2025 pm 11:33 PM
L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.
Vue réalise l'effet de défilement de chapiteau / texte
Apr 07, 2025 pm 10:51 PM
Implémentez les effets de défilement marquee / texte dans VUE, en utilisant des animations CSS ou des bibliothèques tierces. Cet article présente comment utiliser l'animation CSS: créer du texte de défilement et envelopper du texte avec & lt; div & gt;. Définissez les animations CSS et défini: caché, largeur et animation. Définissez les images clés, Set Transforment: Translatex () au début et à la fin de l'animation. Ajustez les propriétés d'animation telles que la durée, la vitesse de défilement et la direction.
Que signifie la charge paresseuse?
Apr 07, 2025 pm 11:54 PM
Dans vue.js, le chargement paresseux permet de charger dynamiquement les composants ou les ressources, en réduisant le temps de chargement des pages initiales et en améliorant les performances. La méthode de mise en œuvre spécifique comprend l'utilisation de & lt; keep-alive & gt; et & lt; composant est & gt; composants. Il convient de noter que le chargement paresseux peut provoquer des problèmes de FOUC (écran d'éclat) et ne doit être utilisé que pour les composants qui nécessitent un chargement paresseux pour éviter les frais généraux de performances inutiles.
Que signifie la valeur de passage du composant Vue?
Apr 07, 2025 pm 11:51 PM
Les valeurs de passage des composants Vue sont un mécanisme pour passer des données et des informations entre les composants. Il peut être mis en œuvre via des propriétés (accessoires) ou des événements: accessoires: déclarer les données à recevoir dans le composant et passer les données dans le composant parent. Événements: Utilisez la méthode $ EMIT pour déclencher un événement et écoutez-le dans le composant parent à l'aide de la directive V-on.
Comment interroger la version de Vue
Apr 07, 2025 pm 11:24 PM
Vous pouvez interroger la version Vue en utilisant Vue Devtools pour afficher l'onglet Vue dans la console du navigateur. Utilisez NPM pour exécuter la commande "NPM List -g Vue". Recherchez l'élément VUE dans l'objet "dépendances" du fichier package.json. Pour les projets Vue CLI, exécutez la commande "Vue --version". Vérifiez les informations de la version dans le & lt; script & gt; Tag dans le fichier html qui fait référence au fichier VUE.
Comment utiliser Watch in Vue
Apr 07, 2025 pm 11:36 PM
L'option Watch dans Vue.js permet aux développeurs d'écouter des modifications de données spécifiques. Lorsque les données changent, regardez déclenche une fonction de rappel pour effectuer des vues de mise à jour ou d'autres tâches. Ses options de configuration incluent immédiatement, qui spécifie s'il faut exécuter un rappel immédiatement, et profond, ce qui spécifie s'il faut écouter récursivement les modifications des objets ou des tableaux.
