Frontend - React használatával
Frontend: Az oldal "kinézete", adatokat vesz a backend felől, majd megjeleníti azokat.
Frontend létrehozása:
1. Frontend mappa létrehozása - parancs végzi, a gyökérkönyvtárból
npx create-react-app <appnev> - ez létrehozza a szerkezetet és a mappát is.
Ezután a cd paranccsal belemehetünk a frontend mappájába, ahol installálhatunk egyéb csomagokat is:
npm i axios - feltelepítjük az axiost, ha szükségünk van rá (portok elérése)
npm i bootstrap - ha a kívánunk bootstarpet használni.
Végül indítás:
npm start - ezzel indítjuk az alkalmazást, elindul az index.html, ami alapértelmezetten meghívja az app.js tartalmát.
Az alkalmazás belső szerkezetét az src mappában található App.js nevű fájlba alakítjuk ki. Az src mappa tárolja az egyéb eszközeinket is, valamint ide hozhatunk létre elérendő fájlokat is - pl css stíluslapot.
Egy példa az App.js belső szerkezetére, a weboldal kártyákban fogja megjeleníteni az információkat, valamint van lehetőségünk új adatok felvételére az adatbázisba:
import React, { useEffect, useState } from 'react'; (importáljuk a reactot)
import "bootstrap/dist/css/bootstrap.min.css"; (importáljuk a bootsrapet)
import './style.css'; (importáljuk a saját css fájlunkat - ha van)
export default function DolgozokPage() {
const [dolgozok, setDolgozok] = useState([]);
const [error, setError] = useState(null);
const [name, setName] = useState("");
const [email, setEmail] = useState("");
useEffect(() => {
fetchDolgozok();
}, []);
const fetchDolgozok = async () => {
try {
const response = await fetch("http://localhost:3000/api/dolgozo");
if (!response.ok) {
throw new Error("Hiba történt az adatok lekérésekor");
}
const data = await response.json();
setDolgozok(data);
} catch (err) {
setError(err.message);
}
};
const handleAddDolgozo = async () => {
if (!name || !email) return;
try {
const response = await fetch("http://localhost:3000/api/dolgozo", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name, email }),
});
if (!response.ok) {
throw new Error("Hiba történt az adat hozzáadásakor");
}
setName("");
setEmail("");
fetchDolgozok();
} catch (err) {
setError(err.message);
}
};
return (
<div className="container py-5" style={{ backgroundColor: "#FCF3CF", minHeight: "100vh" }}>
<h1 className="text-center mb-4">Dolgozók</h1>
{error && <p className="text-danger text-center">{error}</p>}
<div className="row mb-4 justify-content-center">
<div className="col-md-4">
<input
type="text"
className="form-control mb-2"
placeholder="Név"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
<div className="col-md-4">
<input
type="email"
className="form-control mb-2"
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div className="col-md-2">
<button className="btn btn-primary w-100" onClick={handleAddDolgozo}>Hozzáadás</button>
</div>
</div>
<div className="row">
{dolgozok.map((dolgozo) => (
<div key={dolgozo.id} className="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
<div className="card p-3">
<div className="card-body">
<h5 className="card-title">{dolgozo.name}</h5>
<p className="card-text">{dolgozo.email}</p>
</div>
</div>
</div>
))}
</div>
<div className="text-center mt-4">
<button className="btn btn-secondary" onClick={fetchDolgozok}>Frissítés</button>
</div>
</div>
);
}
Megjegyzések
Megjegyzés küldése