Progetto correlato: frontend

Attività: è necessario creare un'interfaccia utente per un backend CRUD utilizzando HTML, CSS, JS, jQuery. Realizzeremo un pannello di amministrazione per la gestione degli account di gioco online.

1. Fork dal repository: https://github.com/CodeGymCC/project-frontend.git
2. Scarica la tua versione del progetto sul tuo computer.
3. Scarica Tomcat per te stesso: https://tomcat.apache.org/download-90.cgi .Importante: Tomcat ha bisogno della versione 9 , non 10.
4. Configura l'avvio dell'applicazione tramite Idea: Alt + Maiusc + F9 -> Modifica configurazioni… -> Alt + inserisci -> tom (nella barra di ricerca) -> Locale.
• Successivamente, è necessario fare clic CONFIGUREe indicare dove è stato scaricato e decompresso l'archivio con Tomcat.
• Nella scheda Deployment: Alt + insert -> Artefatto… -> rpg:war esploso -> OK.
• Nel campo Application context: lasciare solo / (barra).
• Premi APPLY.
• Chiudi la finestra delle impostazioni.
5. Avvia l'applicazione. Per fare questo: Alt + Maiusc + F9 -> (nome di configurazione, l'ho chiamato 'App') -> Esegui.
6. Dopo aver distribuito l'applicazione, si aprirà una nuova scheda nel browser selezionato durante la configurazione. Ottimo, il server è configurato, quindi devi lavorare con due file:
• <project_dir>/src/main/webapp/html/my.html- ci saranno markup e script.
• <project_dir>/src/main/webapp/css/my.css– qui ci saranno gli stili. Tutto ciò che riguarda gli stili dipende da te, non ci sono requisiti per loro.
7. Nel markup ( my.html ) aggiungi una tabella (non dimenticare di dargli un id) in cui specificare i nomi delle colonne:
• #
• Nome
• Titolo
• Gara
• professione
• Livello
• Compleanno
• Vietato
8. Aggiungi un tag di coppia <script>: qui scriveremo le funzioni.
9. La prima funzione dovrebbe inviare una richiesta GET all'URL "/rest/players": ottieni l'elenco. Il risultato deve essere aggiunto alla tabella del paragrafo 7 (è qui che è tornato utile l'id della tabella). Se hai fatto tutto correttamente, dopo aver riavviato il server, sulla tua pagina verrà visualizzata una tabella con 4 righe. Nella prima riga - i nomi delle colonne, nel resto - i dati provenienti dal server.
10. Ora, è desiderabile aggiungere i bordi delle celle alla tabella, altrimenti le informazioni sono generalmente illeggibili.
11. Ora passiamo al paging. Per questo hai bisogno di:
• Sotto la tabella, aggiungi una sezione, ad esempio, <div>in cui saranno presenti i pulsanti di paging.
• Aggiungi una funzione che invierà una richiesta GET al server che restituisce il numero totale di account sul server. URL: "/rest/players/count".
• Aggiungi un elenco a discesa per 3-4 valori numerici, quanti account mostrare alla volta. I numeri devono essere compresi tra 3 e 20 inclusi.
• Nel metodo di visualizzazione dell'elenco dei conti (p. 9), aggiungeremo il calcolo del numero di pagine necessarie per un dato numero di conti per pagina, in modo da poter visualizzare tutti i conti.
12. Nella funzione di mostrare l'elenco degli account, aggiungi un parametro che sarà responsabile del numero della pagina da mostrare. Correggi l'URL in modo che passi "pageNumber" e "pageSize" come parametri di ricerca . Ora, quando si modifica il numero per pagina nell'elenco a discesa, dovrebbe essere visualizzato il numero richiesto di account:
13. Ora tingiamo il numero di pagina corrente, altrimenti è scomodo ...
14. Aggiungiamo altre 2 colonne alla tabella: Modifica ed Elimina. Per ogni riga, aggiungiamo icone che saranno responsabili della modifica e dell'eliminazione di ogni voce. Puoi usare le immagini che sono in <project_dir>/src/main/webapp/img/, o usare le tue.
15. Scrivi una funzione che sarà responsabile dell'eliminazione di un account. Per fare ciò, invia una richiesta DELETE al server all'URL "/rest/players/{id}". Quando fai clic sull'immagine del carrello, chiama questa funzione. Dopo la chiamata, non dimenticare di aggiornare l'elenco degli account nella pagina corrente.
• Prima di eliminare l'account con id=23
• Dopo aver eliminato l'account con id=23 . Fai attenzione, nessun pulsante, ad eccezione del cestino, è stato premuto.
16. Ora scrivi una funzione responsabile della modifica di un account. Quando fai clic su di esso, nascondiamo il pulsante "Elimina" e cambiamo l'immagine del pulsante "Modifica" in "Salva".
17. Ora aggiungiamo funzionalità per la modifica di un account. Cliccando sul pulsante “Modifica”, oltre a modificare l'immagine, è necessario rendere modificabili i campi:
• Nome
• Titolo
• Gara
• professione
• Vietato

Tieni presente che il valore nei campi di modifica deve essere quello presente nell'account.

18. Ora invieremo le modifiche facendo clic sul pulsante "Salva". Per fare ciò, è necessario inviare una richiesta POST all'URL “/rest/players/{id}”e passare i valori di tutti e cinque i campi come corpo della richiesta, che può essere modificato sotto forma di JSON. Usa JSON.stringify({...}); Dopo la modifica, non dimenticare di ricaricare i dati nella pagina corrente.
19. Quindi, al momento dovrebbe essere fatto tutto da CRUD, ad eccezione di "C" (Crea). Dopo i pulsanti di paging, aggiungi una linea orizzontale e un testo che indichi che puoi creare un nuovo account qui. Inoltre, aggiungi blocchi di testo e campi di input per i parametri dell'account:
• Nome - testo, da 1 a 12 caratteri.
• Titolo - testo, da 1 a 30 caratteri.
• Gara: elenco a discesa, vedere API per i valori validi.
• Professione: elenco a discesa, vedere API per i valori validi.
• Il livello è un numero compreso tra 0 e 100.
• Compleanno - data (<input type="date" ...).
• Banned è un valore booleano.
20. Ora aggiungi un pulsante, al clic sul quale tutti i dati inseriti verranno inviati al server. Utilizza una richiesta POST all'URL /rest/players. Dopo la risposta del server, non dimenticare di cancellare i campi di inserimento dati e richiedere nuovamente l'elenco degli account nella pagina corrente.
21. Ora puoi aggiungere "bellezza" attraverso gli stili: tutto qui dipende da te. L'ho preso così:

Utile: API del server:

Ottieni l'elenco dei giocatori

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

Analisi del progetto . Guarda dopo il completamento!