JavaRush /Java-Blog /Random-DE /Erstellen einer einfachen Webanwendung mit Servlets und J...
fatfaggy
Level 26
Киев

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

Veröffentlicht in der Gruppe Random-DE
Ich beschreibe weiterhin den Prozess der Erstellung einer Webanwendung mit Servlets, JSP, Maven und Tomcat. Anfang des Artikels , ggf.
Wir schaffen Einheiten.
Erstellen wir eine User-Klasse im Entities-Paket, in der wir zwei private String-Variablen namens und Passwort erstellen. 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(). 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, in der wir unsere Benutzer hinzufügen und von wo aus wir sie zur Anzeige übernehmen. Aber es gibt ein Problem. Wir erstellen unsere Servlet-Objekte nicht; Tomcat erstellt sie 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 in beiden unserer Servlets sichtbar wäre? Wenn wir einfach in jedem Servlet ein eigenes Listenobjekt erstellen, wird sich herausstellen, dass wir Benutzer zu einer Liste hinzufügen, aber die Anzeige einer Liste von Benutzern mithilfe des ListServlet-Servlets wird völlig anders sein. 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, die Singleton- Vorlage in ihrem Programm zu verwenden . Sie können Ihrer Kreativität freien Lauf lassen und einen coolen Singleton mit doppelten Prü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 dies in diesem Fall der Fall ist durchaus passend.
Ein Modell erstellen.
Dann erstellen wir eine Klasse (und implementieren die Singleton-Vorlage darin) im Modellpaket und nennen sie auch recht farbenfroh Modell. Lassen Sie uns darin ein privates Benutzerlistenobjekt erstellen und zwei Methoden erstellen: eine, damit Sie einen Benutzer hinzufügen können, und die zweite – lassen Sie einfach eine Liste von Zeichenfolgen (Benutzernamen) zurückgeben. Da unser Benutzerobjekt aus einem Namen und einem Passwort besteht, möchten wir die Passwörter der Benutzer nicht „offenlegen“ und geben daher nur eine Liste ihrer Namen zurück. public class Model { private static Model instance = new Model(); private List model; public static Model getInstance() { return instance; } private Model() { model = new ArrayList<>(); } public void add(User user) { model.add(user); } public List list() { return model.stream() .map(User::getName) .collect(Collectors.toList()); } }
Ein wenig über MVC.
Da Sie von Singleton gehört haben, bedeutet das, dass Sie wahrscheinlich auch von einem anderen Entwurfsmuster gehört haben – MVC (Model-View-Controller oder 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 angezeigt wird . Die Ansicht (Ansicht oder nur 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 übertragen sie in Ansichten, oder sie erhalten einige Daten von Tomcat, verarbeiten sie und übertragen sie in das Modell. Die Geschäftslogik (d. h. was zu tun ist) sollte in ihnen beschrieben werden und nicht im Modell oder in der Ansicht. Somit macht jeder sein eigenes Ding:
  • Modell speichert Daten
  • Ansichten zeichnen eine schöne Darstellung von Daten
  • Verantwortliche verarbeiten Daten
Dadurch können sie alle relativ einfach und wartbar sein. Und kein monströser Dump des gesamten Codes in einer Klasse. MVC eignet sich nicht nur für die Webprogrammierung, sondern ist in diesem Bereich immer noch sehr verbreitet (wenn nicht sogar immer). In unserem Fall fungieren Servlets als Controller. Ja, das ist eine sehr oberflächliche und sogar grobe Beschreibung dieses Musters, aber in diesem Artikel geht es nicht um Designmuster, sondern darum, wie man eine einfache Webanwendung erstellt :) Wer will mehr wissen – Google weiß alles ! :) Kehren wir zu unseren Ansichten zurück.
Erstellen Sie ein Formular zum Hinzufügen eines Benutzers.
Fügen wir der Datei add.jsp ein Formular hinzu, das aus zwei Texteingaben (eine normale, die andere vom Typ Passwort) und einer Schaltfläche zum Senden von Daten an den Server besteht. 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 diese Anfrage an dieselbe Adresse geht, von der aus wir diese Seite aufgerufen haben (/add). Somit 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, dann hat dieses Formular seine Daten dorthin gesendet (von denen wir sie abrufen werden). das Anforderungsobjekt in der doPost()-Methode, verarbeiten Sie es und übertragen Sie es zum Speichern an das Modell. Es ist erwähnenswert, dass Eingaben hier 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 diesen Namen und Pass verwenden. Aber dazu später mehr. Bei der Schaltfläche zur Datenübermittlung selbst handelt es sich wiederum um einen Button und nicht um eine Eingabe, wie es sonst üblich ist. Ich weiß nicht, wie universell diese Option ist, aber sie funktioniert bei mir in Chrome :)
Verarbeiten einer POST-Anfrage mit einem Servlet.
Kehren wir zum AddServlet-Servlet zurück. Wir wissen bereits, dass wir die doGet()-Methode der HttpServlet-Klasse überschrieben haben, damit unser Servlet GET-Anfragen „abfangen“ kann. Um unserem Servlet beizubringen, auch POST-Anfragen abzufangen, überschreiben wir außerdem die Methode doPost(). 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 unser Benutzerobjekt anhand der empfangenen Daten. 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); }
Daten in die Ansicht übertragen.
Kommen wir nun zum ListServlet-Servlet. Wir haben bereits die Methode doGet() implementiert, die die Steuerung einfach an die Ansicht list.jsp überträgt. Wenn Sie dies noch nicht haben, machen Sie es analog mit der gleichen Methode aus dem AddServlet-Servlet. Nun wäre es schön, eine Liste der Benutzernamen vom Modell zu erhalten und diese an die Ansicht zu übergeben, die sie dort 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 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.
Kommen wir nun zur Datei list.jsp. Diese Datei 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. Wenn wir eine Liste mit Namen haben, können wir eine for-Schleife durchlaufen und jeden Namen ausgeben. Wie ich bereits sagte, können JSP-Dateien Java-Code ausführen (im Prinzip unterscheidet sie sich dadurch von statischen HTML-Seiten). Um Code auszuführen, reicht es aus, an der von uns benötigten Stelle eine Konstruktion zu platzieren. <% // java Code %> Innerhalb einer solchen Konstruktion erhalten wir Zugriff auf mehrere Variablen: request – unser Anforderungsobjekt, das wir vom Servlet übergeben haben, wo es einfach aufgerufen wurde req Response – das Antwortobjekt, in Das Servlet wurde aufgerufen resp out – ein Objekt vom Typ JspWriter (geerbt vom üblichen Writer), mit dessen Hilfe wir etwas direkt in die HTML-Seite selbst „schreiben“ können. Out.println("Hello world!") ist System.out.println("Hello world!") sehr ähnlich, aber verwechseln Sie sie nicht! out.println() „schreibt“ in die HTML-Seite und System.out.println – in die Systemausgabe. Wenn Sie die Methode System.out.println() innerhalb des Abschnitts mit JSP-Code aufrufen, sehen Sie die Ergebnisse in der Tomcat-Konsole und nicht auf der Seite, wie Sie vielleicht möchten :) Sie können in JSP nach anderen verfügbaren Objekten suchen Hier . 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 einfach in Form einer HTML-Liste: Wenn wir die Liste nur anzeigen möchten, wenn es Benutzer gibt, und andernfalls eine Warnung anzeigen möchten, dass noch keine Benutzer vorhanden sind, können wir diesen Abschnitt ein wenig umschreiben: Jetzt wo wir wissen, wie man Daten von Servlets an Ansichten überträgt – wir können unser AddServlet ein wenig verbessern, sodass eine Benachrichtigung über das erfolgreiche Hinzufügen eines Benutzers angezeigt wird. 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 erstellen Sie darin bereits einen Abschnitt mit Java-Code, in dem Sie prüfen können, ob ein solches Attribut in der Anfrage vorhanden ist, und wenn ja, dann eine Meldung anzeigen, dass der Benutzer erfolgreich hinzugefügt wurde. Nach diesen Änderungen sieht der vollständige Code des AddServlet-Servlets etwa so aus: Hier legen wir am Ende der doPost()-Methode ein Attribut mit dem Namen des dem Modell hinzugefügten Benutzers fest und rufen dann doGet( )-Methode, 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 noch, add.jsp selbst zu korrigieren, damit eine solche Benachrichtigung angezeigt wird, wenn ein solches Attribut vorhanden ist. Endgültige add.jsp
    <% List names = (List ) request.getAttribute("userNames"); if (names != null && !names.isEmpty()) { for (String s : names) { out.println("
  • " + s + "
  • "); } } %>
<% List names = (List ) request.getAttribute("userNames"); if (names != null && !names.isEmpty()) { out.println(" "); for (String s : names) { out.println("
  • " + s + "
  • "); } out.println("
    "); } else out.println("

    There are no users yet!

    "); %>
    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); } } <%@ page contentType="text/html;charset=UTF-8" language="java" %> Add new user

    Super app!

    <% if (request.getAttribute("userName") != null) { out.println("

    User '" + request.getAttribute("userName") + "' added!

    "); } %>

    Add user

    Der Hauptteil der Seite besteht aus einem Div mit einem Header, danach folgt ein Div-Container für den Inhalt, in dem geprüft wird, ob ein Attribut mit dem Benutzernamen vorhanden ist, dann ein Div mit einem Formular zum Hinzufügen von Benutzern und am Ende eine Fußzeile mit einer Schaltfläche, 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 :) Nun, die endgültige Version ist list.jsp. Somit haben wir eine voll funktionsfähige Webanwendung, die auch Benutzer speichern und hinzufügen kann as zeigt eine Liste ihrer Namen an. Es bleibt nur noch, es zu verschönern... :) <%@ page import="java.util.List" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> Users

    Super app!

    Users

    <% List names = (List ) request.getAttribute("userNames"); if (names != null && !names.isEmpty()) { out.println(" "); for (String s : names) { out.println("
  • " + s + "
  • "); } out.println("
    "); } else out.println("

    There are no users yet!

    "); %>
    Stile hinzufügen. Wir verwenden das W3.CSS-Framework.
    Im Moment funktioniert unsere Anwendung, aber absolut verrückt :) Wir müssen einen Hintergrund hinzufügen, Farben für Text und Schaltflächen, Listen stilisieren, Ausrichtung vornehmen, Einrückungen hinzufügen, im Allgemeinen viele Dinge. Wenn Sie Stile manuell schreiben, kann das viel Zeit und Nerven kosten. Daher empfehle ich die Verwendung des CSS-Frameworks W3.CSS . Es verfügt bereits über vorgefertigte Klassen mit Stilen; es bleibt nur noch, die CSS-Klassen, die wir an diesen Stellen anwenden möchten, an den richtigen Stellen zu platzieren. Um sie zu unseren Seiten hinzuzufügen, müssen wir zunächst eine Datei mit Stilen einbinden. Dies kann auf zwei Arten erfolgen: 1. Gehen Sie durch unsere Seiten und fügen Sie im Kopfbereich einen direkten Link zur Datei mit Stilen ein. 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, können Sie einfach die Datei mit den Stilen herunterladen und sie irgendwo im Webordner ablegen (z. B. web/styles/w3.css) und dann Gehen Sie alle unsere Seiten durch (index.html, add.jsp, list.jsp) und geben Sie im Kopfbereich einen Link zu dieser Datei mit Stilen ein. Gehen Sie anschließend einfach die Tags durch und taggen Sie sie mit den Stilen, 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 add.jsp list.jsp Das ist alles :) Wenn Sie noch Fragen oder Kommentare haben oder im Gegenteil etwas nicht funktioniert, hinterlassen Sie einen Kommentar. Nun, ich füge ein paar Screenshots von dem bei, was dabei herausgekommen ist. Und schlussendlich. Wenn Sie mit diesem Projekt üben möchten, können Sie Folgendes versuchen: Super app!

    Super app!

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

    Super app!

    <% if (request.getAttribute("userName") != null) { out.println("
    \n" + " ×\n" + "
    User '" + request.getAttribute("userName") + "' added!
    \n" + "
    "); } %>

    Add user

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

    Super app!

    Users

    <% List names = (List ) request.getAttribute("userNames"); if (names != null && !names.isEmpty()) { out.println("
      "); for (String s : names) { out.println("
    • " + s + "
    • "); } out.println("
    "); } else out.println("
    \n" + " ×\n" + "
    There are no users yet!
    \n" + "
    "); %>
    Startseite der Bewerbung Benutzerfenster hinzufügen eine Liste von Benutzern
    • 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))
    • Liste ersetzen (Liste ), um mit der Datenbank zu arbeiten, damit hinzugefügte Benutzer nach dem Neustart des Servers nicht verschwinden :)
    Viel Glück!
    Kommentare
    TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
    GO TO FULL VERSION