LU03.A04 - JSON-Daten lesen und schreiben mit JavaScript + HTML + CSS

1. Bestandteile eine node-Servers kennen.
2. Basis-Server ausführen können.
3. Daten anzeigen, verändern und schreiben können.

• Sozialform: individual
• Hilfsmittel: OpenBooks
• Zeit: 20 Minutes
• Erwartetes Resultat: Node-Server, der verschiedene abgefragte Daten am Monitor/Browser bearbeitet und ausgibt.

…

Die zur Verfügung gestellten Daten müssen zwingend in wie folgt im VS Studio Code abgelegt werden.

mein-projekt/
├── data.json
├── server.js
├── public/
│   └── css/
│       └── style.css
└── views/
    └── index.ejs
    

Nachfolgend finden Sie verschiedene Code-Snippets.

1. Fügen Sie diese zusammen.
2. Lassen Sie diese laufen
3. Prüfen Sie Ausgabe im Monitor/Browser

1. Erstellen Sie in Ihrem Visual Studio Code eine Ordner mit dem Titel lu03_a02
2. Gehen Sie im Terminial in diesen neuen Ordner
3. Installieren Sie alle relevanten JS-Komponenten in diesem Ordner durch die nachfolgenden zwei Codezeilen –> Es werden nun verschiedene Componenten installiert (sichtbar rechts unten im CodeEditor)

npm init -y
npm install express

Erstellen Sie ein weiteres File mit dem Titel server.js und kopieren den nachfolgenden Code rein.

const express = require('express');
const app = express();
const PORT = 3000;

// Middleware, damit Express JSON-Daten im Body lesen kann
app.use(express.json());

// Unser "Datenbank"-Ersatz
let users = ["Alice", "Bob"];

// --- DEINE AUFGABE AB HIER ---

// 1. GET ROUTE: Gib das 'users' Array zurück
app.get('/users', (req, res) => {
    // CODE HIER
});

// 2. POST ROUTE: Füge einen neuen User hinzu
app.post('/users', (req, res) => {
    const newUser = req.body.name; // Wir erwarten { "name": "DeinName" }
    
    if (newUser) {
        // CODE HIER: User zum Array hinzufügen
        res.status(201).send(`User ${newUser} wurde hinzugefügt.`);
    } else {
        res.status(400).send("Fehler: Kein Name angegeben!");
    }
});

// --- ENDE DER AUFGABE ---

app.listen(PORT, () => {
    console.log(`Server läuft auf http://localhost:${PORT}`);
});

LU03.L01

Volkan Demir