JavaRush /Blog Java /Random-PL /Tworzenie prostego projektu internetowego w IntelliJ Idea...
Стас Пасинков
Poziom 26
Киев

Tworzenie prostego projektu internetowego w IntelliJ Idea Enterprise. Krok po kroku, ze zdjęciami

Opublikowano w grupie Random-PL
Poziom wiedzy wymagany do zrozumienia artykułu: znasz już mniej więcej Java Core i chciałbyś przyjrzeć się technologiom JavaEE oraz programowaniu webowemu. Ma to największy sens, jeśli aktualnie studiujesz zadanie Kolekcje Java, które obejmuje tematy zbliżone do artykułu. Tworzenie prostego projektu internetowego w IntelliJ Idea Enterprise.  Krok po kroku, ze zdjęciami - 1Obecnie korzystam z IntelliJ IDEA Enterprise Edition (jest to płatna, zaawansowana wersja IDE, zwykle używana w programowaniu zawodowym - przyp. red. ). Dużo łatwiej jest pracować z projektami internetowymi niż z darmową edycją społecznościową. Tak więc w wersji Enterprise dosłownie jednym kliknięciem myszki projekt jest składany, wrzucany do kontenera serwletów, uruchamiany jest serwer, a nawet w przeglądarce otwiera się strona z działającym projektem. W darmowej wersji tego pomysłu większość czynności musiałaby zostać wykonana niezależnie, że tak powiem, „ręcznie”. Do budowy projektu i zarządzania jego cyklem życia używam Apache Maven. Wykorzystałem w tym tylko niewielką część jego możliwości (zarządzanie pakietami/zależnościami). Jako kontener serwletów/serwer aplikacji wybrałem Apache Tomcat w wersji 9.0.0.M4. Wiem, że są już nowsze wersje, ale ja zainstalowałem tę.

Zacznijmy

Najpierw otwórzmy IntelliJ IDEA i utwórzmy pusty projekt Maven.
Tworzenie prostego projektu internetowego w IntelliJ Idea Enterprise.  Krok po kroku, ze zdjęciami - 2
Tutaj po lewej stronie wybieramy Mavena, sprawdź, czy JDK dla projektu jest wskazany na górze. Jeśli go tam nie ma, wybierz ten, którego potrzebujesz z listy lub kliknij Nowy... i wybierz bezpośrednio ze swojego komputera. Na środku okna mam animację ładowania listy archetypów. Nie potrzebujemy ich, więc nie czekając na pobranie, możesz kliknąć Dalej w dolnej części okna.
Tworzenie prostego projektu internetowego w IntelliJ Idea Enterprise.  Krok po kroku, ze zdjęciami - 3
W tym oknie musisz określić GroupId i ArtifactId . GroupId odnosi się do unikalnego identyfikatora firmy, która produkuje projekt. Powszechną praktyką jest używanie nazwy domeny firmy, ale w odwrotnej kolejności. Nie w sensie kopii lustrzanej, ale jeśli na przykład nazwa domeny firmy to maven.apache.org , to jej GroupId będzie brzmieć org.apache.maven . Oznacza to, że najpierw piszemy domenę pierwszego poziomu, oddzielamy ją kropką, wpisujemy nazwę domeny drugiego poziomu i tak dalej. Jest to ogólnie przyjęte podejście. W przypadku, gdy „kroisz” projekt samodzielnie, a nie w ramach firmy, wpisz tutaj swoją osobistą nazwę domeny (również w odwrotnej kolejności!). Jeśli oczywiście je masz :). Jeśli nie, nie denerwuj się. Tak naprawdę można tu napisać wszystko .
W przypadku firmy o nazwie domeny vasya.pupkin.org identyfikatorem grupy będzie org.pupkin.vasya. Takie podejście do nazw jest potrzebne, aby oddzielić projekty o tej samej nazwie, ale wydane przez różne firmy.
W tym przykładzie użyję fikcyjnej nazwy domeny fatfaggy.info.javarush.ru . W związku z tym w polu GroupId wpisuję ru.javarush.info.fatfaggy . ArtefactId to po prostu nazwa naszego projektu. Aby oddzielić słowa, możesz używać liter i niektórych symboli (na przykład łączników). Nasz „artefakt” będzie się nazywał dokładnie tak, jak tu piszemy. W tym przykładzie piszę mój-super-projekt . Na razie nie ruszamy pola wersji, zostawiamy to tak, jak jest.
Tworzenie prostego projektu internetowego w IntelliJ Idea Enterprise.  Krok po kroku, ze zdjęciami - 4
No cóż, standardowe okno IDEA przy tworzeniu nowego projektu. Nazwijmy to zgodnie z tradycją moim-super-projektem .
Tworzenie prostego projektu internetowego w IntelliJ Idea Enterprise.  Krok po kroku, ze zdjęciami - 5
Projekt powstał!
Plik pom.xml natychmiast otworzył się przed nami. To jest plik z ustawieniami Mavena. Jeżeli chcemy „powiedzieć” Mavenowi co i jak ma zrobić lub skąd coś wziąć, opisujemy to wszystko właśnie w tym pliku pom.xml. Znajduje się w katalogu głównym projektu.
Widzimy, że zawiera teraz dokładnie te dane, które wprowadziliśmy tworząc projekt Maven: groupId , artifactId i wersję (tego ostatniego nie ruszaliśmy).

Nasza struktura projektu

Ten projekt Maven ma określoną strukturę.
Tworzenie prostego projektu internetowego w IntelliJ Idea Enterprise.  Krok po kroku, ze zdjęciami - 6
Jak widzimy, u podstaw leży:
  • katalog .idea , który zawiera ustawienia pomysłów dla bieżącego projektu;
  • katalog src w którym tworzymy nasze źródła;
  • plik my-super-project.iml , plik projektu stworzony przez IDEA;
  • pom.xml , ten sam plik projektu Maven, o którym mówiłem powyżej, a który teraz mamy otwarty . Jeżeli wspomnę gdzieś pom.xml lub „pom”, będę miał na myśli ten konkretny plik.
Folder src zawiera z kolei dwa podfoldery:
  • main - dla naszego kodu;
  • test - do testów naszego kodu.
Zarówno main, jak i test mają folder Java . Weź pod uwagę, że są to te same foldery, tylko główny jest przeznaczony odpowiednio na kod źródłowy, a testowany na kod testowy. Folder zasobów na razie nie jest nam w ogóle potrzebny, nie będziemy go używać. Ale niech się położy.

Przekształcenie w projekt internetowy

Nadszedł czas, abyśmy przekonwertowali nasz projekt Maven na projekt internetowy. Aby to zrobić, kliknij prawym przyciskiem myszy nazwę projektu w tym drzewie i wybierz opcję Dodaj obsługę frameworku...
Tworzenie prostego projektu internetowego w IntelliJ Idea Enterprise.  Krok po kroku, ze zdjęciami - 7
Otworzy się okno, w którym możemy dodać obsługę najróżniejszych frameworków dla naszego projektu. Ale potrzebujemy tylko jednego: aplikacji internetowej . Wybieramy go.
Tworzenie prostego projektu internetowego w IntelliJ Idea Enterprise.  Krok po kroku, ze zdjęciami - 8
Sprawdzamy, czy obok Web Application znajduje się znacznik wyboru , a w głównej części okna widnieje informacja, że ​​chcemy, aby od razu został nam utworzony plik web.xml (polecam zaznaczyć checkbox jeśli go nie ma) . Następnie zobaczymy, że struktura naszego projektu została uzupełniona o folder internetowy .
Tworzenie prostego projektu internetowego w IntelliJ Idea Enterprise.  Krok po kroku, ze zdjęciami - 9
To jest korzeń naszego projektu internetowego pod adresem / . Oznacza to, że jeśli w przeglądarce wprowadzimy adres localhost (oczywiście kiedy ją uruchomimy), wówczas będzie on dostępny dokładnie tutaj, w katalogu głównym projektu internetowego. Jeśli wprowadzimy localhost/addUser , folder sieciowy będzie szukać zasobu o nazwie addUser .
Najważniejsze jest, aby zrozumieć, że folder sieciowy jest źródłem naszego projektu, gdy przesyłamy go do Tomcat. Teraz mamy pewną strukturę folderów, ale w gotowym projekcie, który prześlemy, będzie ona nieco inna, a folder web będzie tam głównym katalogiem.
W web istnieje wymagany folder o nazwie WEB-INF , w którym znajduje się plik web.xml , o którego utworzenie poprosiliśmy w poprzednim kroku. Otwórzmy to.
Tworzenie prostego projektu internetowego w IntelliJ Idea Enterprise.  Krok po kroku, ze zdjęciami - 10
Jak widać, nie ma w nim jeszcze nic ciekawego, tylko „kapelusz”. Swoją drogą, gdybyśmy nie poprosili o jego utworzenie, być może musielibyśmy go stworzyć ręcznie, czyli wpisać odręcznie cały ten „nagłówek” lub w skrajnych przypadkach poszukać gotowej wersji w Internecie . Do czego służy plik web.xml ? Do mapowania. Tutaj powiemy Tomcatowi, które żądania URL mają być wysyłane do jakich serwletów. Ale to wszystko później, na razie zostawimy to puste. W folderze web znajduje się także plik o nazwie Index.jsp . Otwórzmy to.
Tworzenie prostego projektu internetowego w IntelliJ Idea Enterprise.  Krok po kroku, ze zdjęciami - 11
Jest to plik, który, że tak powiem, zostanie wykonany domyślnie. Oznacza to, że kiedy uruchomimy projekt, dokładnie to zobaczymy. Zasadniczo jsp jest zwykłym plikiem HTML, z tą różnicą, że można w nim wykonać kod Java.

Trochę o treściach statycznych i dynamicznych

Treść statyczna to treść, która nie zmienia się w czasie. Wszystko, co napisaliśmy w pliku HTML, wyświetli się bez zmian. Jeśli napisaliśmy hello world, to napis ten wyświetli się zaraz po otwarciu strony i za 5 minut, i jutro, i za tydzień, i za rok. Ona się nie zmieni. A co jeśli chcemy wyświetlić na stronie aktualną datę? Jeśli napiszemy po prostu „27 października 2017 r.”, to jutro zobaczymy tę samą datę, za tydzień i za rok. Chciałbym jednak, żeby ta data nadal była aktualna. Tutaj z pomocą przychodzi nam możliwość wykonania jakiegoś kodu bezpośrednio na stronie. Możemy pobrać obiekt daty, przekonwertować go do potrzebnej nam formy i wyświetlić na stronie. Wtedy każdego dnia, ilekroć otworzymy stronę, data będzie zawsze istotna. Jeśli potrzebujemy tylko treści statycznych, wystarczy nam zwykły serwer WWW i pliki HTML. Nie potrzebujemy Javy, Mavena ani Tomcata. Jeśli jednak chcemy skorzystać z treści dynamicznych, to właśnie tutaj się to wszystko przyda. Ale na razie wróćmy do naszego pliku Index.jsp . Zamiast standardowego nagłówka wskażmy coś własnego, na przykład „Moja super aplikacja internetowa!”, a w treści napiszemy na przykład „Żyję!” Jesteśmy już prawie gotowi do uruchomienia naszego projektu! Ale niestety zwykły zielony trójkąt do uruchomienia programu nie jest aktywny.
Tworzenie prostego projektu internetowego w IntelliJ Idea Enterprise.  Krok po kroku, ze zdjęciami - 12
Kliknijmy przycisk po jego lewej stronie (oznaczony na ekranie czerwoną strzałką) i wybierz Edytuj konfiguracje... Otworzy się okno, w którym zostaniemy poproszeni o kliknięcie zielonego znaku plusa w celu dodania jakiejś konfiguracji. Kliknij na niego, znajduje się on w lewym górnym rogu okna.
Tworzenie prostego projektu internetowego w IntelliJ Idea Enterprise.  Krok po kroku, ze zdjęciami - 13
Wybierz element Serwer Tomcat i element podrzędny Lokalny. Otworzy się okno z wieloma różnymi parametrami, ale jesteśmy zadowoleni z prawie wszystkiego i domyślnego.
Tworzenie prostego projektu internetowego w IntelliJ Idea Enterprise.  Krok po kroku, ze zdjęciami - 14
Możemy jakoś ładnie nazwać naszą konfigurację zamiast standardowego Unnamed (na samej górze). Warto także sprawdzić, czy pomysł pomyślnie odnalazł się w naszym systemie Tomcat (już wcześniej go pobrałeś i zainstalowałeś , prawda?). Jeśli nie możesz go znaleźć (co jest mało prawdopodobne), kliknij strzałkę w dół i wybierz, gdzie go zainstalowaliśmy lub inną wersję, jeśli masz ich kilka. Mam taki i jest już zainstalowany, więc wszystko wygląda jak na zrzucie ekranu. A na samym dole okna widzimy, że znajduje się ostrzeżenie, że nie ma ani jednego artefaktu przeznaczonego do wdrożenia na serwerze. Po prawej stronie tego napisu znajduje się przycisk, który oferuje naprawienie tej wady. Klikamy na to i widzimy, że sam pomysł znalazł wszystko, sam stworzył wszystko, czego mu brakowało i sam dokonał wszystkich ustawień.
Tworzenie prostego projektu internetowego w IntelliJ Idea Enterprise.  Krok po kroku, ze zdjęciami - 15
Widzimy, że zostaliśmy przeniesieni z karty Serwer na kartę Wdrożenie , w sekcji Wdrożenie przy uruchomieniu serwera mamy już artefakt, który należy wdrożyć, a poniżej wskazano, że artefakt ten zostanie zbudowany przed wdrożeniem. Zastosuj, OK. I widzimy, że najpierw na dole okna pojawiła się sekcja z naszym lokalnym serwerem Tomcat, na którym zostanie umieszczony nasz artefakt. Możesz zwinąć tę sekcję, klikając odpowiedni przycisk po prawej stronie okna.
Tworzenie prostego projektu internetowego w IntelliJ Idea Enterprise.  Krok po kroku, ze zdjęciami - 16
Widzimy również, że zielony trójkąt do uruchomienia jest już aktywny. Dla tych, którzy chcą wszystko sprawdzić, możesz kliknąć przycisk z ustawieniami projektu (na prawo od przycisków uruchamiania, oznaczony czerwoną strzałką), przejść do sekcji Artefakty i upewnić się, że artefakt rzeczywiście został utworzony. Nie było go, dopóki nie nacisnęliśmy przycisku Napraw , ale teraz wszystko jest w porządku. I taka konfiguracja bardzo nam odpowiada. W skrócie, różnica pomiędzy my-super-project:war i my-super-project:war eksplodowała polega na tym, że my-super-project:war utworzy tylko jeden plik wojny (który jest tylko archiwum), a opcja z eksplodowała , jest po prostu „rozpakowaną” wojną . I ta opcja jest dla mnie osobiście wygodniejsza, ponieważ pozwala mi szybko wdrażać drobne zmiany na serwerze. Tak naprawdę artefaktem jest nasz projekt, jedynie już skompilowany, w którym zmieniono strukturę folderów, tak aby można było go wgrać bezpośrednio do Tomcata. Będzie to wyglądać mniej więcej tak:
Tworzenie prostego projektu internetowego w IntelliJ Idea Enterprise.  Krok po kroku, ze zdjęciami - 17
Cóż, teraz wszystko jest gotowe do uruchomienia naszego projektu. Wciskamy upragniony zielony przycisk start i cieszymy się efektem! :)
kreacja простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 18
Komentarze
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION