Relatert prosjekt: frontend

Oppgave: Du må lage et brukergrensesnitt for en CRUD-backend ved å bruke HTML, CSS, JS, jQuery. Vi vil lage et administrasjonspanel for å administrere online spillkontoer.

1. Fork fra depotet: https://github.com/CodeGymCC/project-frontend.git
2. Last ned din versjon av prosjektet til datamaskinen din.
3. Last ned Tomcat for deg selv: https://tomcat.apache.org/download-90.cgi .Viktig: Tomcat trenger versjon 9 , ikke 10.
4. Konfigurer applikasjonsstart via Idé: Alt + Shift + F9 -> Rediger konfigurasjoner... -> Alt + sett inn -> tom (i søkefeltet) -> Lokalt.
• Etter det må du klikke CONFIGUREog angi hvor arkivet med Tomcat ble lastet ned og pakket ut.
• I fanen Deployment: Alt + insert -> Artifact... -> rpg:war exploded -> OK.
• I feltet Application context: la bare stå / (skråstrek).
• Trykk på APPLY.
• Lukk innstillingsvinduet.
5. Start applikasjonen. For å gjøre dette: Alt + Shift + F9 -> (konfigurasjonsnavn, jeg kalte det 'App') -> Kjør.
6. Etter at applikasjonen er implementert, åpnes en ny fane i nettleseren som ble valgt under konfigurasjonen. Flott, serveren er konfigurert, da må du jobbe med to filer:
• <project_dir>/src/main/webapp/html/my.html– det blir markering og manus.
• <project_dir>/src/main/webapp/css/my.css– her vil det være stiler. Alt om stiler er opp til deg, det er ingen krav til dem.
7. I markeringen ( my.html ) legg til en tabell (ikke glem å gi den en id) der du kan spesifisere navnene på kolonnene:
• #
• Navn
• Tittel
• Løp
• yrke
• Nivå
• fødselsdag
• Utestengt
8. Legg til en par-tag <script>- vi skriver funksjoner her.
9. Den første funksjonen skal sende en GET-forespørsel til URL-en "/rest/players"- hent listen. Resultatet må legges til tabellen fra avsnitt 7 (det er her tabell-ID-en kom til nytte). Hvis du gjorde alt riktig, etter å ha startet serveren på nytt, vil en tabell med 4 linjer vises på siden din. I den første linjen - navnene på kolonnene, i resten - dataene som kom fra serveren.
10. Nå er det ønskelig å legge til cellekanter i tabellen, ellers er informasjonen generelt uleselig.
11. La oss nå gå videre til personsøking. Til dette trenger du:
• Under tabellen legger du for eksempel til en seksjon <div>der det vil være personsøkingsknapper.
• Legg til en funksjon som sender en GET-forespørsel til serveren som returnerer det totale antallet kontoer på serveren. URL: "/rest/players/count".
• Legg til en rullegardinliste for 3-4 numeriske verdier, hvor mange kontoer som skal vises om gangen. Tallene må være mellom 3 og 20 inkludert.
• I metoden for visning av kontolisten (s. 9) vil vi legge til beregningen av antall sider som trengs for et gitt antall kontoer per side, slik at du kan se alle kontoene.
12. I funksjonen for å vise listen over kontoer, legg til en parameter som vil være ansvarlig for nummeret på siden som skal vises. Korriger nettadressen slik at den sender «pageNumber» og «pageSize» som søkeparametere . Nå, når du endrer antall per side i rullegardinlisten, skal det forespurte antallet kontoer vises:
13. La oss nå tone det gjeldende sidetallet, ellers er det upraktisk ...
14. La oss legge til to kolonner til i tabellen: Rediger og Slett. For hver rad, la oss legge til ikoner som vil være ansvarlige for å redigere og slette hver oppføring. Du kan enten bruke bildene som er i <project_dir>/src/main/webapp/img/, eller bruke dine egne.
15. Skriv en funksjon som skal være ansvarlig for å slette en konto. For å gjøre dette, send en SLETT-forespørsel til serveren på URL-en "/rest/players/{id}". Når du klikker på vognbildet, kaller du denne funksjonen. Etter samtalen - ikke glem å oppdatere listen over kontoer på gjeldende side.
• Før du sletter konto med id=23
• Etter å ha slettet kontoen med id=23 . Vær oppmerksom, ingen knapper, bortsett fra kurven, ble trykket.
16. Skriv nå en funksjon som er ansvarlig for å redigere en konto. Når du klikker på den, la oss skjule "Slett"-knappen, og endre bildet av "Rediger"-knappen til "Lagre".
17. La oss nå legge til funksjonalitet for å redigere en konto. Ved å klikke på "Rediger"-knappen, i tillegg til å endre bildet, må du gjøre feltene redigerbare:
• Navn
• Tittel
• Løp
• yrke
• Utestengt

Vær oppmerksom på at verdien i redigeringsfeltene må være de som er i kontoen.

18. Nå sender vi endringene ved å klikke på "Lagre"-knappen. For å gjøre dette må du sende en POST-forespørsel til URL-en “/rest/players/{id}”og sende verdiene til alle fem feltene som forespørselsteksten, som kan endres i form av JSON. Bruk JSON.stringify({...}); Etter endringen, ikke glem å laste inn dataene på den gjeldende siden på nytt.
19. Så alt bør gjøres fra CRUD for øyeblikket, bortsett fra "C" (Opprett). Etter personsøkingsknappene legger du til en horisontal linje og tekst som sier at du kan opprette en ny konto her. I tillegg legger du til blokker med tekst og inndatafelt for kontoparametere:
• Navn - tekst, fra 1 til 12 tegn.
• Tittel - tekst, fra 1 til 30 tegn.
• Rase – rullegardinliste, se API for gyldige verdier.
• Yrke - nedtrekksliste, se API for gyldige verdier.
• Nivå er et tall fra 0 til 100.
• Fødselsdag - dato (<input type="date" ...).
• Banned er en boolsk verdi.
20. Legg nå til en knapp, ved å klikke på som alle de angitte dataene vil bli sendt til serveren. Bruk en POST-forespørsel til URL-en /rest/players. Etter serversvaret, ikke glem å fjerne datainntastingsfeltene og be om listen over kontoer på den gjeldende siden på nytt.
21. Nå kan du legge til "skjønnhet" gjennom stiler - alt her er opp til deg. Jeg fikk det slik:

Nyttig: Server API:

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

Prosjektanalyse . Se etter ferdigstillelse!