Verwandtes Projekt: Frontend

Aufgabe: Sie müssen eine Benutzeroberfläche für ein CRUD-Backend mit HTML, CSS, JS, jQuery erstellen. Wir werden ein Admin-Panel zur Verwaltung von Online-Spielkonten erstellen.

1. Fork aus dem Repository: https://github.com/CodeGymCC/project-frontend.git
2. Laden Sie Ihre Version des Projekts auf Ihren Computer herunter.
3. Laden Sie Tomcat selbst herunter: https://tomcat.apache.org/download-90.cgi .Wichtig: Tomcat benötigt Version 9 , nicht 10.
4. Konfigurieren Sie den Anwendungsstart über Idea: Alt + Umschalt + F9 -> Konfigurationen bearbeiten… -> Alt + Einfügen -> Tom (in der Suchleiste) -> Lokal.
• Danach müssen Sie darauf klicken CONFIGUREund angeben, wo das Archiv mit Tomcat heruntergeladen und entpackt wurde.
• Im Tab Deployment: Alt + Einfügen -> Artefakt… -> rpg:war explodiert -> OK.
• Im Feld Application context: Nur verlassen / (Schrägstrich).
• Drücken Sie APPLY.
• Schließen Sie das Einstellungsfenster.
5. Anwendung starten. Gehen Sie dazu wie folgt vor: Alt + Umschalt + F9 -> (Konfigurationsname, ich habe es „App“ genannt) -> Ausführen.
6. Nach der Bereitstellung der Anwendung wird in dem bei der Konfiguration ausgewählten Browser eine neue Registerkarte geöffnet. Super, der Server ist konfiguriert, dann müssen Sie mit zwei Dateien arbeiten:
• <project_dir>/src/main/webapp/html/my.html- Es wird Markup und Skripte geben.
• <project_dir>/src/main/webapp/css/my.css– Hier werden Stile sein. Alles über Stile liegt bei Ihnen, es gibt keine Anforderungen an sie.
7. Fügen Sie im Markup ( my.html ) eine Tabelle hinzu (vergessen Sie nicht, ihr eine ID zu geben), in der Sie die Namen der Spalten angeben:
• #
• Name
• Titel
• Wettrennen
• Beruf
• Eben
• Geburtstag
• Verboten
8. Fügen Sie ein Paar-Tag hinzu <script>– wir werden hier Funktionen schreiben.
9. Die erste Funktion sollte eine GET-Anfrage an die URL senden "/rest/players"– Liste abrufen. Das Ergebnis muss der Tabelle aus Absatz 7 hinzugefügt werden (hier hat sich die Tabellen-ID als nützlich erwiesen). Wenn Sie alles richtig gemacht haben, wird nach dem Neustart des Servers eine Tabelle mit 4 Zeilen auf Ihrer Seite angezeigt. In der ersten Zeile stehen die Namen der Spalten, im Rest die Daten, die vom Server stammen.
10. Nun ist es wünschenswert, der Tabelle Zellränder hinzuzufügen, da die Informationen sonst im Allgemeinen unlesbar sind.
11. Kommen wir nun zum Paging. Dafür benötigen Sie:
• Fügen Sie unter der Tabelle beispielsweise einen Abschnitt hinzu, <div>in dem sich Paging-Schaltflächen befinden.
• Fügen Sie eine Funktion hinzu, die eine GET-Anfrage an den Server sendet, die die Gesamtzahl der Konten auf dem Server zurückgibt. URL: "/rest/players/count".
• Fügen Sie eine Dropdown-Liste für 3–4 numerische Werte hinzu, um anzugeben, wie viele Konten gleichzeitig angezeigt werden sollen. Die Zahlen müssen zwischen 3 und 20 liegen.
• In der Methode zur Anzeige der Kontenliste (S. 9) fügen wir die Berechnung der Anzahl der Seiten hinzu, die für eine bestimmte Anzahl von Konten pro Seite benötigt werden, sodass Sie alle Konten anzeigen können.
12. Fügen Sie in der Funktion zum Anzeigen der Kontenliste einen Parameter hinzu, der für die Nummer der anzuzeigenden Seite verantwortlich ist. Korrigieren Sie die URL so, dass sie „pageNumber“ und „pageSize“ als Abfrageparameter übergibt . Wenn Sie nun die Anzahl pro Seite in der Dropdown-Liste ändern, sollte die gewünschte Anzahl an Konten angezeigt werden:
13. Lassen Sie uns nun die aktuelle Seitenzahl einfärben, sonst ist es unpraktisch ...
14. Fügen wir der Tabelle zwei weitere Spalten hinzu: Bearbeiten und Löschen. Fügen wir für jede Zeile Symbole hinzu, die für das Bearbeiten und Löschen jedes Eintrags verantwortlich sind. Sie können entweder die in enthaltenen Bilder <project_dir>/src/main/webapp/img/oder Ihre eigenen verwenden.
15. Schreiben Sie eine Funktion, die für das Löschen eines Kontos verantwortlich ist. Senden Sie dazu eine DELETE-Anfrage an den Server unter der URL "/rest/players/{id}". Rufen Sie diese Funktion auf, wenn Sie auf das Warenkorbbild klicken. Vergessen Sie nach dem Anruf nicht, die Kontoliste auf der aktuellen Seite zu aktualisieren.
• Vor dem Löschen des Kontos mit der ID=23
• Nach dem Löschen des Kontos mit id=23 . Achtung, außer dem Korb wurden keine Knöpfe gedrückt.
16. Schreiben Sie nun eine Funktion, die für die Bearbeitung eines Kontos zuständig ist. Wenn Sie darauf klicken, blenden wir die Schaltfläche „Löschen“ aus und ändern das Bild der Schaltfläche „Bearbeiten“ in „Speichern“.
17. Fügen wir nun Funktionen zum Bearbeiten eines Kontos hinzu. Durch Klicken auf die Schaltfläche „Bearbeiten“ müssen Sie neben der Änderung des Bildes auch die Felder editierbar machen:
• Name
• Titel
• Wettrennen
• Beruf
• Verboten

Bitte beachten Sie, dass der Wert in den Bearbeitungsfeldern mit denen im Konto übereinstimmen muss.

18. Nun senden wir die Änderungen durch Klicken auf die Schaltfläche „Speichern“. Dazu müssen Sie eine POST-Anfrage an die URL senden “/rest/players/{id}”und die Werte aller fünf Felder als Anfragetext übergeben, der in Form von JSON geändert werden kann. Verwenden Sie JSON.stringify({...}); Vergessen Sie nach der Änderung nicht, die Daten auf der aktuellen Seite neu zu laden.
19. Daher sollte im Moment alles über CRUD erledigt werden, außer „C“ (Erstellen). Fügen Sie nach den Paging-Schaltflächen eine horizontale Linie und einen Text hinzu, der besagt, dass Sie hier ein neues Konto erstellen können. Fügen Sie außerdem Textblöcke und Eingabefelder für Kontoparameter hinzu:
• Name – Text mit 1 bis 12 Zeichen.
• Titel – Text mit 1 bis 30 Zeichen.
• Rasse – Dropdown-Liste, gültige Werte finden Sie in der API.
• Beruf – Dropdown-Liste, gültige Werte finden Sie in der API.
• Level ist eine Zahl von 0 bis 100.
• Geburtstag – Datum (<input type="date" ...).
• Banned ist ein boolescher Wert.
20. Fügen Sie nun einen Button hinzu, bei dessen Klick alle eingegebenen Daten an den Server gesendet werden. Verwenden Sie eine POST-Anfrage an die URL /rest/players. Vergessen Sie nach der Serverantwort nicht, die Dateneingabefelder zu löschen und die Liste der Konten auf der aktuellen Seite erneut anzufordern.
21. Jetzt können Sie durch Stile „Schönheit“ hinzufügen – hier liegt alles bei Ihnen. Ich habe es so hinbekommen:

Nützlich: Server-API:

Spielerliste abrufen

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

Projektanalyse . Nach Fertigstellung ansehen!