CodeGym /Java-Blog /Random-DE /Erstellen des einfachsten Webprojekts in IntelliJ IDEA En...
John Squirrels
Level 41
San Francisco

Erstellen des einfachsten Webprojekts in IntelliJ IDEA Enterprise. Schritt für Schritt, mit Bildern

Veröffentlicht in der Gruppe Random-DE
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 . Am sinnvollsten wäre es für Sie, sich derzeit mit der Quest „Java-Sammlungen“ zu befassen, die sich mit Themen befasst, die dem Artikel nahe stehen.
Erstellen des einfachsten Webprojekts in IntelliJ IDEA Enterprise.  Schritt für Schritt, mit Bildern - 1
Derzeit verwende ich IntelliJ IDEA Enterprise Edition ( Anmerkung des Herausgebers: Dies ist eine kostenpflichtige erweiterte Version der IDE; sie wird normalerweise in der professionellen Entwicklung verwendet). Es ist viel einfacher, darin mit Webprojekten zu arbeiten als in der kostenlosen Community Edition . In der Enterprise Edition genügt buchstäblich ein Mausklick, um das Projekt zu erstellen, es in einen Servlet-Container zu legen, den Server zu starten und sogar eine Webseite für das Projekt im Browser zu öffnen. In der kostenlosen Version von IDEA müssten Sie einen Großteil davon selbst erledigen, also „manuell“. Ich verwende Apache Mavenum das Projekt aufzubauen und seinen Lebenszyklus zu verwalten. Ich habe in diesem Projekt nur einen kleinen Teil seiner Funktionen (Paket-/Abhängigkeitsverwaltung) genutzt. Als Servlet-Container/Anwendungsserver habe ich Apache Tomcat Version 9.0.12 gewählt.

Lass uns anfangen

Öffnen Sie zunächst IntelliJ IDEA und erstellen Sie ein leeres Maven-Projekt . Erstellen des einfachsten Webprojekts in IntelliJ IDEA Enterprise.  Schritt für Schritt, mit Bildern - 2Wählen Sie links Maven aus und überprüfen Sie, ob oben das JDK des Projekts ausgewählt ist. Wenn es nicht vorhanden ist, wählen Sie eines aus der Liste aus oder klicken Sie auf Neu ... und wählen Sie eines auf dem Computer aus. Erstellen des einfachsten Webprojekts in IntelliJ IDEA Enterprise.  Schritt für Schritt, mit Bildern - 3In diesem Fenster müssen Sie GroupId und ArtifactId angeben . Die GroupId bezieht sich auf die eindeutige Kennung des Unternehmens, das das Projekt herausgibt. Üblicherweise wird der Domainname des Unternehmens verwendet, allerdings in umgekehrter Reihenfolge. Allerdings nicht wie ein Spiegel. Wenn der Domänenname eines Unternehmens beispielsweise maven.apache.org lautet , lautet seine GroupId org.apache.maven. Das heißt, wir schreiben zuerst die Top-Level-Domain, fügen einen Punkt hinzu, dann die Second-Level-Domain und so weiter. Dies ist der allgemein akzeptierte Ansatz. Wenn Sie das Projekt selbst „ausarbeiten“ (und nicht als Teil eines Unternehmens), dann tragen Sie hier Ihren persönlichen Domainnamen ein (auch in umgekehrter Reihenfolge!). Wenn Sie eines haben, natürlich. :) Wenn nicht, machen Sie sich keine Sorgen. Hier kann man eigentlich alles schreiben .
Für ein Unternehmen mit dem Domänennamen john.doe.org lautet die GroupId org.doe.john. Diese Namenskonvention ist erforderlich, um gleichnamige Projekte verschiedener Unternehmen zu trennen.
In diesem Beispiel verwende ich eine fiktive Domain: fatlady.info.codegym.cc . Dementsprechend gebe ich im GroupId- Feld cc.codergym.info.fatlady ein . ArtifactId ist einfach der Name unseres Projekts. Zur Trennung von Wörtern können Sie Buchstaben und bestimmte Symbole (z. B. Bindestriche) verwenden. Unser „Artefakt“ wird genau den Namen tragen, den wir hier schreiben. In diesem Beispiel verwende ich my-super-project . Berühren Sie das Versionsfeld noch nicht – lassen Sie es einfach so, wie es ist. Und hier ist das Standard- IDEA-Fenster , wenn Sie ein neues Projekt erstellen. Ganz im Sinne der Tradition nennen wir es mein Superprojekt . Das Projekt ist erstellt!Erstellen des einfachsten Webprojekts in IntelliJ IDEA Enterprise.  Schritt für Schritt, mit Bildern - 4Erstellen des einfachsten Webprojekts in IntelliJ IDEA Enterprise.  Schritt für Schritt, mit Bildern - 5
Pom.xml wird sofort geöffnet. Dies ist eine Datei mit Maven-Einstellungen. Wenn wir Maven sagen wollen, was er tun soll oder wo er etwas finden kann, beschreiben wir das alles in dieser pom.xml-Datei. Es befindet sich im Stammverzeichnis des Projekts.
Wir sehen, dass es jetzt genau die Daten enthält, die wir beim Erstellen des Maven-Projekts eingegeben haben : groupId , artifactId und version (letztes haben wir nicht berührt).

Die Struktur unseres Projekts

Dieses Maven-Projekt hat eine bestimmte Struktur. Erstellen des einfachsten Webprojekts in IntelliJ IDEA Enterprise.  Schritt für Schritt, mit Bildern - 6Wie Sie sehen können, hat die Wurzel:
  • ein .idea- Verzeichnis, das die IDEA-Einstellungen des aktuellen Projekts enthält;
  • ein src- Verzeichnis, in dem wir unseren Quellcode erstellen;
  • eine my-super-project.iml- Datei, eine von IDEA erstellte Projektdatei;
  • die Datei pom.xml (die Maven-Projektdatei, die ich zuvor erwähnt habe), die jetzt geöffnet ist. Wenn ich irgendwo pom.xml erwähne, ist dies die Datei, über die ich spreche.
Im Ordner src gibt es zwei Unterordner:
  • main – für unseren Code;
  • test – für Tests unseres Codes.
In main und test gibt es einen Java- Ordner. Sie können sich diese als denselben Ordner vorstellen, mit der Ausnahme, dass der Ordner „ main“ für den Quellcode und der Ordner „in test“ für den Testcode ist. Im Moment haben wir keine Verwendung für den Ressourcenordner . Wir werden es nicht nutzen. Aber lass es einfach dort.

Umwandlung in ein Webprojekt

Es ist Zeit für uns, unser Maven-Projekt in ein Webprojekt umzuwandeln . Klicken Sie dazu mit der rechten Maustaste auf den Namen des Projekts in diesem Baum und wählen Sie Framework-Unterstützung hinzufügenErstellen des einfachsten Webprojekts in IntelliJ IDEA Enterprise.  Schritt für Schritt, mit Bildern - 7Es öffnet sich ein Fenster, in dem wir unserem Projekt Unterstützung für verschiedene Frameworks hinzufügen können. Aber wir brauchen nur eine: Webanwendung . Und das ist es, was wir auswählen. Erstellen des einfachsten Webprojekts in IntelliJ IDEA Enterprise.  Schritt für Schritt, mit Bildern - 8Stellen Sie sicher, dass das Kontrollkästchen „Webanwendung“ aktiviert ist und dass im Hauptfenster angezeigt wird, dass automatisch eine web.xml- Datei erstellt werden soll (ich empfehle, das Kontrollkästchen zu aktivieren, sofern es nicht bereits aktiviert ist). Wir sehen dann, dass der Webordner zu unserer Projektstruktur hinzugefügt wurde. Erstellen des einfachsten Webprojekts in IntelliJ IDEA Enterprise.  Schritt für Schritt, mit Bildern - 9Dies ist die Wurzel unseres Webprojekts mit der Adresse/. Mit anderen Worten: Wenn wir im Browser „ localhost “ eingeben (natürlich wenn das Projekt läuft), dann wird hier nach der Wurzel des Webprojekts gesucht. Wenn wir localhost/addUser eingeben , wird im Webordner nach einer Ressource namens addUser gesucht .
Das Wichtigste, was Sie verstehen müssen, ist, dass der Webordner das Stammverzeichnis unseres Projekts ist, wenn wir es in Tomcat einfügen. Wir haben jetzt eine bestimmte Ordnerstruktur, aber im fertigen Projekt, das wir erstellen werden, wird sie etwas anders sein. Insbesondere wird der Webordner das Stammverzeichnis sein.
In web gibt es einen erforderlichen Ordner namens WEB-INF , in dem sich die Datei web.xml befindet, also die Datei, die wir im letzten Schritt vom Programm erstellen lassen haben. Lass es uns öffnen. Erstellen des einfachsten Webprojekts in IntelliJ IDEA Enterprise.  Schritt für Schritt, mit Bildern - 10Sie können sehen, dass es noch nichts Interessantes enthält, nur einen Header. Übrigens, wenn Sie die Erstellung der Datei nicht angefordert haben, müssen Sie sie manuell erstellen, dh alle Kopfzeilen von Hand eingeben. Oder suchen Sie zumindest im Internet nach einer fertigen Version. Wofür brauchen wir web.xml ? Zur Kartierung. Hier erklären wir für Tomcat , welche URL-Anfragen an welche Servlets weitergeleitet werden sollen. Aber dazu kommen wir später. Lassen Sie es vorerst leer. Der Webordner verfügt auch über eine index.jsp-Datei. Öffne es. Erstellen des einfachsten Webprojekts in IntelliJ IDEA Enterprise.  Schritt für Schritt, mit Bildern - 11Dies ist sozusagen die Datei, die standardmäßig ausgeführt wird. Mit anderen Worten: Es ist genau das, was wir sehen werden, wenn wir mit dem Projekt beginnen. Im Grunde ist JSP eine gewöhnliche HTML-Datei , mit der Ausnahme, dass Sie darin Java-Code ausführen können.

Ein wenig über statische und dynamische Inhalte

Statischer Inhalt ist Inhalt, der sich im Laufe der Zeit nicht ändert. Alles, was wir in eine HTML-Datei schreiben , wird unverändert angezeigt, so wie es geschrieben ist. Wenn wir „ Hallo Welt “ schreiben, wird dieser Text angezeigt, sobald wir die Seite öffnen, und zwar in 5 Minuten und morgen und in einer Woche und in einem Jahr. Es wird sich nicht ändern. Was aber, wenn wir das aktuelle Datum auf der Seite anzeigen möchten? Wenn wir nur schreiben: „ 27. Oktober 2017", dann würden wir morgen das gleiche Datum sehen, eine Woche später und ein Jahr später. Aber wir möchten, dass das Datum aktuell ist. Hier ist die Möglichkeit, Code direkt auf der Seite auszuführen, hilfreich. Wir können ein bekommen Datumsobjekt, konvertieren Sie es in das gewünschte Format und zeigen Sie es auf der Seite an. Dann ist das Datum jeden Tag, wenn wir die Seite öffnen, immer aktuell. Wenn wir nur statischen Inhalt benötigen, benötigen wir nur einen regulären Webserver und HTML-Dateien. Wir brauchen weder Java, Maven noch Tomcat. Aber wenn wir dynamische Inhalte verwenden wollen, brauchen wir all diese Tools. Aber jetzt kehren wir zu unserer index.jsp zurück . Geben wir etwas anderes als den Standardtitel an, zum Beispiel „ Meine Super-Web-App! “ Dann schreiben wir in den Textkörper „ Ich lebe! “ Wir sind fast bereit, mit unserem Projekt zu beginnen! Leider ist das übliche grüne Dreieck zum Starten des Programms nicht aktiv. Erstellen des einfachsten Webprojekts in IntelliJ IDEA Enterprise.  Schritt für Schritt, mit Bildern - 12Klicken Sie auf die Schaltfläche links davon (auf dem Bildschirm durch einen roten Pfeil gekennzeichnet) und wählen Sie Konfigurationen bearbeiten ... Dadurch wird ein Fenster geöffnet, in dem wir aufgefordert werden, auf ein grünes Pluszeichen zu klicken, um eine Konfiguration hinzuzufügen. Klicken Sie darauf (in der oberen linken Ecke des Fensters). Erstellen des einfachsten Webprojekts in IntelliJ IDEA Enterprise.  Schritt für Schritt, mit Bildern - 13Wählen Sie Tomcat-Server > Lokal . Es öffnet sich ein Fenster mit vielen Optionen, aber die Standardeinstellungen passen für fast alles. Erstellen des einfachsten Webprojekts in IntelliJ IDEA Enterprise.  Schritt für Schritt, mit Bildern - 14Wir können unserer Konfiguration einen hübschen Namen anstelle des standardmäßigen Namens „Unbenannt“ (ganz oben) geben. Wir müssen außerdem überprüfen, ob IDEA Tomcat erfolgreich auf unserem System gefunden hat (Sie haben es bereits heruntergeladen und installiert).es richtig?). Wenn es nicht gefunden wurde (was unwahrscheinlich ist), drücken Sie den Abwärtspfeil und wählen Sie den Installationsort aus. Oder wählen Sie eine andere Version, wenn Sie mehr als eine installiert haben. Ich habe nur eines und es ist bereits installiert. Deshalb sieht es auf meinem Bildschirm so aus, wie es aussieht. Und ganz unten im Fenster sehen wir eine Warnung, die uns darauf hinweist, dass bisher keine Artefakte für die Bereitstellung auf dem Server angegeben wurden. Rechts neben dieser Warnung befindet sich eine Schaltfläche, die uns auffordert, das Problem zu beheben. Wir klicken darauf und sehen, dass IDEA in der Lage war, alles selbst zu finden, alles, was fehlte, selbst zu erstellen und alle Einstellungen selbst zu konfigurieren. Erstellen des einfachsten Webprojekts in IntelliJ IDEA Enterprise.  Schritt für Schritt, mit Bildern - 15Wir können sehen, dass es uns von der Registerkarte „Server “ zur Registerkarte „Bereitstellung “ unter „ Beim Serverstart bereitstellen“ verschoben hatAbschnitt, und wir haben jetzt ein Artefakt, das bereitgestellt werden muss. Klicken Sie auf Übernehmen und OK. Und wir sehen zunächst, dass am unteren Rand des Fensters ein Abschnitt mit unserem lokalen Tomcat-Server aufgetaucht ist, in dem unser Artefakt platziert wird. Reduzieren Sie diesen Abschnitt, indem Sie auf die entsprechende Schaltfläche auf der rechten Seite des Fensters klicken. Erstellen des einfachsten Webprojekts in IntelliJ IDEA Enterprise.  Schritt für Schritt, mit Bildern - 16Jetzt sehen wir, dass das grüne Startdreieck aktiv ist. Für diejenigen, die alles noch einmal überprüfen möchten, können Sie auf die Schaltfläche „Projekteinstellungen“ klicken (rechts neben den Startschaltflächen, gekennzeichnet durch einen roten Pfeil), zum Abschnitt „Artefakte“ gehen und sicherstellen, dass das Artefakt tatsächlich erstellt wurde . Es war nicht da, bis wir auf diesen Fix geklickt habenTaste, aber jetzt ist alles in Ordnung. Und diese Konfiguration passt perfekt zu uns. Kurz gesagt besteht der Unterschied zwischen my-super-project:war und my-super-project:war explosioned darin, dass my-super-project:war nur aus einer WAR - Datei (die nur ein Archiv ist) und der Version mit explosionsartiger Darstellung besteht ist einfach der „ausgepackte“ Krieg . Und ich persönlich finde diese Option praktischer, weil man damit kleinere Änderungen am Server schnell debuggen kann. Im Wesentlichen handelt es sich bei dem Artefakt um unser Projekt, das gerade kompiliert wurde – und dessen Ordnerstruktur geändert wurde, damit Tomcat direkt darauf zugreifen kann. Es wird ungefähr so ​​aussehen:
Erstellen des einfachsten Webprojekts in IntelliJ IDEA Enterprise.  Schritt für Schritt, mit Bildern - 17
Jetzt ist alles bereit, unser Projekt zu starten. Drücken Sie den kostbaren grünen Startknopf und genießen Sie das Ergebnis! :) :)
Erstellen des einfachsten Webprojekts in IntelliJ IDEA Enterprise.  Schritt für Schritt, mit Bildern - 18
Kommentare
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION