2024. szeptember 24., kedd

Express használata

// Az Express.js keretrendszer betöltése

const express = require('express');

// A body-parser csomag betöltése, amely segít a bejövő adatok feldolgozásában

const bodyParser = require('body-parser');

// Egy Express alkalmazás példányának létrehozása

const app = express();

// A port, amelyen a szerver futni fog

const PORT = 3000;

 

// Middleware beállítása a POST kérések feldolgozásához JSON formátumban

app.use(bodyParser.urlencoded({ extended: true }));

app.use(bodyParser.json());

 

// Egyszerű adatbázis (tömb) a felhasználók tárolására

let users = [];

 

// GET kérés: A főoldal és a felhasználói űrlap megjelenítése

app.get('/', (req, res) => {

    res.send(`

        <h1>Felhasználó regisztráció</h1>

        <form id="registrationForm" action="/user" method="POST">

            <label for="email">Email:</label>

            <input type="email" id="email" name="email" required><br><br>

            <label for="name">Név:</label>

            <input type="text" id="name" name="name" required><br><br>

            <button type="submit">Küldés</button>

        </form>

        <br>

        <a href="/users">Felhasználók listája</a>

        <script>

            // Az űrlap elküldésének eseménykezelője

            document.getElementById('registrationForm').addEventListener('submit', function(event) {

                event.preventDefault(); // Megakadályozza az alapértelmezett űrlap küldést

 

                fetch(this.action, {

                    method: this.method,

                    body: new URLSearchParams(new FormData(this)).toString(),

                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }

                })

                .then(response => response.json())

                .then(data => {

                    if (data.message === 'Felhasználó sikeresen hozzáadva!') {

                        // Sikeres felhasználó hozzáadás esetén átirányít a felhasználók listájára

                        window.location.href = '/users';

                    } else {

                        // Hibaüzenet megjelenítése

                        alert(data.message);

                    }

                })

                .catch(error => {

                    // Hiba kezelés

                    console.error('Hiba a kérés során:', error);

                });

            });

        </script>

    `);

});

 

// POST kérés: Új felhasználó hozzáadása

app.post('/user', (req, res) => {

    const { email, name } = req.body;

 

    // Ellenőrizzük, hogy létezik-e már a felhasználó

    const existingUser = users.find(user => user.email === email);

    if (existingUser) {

        return res.status(400).json({ message: 'A felhasználó már létezik!' });

    }

 

    // Új felhasználó hozzáadása az adatbázishoz

    users.push({ email, name });

    res.status(201).json({ message: 'Felhasználó sikeresen hozzáadva!', users });

});

 

// GET kérés: A felhasználók listájának megjelenítése törlés gombbal

app.get('/users', (req, res) => {

    let userListHTML = `

        <h1>Felhasználók listája</h1>

        <ul>

    `;

 

    // A felhasználók listájának összeállítása HTML formátumban

    users.forEach(user => {

        userListHTML += `

            <li>

                ${user.name} (${user.email})

                <button onclick="deleteUser('${user.email}')">Törlés</button>

            </li>

        `;

    });

 

    userListHTML += `

        </ul>

        <br>

        <a href="/">Vissza a főoldalra</a>

        <script>

            // A felhasználó törlésére szolgáló funkció

            function deleteUser(email) {

                fetch(\`/user?email=\${email}\`, {

                    method: 'DELETE'

                })

                .then(response => response.json())

                .then(data => {

                    alert(data.message);

                    window.location.reload(); // Az oldal újratöltése a frissített lista megjelenítéséhez

                })

                .catch(error => {

                    // Hiba kezelés

                    console.error('Hiba a törlés során:', error);

                });

            }

        </script>

    `;

 

    res.send(userListHTML);

});

 

// PUT kérés: Létező felhasználó adatainak frissítése

app.put('/user', (req, res) => {

    const { email, name } = req.body;

 

    // Az adott email alapján keresünk a felhasználók között

    const userIndex = users.findIndex(user => user.email === email);

    if (userIndex === -1) {

        return res.status(404).json({ message: 'Felhasználó nem található!' });

    }

 

    // A felhasználó nevének frissítése

    users[userIndex].name = name;

    res.json({ message: 'Felhasználó sikeresen frissítve!', users });

});

 

// DELETE kérés: Felhasználó törlése email alapján query paraméterrel

app.delete('/user', (req, res) => {

    const email = req.query.email;

 

    // Az email alapján keresünk a felhasználók között

    const userIndex = users.findIndex(user => user.email === email);

    if (userIndex === -1) {

        return res.status(404).json({ message: 'Felhasználó nem található!' });

    }

 

    // A felhasználó eltávolítása az adatbázisból

    users.splice(userIndex, 1);

    res.json({ message: 'Felhasználó törölve!', users });

});

 

// A szerver indítása a megadott porton

app.listen(PORT, () => {

    console.log(`Szerver fut a következő porton: http://localhost:${PORT}`);

});

Nincsenek megjegyzések:

Megjegyzés küldése

Tanfolyami jelentkezés – HTML űrlap készítése, adatok feldolgozása PHP-val, validációval és formázással

  HTML űrlap (jelentkezes.html) Készíts egy HTML oldalt, amely egy tanfolyamra történő jelentkezési űrlapot jelenít meg. Az űrlap legyen ...