Powiązany projekt: frontend

Zadanie: Musisz stworzyć interfejs użytkownika dla backendu CRUD przy użyciu HTML, CSS, JS, jQuery. Wykonamy panel administracyjny do zarządzania kontami gier online.

1. Widelec z repozytorium: https://github.com/CodeGymCC/project-frontend.git
2. Pobierz swoją wersję projektu na swój komputer.
3. Pobierz Tomcata dla siebie: https://tomcat.apache.org/download-90.cgi .Ważny: Tomcat potrzebuje wersji 9 , a nie 10.
4. Skonfiguruj uruchamianie aplikacji przez Idea: Alt + Shift + F9 -> Edytuj konfiguracje… -> Alt + insert -> tom (w pasku wyszukiwania) -> Local.
• Następnie musisz kliknąć CONFIGUREi wskazać, gdzie archiwum z Tomcatem zostało pobrane i rozpakowane.
• W zakładce Deployment: Alt + insert -> Artefakt… -> rpg:war eksplodował -> OK.
• W polu Application context: tylko zostaw / (ukośnik).
• Naciśnij APPLY.
• Zamknij okno ustawień.
5. Uruchom aplikację. Aby to zrobić: Alt + Shift + F9 -> (nazwa konfiguracji, nazwałem ją „Aplikacja”) -> Uruchom.
6. Po wdrożeniu aplikacji w wybranej podczas konfiguracji przeglądarce otworzy się nowa karta. Świetnie, serwer jest skonfigurowany, następnie musisz pracować z dwoma plikami:
• <project_dir>/src/main/webapp/html/my.html- będą znaczniki i skrypty.
• <project_dir>/src/main/webapp/css/my.css– tutaj będą style. Wszystko o stylach zależy od Ciebie, nie ma dla nich żadnych wymagań.
7. W znaczniku ( my.html ) dodaj tabelę (nie zapomnij podać jej id), w której określisz nazwy kolumn:
• #
• Nazwa
• Tytuł
• Wyścig
• zawód
• Poziom
• urodziny
• Zakazany
8. Dodaj tag pair <script>- tutaj napiszemy funkcje.
9. Pierwsza funkcja powinna wysłać żądanie GET na adres URL "/rest/players"- pobierz listę. Wynik należy dodać do tabeli z akapitu 7 (tutaj przydał się id tabeli). Jeśli wszystko zrobiłeś poprawnie, po ponownym uruchomieniu serwera na Twojej stronie pojawi się tabela z 4 liniami. W pierwszym wierszu - nazwy kolumn, w pozostałych - dane, które przyszły z serwera.
10. Teraz pożądane jest dodanie obramowań komórek do tabeli, w przeciwnym razie informacje są ogólnie nieczytelne.
11. Przejdźmy teraz do stronicowania. Do tego potrzebujesz:
• Pod tabelą dodaj sekcję, na przykład, <div>w której będą przyciski stronicowania.
• Dodaj funkcję, która wyśle ​​do serwera żądanie GET, które zwróci całkowitą liczbę kont na serwerze. URL: "/rest/players/count".
• Dodaj listę rozwijaną dla 3-4 wartości liczbowych, ile kont ma być wyświetlanych jednocześnie. Liczby muszą zawierać się w przedziale od 3 do 20 włącznie.
• W sposobie wyświetlania listy rachunków (s. 9) dodamy wyliczenie ilości stron potrzebnych dla danej liczby rachunków na stronę, tak abyś mógł przeglądać wszystkie rachunki.
12. W funkcji pokazywania listy rachunków dodaj parametr, który będzie odpowiadał za numer strony, która ma się wyświetlić. Popraw adres URL, tak aby przekazywał wartości „pageNumber” i „pageSize” jako parametry zapytania . Teraz przy zmianie liczby na stronę w rozwijanej liście powinna wyświetlić się żądana liczba rachunków:
13. Teraz zabarwimy bieżący numer strony, w przeciwnym razie jest to niewygodne ...
14. Dodajmy jeszcze 2 kolumny do tabeli: Edytuj i Usuń. Do każdego wiersza dodajmy ikony, które będą odpowiedzialne za edycję i usuwanie każdego wpisu. Możesz użyć obrazów znajdujących się w programie <project_dir>/src/main/webapp/img/lub użyć własnych.
15. Napisz funkcję, która będzie odpowiedzialna za usunięcie konta. W tym celu wyślij żądanie DELETE do serwera pod adresem URL "/rest/players/{id}". Po kliknięciu obrazu koszyka wywołaj tę funkcję. Po rozmowie - nie zapomnij zaktualizować listy rachunków na bieżącej stronie.
• Przed usunięciem konta o id=23
• Po usunięciu konta o id=23 . Uwaga, żaden przycisk nie został wciśnięty, z wyjątkiem koszyka.
16. Teraz napisz funkcję odpowiedzialną za edycję konta. Kiedy go klikniesz, ukryjmy przycisk „Usuń” i zmieńmy obraz przycisku „Edytuj” na „Zapisz”.
17. Teraz dodajmy funkcjonalność edycji konta. Klikając przycisk „Edytuj”, oprócz zmiany obrazu, musisz udostępnić pola do edycji:
• Nazwa
• Tytuł
• Wyścig
• zawód
• Zakazany

Należy pamiętać, że wartości w polach edycyjnych muszą odpowiadać tym, które znajdują się na koncie.

18. Teraz wyślemy zmiany, klikając przycisk „Zapisz”. Aby to zrobić, należy wysłać żądanie POST na adres URL “/rest/players/{id}”i przekazać wartości wszystkich pięciu pól jako treść żądania, którą można zmienić w postaci JSON. Użyj JSON.stringify({...}); Po zmianie nie zapomnij przeładować danych na bieżącej stronie.
19. Tak więc w tej chwili wszystko powinno być zrobione z CRUD, z wyjątkiem „C” (Create). Po przyciskach stronicowania dodaj poziomą linię i tekst informujący, że możesz tutaj utworzyć nowe konto. Dodatkowo dodaj bloki tekstu i pól wejściowych dla parametrów konta:
• Nazwa - tekst, od 1 do 12 znaków.
• Tytuł - tekst, od 1 do 30 znaków.
• Rasa — lista rozwijana, zobacz API, aby uzyskać prawidłowe wartości.
• Zawód — lista rozwijana, zobacz API, aby zobaczyć prawidłowe wartości.
• Poziom to liczba od 0 do 100.
• Urodziny - data (<input type="date" ...).
• Banned to wartość logiczna.
20. Teraz dodaj przycisk, po kliknięciu którego wszystkie wprowadzone dane zostaną przesłane na serwer. Użyj żądania POST do adresu URL /rest/players. Po odpowiedzi serwera nie zapomnij wyczyścić pól wprowadzania danych i ponownie zażądać listy rachunków na bieżącej stronie.
21. Teraz możesz dodawać „piękno” poprzez style - tutaj wszystko zależy od Ciebie. Mam to tak:

Przydatne: API serwera:

Pobierz listę graczy

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 projektu . Oglądaj po zakończeniu!