LU03.L03
app.js
const express = require('express'); const app = express(); const path = require('path'); // Die Daten der drei (jetzt vier) Personen const personen = [ { id: 1, name: "Max Mustermann", alter: 28, beruf: "Entwickler" }, { id: 2, name: "Anna Schmidt", alter: 34, beruf: "Designerin" }, { id: 3, name: "Ben Weber", alter: 22, beruf: "Student" }, { id: 4, name: "Peter König", alter: 25, beruf: "Betonbauer" } // ID von 3 auf 4 korrigiert ]; // FEHLENDE CODEZEILE 1: Den aktuellen Ordner für statische Dateien (wie index.html) freigeben app.use(express.static(__dirname)); // FEHLENDE CODEZEILE 2: Route für die Startseite (liefert die index.html aus) app.get('/', (req, res) => { res.sendFile(path.join(__dirname, 'index.html')); }); // FEHLENDE CODEZEILE 3: Route für die JSON-Daten (falls du die Daten per fetch abrufen willst) app.get('/api/personen', (req, res) => { res.json(personen); }); // Server auf Port 3000 starten const PORT = 3000; app.listen(PORT, () => { console.log(`Server läuft unter http://localhost:${PORT}`); });
index.html
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Personen Übersicht</title> <style> table { width: 50%; border-collapse: collapse; margin-top: 20px; } th, td { border: 1px solid #999; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } </style> </head> <body> <h1>Personenliste</h1> <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Alter</th> <th>Beruf</th> </tr> </thead> <!-- Hier landen die Daten dynamisch --> <tbody id="tabellen-body"></tbody> </table> <script> // Daten vom Server abrufen fetch('/api/personen') .then(response => response.json()) // Antwort in JSON umwandeln .then(daten => { const tbody = document.getElementById('tabellen-body'); // Schleife durch alle Personen daten.forEach(person => { // Eine neue Tabellenzeile erstellen const zeile = document.createElement('tr'); // Zellen mit den Daten füllen zeile.innerHTML = ` <td>${person.id}</td> <td>${person.name}</td> <td>${person.alter}</td> <td>${person.beruf}</td> `; // Zeile an die Tabelle anhängen tbody.appendChild(zeile); }); }) .catch(error => console.error('Fehler beim Laden der Daten:', error)); </script> </body> </html>
Volkan Demir