Relateret projekt: frontend

Opgave: Du skal lave en brugergrænseflade til en CRUD-backend ved hjælp af HTML, CSS, JS, jQuery. Vi laver et adminpanel til styring af online spilkonti.

1. Fork fra depotet: https://github.com/CodeGymCC/project-frontend.git
2. Download din version af projektet til din computer.
3. Download Tomcat til dig selv: https://tomcat.apache.org/download-90.cgi .Vigtig: Tomcat har brug for version 9 , ikke 10.
4. Konfigurer applikationsstart via Idé: Alt + Shift + F9 -> Rediger konfigurationer... -> Alt + indsæt -> tom (i søgelinjen) -> Lokal.
• Derefter skal du klikke CONFIGUREog angive, hvor arkivet med Tomcat blev downloadet og pakket ud.
• På fanen Deployment: Alt + indsæt -> Artefakt... -> rpg:war eksploderede -> OK.
• I feltet Application context: forlad kun / (skråstreg).
• Tryk på APPLY.
• Luk indstillingsvinduet.
5. Start applikationen. For at gøre dette: Alt + Shift + F9 -> (konfigurationsnavn, jeg kaldte det 'App') -> Kør.
6. Efter implementering af applikationen åbnes en ny fane i den browser, der blev valgt under konfigurationen. Fantastisk, serveren er konfigureret, så skal du arbejde med to filer:
• <project_dir>/src/main/webapp/html/my.html- der vil være opmærkning og scripts.
• <project_dir>/src/main/webapp/css/my.css– her vil være styles. Alt om styles er op til dig, der er ingen krav til dem.
7. I opmærkningen ( my.html ) tilføj en tabel (glem ikke at give den et id), hvori du kan angive navnene på kolonnerne:
• #
• Navn
• Titel
• Race
• erhverv
• Niveau
• fødselsdag
• Forbudt
8. Tilføj et par-tag <script>- vi skriver funktioner her.
9. Den første funktion skal sende en GET-anmodning til URL'en "/rest/players"- få listen. Resultatet skal tilføjes til tabellen fra afsnit 7 (det er her tabel-id'et kom til nytte). Hvis du gjorde alt korrekt, efter genstart af serveren, vil en tabel med 4 linjer blive vist på din side. I den første linje - navnene på kolonnerne, i resten - de data, der kom fra serveren.
10. Nu er det ønskeligt at tilføje cellekanter til tabellen, ellers er informationen generelt ulæselig.
11. Lad os nu gå videre til sidesøgning. Til dette har du brug for:
• Under tabellen tilføjer du f.eks. en sektion, <div>hvor der vil være søgeknapper.
• Tilføj en funktion, der sender en GET-anmodning til serveren, der returnerer det samlede antal konti på serveren. URL: "/rest/players/count".
• Tilføj en rulleliste for 3-4 numeriske værdier, hvor mange konti der skal vises ad gangen. Tal skal være mellem 3 og 20 inklusive.
• I metoden til visning af kontolisten (s. 9) tilføjer vi beregningen af ​​det antal sider, der skal til for et givet antal konti pr. side, så du kan se alle konti.
12. I funktionen med at vise listen over konti skal du tilføje en parameter, der vil være ansvarlig for nummeret på den side, der skal vises. Ret URL'en, så den sender "pageNumber" og "pageSize" som forespørgselsparametre . Nu, når du ændrer antallet pr. side i rullelisten, skal det anmodede antal konti vises:
13. Lad os nu tone det aktuelle sidetal, ellers er det ubelejligt ...
14. Lad os tilføje yderligere 2 kolonner til tabellen: Rediger og Slet. Lad os for hver række tilføje ikoner, der er ansvarlige for at redigere og slette hver post. Du kan enten bruge de billeder, der er i <project_dir>/src/main/webapp/img/, eller bruge dine egne.
15. Skriv en funktion, der skal være ansvarlig for at slette en konto. For at gøre dette skal du sende en DELETE-anmodning til serveren på URL'en "/rest/players/{id}". Når du klikker på vognbilledet, skal du kalde denne funktion. Efter opkaldet - glem ikke at opdatere listen over konti på den aktuelle side.
• Før du sletter konto med id=23
• Efter sletning af kontoen med id=23 . Vær opmærksom, ingen knapper, bortset fra kurven, blev trykket på.
16. Skriv nu en funktion, der er ansvarlig for at redigere en konto. Når du klikker på den, lad os skjule knappen "Slet" og ændre billedet af knappen "Rediger" til "Gem".
17. Lad os nu tilføje funktionalitet til redigering af en konto. Ved at klikke på knappen "Rediger" skal du ud over at ændre billedet gøre felterne redigerbare:
• Navn
• Titel
• Race
• erhverv
• Forbudt

Bemærk venligst, at værdien i redigeringsfelterne skal være dem, der er på kontoen.

18. Nu sender vi ændringerne ved at klikke på knappen "Gem". For at gøre dette skal du sende en POST-anmodning til URL'en “/rest/players/{id}”og sende værdierne af alle fem felter som anmodningsteksten, som kan ændres i form af JSON. Brug JSON.stringify({...}); Efter ændringen, glem ikke at genindlæse dataene på den aktuelle side.
19. Så alt skal gøres fra CRUD i øjeblikket, undtagen "C" (Opret). Efter sideknapperne skal du tilføje en vandret linje og tekst om, at du kan oprette en ny konto her. Tilføj desuden tekstblokke og inputfelter til kontoparametre:
• Navn - tekst, fra 1 til 12 tegn.
• Titel - tekst, fra 1 til 30 tegn.
• Race - rulleliste, se API for gyldige værdier.
• Profession - drop-down liste, se API for gyldige værdier.
• Niveau er et tal fra 0 til 100.
• Fødselsdag - dato (<input type="date" ...).
• Banned er en boolsk værdi.
20. Tilføj nu en knap, hvorpå alle de indtastede data vil blive sendt til serveren. Brug en POST-anmodning til URL'en /rest/players. Efter serversvaret, glem ikke at rydde dataindtastningsfelterne og anmode om listen over konti på den aktuelle side igen.
21. Nu kan du tilføje "skønhed" gennem styles - alt her er op til dig. Jeg fik det sådan her:

Nyttigt: Server API:

Hent spillerliste

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]
 },

Projektanalyse . Se efter færdiggørelse!