Pandák
A jelenlegi feladatban Backend Programozás órán elkészült backendet kell felhasználnod. Az URL ebben az esetben a laravel alkalmazás címe. Ügyelj arra, hogy /api része a linknek.
Ha nem sikerült használható backendet előállítanod, akkor ebben az esetben a mellékelt db.json-t tudod felhasználni, vagy a https://frontend.njit.ut-idb.com/pandas API-t tudod felhasználni.
JSON szerver és Axios példány elkészítése
- Állítsd be az alap urlt a megfelelő címre.
- Állítsd be a szükséges fejléceket, ahhoz, hogy a kérés
jsontípusú adatot kapjon vissza.
Útvonalak
| Útvonal neve | Komponens | Url | Paraméterek |
|---|---|---|---|
index | IndexPage | / | |
panda | PandaPage | /pandas/:id | id: A panda azonosítója |
Layoutok
Készíts egy layoutot, amely megjelenít egy sikeres típusú navigációs sávot külön komponensként létrehozva, fejlécelemben (header)
Valamint alakítsd ki a főtartalmi tárolót (main) Bootstrapes reszponzív tárolóként. Oldd meg, hogy ebben a tárolóban jelenjen meg az oldal tartalma.
Állítsd be az alkalmazás háttérszínét #e2dbac kódúra.
Oldalak
Főoldal
Főoldalon alakíts ki két sort.
Az első sor legyen 25%-os áttetszóségű sikeres hátterű, benne jelenjen meg 4 green-500-as gomb. Az első sor két gombja, név szerinti rendezést, a második sor kettő gombja kor szerinti rendezést tegyen lehetővé. Ezt egy külön komponens segítségével valósítsd meg, ügyelj az eseménykezelésre.
Kérd le a megfelelő végpontról a pandákat és jelenítsd meg őket a rendezésnek megfelően (computed,sort)
Jelenítsd meg a második sorban a pandákat kártyákon. A kártya címe a panda neve legyen, leírása, hogy hány éves a panda, valamit helyezz el egy gombot, amely átvisz az adott panda oldalára.
Panda oldal
Jelenítsd meg a Panda nevét címsorban, alatta pedig egy reszponzív táblázatban az adott panda összes adatát. A táblázathoz készíts saját komponenst.
\pagebreak