Erstellen einer einfachen Webanwendung mit Servlets und JSP (Teil 2)

Erstellen einer einfachen Webanwendung mit Servlets und JSP (Teil 1) Erforderlicher Wissensstand zum Verständnis des Artikels: Sie haben Java Core bereits mehr oder weniger verstanden und möchten sich mit JavaEE-Technologien und Webprogrammierung befassen. Dies ist am sinnvollsten, wenn Sie sich gerade mit der Quest „Java-Sammlungen“ befassen, die Themen abdeckt, die in der Nähe des Artikels liegen.

Entitäten erstellen

Im Entities- Paket erstellen wir eine Klasse „ User“ und darin gibt es zwei private String-Variablen „ name“ und „password“ . Erstellen wir Konstruktoren (Standard und einen, der beide Werte akzeptiert), Getter/Setter, überschreiben wir für alle Fälle die Methode toString() sowie die Methoden equal() und hashCode() . Das heißt, wir werden beim Erstellen einer Klasse alles tun, was ein anständiger Java-Entwickler tut.

public class User {
    private String name;
    private String password;

    public User() {
    }

    public User(String name, String password) {
        this.name = name;
        this.password = password;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "name='" + name + '\'' +
                ", password='" + password + '\'' +
                '}';
    }

    @Override
    public boolean equals(Object o) {
        if (this == o) return true;
        if (o == null || getClass() != o.getClass()) return false;

        User user = (User) o;

        if (name != null ? !name.equals(user.name) : user.name != null) return false;
        return password != null ? password.equals(user.password) : user.password == null;

    }

    @Override
    public int hashCode() {
        int result = name != null ? name.hashCode() : 0;
        result = 31 * result + (password != null ? password.hashCode() : 0);
        return result;
    }
}

Jetzt können wir mit der Erstellung einer Benutzerliste beginnen. Wir werden Benutzer hinzufügen und von dort aus zur Anzeige bringen. Es gibt jedoch ein Problem. Wir erstellen unsere Servlet-Objekte nicht, Tomcat erledigt das für uns . Die Methoden, die wir darin überschreiben, sind ebenfalls bereits für uns definiert und wir können keinen Parameter hinzufügen. Wie können wir dann eine gemeinsame Liste erstellen, die für beide unserer Servlets sichtbar ist? Wenn wir einfach in jedem Servlet ein eigenes Listenobjekt erstellen, werden wir Benutzer zu einer Liste hinzufügen und die Liste der Benutzer, die das ListServlet- Servlet verwenden , zu einer anderen Liste anzeigen. Es stellt sich heraus, dass wir ein Objekt benötigen, das beiden Servlets gemeinsam ist. Im Allgemeinen benötigen wir ein Objekt, das allen Klassen in unserem Programm gemeinsam ist. das einzige Objekt für das gesamte Programm. Ich hoffe, Sie haben etwas über Designmuster gehört. Und vielleicht ist dies für einige der erste wirkliche Bedarf, das Singleton- Muster in ihrem Programm zu verwenden. Sie können pervers werden und einen coolen Singleton mit doppelten Überprüfungen und Synchronisierung erstellen (ja, wir haben eine Multithread-Anwendung, da Tomcat Servlets in verschiedenen Threads ausführt), aber ich werde die Option mit früher Initialisierung verwenden, da sie hier durchaus geeignet ist genug und es passt zu unseren Zwecken.

Ein Modell erstellen

Erstellen wir eine Klasse (und implementieren das Singleton- Muster darin ) im Modellpaket und nennen wir sie etwas Ungewöhnliches. Sagen wir Modell . Lassen Sie uns in unserer Klasse ein privates Benutzerlistenobjekt erstellen und zwei Methoden implementieren: eine, damit wir einen Benutzer hinzufügen können, und die zweite, um eine Liste von Zeichenfolgen (Benutzernamen) zurückzugeben. Da unser Benutzerobjekt aus einem Namen und einem Passwort besteht und wir Benutzerpasswörter nicht „offenlegen“ möchten, haben wir nur eine Liste mit Namen.

public class Model {
    private static Model instance = new Model();

    private List<User> model;

    public static Model getInstance() {
        return instance;
    }

    private Model() {
        model = new ArrayList<>();
    }

    public void add(User user) {
        model.add(user);
    }

    public List<String> list() {
        return model.stream()
                .map(User::getName)
                .collect(Collectors.toList());
    }
}

Ein wenig über MVC

Da Sie von Singleton gehört haben , haben Sie wahrscheinlich auch von einem anderen Entwurfsmuster gehört – MVC (Model-View-Controller, auf Russisch Model-View-Controller oder einfach wie auf Englisch Model-View-Controller). Sein Kern besteht darin, die Geschäftslogik von der Präsentation zu trennen. Das heißt, trennen Sie den Code, der bestimmt, was zu tun ist, von dem Code, der bestimmt, wie die Anzeige erfolgen soll. Ansicht (Ansicht oder einfach Ansichten) ist für die Form verantwortlich, in der einige Daten dargestellt werden. In unserem Fall sind Ansichten unsere JSP-Seiten. Deshalb habe ich sie in einem Ordner namens „views“ abgelegt . Das Modell sind die tatsächlichen Daten, mit denen das Programm arbeitet. In unserem Fall sind dies Benutzer (Liste der Benutzer). Nun, Controller sind das Bindeglied zwischen ihnen. Sie nehmen Daten aus dem Modell und übergeben sie an Ansichten (oder empfangen einige Daten von Tomcat, verarbeiten sie und übergeben sie an das Modell). Die Geschäftslogik (was genau das Programm tun soll) muss in ihnen beschrieben werden und nicht im Modell oder in der Ansicht. Somit macht jeder sein eigenes Ding:

• das Modell speichert Daten;
• Ansichten zeichnen eine schöne Darstellung der Daten;
• Die Datenverarbeitung erfolgt durch die Verantwortlichen.

Dadurch ist das Programm relativ einfach und wartbar und nicht ein monströser Dump des gesamten Codes in einer Klasse. MVC eignet sich nicht nur für die Webprogrammierung, sondern ist in diesem Bereich besonders häufig (fast immer) anzutreffen. In unserem Fall fungieren Servlets als Controller. Dies ist eine sehr oberflächliche und kurze Beschreibung des Musters, aber MVC ist nicht das Hauptthema dieses Artikels. Wer mehr wissen will – Google hilft! Erstellen Sie ein Formular zum Hinzufügen eines Benutzers. Fügen wir der Datei add.jsp ein Formular hinzu, das aus zwei Texteingabefeldern (eines normal, das andere ein Passwort) und einer Schaltfläche zum Senden von Daten an den Server besteht.

<form method="post">
    <label>Name:
        <input type="text" name="name"><br />
    </label>

    <label>Password:
        <input type="password" name="pass"><br />
    </label>
    <button type="submit">Submit</button>
</form>

Hier hat das Formular ein Methodenattribut mit dem Wert post . Das bedeutet, dass die Daten aus diesem Formular in Form einer POST-Anfrage an den Server gesendet werden. Das Aktionsattribut ist nicht angegeben, was bedeutet , dass die Anfrage an dieselbe Adresse gesendet wird, von der aus wir diese Seite aufgerufen haben ( /add ). Daher gibt unser Servlet, das an diese Adresse gebunden ist, beim Empfang einer GET-Anfrage dieses JSP mit dem Formular zum Hinzufügen von Benutzern zurück, und wenn es eine POST-Anfrage erhält, bedeutet dies, dass das Formular seine Daten dorthin gesendet hat (die wir aus der abrufen werden). Objekt in der Methode doPost() Es ist erwähnenswert, dass die Eingabefelder einen Namensparameter haben (für ein Feld mit einem Namen hat er den Wert name und für ein Feld mit einem Passwort den Wert pass ). Das ist ein ziemlich wichtiger Punkt. Denn um diese Daten (Name und Passwort, die eingegeben werden) aus der Anfrage (bereits im Servlet) zu erhalten, werden wir genau diese Namen und Passwörter verwenden . Aber dazu später mehr. Der Button zum Senden der Daten selbst ist wiederum als Button ausgeführt und nicht, wie sonst üblich, als Ausgabefeld. Ich weiß nicht, wie universell diese Option ist, aber sie funktioniert bei mir (Chrome-Browser).

Verarbeiten einer POST-Anfrage mit einem Servlet

Kehren wir zum AddServlet- Servlet zurück . Ich möchte Sie daran erinnern: Damit unser Servlet GET-Anfragen „abfangen“ kann, haben wir die doGet()- Methode der HttpServlet- Klasse überschrieben . Um unserem Servlet beizubringen, auch POST-Anfragen abzufangen, müssen wir außerdem die Methode doPost() überschreiben . Es erhält ähnliche Anfrage- und Antwortobjekte von Tomcat , mit denen wir arbeiten werden. Zuerst extrahieren wir aus der Anfrage den Namen und übergeben die Parameter, die das Formular gesendet hat (wenn Sie sie im Formular anders benannt haben, dann sind das die Namen, die Sie schreiben). Anschließend erstellen wir anhand der empfangenen Daten unser Benutzerobjekt. Dann holen wir uns das Modellobjekt und fügen den erstellten Benutzer zum Modell hinzu.

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    String name = req.getParameter("name");
    String password = req.getParameter("pass");
    User user = new User(name, password);
    Model model = Model.getInstance();
    model.add(user);
}

Übergeben von Daten zur Ansicht

Fahren wir mit dem ListServlet- Servlet fort . Hier wurde bereits die Methode doGet() implementiert, die die Kontrolle einfach an die Ansicht list.jsp übergibt . Wenn Sie dies noch nicht haben, machen Sie es analog mit der gleichen Methode aus dem AddServlet- Servlet . Jetzt wäre es schön, eine Liste der Benutzernamen vom Modell abzurufen und sie an die Ansicht zu übergeben, die sie empfängt und schön anzeigt. Dazu verwenden wir wieder das Request-Objekt, das wir von Tomcat erhalten haben . Wir können diesem Objekt ein Attribut hinzufügen und ihm einen Namen geben, und zwar das Objekt selbst, das wir in die Ansicht übertragen möchten . Aufgrund der Tatsache, dass wir bei der Übertragung des Ausführungsprozesses von einem Servlet zu einer Ansicht dort dieselben Anforderungs- und Antwortobjekte übergeben, die das Servlet selbst erhalten hat, können wir dann durch Hinzufügen unserer Namensliste zum Anforderungsobjekt von dieser Anforderung ausgehen Objekt in der Ansicht erstellen Sie unsere Liste der Benutzernamen und rufen Sie ab. Da wir mit der ListServlet- Klasse fertig sind , finden Sie hier den Code für die gesamte Klasse:

package app.servlets;

import app.model.Model;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

public class ListServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Model model = Model.getInstance();
        List<String> names = model.list();
        req.setAttribute("userNames", names);

        RequestDispatcher requestDispatcher = req.getRequestDispatcher("views/list.jsp");
        requestDispatcher.forward(req, resp);
    }
}

Ausführen von Java-Code in JSP-Dateien

Es ist Zeit, mit der Arbeit an der Datei list.jsp zu beginnen . Es wird nur ausgeführt, wenn das ListServlet den Ausführungsprozess hier durchläuft. Darüber hinaus haben wir in diesem Servlet bereits eine Liste von Benutzernamen aus dem Modell vorbereitet und diese hier im Anforderungsobjekt übergeben. Da wir eine Namensliste haben, können wir diese durchgehen und jeden Namen ausdrucken. Wie ich bereits sagte, können JSP-Dateien Java-Code ausführen (was sie von statischen HTML-Seiten unterscheidet). Um Code auszuführen, reicht es aus, die folgende Konstruktion an der benötigten Stelle zu platzieren:

<!-- html Code -->
<%
    // java Code
%>
<!-- html Code -->

Innerhalb dieses Konstrukts haben wir Zugriff auf mehrere Variablen:

• request ist unser Anfrageobjekt, das wir vom Servlet übergeben haben, wo es einfach req hieß ;
• responce – Antwortobjekt, aufgerufen resp im Servlet ;

• out ist ein Objekt vom Typ JspWriter (geerbt vom üblichen Writer ), mit dessen Hilfe wir etwas direkt in die HTML-Seite selbst „schreiben“ können. Der Eintrag out.println("Hello world!") ist dem Eintrag System.out.println("Hello world!") sehr ähnlich , aber verwechseln Sie die beiden nicht!
  out.println() „schreibt“ auf die HTML-Seite und System.out.println schreibt in die Systemausgabe. Wenn Sie die JSP-Methode System.out.println() innerhalb des Abschnitts mit Java-Code aufrufen , werden die Ergebnisse in der Tomcat- Konsole und nicht auf der Seite angezeigt.

Sie können hier nach anderen verfügbaren Objekten in JSP suchen . Mit dem request- Objekt können wir die Liste der Namen abrufen, die vom Servlet übergeben wurden (wir haben das entsprechende Attribut an dieses Objekt angehängt), und mit dem out- Objekt können wir diese Namen anzeigen. Machen wir das (vorerst nur in Form einer HTML-Liste):

<ul>
    <%
        List<String> names = (List<String>) request.getAttribute("userNames");

        if (names != null && !names.isEmpty()) {
            for (String s : names) {
                out.println("<li>" + s + "</li>");
            }
        }
    %>
</ul>

Wenn Sie eine Liste nur anzeigen müssen, wenn Benutzer vorhanden sind, und andernfalls eine Warnung anzeigen möchten, dass noch keine Benutzer vorhanden sind, können wir diesen Abschnitt etwas umschreiben:

<%
    List<String> names = (List<String>) request.getAttribute("userNames");

    if (names != null && !names.isEmpty()) {
        out.println("<ui>");
        for (String s : names) {
            out.println("<li>" + s + "</li>");
        }
        out.println("</ui>");
    } else out.println("<p>There are no users yet!</p>");
%>

Da wir nun Daten von Servlets an Ansichten übergeben können, können wir unser AddServlet leicht verbessern , sodass eine Benachrichtigung angezeigt wird, wenn ein Benutzer erfolgreich hinzugefügt wurde. Dazu können wir in der doPost()- Methode nach dem Hinzufügen eines neuen Benutzers zum Modell den Namen dieses Benutzers zu den Attributen des req- Objekts hinzufügen und die Kontrolle zurück an die add.jsp- Ansicht übergeben . Und darin bereits einen Abschnitt mit Java-Code erstellen, in dem geprüft wird, ob ein solches Attribut in der Anfrage vorhanden ist, und wenn ja, dann wird eine Meldung ausgegeben, die besagt, dass der Benutzer erfolgreich hinzugefügt wurde. Nach diesen Änderungen sieht der vollständige AddServlet- Servlet-Code etwa so aus:

package app.servlets;

import app.entities.User;
import app.model.Model;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class AddServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        RequestDispatcher requestDispatcher = req.getRequestDispatcher("views/add.jsp");
        requestDispatcher.forward(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String name = req.getParameter("name");
        String password = req.getParameter("pass");
        User user = new User(name, password);
        Model model = Model.getInstance();
        model.add(user);

        req.setAttribute("userName", name);
        doGet(req, resp);
    }
}

Hier legen wir am Ende der doPost()- Methode ein Attribut mit dem Namen des dem Modell hinzugefügten Benutzers fest, woraufhin wir die doGet()- Methode aufrufen , an die wir die aktuelle Anfrage und Antwort übergeben. Und die doGet()- Methode übergibt die Kontrolle bereits an die Ansicht, wo sie ein Anforderungsobjekt sendet, an das der Name des hinzugefügten Benutzers als Attribut angehängt ist. Es bleibt nur noch, add.jsp so zu korrigieren, dass eine solche Benachrichtigung angezeigt wird, wenn ein solches Attribut vorhanden ist. Die endgültige add.jsp lautet :

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Add new user</title>
    </head>

    <body>
        <div>
            <h1>Super app!</h1>
        </div>

        <div>
            <%
                if (request.getAttribute("userName") != null) {
                    out.println("<p>User '" + request.getAttribute("userName") + "' added!</p>");
                }
            %>
            <div>
                <div>
                    <h2>Add user</h2>
                </div>

                <form method="post">
                    <label>Name:
                        <input type="text" name="name"><br />
                    </label>
                    <label>Password:
                        <input type="password" name="pass"><br />
                    </label>
                    <button type="submit">Submit</button>
                </form>
            </div>
        </div>

        <div>
            <button onclick="location.href='/'">Back to main</button>
        </div>
    </body>
</html>

Der Hauptteil der Seite besteht aus:

• div-a mit Header;
• div-Container für Inhalte prüft, ob ein Attribut mit dem Benutzernamen vorhanden ist;
• div mit einem Formular zum Hinzufügen von Benutzern;
• und am Ende gibt es eine Fußzeile mit einem Button, um zur Hauptseite zurückzukehren.

Es mag den Anschein haben, dass es zu viele Divs gibt, aber wir werden sie später verwenden, wenn wir Stile hinzufügen. Die endgültige list.jsp lautet:

<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Users</title>
    </head>

    <body>
        <div>
            <h1>Super app!</h1>
        </div>

        <div>
            <div>
                <div>
                    <h2>Users</h2>
                </div>
                <%
                    List<String> names = (List<String>) request.getAttribute("userNames");

                    if (names != null && !names.isEmpty()) {
                        out.println("<ui>");
                        for (String s : names) {
                            out.println("<li>" + s + "</li>");
                        }
                        out.println("</ui>");
                    } else out.println("<p>There are no users yet!</p>");
                %>
            </div>
        </div>

        <div>
            <button onclick="location.href='/'">Back to main</button>
        </div>
    </body>
</html>

Somit verfügen wir über eine voll funktionsfähige Webanwendung, die Benutzer speichern und hinzufügen sowie eine Liste ihrer Namen anzeigen kann. Es bleibt nur noch, es zu verschönern... :)

Stile hinzufügen. Wir verwenden das W3.CSS-Framework

Im Moment funktioniert unsere Anwendung, aber absolut verrückt. Daher werden wir einen Hintergrund, Text- und Schaltflächenfarben, Stillisten hinzufügen, eine Ausrichtung vornehmen, Einzüge hinzufügen und dergleichen. Wenn Sie Stile manuell schreiben, kann das viel Zeit und Nerven kosten. Daher empfehle ich die Verwendung des CSS-Frameworks W3.CSS. Es gibt bereits vorgefertigte Klassen mit Stilen; es bleibt nur noch, die CSS-Klassen, die wir anwenden möchten, an den richtigen Stellen zu platzieren. Um sie zu unseren Seiten hinzuzufügen, werden wir zunächst eine Datei mit Stilen einbinden. Dies kann auf zwei Arten erfolgen:

1. Gehen Sie unsere Seiten durch und fügen Sie im Kopfbereich einen direkten Link zur Datei mit Stilen ein

   <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

   Diese Option eignet sich, wenn Sie über eine ständige Internetverbindung verfügen. Wenn Sie dann Ihre Seiten auf einem lokalen Server öffnen, werden die Stile aus dem Internet abgerufen.




2. Wenn Sie alle Stile lokal haben möchten und nicht auf eine Internetverbindung angewiesen sein möchten, laden Sie die Datei mit den Stilen herunter und platzieren Sie sie irgendwo im Webordner ( z. B. web/styles/w3.css ). Gehen Sie dann alle unsere Stile durch Seiten ( index.html, add.jsp, list.jsp ) und geben Sie einen Link zu dieser Datei mit Stilen im Kopfbereich ein

   <link rel="stylesheet" href="styles/w3.css">

   Gehen Sie danach einfach die Tags durch und fügen Sie die Stile hinzu, die Ihnen gefallen. Ich werde hier nicht näher darauf eingehen, sondern gleich meine fertigen Versionen meiner drei Dateien mit geordneten Stilklassen präsentieren.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Super app!</title>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    </head>

    <body class="w3-light-grey">
        <div class="w3-container w3-blue-grey w3-opacity w3-right-align">
            <h1>Super app!</h1>
        </div>

        <div class="w3-container w3-center">
            <div class="w3-bar w3-padding-large w3-padding-24">
                <button class="w3-btn w3-hover-light-blue w3-round-large" onclick="location.href='/list'">List users</button>
                <button class="w3-btn w3-hover-green w3-round-large" onclick="location.href='/add'">Add user</button>
            </div>
        </div>
    </body>
</html>

add.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Add new user</title>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    </head>

    <body class="w3-light-grey">
        <div class="w3-container w3-blue-grey w3-opacity w3-right-align">
            <h1>Super app!</h1>
        </div>

        <div class="w3-container w3-padding">
            <%
                if (request.getAttribute("userName") != null) {
                    out.println("<div class=\"w3-panel w3-green w3-display-container w3-card-4 w3-round\">\n" +
                            "   <span onclick=\"this.parentElement.style.display='none'\"\n" +
                            "   class=\"w3-button w3-margin-right w3-display-right w3-round-large w3-hover-green w3-border w3-border-green w3-hover-border-grey\">×</span>\n" +
                            "   <h5>User '" + request.getAttribute("userName") + "' added!</h5>\n" +
                            "</div>");
                }
            %>
            <div class="w3-card-4">
                <div class="w3-container w3-center w3-green">
                    <h2>Add user</h2>
                </div>
                <form method="post" class="w3-selection w3-light-grey w3-padding">
                    <label>Name:
                        <input type="text" name="name" class="w3-input w3-animate-input w3-border w3-round-large" style="width: 30%"><br />
                    </label>
                    <label>Password:
                        <input type="password" name="pass" class="w3-input w3-animate-input w3-border w3-round-large" style="width: 30%"><br />
                    </label>
                    <button type="submit" class="w3-btn w3-green w3-round-large w3-margin-bottom">Submit</button>
                </form>
            </div>
        </div>

        <div class="w3-container w3-grey w3-opacity w3-right-align w3-padding">
            <button class="w3-btn w3-round-large" onclick="location.href='/'">Back to main</button>
        </div>
    </body>
</html>

list.jsp

<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Users list</title>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    </head>

    <body class="w3-light-grey">
        <div class="w3-container w3-blue-grey w3-opacity w3-right-align">
            <h1>Super app!</h1>
        </div>

        <div class="w3-container w3-center w3-margin-bottom w3-padding">
            <div class="w3-card-4">
                <div class="w3-container w3-light-blue">
                    <h2>Users</h2>
                </div>
                <%
                    List<String> names = (List<String>) request.getAttribute("userNames");

                    if (names != null && !names.isEmpty()) {
                        out.println("<ul class=\"w3-ul\">");
                        for (String s : names) {
                            out.println("<li class=\"w3-hover-sand\">" + s + "</li>");
                        }
                        out.println("</ul>");

                    } else out.println("<div class=\"w3-panel w3-red w3-display-container w3-card-4 w3-round\">\n"
+
                            "   <span onclick=\"this.parentElement.style.display='none'\"\n" +
                            "   class=\"w3-button w3-margin-right w3-display-right w3-round-large w3-hover-red w3-border w3-border-red w3-hover-border-grey\">×</span>\n" +
                            "   <h5>There are no users yet!</h5>\n" +
                            "</div>");
                %>
            </div>
        </div>

        <div class="w3-container w3-grey w3-opacity w3-right-align w3-padding">
            <button class="w3-btn w3-round-large" onclick="location.href='/'">Back to main</button>
        </div>
    </body>
</html>

Das ist alles :) Wenn Sie noch Fragen oder Kommentare haben oder im Gegenteil etwas nicht funktioniert, hinterlassen Sie einen Kommentar. UPD: Wenn Sie Probleme mit einem 404-Fehler beim Klicken auf Schaltflächen haben, obwohl alles richtig gemacht wurde, sollten Sie vielleicht die Bereitstellungskonfiguration in der Idee korrigieren. Dazu müssen Sie zu „Konfigurationen bearbeiten“ gehen (oben neben der Startschaltfläche), zur Registerkarte „Bereitstellung“ auf der rechten Seite des Fensters gehen und sicherstellen, dass im Anwendungskontext einfach „Nun, ich“ angezeigt wird. Ich füge ein paar Screenshots von dem bei, was dabei herausgekommen ist. Und schließlich , wenn Sie mit diesem Projekt üben möchten, können Sie Folgendes versuchen:

• Erstellen Sie ein Servlet und eine JSP, um einen Benutzer zu löschen, und ein paar weitere, um einen vorhandenen Benutzer zu ändern/bearbeiten. Sie erhalten eine echte CrUD-Webanwendung :) auf Servlets));
• Ersetzen Sie die Liste (List) durch die Arbeit mit einer Datenbank, damit hinzugefügte Benutzer nach dem Neustart des Servers nicht verschwinden :)

Viel Glück!