Relaterat projekt: frontend

Uppgift: Du måste skapa ett användargränssnitt för en CRUD-backend med HTML, CSS, JS, jQuery. Vi kommer att skapa en adminpanel för att hantera onlinespelkonton.

1. Gaffel från förvaret: https://github.com/CodeGymCC/project-frontend.git
2. Ladda ner din version av projektet till din dator.
3. Ladda ner Tomcat själv: https://tomcat.apache.org/download-90.cgi .Viktig: Tomcat behöver version 9 , inte 10.
4. Konfigurera programstart via Idé: Alt + Skift + F9 -> Redigera konfigurationer... -> Alt + infoga -> tom (i sökfältet) -> Lokalt.
• Efter det måste du klicka CONFIGUREoch ange var arkivet med Tomcat laddades ner och packades upp.
• I fliken Deployment: Alt + infoga -> Artefakt... -> rpg:war exploderade -> OK.
• I fältet Application context: lämna endast / (snedstreck).
• Tryck på APPLY.
• Stäng inställningsfönstret.
5. Starta applikationen. För att göra detta: Alt + Shift + F9 -> (konfigurationsnamn, jag döpte det till 'App') -> Kör.
6. Efter att ha distribuerat programmet öppnas en ny flik i webbläsaren som valdes under konfigurationen. Bra, servern är konfigurerad, då måste du arbeta med två filer:
• <project_dir>/src/main/webapp/html/my.html– Det kommer att finnas uppmärkning och manus.
• <project_dir>/src/main/webapp/css/my.css– här kommer stilar. Allt om stilar är upp till dig, det finns inga krav på dem.
7. I markeringen ( my.html ) lägg till en tabell (glöm inte att ge den ett id) där du kan ange namnen på kolumnerna:
• #
• namn
• Titel
• Lopp
• yrke
• Nivå
• födelsedag
• Förbjudna
8. Lägg till en partagg <script>- vi kommer att skriva funktioner här.
9. Den första funktionen ska skicka en GET-förfrågan till URL-adressen "/rest/players"- hämta listan. Resultatet måste läggas till i tabellen från punkt 7 (det var här tabell-id kom till användning). Om du gjorde allt korrekt, efter att ha startat om servern, kommer en tabell med 4 rader att visas på din sida. På första raden - namnen på kolumnerna, i resten - data som kom från servern.
10. Nu är det önskvärt att lägga till cellkanter i tabellen, annars är informationen i allmänhet oläsbar.
11. Låt oss nu gå vidare till personsökning. För detta behöver du:
• Lägg till ett avsnitt under tabellen, till exempel, <div>där det kommer att finnas sökningsknappar.
• Lägg till en funktion som skickar en GET-förfrågan till servern som returnerar det totala antalet konton på servern. URL: "/rest/players/count".
• Lägg till en rullgardinslista för 3-4 numeriska värden, hur många konton som ska visas åt gången. Siffrorna måste vara mellan 3 och 20 inklusive.
• I metoden för att visa kontolistan (s. 9) lägger vi till beräkningen av antalet sidor som behövs för ett givet antal konton per sida, så att du kan se alla konton.
12. I funktionen att visa listan med konton, lägg till en parameter som kommer att ansvara för numret på sidan som ska visas. Korrigera webbadressen så att den skickar "pageNumber" och "pageSize" som frågeparametrar . Nu, när du ändrar antalet per sida i rullgardinsmenyn, bör det begärda antalet konton visas:
13. Låt oss nu tona det aktuella sidnumret, annars är det obekvämt ...
14. Låt oss lägga till ytterligare två kolumner i tabellen: Redigera och Ta bort. För varje rad, låt oss lägga till ikoner som kommer att ansvara för att redigera och ta bort varje post. Du kan antingen använda bilderna som finns i <project_dir>/src/main/webapp/img/eller använda dina egna.
15. Skriv en funktion som ska ansvara för att ta bort ett konto. För att göra detta, skicka en DELETE-begäran till servern på URL:en "/rest/players/{id}". När du klickar på varukorgsbilden, anropa denna funktion. Efter samtalet - glöm inte att uppdatera listan över konton på den aktuella sidan.
• Innan du tar bort konto med id=23
• Efter att ha raderat kontot med id=23 . Var uppmärksam, inga knappar, förutom korgen, trycktes in.
16. Skriv nu en funktion som är ansvarig för att redigera ett konto. När du klickar på den, låt oss dölja knappen "Radera" och ändra bilden av knappen "Redigera" till "Spara".
17. Låt oss nu lägga till funktionalitet för att redigera ett konto. Genom att klicka på knappen "Redigera", förutom att ändra bilden, måste du göra fälten redigerbara:
• namn
• Titel
• Lopp
• yrke
• Förbjudna

Observera att värdet i redigeringsfälten måste vara de som finns i kontot.

18. Nu skickar vi ändringarna genom att klicka på knappen "Spara". För att göra detta måste du skicka en POST-förfrågan till URL:en “/rest/players/{id}”och skicka värdena för alla fem fälten som förfrågningskroppen, vilket kan ändras i form av JSON. Använd JSON.stringify({...}); Efter ändringen, glöm inte att ladda om data på den aktuella sidan.
19. Så allt bör göras från CRUD för tillfället, förutom "C" (Skapa). Efter personsökningsknapparna lägger du till en horisontell linje och text som säger att du kan skapa ett nytt konto här. Lägg dessutom till textblock och inmatningsfält för kontoparametrar:
• Namn - text, från 1 till 12 tecken.
• Titel - text, från 1 till 30 tecken.
• Race - rullgardinslista, se API för giltiga värden.
• Yrke - rullgardinslista, se API för giltiga värden.
• Nivå är ett tal från 0 till 100.
• Födelsedag - datum (<input type="date" ...).
• Banned är ett booleskt värde.
20. Lägg nu till en knapp, på vilken all inmatad data kommer att skickas till servern. Använd en POST-begäran till URL:en /rest/players. Efter serverns svar, glöm inte att rensa datainmatningsfälten och begära en ny lista över konton på den aktuella sidan.
21. Nu kan du lägga till "skönhet" genom stilar - allt här är upp till dig. Jag fick det så här:

Användbart: Server API:

Skaffa spelarlista

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

Projektanalys . Se efter avslutad!