Proiect înrudit: frontend

Sarcină: trebuie să creați o interfață de utilizare pentru un backend CRUD folosind HTML, CSS, JS, jQuery. Vom realiza un panou de administrare pentru gestionarea conturilor de joc online.

1. Furcă din depozit: https://github.com/CodeGymCC/project-frontend.git
2. Descărcați versiunea dvs. a proiectului pe computer.
3. Descărcați Tomcat pentru dvs.: https://tomcat.apache.org/download-90.cgi .Important: Tomcat are nevoie de versiunea 9 , nu de 10.
4. Configurați lansarea aplicației prin Idea: Alt + Shift + F9 -> Editați configurații... -> Alt + insert -> tom (în bara de căutare) -> Local.
• După aceea, trebuie să faceți clic CONFIGUREși să indicați unde a fost descărcată și dezambalată arhiva cu Tomcat.
• În fila Deployment: Alt + inserare -> Artefact... -> rpg:war exploded -> OK.
• În câmp Application context: lăsați numai / (bară oblică).
• Apăsați APPLY.
• Închideți fereastra de setări.
5. Lansați aplicația. Pentru a face acest lucru: Alt + Shift + F9 -> (nume de configurare, l-am numit „Aplicație”) -> Run.
6. După implementarea aplicației, se va deschide o nouă filă în browserul selectat în timpul configurării. Grozav, serverul este configurat, atunci trebuie să lucrați cu două fișiere:
• <project_dir>/src/main/webapp/html/my.html- vor exista markup și scripturi.
• <project_dir>/src/main/webapp/css/my.css– aici vor fi stiluri. Totul despre stiluri depinde de tine, nu există cerințe pentru ele.
7. În markup ( my.html ) adăugați un tabel (nu uitați să îi dați un id) în care să specificați numele coloanelor:
• #
• Nume
• Titlu
• Rasă
• profesie
• Nivel
• zi de nastere
• Interzis
8. Adăugați o etichetă de pereche <script>- vom scrie funcții aici.
9. Prima funcție ar trebui să trimită o solicitare GET la adresa URL "/rest/players"- obțineți lista. Rezultatul trebuie adăugat la tabelul de la paragraful 7 (aici a fost util ID-ul tabelului). Dacă ai făcut totul corect, după repornirea serverului, pe pagina ta va fi afișat un tabel cu 4 rânduri. În prima linie - numele coloanelor, în rest - datele care au venit de la server.
10. Acum, este de dorit să adăugați margini de celule la tabel, altfel informațiile sunt în general ilizibile.
11. Acum să trecem la paginare. Pentru asta ai nevoie de:
• Sub tabel, adăugați o secțiune, de exemplu, <div>în care vor exista butoane de paginare.
• Adăugați o funcție care va trimite o solicitare GET către server care returnează numărul total de conturi de pe server. URL: "/rest/players/count".
• Adăugați o listă derulantă pentru 3-4 valori numerice, câte conturi să afișați simultan. Numerele trebuie să fie între 3 și 20 inclusiv.
• În metoda de afișare a listei de conturi (p. 9), vom adăuga calculul numărului de pagini care sunt necesare pentru un anumit număr de conturi pe pagină, astfel încât să puteți vizualiza toate conturile.
12. În funcția de afișare a listei de conturi, adăugați un parametru care va fi responsabil pentru numărul paginii care va fi afișată. Corectați adresa URL astfel încât să treacă „pageNumber” și „pageSize” ca parametri de interogare . Acum, când schimbați numărul pe pagină din lista derulantă, ar trebui să fie afișat numărul de conturi solicitat:
13. Acum să nuanțăm numărul actual al paginii, altfel este incomod...
14. Să adăugăm încă 2 coloane la tabel: Editare și Ștergere. Pentru fiecare rând, să adăugăm pictograme care vor fi responsabile pentru editarea și ștergerea fiecărei intrări. Puteți folosi fie imaginile din <project_dir>/src/main/webapp/img/, fie să le folosiți pe ale dvs.
15. Scrieți o funcție care va fi responsabilă pentru ștergerea unui cont. Pentru a face acest lucru, trimiteți o solicitare DELETE către server la adresa URL "/rest/players/{id}". Când faceți clic pe imaginea coșului, apelați această funcție. După apel - nu uitați să actualizați lista de conturi de pe pagina curentă.
• Înainte de a șterge contul cu id=23
• După ștergerea contului cu id=23 . Atenție, niciun buton, cu excepția coșului, nu a fost apăsat.
16. Acum scrieți o funcție care este responsabilă pentru editarea unui cont. Când faceți clic pe el, să ascundem butonul „Ștergere” și să schimbăm imaginea butonului „Editare” în „Salvare”.
17. Acum să adăugăm funcționalități pentru editarea unui cont. Făcând clic pe butonul „Editați”, pe lângă schimbarea imaginii, trebuie să faceți câmpurile editabile:
• Nume
• Titlu
• Rasă
• profesie
• Interzis

Vă rugăm să rețineți că valoarea din câmpurile de editare trebuie să fie cea care se află în cont.

18. Acum vom trimite modificările făcând clic pe butonul „Salvare”. Pentru a face acest lucru, trebuie să trimiteți o solicitare POST la adresa URL “/rest/players/{id}”și să transmiteți valorile tuturor celor cinci câmpuri ca corp de solicitare, care poate fi schimbată sub formă de JSON. Utilizați JSON.stringify({...}); După modificare, nu uitați să reîncărcați datele de pe pagina curentă.
19. Deci, totul ar trebui făcut din CRUD în acest moment, cu excepția „C” (Creare). După butoanele de paginare, adăugați o linie orizontală și un text care menționează că puteți crea un cont nou aici. În plus, adăugați blocuri de text și câmpuri de intrare pentru parametrii contului:
• Nume - text, de la 1 la 12 caractere.
• Titlu - text, de la 1 la 30 de caractere.
• Cursa - listă derulantă, consultați API pentru valori valide.
• Profesie - listă derulantă, consultați API pentru valori valide.
• Nivelul este un număr de la 0 la 100.
• Ziua de naștere - data (<input type="date" ...).
• Banned este o valoare booleană.
20. Acum adăugați un buton, la clic pe care toate datele introduse vor fi trimise către server. Utilizați o solicitare POST la adresa URL /rest/players. După răspunsul serverului, nu uitați să ștergeți câmpurile de introducere a datelor și să solicitați din nou lista de conturi de pe pagina curentă.
21. Acum poți adăuga „frumusețe” prin stiluri - totul aici depinde de tine. am prins asa:

Util: Server API:

Obțineți lista de jucători

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

Analiza proiectului . Urmăriți după finalizare!