Kapcsolódó projekt: frontend

Feladat: UI-t kell készítenie egy CRUD háttérrendszerhez HTML, CSS, JS, jQuery használatával. Adminisztrációs panelt készítünk az online játékfiókok kezelésére.

1. Fork az adattárból: https://github.com/CodeGymCC/project-frontend.git
2. Töltse le a projekt verzióját a számítógépére.
3. Töltse le saját magának a Tomcat-et: https://tomcat.apache.org/download-90.cgi .Fontos: A Tomcatnek 9-es verzióra van szüksége , nem 10-re.
4. Konfigurálja az alkalmazás indítását az Idea segítségével: Alt + Shift + F9 -> Konfigurációk szerkesztése… -> Alt + insert -> tom (a keresősávban) -> Local.
• Ezt követően rá kell kattintania, CONFIGUREés meg kell adnia, hogy hol töltötte le és bontotta ki a Tomcat archívumát.
• A lapon Deployment: Alt + insert -> Artifact… -> rpg:war exploded -> OK.
• A mezőben Application context: csak hagyja el / (perjel).
• Nyomja meg a gombot APPLY.
• Zárja be a beállítások ablakot.
5. Indítsa el az alkalmazást. Ehhez: Alt + Shift + F9 -> (konfig neve, elneveztem "App") -> Futtatás.
6. Az alkalmazás telepítése után egy új lap nyílik meg a konfigurálás során kiválasztott böngészőben. Remek, a szerver be van állítva, akkor két fájllal kell dolgoznia:
• <project_dir>/src/main/webapp/html/my.html- lesznek jelölések és szkriptek.
• <project_dir>/src/main/webapp/css/my.css– itt lesznek a stílusok. A stílusokkal kapcsolatban minden Önön múlik, nincs rájuk vonatkozó követelmény.
7. A jelölésben ( my.html ) adjon hozzá egy táblázatot (ne felejtsen el megadni egy azonosítót), amelyben megadhatja az oszlopok nevét:
• #
• Név
• Cím
• Verseny
• szakma
• Szint
• Születésnap
• Kitiltva
8. Adjon hozzá egy pár címkét <script>- ide fogjuk írni a függvényeket.
9. Az első függvénynek egy GET kérést kell küldenie az URL-re "/rest/players"- a lista lekérése. Az eredményt hozzá kell adni a 7. bekezdés táblázatához (itt jött jól a táblázatazonosító). Ha mindent jól csináltál, a szerver újraindítása után egy 4 soros táblázat jelenik meg az oldalon. Az első sorban - az oszlopok nevei, a többiben - a szerverről származó adatok.
10. Most kívánatos cellaszegélyeket adni a táblázathoz, különben az információ általában olvashatatlan.
11. Most térjünk át a lapozásra. Ehhez szüksége van:
• A táblázat alá adjon hozzá egy részt például, <div>amelyben lapozógombok lesznek.
• Adjon hozzá egy függvényt, amely egy GET kérést küld a szervernek, amely visszaadja a kiszolgálón lévő fiókok teljes számát. URL: "/rest/players/count".
• Adjon hozzá egy legördülő listát 3-4 számértékkel, hogy hány fiókot jelenítsen meg egyszerre. A számoknak 3 és 20 között kell lenniük.
• A számlalista megjelenítési módjában (9. o.) hozzáadjuk az oldalanként adott számú fiókhoz szükséges oldalszám számítását, így az összes számlát megtekintheti.
12. A fióklista megjelenítése funkcióban adjon hozzá egy paramétert, amely a megjelenítendő oldal számáért lesz felelős. Javítsa ki az URL-t úgy, hogy az átadja a "pageNumber" és a "pageSize" paramétereket lekérdezési paraméterként . Most, amikor módosítja az oldalankénti számot a legördülő listában, meg kell jelennie a kívánt számlaszámnak:
13. Most színezzük az aktuális oldalszámot, különben kényelmetlen...
14. Adjunk hozzá még 2 oszlopot a táblázathoz: Szerkesztés és Törlés. Minden sorhoz adjunk hozzá ikonokat, amelyek az egyes bejegyzések szerkesztéséért és törléséért felelősek. Használhatja a -ban található képeket <project_dir>/src/main/webapp/img/, vagy használhatja a sajátját.
15. Írjon egy függvényt, amely felelős egy fiók törléséért. Ehhez küldjön egy TÖRLÉS kérelmet a szervernek az URL címen "/rest/players/{id}". A kosár képére kattintva hívja meg ezt a funkciót. A hívás után ne felejtse el frissíteni a fiókok listáját az aktuális oldalon.
• A fiók törlése előtt id=23
• Az id=23 fiók törlése után . Figyelem, a kosár kivételével egyetlen gombot sem nyomtak meg.
16. Most írjon egy függvényt, amely a fiók szerkesztéséért felelős. Ha rákattint, rejtsük el a „Törlés” gombot, és változtassuk a „Szerkesztés” gomb képét „Mentés”-re.
17. Most adjunk hozzá funkciókat a fiók szerkesztéséhez. A „Szerkesztés” gombra kattintva a kép megváltoztatása mellett a mezőket is szerkeszthetővé kell tenni:
• Név
• Cím
• Verseny
• szakma
• Kitiltva

Kérjük, vegye figyelembe, hogy a szerkesztési mezőkben a fiókban szereplő értékeknek kell lenniük.

18. Most a „Mentés” gombra kattintva elküldjük a módosításokat. Ehhez el kell küldenie egy POST kérést az URL-re, “/rest/players/{id}”és mind az öt mező értékét át kell adnia a kérés törzseként, amely JSON formájában módosítható. Használja a JSON.stringify({...}); A változtatás után ne felejtse el újra betölteni az aktuális oldalon lévő adatokat.
19. Tehát jelenleg mindent a CRUD-ból kell megtenni, kivéve a „C”-t (Create). A lapozó gombok után adjon hozzá egy vízszintes vonalat és egy szöveget, amely jelzi, hogy itt hozhat létre új fiókot. Ezenkívül adjon hozzá szövegblokkokat és beviteli mezőket a fiókparaméterekhez:
• Név - szöveg, 1-12 karakter.
• Cím – szöveg, 1-30 karakter.
• Verseny – legördülő lista, az érvényes értékekért lásd az API-t.
• Szakma – legördülő lista, lásd az API-t az érvényes értékekért.
• A szint egy 0 és 100 közötti szám.
• Születésnap – dátum (<input type="date" ...).
• A Banned logikai érték.
20. Most adjon hozzá egy gombot, amelyre kattintva az összes megadott adat elküldésre kerül a szerverre. Használjon POST kérést az URL-hez /rest/players. A szerver válasza után ne felejtse el törölni az adatbeviteli mezőket, és újra lekérni a fiókok listáját az aktuális oldalon.
21. Mostantól a stílusokon keresztül hozzáadhat "szépséget" – itt minden csak rajtad múlik. Én így kaptam:

Hasznos: Szerver API:

Szerezd meg a játékoslistát

Code: 200 OK
Code: 200 OK
Content: [
 {
  “id”:[Long],
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean],
  “level”:[Integer]
 },
 …
]

public enum Race {
    HUMAN,
    DWARF,
    ELF,
    GIANT,
    ORC,
    TROLL,
    HOBBIT
}

public enum Profession {
    WARRIOR,
    ROGUE,
    SORCERER,
    CLERIC,
    PALADIN,
    NAZGUL,
    WARLOCK,
    DRUID
}

{
  “name”:[String],       --optional
  “title”:[String],     --optional
  “race”:[Race], --optional
  “profession”:[Profession], --optional
  “banned”:[Boolean]    --optional
}

Code: 200 OK
Content: {
  “id”:[Long],
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean],
  “level”:[Integer]
 }

{
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean], --optional, default=false
  “level”:[Integer]
}

Code: 200 OK
Content: {
  “id”:[Long],
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean],
  “level”:[Integer]
 },

Projektelemzés . Végzés után nézd meg!