CodeGym /Java-Blog /Random-DE /Erstellen einer einfachen Webanwendung mit Servlets und J...

Level 41

San Francisco

21 Juli 2023
284 views
0 comments

Erstellen einer einfachen Webanwendung mit Servlets und JSPs (Teil 1)

Zum Verständnis des Artikels erforderliche Kenntnisse: Sie haben Java Core bereits mehr oder weniger verstanden und möchten sich mit JavaEE-Technologien und Webprogrammierung befassen . Für Sie wäre es am sinnvollsten, sich derzeit mit der Quest „Java-Sammlungen“ zu befassen , die sich mit Themen befasst, die in der Nähe des Artikels stehen.

Dieses Material ist die logische Fortsetzung meines Artikels „ Erstellen des einfachsten Webprojekts in IntelliJ Idea Enterprise“ . In diesem Artikel habe ich gezeigt, wie man eine funktionierende Webprojektvorlage erstellt. Dieses Mal zeige ich Ihnen, wie Sie mit der Java Servlet API und der JavaServer Pages API eine einfache, aber absolut attraktive Webanwendung erstellen . Unsere Anwendung wird eine Homepage mit zwei Links haben:

ein Link zu einer Seite zum Hinzufügen von Benutzern;
ein Link zur Benutzerliste.

Wie zuvor werde ich IntelliJ Idea Enterprise Edition , Apache Maven (wir verbinden nur einige Abhängigkeiten) und Apache Tomcat verwenden . Am Ende werden wir unsere Anwendung mit dem W3.CSS- Framework „verschönern“. Wir gehen davon aus, dass Sie bereits ein leeres Projekt haben, das wir nun hinzufügen. Wenn nicht, gehen Sie den ersten Artikel durch und erstellen Sie einen. Es dauert nur ein paar Minuten :)

Ein wenig über die Struktur unserer zukünftigen Anwendung

Unsere Homepage (/) wird eine gewöhnliche statische HTML- Seite mit einer Kopfzeile und zwei Links/Schaltflächen sein:

einen neuen Benutzer hinzufügen (navigiert zu / add );
Sehen Sie sich die Liste der Benutzer an (navigiert zu / list ).

Tomcat fängt Anfragen für diese Adressen ab und sendet sie an eines der beiden Servlets, die wir erstellen werden (wir geben die Zuordnung in web.xml an ). Die Servlets verarbeiten dann die Anforderungen, bereiten Daten vor (oder speichern Daten, wenn wir einen Benutzer hinzufügen) und übertragen die Kontrolle an die entsprechenden JSP-Dateien , die dann das Ergebnis „rendern“. Wir speichern die Daten in einer einfachen Liste (Liste).

Erstellen Sie eine statische Homepage

Wenn Sie index.jsp in Ihrem Webordner haben, löschen Sie es. Erstellen Sie stattdessen eine einfache HTML-Datei namens index.html in diesem Ordner:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My super project!</title>
</head>
<body>
    <!-- header -->
    <div>
        <h1>Super app!<//h1>
    </div>

    <div>       <!-- content -->
        <div>    <!-- button holder -->
            <button onclick="location.href='/list'">List users<//button>
            <button onclick="location.href='/add'">Add user<//button>
        </div>
    </div>
</body>
</html>

Hier gibt es nichts Kompliziertes. Im Title- Tag geben wir den Titel unserer Seite an. Im Seitentext haben wir zwei Haupt-Divs: header und content . Die Inhaltsabteilung enthält einen Halter für unsere Schaltflächen. Und dort haben wir zwei Buttons, die Sie mit einem Klick zur entsprechenden Adresse führen. Sie können das Projekt ausführen und sehen, wie es jetzt aussieht. Wenn Sie auf die Schaltflächen klicken, werden 404-Fehlerseiten angezeigt, da uns die entsprechenden Seiten noch nicht existieren. Aber wir können erkennen, dass die Tasten funktionieren. Beachten Sie, dass dies nicht der universellste Ansatz ist: Wenn JavaScript im Browser deaktiviert ist, funktionieren diese Schaltflächen nicht. Wir gehen jedoch davon aus, dass niemand JavaScript deaktiviert. :) Natürlich könnte man mit einfachen Links auskommen, aber ich bevorzuge Schaltflächen. Sie können es tun, wie Sie möchten. Und machen Sie sich keine Sorgen darüber, dass meine Beispiele viele divs enthalten werden . Wir werden sie später mit Stilen füllen und alles wird schöner aussehen. :) :)

Erstellen Sie JSP-Dateien, um das Ergebnis darzustellen

Erstellen Sie im selben Webverzeichnis einen Ordner, in dem wir unsere JSP-Dateien hinzufügen . Ich habe es „ Ansichten “ genannt, aber auch hier kann man improvisieren. In diesem Ordner erstellen wir zwei JSP-Dateien:

add.jsp – eine Seite zum Hinzufügen von Benutzern;
list.jsp – Seite zur Anzeige der Benutzerliste.

Ordnen Sie ihnen entsprechende Seitenüberschriften zu. Etwas wie „ Neuen Benutzer hinzufügen “ und „ Benutzerliste “, und wir belassen es dabei.

Erstellen Sie zwei Servlets

Servlets empfangen und verarbeiten die Anfragen, die Tomcat ihnen sendet. Erstellen Sie im Ordner src/main/java das App- Paket, in dem wir unseren Quellcode ablegen. Dorthin gehen auch andere Pakete. Um zu verhindern, dass diese Pakete ineinander erstellt werden, erstellen wir eine Klasse im App- Paket (wir löschen sie später). Erstellen Sie nun drei verschiedene Pakete im App- Paket:

Entitäten – unsere Entitäten (die Klasse, die Benutzerobjekte beschreibt) gehen hierher;
Modell – hierhin geht unser Modell (wir werden etwas später darüber sprechen);
Servlets – und hier kommen unsere Servlets hin.

Sobald Sie dies getan haben, können Sie diese Klasse problemlos aus dem App- Paket löschen (natürlich nur, wenn Sie sie erstellt haben). Erstellen Sie im Servlets- Paket zwei Klassen:

AddServlet – verarbeitet Anfragen, die an / add gesendet werden ;
ListServlet – verarbeitet Anfragen, die an / list gesendet werden .

Abhängigkeiten in Maven verbinden

Tomcat 9. * implementiert die Spezifikationen für Servlet 4.0 und JavaServer Pages 2.3 . Das steht in der zweiten Zeile des ersten Absatzes der offiziellen Dokumentation von Tomcat 9. Das heißt, wenn Sie, wie ich, diese Version von Tomcat verwenden , wird der Code, den Sie schreiben und ausführen, diese Versionen verwenden. Aber wir möchten diese Spezifikationen in unserem Projekt haben, damit unser Code, der sie verwendet, zumindest erfolgreich kompiliert werden kann. Und dazu müssen wir sie in unser Projekt laden. Hier kommt Maven zur Rettung.

Die allgemeine Regel lautet: Wenn Sie mithilfe von Maven etwas mit Ihrem Projekt verbinden müssen:

Gehen Sie von Maven zur Repository-Website.
Suchen Sie nach der erforderlichen Version der erforderlichen Bibliothek.
Holen Sie sich den Abhängigkeitscode, der in Ihre pom.xml eingefügt werden muss;
Paste! :) :)

Lass uns anfangen. Bereiten Sie zunächst die POM-Datei vor . Fügen Sie irgendwo nach dem /version- Eintrag, aber vor /project Folgendes ein:


<dependencies>

</dependencies>

Wir tun dies, um anzuzeigen, dass wir die erforderlichen Abhängigkeiten innerhalb dieser Tags auflisten. Gehen Sie nun zu mvnrepository.com . Oben befindet sich ein Suchfeld. Suchen Sie zunächst nach „ Servlet “. Das erste Ergebnis, das mehr als siebentausend Mal verwendet wurde, passt zu uns. Denken Sie daran, wir benötigen Version 4.0 (für Tomcat 9). Für ältere Implementierungen können andere Versionen geeignet sein. Da es sich hierbei um eine recht aktuelle Version handelt, gibt es nicht so viele Einsatzmöglichkeiten. Aber wir brauchen es. Es öffnet sich eine Seite, auf der Sie den Code für diese Abhängigkeit für verschiedene Paketmanager erhalten oder ihn einfach herunterladen können. Da wir es jedoch über Maven verbinden möchten, wählen wir den Code auf der Registerkarte „Maven“ aus. Wir kopieren und fügen es in den Abhängigkeitsabschnitt unserer POM-Datei ein. Wenn Sie in der unteren rechten Ecke von IDEA eine Benachrichtigung erhalten, in der Sie gefragt werden, ob Sie den automatischen Import aktivieren möchten, stimmen Sie dieser zu. Wenn Sie versehentlich abgelehnt haben, gehen Sie zu „ Einstellungen “ und aktivieren Sie den automatischen Import manuell: Einstellungen (Strg + Alt + S) -> Build, Ausführung, Bereitstellung -> Maven -> Importieren .und die IDEA-Konfigurationsdateien für dieses Projekt synchron. Nach dem gleichen Prinzip suchen und verbinden wir JavaServer Pages 2.3 (suchen Sie nach „JSP“). Und da wir Maven bereits gestartet haben, sagen wir ihm einfach, dass unsere Quelldateien der Java 8-Syntax folgen und dass wir sie für diese Version in Bytecode kompilieren müssen. Nach all diesen Schritten wird unsere pom.xml etwa so aussehen:


<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>cc.codegym.info.fatfaggy</groupId>
    <artifactId>my-super-project</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compile.source>1.8</maven.compile.source>
        <maven.compile.target>1.8</maven.compile.target>
    </properties>

    <dependencies>
        <!-- Servlet API 4.0 for tomcat 9 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.0</version>
            <scope>provided</scope>
        </dependency>

        <!-- JavaServer Pages API 2.3 for tomcat 9 -->
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>javax.servlet.jsp-api</artifactId>
            <version>2.3.1</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>

</project>

Machen Sie aus unseren Servlets echte Servlets

Im Moment handelt es sich bei dem von uns erstellten Servlet-Paar eigentlich um gewöhnliche Klassen. Sie haben keine Funktionalität. Aber jetzt haben wir die Servlet-API mit unserem Projekt verbunden und können dementsprechend ihre Klassen verwenden. Um unsere Servlets „echt“ zu machen, müssen wir sie lediglich dazu bringen, die HttpServlet- Klasse zu erben.

Mapping oder Markup

Jetzt wäre es schön, Tomcat irgendwie mitzuteilen , dass Anfragen für die / add- Adresse von unserem AddServlet verarbeitet werden und Anfragen für die / list- Adresse vom ListServlet verarbeitet werden . Dieser Vorgang wird Mapping (Markup) genannt. Dies erfolgt in web.xml nach dem gleichen Prinzip:

Beschreiben Sie zunächst das Servlet (geben Sie einen Namen an und geben Sie den Pfad zur Klasse selbst an).
Binden Sie dann dieses Servlet an eine bestimmte Adresse (geben Sie den Namen des Servlets an, den wir ihm gerade gegeben haben, und geben Sie die Adresse an, deren Anfragen an dieses Servlet gesendet werden sollen).

Beschreiben Sie das Servlet:


<servlet>
    <servlet-name>add</servlet-name>
    <servlet-class>app.servlets.AddServlet</servlet-class>
</servlet>

Binden Sie es nun an die Adresse:


<servlet-mapping>
    <servlet-name>add</servlet-name>
    <url-pattern>/add</url-pattern>
</servlet-mapping>

Wie Sie sehen, ist der Servlet-Name in beiden Fällen derselbe. Dadurch weiß Tomcat , dass, wenn eine Anfrage für /add empfangen wird, diese an app.servlets.AddServlet gesendet werden muss. Das Gleiche machen wir mit dem zweiten Servlet. Am Ende hat unsere web.xml ungefähr folgenden Inhalt:


<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

    <!-- add servlet -->
    <servlet>
        <servlet-name>add</servlet-name>
        <servlet-class>app.servlets.AddServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>add</servlet-name>
        <url-pattern>/add</url-pattern>
    </servlet-mapping>

    <!-- list servlet -->
    <servlet>
        <servlet-name>list</servlet-name>
        <servlet-class>app.servlets.ListServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>list</servlet-name>
        <url-pattern>/list</url-pattern>
    </servlet-mapping>
</web-app>

Übrigens haben wir kein Markup für die Startseite (/) erstellt. Tatsache ist, dass wir es in diesem Fall nicht brauchen. Unsere Homepage ist eine einfache HTML-Datei, die nur zwei Schaltflächen anzeigt. Es hat keinen dynamischen Inhalt, daher müssen wir kein separates Servlet für Anfragen von / erstellen, das nichts anderes tut, als die Ausführung an eine JSP weiterzuleiten (die ebenfalls erstellt werden müsste), um zwei Schaltflächen für uns zu zeichnen. Wir brauchen das nicht. Eine statische Seite passt zu uns. Wenn Tomcat eine Anfrage erhält, prüft es, ob es ein einzelnes Servlet gibt, das die Anfrage für diese Adresse verarbeiten könnte, und stellt dann fest, dass diese Adresse tatsächlich bereits die fertige HTML- Datei enthält, was es servieren wird. Wir können unsere Anwendung erneut ausführen (den Server neu starten oder ihn erneut bereitstellen – was auch immer Sie bevorzugen) und sicherstellen, dass die Startseite gerendert wird, nichts kaputt geht und die Übergänge erfolgen, wenn wir auf die Schaltflächen klicken (obwohl wir erneut eine Fehlermeldung erhalten). Übrigens, während wir vorher einen 404-Fehler bekamen, bekommen wir jetzt einen 405-Fehler. Das bedeutet, dass die Zuordnung funktioniert hat und die Servlets gefunden wurden, aber sie hatten keine geeignete Methode, um die Anfrage zu verarbeiten.

Kurzer Exkurs: Was passiert „unter der Haube“?

Sie haben wahrscheinlich schon darüber nachgedacht, wie unsere Anwendung in Tomcat funktioniert. Was passiert da drin? Und wo ist die main()-Methode? Sobald Sie in Ihrem Browser auf localhost:8080 gehen, sendet der Browser über das HTTP-Protokoll eine Anfrage an diese Adresse. Ich hoffe, Sie wissen bereits, dass es viele verschiedene Arten von Anfragen gibt. Die beliebtesten sind GET und POST. Jede Anfrage sollte beantwortet werden. Von einer GET-Anfrage wird erwartet, dass sie als Antwort einen gebrauchsfertigen HTML-Code erhält, der an den Browser zurückgegeben wird. Der Browser ersetzt dann den Code durch alle hübschen Buchstaben, Schaltflächen und Formulare. Eine POST-Anfrage ist etwas interessanter, da sie auch einige Informationen enthält. Angenommen, Sie geben Anmeldeinformationen in ein Registrierungs- oder Anmeldeformular auf einer Website ein und klicken auf „Senden“. Dadurch wird eine POST-Anfrage mit Ihren persönlichen Daten an den Server gesendet. Der Server empfängt diese Informationen, verarbeitet sie und gibt eine Antwort zurück (z. B. eine HTML-Seite mit Ihrem Profil). Der Hauptunterschied zwischen ihnen besteht darin, dass GET-Anfragen nur zum Abrufen von Daten vom Server verwendet werden, während POST-Anfragen einige Informationen enthalten (und die Daten auf dem Server sich ändern können). Wenn Sie beispielsweise Ihr Bild auf den Server hochladen, wird es in einer POST-Anfrage dorthin übertragen und vom Server zur Datenbank hinzugefügt, d. h. es erfolgt eine Änderung. Nun zurück zu Tomcat. Wenn eine Anfrage von einem Client eingeht, prüft es die Adresse. Es prüft, ob es ein geeignetes Servlet gibt, um Anfragen für diese Adresse zu verarbeiten (oder eine verfügbare Ressource, die sofort zurückgegeben werden kann). Wenn es nichts findet, was zurückgegeben werden kann, dann antwortet es mit einem 404-Fehler und nicht mit einer HTML-Seite. Wenn es jedoch ein geeignetes Servlet findet, das an dieser Adresse „sitzt“, prüft es den Anforderungstyp (GET, POST oder etwas anderes) und fragt das Servlet, ob es über eine Methode verfügt, die diese Art von Abfrage verarbeiten kann. Wenn das Servlet sagt, dass es nicht weiß, wie es mit diesem Typ umgehen soll, dannTomcat gibt einen 405-Code zurück. Und genau das ist in unserem Projekt passiert. Wenn jedoch ein geeignetes Servlet gefunden wird und es über eine geeignete Methode verfügt, erstellt Tomcat ein Servlet-Objekt und startet es in einem neuen Thread(wodurch es eigenständig laufen kann), und Tomcat setzt seine eigene Arbeit fort und akzeptiert und sendet Anfragen. Darüber hinaus erstellt Tomcat zwei weitere Objekte: ein HttpServletRequest (das ich kurz „Anfrage“ nenne) und ein HttpServletResponse (das ich „Antwort“ nenne). Es legt alle von der Client-Anfrage empfangenen Daten im ersten Objekt ab, sodass alle Daten daraus extrahiert werden können. Und nach all dem werden diese beiden Objekte an die entsprechende Methode des Servlets übergeben, das in einem separaten Thread gestartet wurde. Sobald das Servlet seine Arbeit beendet hat und eine Antwort bereit hat, die an den Client gesendet werden kann, zeigt es Tomcat eine Flagge mit der Aufschrift „Ich bin fertig. Alles ist bereit.“ Tomcat empfängt die Antwort und sendet sie an den Client. Dadurch kann Tomcat Anfragen empfangen und Antworten senden. ohne abgelenkt zu werden, und die ganze Arbeit wird von Servlets erledigt, die in separaten Threads laufen. Das bedeutet, dass wir beim Schreiben des Servlet-Codes bestimmen, welche Arbeit ausgeführt werden soll. Und Sie können sich die main()-Methode so vorstellen, dass sie sich in Tomcat selbst befindet (ja, sie ist in Java geschrieben), und wenn wir Tomcat „starten“, wird die main()-Methode gestartet.

Erstellen einer einfachen Webanwendung mit Servlets und JSPs (Teil 1) – 2

Verwenden Sie Servlets, um GET-Methoden abzufangen und supereinfache Antworten zu senden

Im Moment verfügen unsere Servlets über keine geeigneten Methoden (GET), daher gibt Tomcat einen 405-Fehler zurück. Lasst uns sie erschaffen! Die HttpServlet-Klasse, die wir von unseren Servlets erben, deklariert verschiedene Methoden. Um den Methoden spezifischen Code zuzuweisen, überschreiben wir diese einfach. In diesem Fall müssen wir die doGet()Methode in beiden Servlets überschreiben.


@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

}

Wie Sie sehen können, benötigt diese Methode zwei Argumente: req (Anfrage) und resp (Antwort). Dies sind genau die Objekte, die Tomcat für uns erstellt und füllt, wenn es die entsprechende Methode im Servlet aufruft. Zunächst erstellen wir die einfachsten Antworten. Dazu nehmen wir das resp-Objekt und erhalten daraus ein PrintWriter-Objekt. Dieser Objekttyp wird zum Verfassen einer Antwort verwendet. Wir werden es verwenden, um eine einfache Zeichenfolge auszugeben.


@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    PrintWriter writer = resp.getWriter();
    writer.println("GET method from AddServlet");
}

Wir machen etwas Ähnliches im ListServlet und starten dann unseren Server neu. Wie Sie sehen, funktioniert alles! Wenn Sie auf die Schaltflächen klicken, erhalten Sie Seiten mit dem Text, den wir mit dem PrintWriter „geschrieben“ haben. Aber die JSP-Dateien, die wir zum Generieren von Seiten mit Antworten vorbereitet haben, werden nicht verwendet. Das liegt einfach daran, dass sie nie hingerichtet werden. Unser Servlet erstellt die Antwort selbst und beendet die Ausführung, um Tomcat zu signalisieren, dass es bereit ist, auf den Client zu antworten. Tomcat nimmt einfach die Antwort entgegen und sendet sie an den Client zurück.

Übergeben wir die Kontrolle von den Servlets an die JSP-Dateien. Wir werden den Code unserer Methoden wie folgt ändern:

Wir erhalten ein Anforderungs-Dispatcher-Objekt vom Anforderungsobjekt und übergeben ihm die Adresse der JSP-Seite, an die wir die Kontrolle übertragen möchten.
Wir verwenden dieses Objekt, um die Kontrolle an die angegebene JSP-Seite zu übertragen, wobei wir nicht vergessen, die von Tomcat erhaltenen Anforderungs- und Antwortobjekte zu übergeben.


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

Im Body-Tag der JSP-Seiten können Sie etwas hinzufügen, damit wir klar erkennen können, welche Seite angezeigt wird. Sobald Sie das getan haben, starten Sie den Server neu und überprüfen Sie. Wir klicken auf die Schaltflächen auf der Hauptseite und die Seiten öffnen sich, was bedeutet, dass die Anfragen an die Servlets gesendet werden. Anschließend wird die Kontrolle an die JSP-Seiten übergeben, die nun gerendert werden. Das ist alles für den Moment. Im nächsten Teil dieses Artikels werden wir an der Funktionalität unserer Anwendung arbeiten.

Mehr Lektüre:
Erstellen einer einfachen Webanwendung mit Servlets und JSPs (Teil 2) Ihre erste Anwendung mit Java-Servlets

Kommentare

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION