Comment utiliser PHP et Vue pour développer une requête d'enregistrement en ligne pour la présence des employés
Dans les entreprises modernes, la gestion des présences des employés est une tâche très importante. Les enregistrements manuels traditionnels sont sujets aux erreurs et peu pratiques pour les requêtes et les statistiques. Grâce aux fonctions puissantes de PHP et Vue, nous pouvons développer un système de requête en ligne pour les enregistrements de présence des employés, rendant la gestion des présences plus efficace, plus pratique et plus précise.
1. Préparation du projet
Avant de commencer, nous devons préparer l'environnement et les outils de développement suivants :
2. Conception de la base de données
Nous devons créer une base de données MySQL pour stocker les informations sur les employés et les enregistrements de pointage. Concevez une base de données nommée "attendance_management", contenant deux tables : employés et présences. La table employes est utilisée pour stocker les informations de base des employés, notamment les champs : id (clé primaire auto-incrémentée), nom (nom de l'employé), département (service auquel il appartient), etc. La table de présence est utilisée pour stocker les enregistrements de présence, y compris les champs : id (clé primaire à incrémentation automatique), Employee_id (identifiant de l'employé), check_in_time (heure d'horloge), check_out_time (heure d'horloge), etc.
3. Développement backend
return [
'host' => 'localhost', 'username' => 'root', 'password' => 'your_password', 'database' => 'attendance_management',
];
?>
require_once '../config/database.php';
class Employees {
private $conn;
private $table = 'employees';
public function __construct($db) {
$this->conn = $db;
}
public function getEmployees() {
$query = 'SELECT * FROM ' . $this->table;
$stmt = $this->conn->prepare($query);
$stmt->execute();
return $stmt;
}}
?>
require_once '../config/database.php';
Participation aux cours {
private $conn;
private $table = 'attendance';
public function __construct($db) {
$this->conn = $db;
}
public function getAttendanceByEmployeeId($employeeId) {
$query = 'SELECT * FROM ' . $this->table . ' WHERE employee_id = ?';
$stmt = $this->conn->prepare($query);
$stmt->bindParam(1, $employeeId);
$stmt->execute();
return $stmt;
}}
?>
4. Développement front-end
npm install -g @vue/cli
vue create frontend
cd frontend
npm install vue-router axios
<div>
<h2>员工考勤记录</h2>
<select v-model="selectedEmployee" @change="onEmployeeChange">
<option v-for="employee in employees" :value="employee.id">{{ employee.name }}</option>
</select>
<table>
<thead>
<tr>
<th>打卡时间</th>
<th>下班打卡时间</th>
</tr>
</thead>
<tbody>
<tr v-for="record in attendance">
<td>{{ record.check_in_time }}</td>
<td>{{ record.check_out_time }}</td>
</tr>
</tbody>
</table>
</div><script><br>export par défaut {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>data() { return { employees: [], selectedEmployee: null, attendance: [] }; }, mounted() { this.getEmployees(); }, methods: { getEmployees() { axios.get('http://localhost/backend/api/employees.php') .then(response => { this.employees = response.data; }) .catch(error => { console.log(error); }); }, onEmployeeChange() { axios.get('http://localhost/backend/api/attendance.php?employeeId=' + this.selectedEmployee) .then(response => { this.attendance = response.data; }) .catch(error => { console.log(error); }); } }</pre><div class="contentsignin">Copier après la connexion</div></div><p>};<br></script>
importer Vue depuis 'vue';
importer VueRouter depuis 'vue-router';
importer Attendance depuis '../components/Attendance.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'Attendance',
component: Attendance
}];
const router = new VueRouter({
mode: 'history', base: process.env.BASE_URL, routes
});
export default router;
5. Exécutez le projet
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1 [L]
npm run serve
Grâce aux étapes de développement ci-dessus, nous avons mis en œuvre avec succès un système de requête d'enregistrement de pointage de présence des employés en ligne développé à l'aide de PHP et Vue. Les utilisateurs peuvent consulter leurs enregistrements de présence en sélectionnant des employés, ce qui améliore non seulement l'efficacité de la gestion des présences, mais réduit également l'apparition d'erreurs humaines. Dans le même temps, ce projet nous montre également les étapes de base et les points techniques pour combiner PHP et Vue pour un développement full-stack. J'espère que cet article vous sera utile et je vous souhaite bonne chance dans votre programmation !
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!
Le composant parent Vue appelle la méthode du composant enfant
vue v-si
La différence entre vue2.0 et 3.0
Comment transmettre une valeur au composant vue
La différence entre vue3.0 et 2.0
vue instructions communes
Quelles sont les instructions couramment utilisées dans vue ?
Comment ouvrir le fichier php
![Premiers pas avec le développement pratique PHP : création rapide de PHP [Small Business Forum]](https://img.php.cn/upload/course/000/000/035/5d27fb58823dc974.jpg)
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
