Közösségi háló

A következő feladatban egy közösségi hálózat alap szolgáltatását kell megvalósítanod.

A feladatot kidolgozta és Figma tervet készítette: Holló Krisztián

Feladat szövege: Ignácz Dominik Bence

Minta

A feladat megoldása során ezt a Figma tervet tudod felhasználni mintaként.

Vite

Készíts webalkalmazást az npm init njit-basic-vue@latest . parancs segítségével. A kapott NavBar.vue fájlt másold be az alábbi mappaszerkezetnek megfelelő helyen.

Mappaszerkezet

.
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   │   ├── BaseCards.vue
│   │   ├── BaseForm.vue
│   │   └── layout
│   │       └── NavBar.vue
│   ├── main.js
│   └── utils
│       └── http.js
└── vite.config.js

JSON szerver és Axios példány elkészítése

1. A forrásban adott db.json fájlból készíts JSON szervert.
2. Készíts egy http.js modult az utils könyvtárban. A modul tartalmazza az újonann elkészített axios példányt.
3. Állítsd be az alap urlt http://jsonserver.vm1.test:8888-ra.

Komponensek létrehozása

BaseForm

Készíts egy BaseForm.vue componenst a components könyvtárban.

A komponens tartalmazon egy űrlapot a minta alapján elrendezve.

A BaseForm tartalmazzon egy objektumot állapotként, amely tulajdonságai össze vannak kötve a beviteli mezőkkel.

Jelezzük a szülő felé, hogy lesz egy esemény amely létrehozza az új posztot. A Posztolom gomb megnyomására váltsd ki az előbbi eseményt, és add át paraméterként az állapoként tárolt objektumot.

BaseCard

Készíts egy BaseCard.vue componenst a components könyvtárban.

A komponens egy kártyát valósítson meg a minta alapján.

A szülőtől vegye át azt az objektumot amelyben a kártyára irandó adatok találhatóak.

Valamint jelezd a szülő felé, hogy lesz egy törlés eredményező eseményed. A Törlés gomb hatására váltsd ki ezt az eseményt és paraméterként add át a poszt azonosítóját.

Gyökér komponens

Az előbb elkészült komponenseket importáld be és helyezd fel őket.

Ezt követően készíts egy állapotot amely a poszok tömbjét fogja tartalmazni.

Készíts 3 aszinkron függvényt, amely segítségével le tudod kérni a posztokat, létre tudsz hozni új posztot és törölni tudsz egyet. Ügyelj rá, hogy a létrehozás és törlés vegye át a szükséges paramétereket.

A függvények és állapotok felvétele után oldd meg, hogy a felhelyezett komponensek is ezt használják.

A függvények az előbbi axios példányt használják fel és a posts végpontot.

A mounted életesemény hívja meg a lekérő függvényt.

\pagebreak