JavaRush /Java-Blog /Random-DE /Erstellen eines einfachen Webprojekts in IntelliJ Idea En...
Стас Пасинков
Level 26
Киев

Erstellen eines einfachen Webprojekts in IntelliJ Idea Enterprise. Schritt für Schritt, mit Bildern

Veröffentlicht in der Gruppe Random-DE
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 dem Artikel nahe stehen. Erstellen eines einfachen Webprojekts in IntelliJ Idea Enterprise.  Schritt für Schritt, mit Bildern - 1Ich verwende derzeit IntelliJ IDEA Enterprise Edition (dies ist eine kostenpflichtige erweiterte Version der IDE, sie wird normalerweise in der professionellen Entwicklung verwendet – Anmerkung des Herausgebers ). Es ist viel einfacher, mit Webprojekten zu arbeiten als mit der kostenlosen Community Edition. In der Enterprise Edition wird das Projekt buchstäblich mit einem Mausklick zusammengestellt, in einen Servlet-Container gegossen, der Server gestartet und sogar eine Seite mit dem laufenden Projekt im Browser geöffnet. In der kostenlosen Version der Idee müsste ein Großteil davon eigenständig, sozusagen „von Hand“, erledigt werden. Ich verwende Apache Maven, um das Projekt zu erstellen und seinen Lebenszyklus zu verwalten. Dabei habe ich nur einen kleinen Teil seiner Fähigkeiten genutzt (Paket-/Abhängigkeitsverwaltung). Als Servlet-Container/Anwendungsserver habe ich Apache Tomcat Version 9.0.0.M4 gewählt. Ich weiß, dass es bereits neuere Versionen gibt, aber diese habe ich installiert.

Lass uns anfangen

Öffnen wir zunächst IntelliJ IDEA und erstellen ein leeres Maven-Projekt.
Erstellen eines einfachen Webprojekts in IntelliJ Idea Enterprise.  Schritt für Schritt, mit Bildern - 2
Hier links wählen wir Maven aus und prüfen, ob oben das JDK für das Projekt angegeben ist. Wenn es nicht vorhanden ist, wählen Sie das gewünschte aus der Liste aus oder klicken Sie auf Neu... und wählen Sie es direkt auf Ihrem Computer aus. In der Mitte des Fensters habe ich eine Animation zum Laden der Liste der Archetypen. Wir benötigen sie nicht. Klicken Sie also, ohne auf den Download zu warten, unten im Fenster auf „Weiter“.
Erstellen eines einfachen Webprojekts in IntelliJ Idea Enterprise.  Schritt für Schritt, mit Bildern - 3
In diesem Fenster müssen Sie GroupId und ArtifactId angeben . GroupId bezieht sich auf die eindeutige Kennung des Unternehmens, das das Projekt produziert. Es ist üblich, den Domainnamen des Unternehmens zu verwenden, allerdings in umgekehrter Reihenfolge. Nicht im Sinne eines Spiegels, aber wenn beispielsweise der Domänenname eines Unternehmens maven.apache.org lautet , lautet seine GroupId org.apache.maven . Das heißt, wir schreiben zuerst die Domäne der ersten Ebene, trennen sie durch einen Punkt, schreiben den Namen der Domäne der zweiten Ebene und so weiter. Dies ist der allgemein akzeptierte Ansatz. Für den Fall, dass Sie ein Projekt alleine „schneiden“ und nicht als Teil eines Unternehmens, tragen Sie hier Ihren persönlichen Domainnamen ein (auch in umgekehrter Reihenfolge!). Wenn du es hast, natürlich :). Wenn nicht, seien Sie nicht verärgert. Eigentlich kann man hier alles schreiben .
Für ein Unternehmen mit dem Domainnamen vasya.pupkin.org lautet die GroupId org.pupkin.vasya. Dieser Namensansatz ist erforderlich, um Projekte mit demselben Namen, die jedoch von verschiedenen Unternehmen veröffentlicht wurden, zu trennen.
In diesem Beispiel verwende ich den fiktiven Domainnamen fatfaggy.info.javarush.ru . Dementsprechend gebe ich im GroupId- Feld ru.javarush.info.fatfaggy ein . ArtefactId ist einfach der Name unseres Projekts. Sie können Buchstaben und einige Symbole (z. B. Bindestriche) verwenden, um Wörter zu trennen. Unser „Artefakt“ wird genau so heißen, wie wir es hier schreiben. In diesem Beispiel schreibe ich my-super-project . Das Versionsfeld berühren wir vorerst nicht, wir lassen es so wie es ist.
Erstellen eines einfachen Webprojekts in IntelliJ Idea Enterprise.  Schritt für Schritt, mit Bildern - 4
Nun, das Standard-IDEA-Fenster beim Erstellen eines neuen Projekts. Nennen wir es traditionell mein Superprojekt .
Erstellen eines einfachen Webprojekts in IntelliJ Idea Enterprise.  Schritt für Schritt, mit Bildern - 5
Das Projekt wurde erstellt!
Die Datei pom.xml öffnete sich sofort vor uns. Dies ist eine Datei mit Maven-Einstellungen. Wenn wir Maven „sagen“ wollen, was und wie zu tun ist oder woher er etwas bekommt, 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 , Artefakt-ID und Version (letztere haben wir nicht berührt).

Unsere Projektstruktur

Dieses Maven-Projekt hat eine bestimmte Struktur.
Erstellen eines einfachen Webprojekts in IntelliJ Idea Enterprise.  Schritt für Schritt, mit Bildern - 6
Wie wir sehen können, liegt die Wurzel darin:
  • das Verzeichnis .idea , das die Ideeneinstellungen für das aktuelle Projekt enthält;
  • das src- Verzeichnis , in dem wir unsere Quellen erstellen;
  • my-super-project.iml- Datei , eine von IDEA erstellte Projektdatei;
  • pom.xml- Datei , dieselbe Maven-Projektdatei, über die ich oben gesprochen habe und die wir jetzt geöffnet haben. Wenn ich irgendwo pom.xml oder „pom“ erwähne, meine ich diese spezielle Datei.
Der src- Ordner wiederum enthält zwei Unterordner:
  • main – für unseren Code;
  • test – für Tests für unseren Code.
Sowohl main als auch test haben einen Java- Ordner . Bedenken Sie, dass es sich dabei um denselben Ordner handelt, nur der Ordner „ main“ ist für den Quellcode und der Ordner „in test“ für den Testcode. Wir benötigen den Ressourcenordner vorerst überhaupt nicht, wir werden ihn auch nicht verwenden . Aber lass ihn sich hinlegen.

Verwandlung 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 Projektnamen in diesem Baum und wählen Sie Framework-Unterstützung hinzufügen...
Erstellen eines einfachen Webprojekts in IntelliJ Idea Enterprise.  Schritt für Schritt, mit Bildern - 7
Es öffnet sich ein Fenster, in dem wir Unterstützung für alle möglichen Frameworks für unser Projekt hinzufügen können. Aber wir brauchen nur eine: Webanwendung . Wir wählen ihn.
Erstellen eines einfachen Webprojekts in IntelliJ Idea Enterprise.  Schritt für Schritt, mit Bildern - 8
Wir überprüfen, ob neben Web Application ein Häkchen gesetzt ist , und im Hauptteil des Fensters wird vermerkt, dass sofort eine web.xml- Datei für uns erstellt werden soll (ich empfehle, das Kontrollkästchen zu aktivieren, wenn es nicht vorhanden ist). . Danach werden wir sehen, dass die Struktur unseres Projekts um den Webordner ergänzt wurde .
Erstellen eines einfachen Webprojekts in IntelliJ Idea Enterprise.  Schritt für Schritt, mit Bildern - 9
Dies ist die Wurzel unseres Webprojekts unter / . Das heißt, wenn wir die Localhost-Adresse im Browser eingeben (natürlich beim Start), dann wird genau hier darauf zugegriffen, im Stammverzeichnis des Webprojekts. Wenn wir localhost/addUser eingeben , sucht der Webordner nach einer Ressource namens addUser .
Das Wichtigste ist, dass wir verstehen, dass der Webordner das Stammverzeichnis unseres Projekts ist, wenn wir es auf Tomcat hochladen. Jetzt haben wir eine bestimmte Ordnerstruktur, aber im fertigen Projekt, das wir hochladen, wird sie etwas anders sein und der Webordner wird dort das Stammverzeichnis sein.
Im Web gibt es einen erforderlichen Ordner namens WEB-INF , in dem sich die Datei web.xml befindet , die wir im vorherigen Schritt erstellen wollten. Lass es uns öffnen.
Erstellen eines einfachen Webprojekts in IntelliJ Idea Enterprise.  Schritt für Schritt, mit Bildern - 10
Wie Sie sehen, ist noch nichts Interessantes darin, nur der „Hut“. Übrigens, wenn wir nicht darum gebeten hätten, es zu erstellen, hätten wir es möglicherweise manuell erstellen müssen, d. h. den gesamten „Header“ von Hand eingeben oder im Extremfall im Internet nach einer fertigen Version suchen müssen . Wozu dient web.xml ? Zur Kartierung. Hier teilen wir Tomcat mit, welche URL-Anfragen an welche Servlets gesendet werden sollen. Aber das ist alles später, wir lassen es vorerst leer. Es gibt auch eine Datei index.jsp im Webordner . Lass es uns öffnen.
Erstellen eines einfachen Webprojekts in IntelliJ Idea Enterprise.  Schritt für Schritt, mit Bildern - 11
Dies ist sozusagen die Datei, die standardmäßig ausgeführt wird. Das heißt, wenn wir das Projekt starten, werden wir genau das sehen. Im Wesentlichen ist JSP eine normale HTML-Datei, mit dem Unterschied, 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 die HTML-Datei geschrieben haben, wird ohne Änderungen angezeigt. Wenn wir „Hallo Welt“ geschrieben haben, wird diese Inschrift angezeigt, sobald wir die Seite öffnen, und zwar in 5 Minuten und morgen und in einer Woche und in einem Jahr. Sie wird sich nicht ändern. Was aber, wenn wir das aktuelle Datum auf der Seite anzeigen möchten? Wenn wir einfach „27. Oktober 2017“ schreiben, dann sehen wir morgen dasselbe Datum, und zwar in einer Woche und in einem Jahr. Aber ich möchte, dass dieses Datum weiterhin relevant ist. Hier hilft uns die Möglichkeit, Code direkt innerhalb der Seite auszuführen. Wir können ein Datumsobjekt abrufen, es in die benötigte Form konvertieren und auf der Seite anzeigen. Dann wird jeden Tag, wann immer wir die Seite öffnen, das Datum immer relevant sein. Benötigen wir nur statische Inhalte, dann reichen uns ein normaler Webserver und HTML-Dateien. Wir brauchen kein Java, Maven oder Tomcat. Wenn wir jedoch dynamische Inhalte verwenden möchten, ist dies alles von Nutzen. Aber jetzt kehren wir zu unserer index.jsp zurück . Lassen Sie uns anstelle des Standard-Headers etwas Eigenes angeben, zum Beispiel „Meine Super-Web-App!“, und in den Text schreiben wir zum Beispiel: „Ich lebe!“ Wir sind fast bereit, unser Projekt zu starten! Leider ist das übliche grüne Dreieck zum Starten des Programms nicht aktiv.
Erstellen eines einfachen Webprojekts in IntelliJ Idea Enterprise.  Schritt für Schritt, mit Bildern - 12
Klicken wir auf die Schaltfläche links davon (auf dem Bildschirm mit einem roten Pfeil gekennzeichnet) und wählen Sie Konfigurationen bearbeiten... Es öffnet sich ein Fenster, in dem wir aufgefordert werden, auf das grüne Pluszeichen zu klicken, um eine Konfiguration hinzuzufügen. Klicken Sie darauf, es befindet sich in der oberen linken Ecke des Fensters.
Erstellen eines einfachen Webprojekts in IntelliJ Idea Enterprise.  Schritt für Schritt, mit Bildern - 13
Wählen Sie den Punkt Tomcat-Server und den Unterpunkt Lokal aus. Es öffnet sich ein Fenster mit vielen verschiedenen Parametern, aber wir sind mit fast allen und dem Standardparameter zufrieden.
Erstellen eines einfachen Webprojekts in IntelliJ Idea Enterprise.  Schritt für Schritt, mit Bildern - 14
Wir können unserer Konfiguration irgendwie einen schönen Namen geben, anstatt den Standardnamen „Unbenannt“ (ganz oben) zu verwenden. Es ist auch notwendig zu überprüfen, ob die Idee Tomcat erfolgreich in unserem System gefunden hat (Sie haben es ja schon einmal heruntergeladen und installiert , oder?). Wenn Sie es nicht finden können (was unwahrscheinlich ist), klicken Sie auf den Abwärtspfeil und wählen Sie aus, wo wir es installiert haben, oder eine andere Version, wenn Sie mehrere davon haben. Ich habe eines und es ist bereits installiert, sodass alles wie auf dem Screenshot aussieht. Und ganz unten im Fenster sehen wir eine Warnung, dass kein einziges Artefakt für die Bereitstellung auf dem Server vorgesehen ist. Und rechts neben dieser Aufschrift befindet sich eine Schaltfläche, die die Behebung dieses Fehlers anbietet. Wir klicken darauf und sehen, dass die Idee selbst alles gefunden hat, alles selbst erstellt hat, was ihr fehlte, und alle Einstellungen selbst vorgenommen hat.
Erstellen eines einfachen Webprojekts in IntelliJ Idea Enterprise.  Schritt für Schritt, mit Bildern - 15
Wir sehen, dass wir von der Registerkarte „Server“ zur Registerkarte „Bereitstellung“ weitergeleitet wurden . Im Abschnitt „Beim Serverstart bereitstellen“ haben wir bereits das Artefakt, das bereitgestellt werden muss, und unten wird angezeigt, dass dieses Artefakt vor der Bereitstellung erstellt wird. Bewerben, 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. Sie können diesen Abschnitt ausblenden, indem Sie auf die entsprechende Schaltfläche auf der rechten Seite des Fensters klicken.
Erstellen eines einfachen Webprojekts in IntelliJ Idea Enterprise.  Schritt für Schritt, mit Bildern - 16
Wir sehen auch, dass das grüne Dreieck für den Start bereits aktiv ist. Wer alles überprüfen möchte, kann auf die Schaltfläche mit den Projekteinstellungen klicken (rechts neben den Startschaltflächen, markiert mit einem roten Pfeil), zum Abschnitt Artefakte gehen und sicherstellen, dass das Artefakt tatsächlich erstellt wurde. Es war erst da, als wir den Fix- Knopf gedrückt haben , aber jetzt ist alles in Ordnung. Und diese Konfiguration passt ganz gut zu uns. Kurz gesagt besteht der Unterschied zwischen my-super-project:war und my-super-project:war explosiond darin, dass my-super-project:war nur eine WAR- Datei erstellt (die nur ein Archiv ist) und die Option mit explodiert ist einfach ein „ausgepackter“ Krieg . Und diese Option ist für mich persönlich bequemer, da ich damit kleine Änderungen schnell auf dem Server implementieren kann. Tatsächlich handelt es sich bei dem Artefakt um unser Projekt, nur dass es bereits kompiliert ist und dessen Ordnerstruktur so geändert wurde, dass es direkt auf Tomcat hochgeladen werden kann. Es wird ungefähr so ​​aussehen:
Erstellen eines einfachen Webprojekts in IntelliJ Idea Enterprise.  Schritt für Schritt, mit Bildern - 17
Nun ist alles bereit, unser Projekt zu starten. Wir drücken den begehrten grünen Startknopf und freuen uns über das Ergebnis! :) :)
Erstellen eines einfachen 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