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.
- Widelec z repozytorium: https://github.com/CodeGymCC/project-frontend.git
- Pobierz swoją wersję projektu na swój komputer.
- Pobierz Tomcata dla siebie: https://tomcat.apache.org/download-90.cgi .Ważny: Tomcat potrzebuje wersji 9 , a nie 10.
- Skonfiguruj uruchamianie aplikacji przez Idea: Alt + Shift + F9 -> Edytuj konfiguracje… -> Alt + insert -> tom (w pasku wyszukiwania) -> Local.
- Następnie musisz kliknąć
CONFIGURE
i 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ń.
- Uruchom aplikację. Aby to zrobić: Alt + Shift + F9 -> (nazwa konfiguracji, nazwałem ją „Aplikacja”) -> Uruchom.
- 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ń.- 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
- Dodaj tag pair
<script>
- tutaj napiszemy funkcje. - 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. - Teraz pożądane jest dodanie obramowań komórek do tabeli, w przeciwnym razie informacje są ogólnie nieczytelne.
- 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.
- 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:
- Teraz zabarwimy bieżący numer strony, w przeciwnym razie jest to niewygodne ...
- 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. - 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.
- Teraz napisz funkcję odpowiedzialną za edycję konta. Kiedy go klikniesz, ukryjmy przycisk „Usuń” i zmieńmy obraz przycisku „Edytuj” na „Zapisz”.
- 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
- 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. - 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.
- 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. - Teraz możesz dodawać „piękno” poprzez style - tutaj wszystko zależy od Ciebie. Mam to tak:
![](https://cdn.codegym.cc/images/article/266d093e-dbf4-427b-83ea-73cd094a00cc/800.jpeg)
![](https://cdn.codegym.cc/images/article/e433ead9-994c-46a7-aded-72b185d8c650/1024.jpeg)
![](https://cdn.codegym.cc/images/article/8a412297-fa55-4dc2-9529-008a7bf5a329/800.jpeg)
![](https://cdn.codegym.cc/images/article/1d088061-7e92-4cb4-a9ef-dae51d942fd8/512.jpeg)
![](https://cdn.codegym.cc/images/article/48950fc9-5b80-4831-a315-5b8cfb5b1e42/512.jpeg)
![](https://cdn.codegym.cc/images/article/fab909d2-403b-4637-ae20-f55310476141/512.jpeg)
![](https://cdn.codegym.cc/images/article/b625b7ba-c813-4ca8-9d4d-849c94ac54d7/512.jpeg)
![](https://cdn.codegym.cc/images/article/bcaaed65-eed3-47c3-b382-37b3aead66fe/512.jpeg)
![](https://cdn.codegym.cc/images/article/87d7b30d-1ab4-4c15-aec6-8e82c51d8210/512.jpeg)
![](https://cdn.codegym.cc/images/article/0ee7cc05-9138-4c64-a797-2986311ca594/512.jpeg)
![](https://cdn.codegym.cc/images/article/4c851ead-60f3-4555-91c1-01c3daafc13b/512.jpeg)
![](https://cdn.codegym.cc/images/article/4c851ead-60f3-4555-91c1-01c3daafc13b/512.jpeg)
Należy pamiętać, że wartości w polach edycyjnych muszą odpowiadać tym, które znajdują się na koncie.
![](https://cdn.codegym.cc/images/article/4fdbdedb-2407-4142-a6db-f08f9d9f5db7/512.jpeg)
![](https://cdn.codegym.cc/images/article/195b5b3a-8c57-4b6f-9d7c-fa63e4b684ad/512.jpeg)
![](https://cdn.codegym.cc/images/article/e2c57991-31fe-459c-912e-f5c01df4a768/512.jpeg)
![](https://cdn.codegym.cc/images/article/140a330e-db7e-4429-8075-c6b0be87073b/512.jpeg)
![](https://cdn.codegym.cc/images/article/e9b9d89f-13e2-4702-8b40-ad377530e65f/512.jpeg)
![](https://cdn.codegym.cc/images/article/422ded28-0e9d-4e7e-b08b-99df58931081/512.jpeg)
![](https://cdn.codegym.cc/images/article/7f1caded-7ada-4332-8022-03fda6d27314/512.jpeg)
Przydatne: API serwera:
Pobierz listę graczy
Adres URL | /odpoczynek/gracze |
metoda | Opcjonalnie: liczba całkowita numer strony, liczba całkowita rozmiar strony |
Parametry danych | Nic |
Odpowiedź sukcesu |
|
notatki |
pageNumber - parametr odpowiadający za numer wyświetlanej strony przy korzystaniu ze stronicowania. Numeracja zaczyna się od zera. pageSize - parametr, który odpowiada za ilość wyników na jednej stronie podczas stronicowania
|
Policz graczy
Adres URL | /odpoczynek/gracze/liczba |
metoda | DOSTAWAĆ |
Parametry adresu URL | Nic |
Parametry danych | Nic |
Odpowiedź sukcesu |
Kod : 200 OK Treść : liczba całkowita |
notatki |
Usuń gracza
Adres URL | /rest/players/{identyfikator} |
metoda | USUWAĆ |
Parametry adresu URL | ID |
Parametry danych | Nic |
Odpowiedź sukcesu | Kod : 200 OK |
notatki |
Jeśli odtwarzacz nie zostanie znaleziony, odpowiedzią jest błąd z kodem 404. Jeśli wartość id jest nieprawidłowa, odpowiedzią będzie błąd z kodem 400. |
Zaktualizuj odtwarzacz
Adres URL | /rest/players/{identyfikator} |
metoda | POST |
Parametry adresu URL | ID |
Parametry danych |
|
Odpowiedź sukcesu |
|
notatki |
Aktualizowane są tylko pola, które nie są puste. Jeśli odtwarzacz nie znajduje się w bazie danych, odpowiedzią jest błąd z kodem 404. Jeśli wartość id jest nieprawidłowa, odpowiedzią jest błąd z kodem 400. |
Stwórz gracza
Adres URL | /odpoczynek/gracze |
metoda | POST |
Parametry adresu URL | Nic |
Parametry danych |
|
Odpowiedź sukcesu |
|
notatki |
Nie możemy utworzyć gracza, jeśli:
W przypadku wszystkich powyższych odpowiedzią jest błąd z kodem 400. |
Analiza projektu . Oglądaj po zakończeniu!