CodeGym /Java блог /Случаен /Създаване на най-простия уеб проект в IntelliJ IDEA Enter...
John Squirrels
Ниво
San Francisco

Създаване на най-простия уеб проект в IntelliJ IDEA Enterprise. Стъпка по стъпка, със снимки

Публикувано в групата
Познания, необходими за разбиране на статията: Вие вече повече or по-малко сте разбрали Java Core и бихте искали да разгледате JavaEE технологиите и уеб програмирането . Би било най-разумно в момента да изучавате мисията Java Collections, която се занимава с теми, близки до статията.
Създаване на най-простия уеб проект в IntelliJ IDEA Enterprise.  Стъпка по стъпка, със снимки - 1
В момента използвам IntelliJ IDEA Enterprise Edition ( бележка на редактора: това е платена разширена version на IDE; обикновено се използва за професионално развитие). В него е много по-лесно да работите с уеб проекти, отколкото в безплатното Community Edition . В изданието Enterprise буквално едно щракване на мишката изгражда проекта, пуска го в контейнер на сървлет, стартира сървъра и дори отваря уеб page за проекта в браузъра. В безплатната version на IDEA ще трябва да направите голяма част от това сами, т.е. "ръчно". Използвам Apache Mavenза изграждане на проекта и управление на неговия жизнен цикъл. Използвах само малка част от неговите възможности (управление на пакети/зависимости) в този проект. Като сервлет контейнер/сървър за applications избрах Apache Tomcat version 9.0.12.

Да започваме

Първо отворете IntelliJ IDEA и създайте празен проект Maven . Създаване на най-простия уеб проект в IntelliJ IDEA Enterprise.  Стъпка по стъпка, със снимки - 2Отляво изберете Maven и проверете дали JDK на проекта е избран по-горе. Ако не е там, изберете един от списъка or щракнете върху Нов ... и изберете един от компютъра. Създаване на най-простия уеб проект в IntelliJ IDEA Enterprise.  Стъпка по стъпка, със снимки - 3В този прозорец трябва да посочите GroupId и ArtifactId . GroupId се отнася до уникалния идентификатор на компанията, която издава проекта . Обичайната практика е да се използва името на домейна на компанията, но в обратен ред. Но не като огледало. Например, ако името на домейн на компания е maven.apache.org , тогава нейният GroupId ще бъде org.apache.maven. Тоест първо пишем домейна от първо ниво, добавяме точка, след това домейна от второ ниво и т.н. Това е общоприетият подход. Ако „разработвате“ проекта сами (а не като част от компания), тогава поставяте вашето лично име на домейн тук (също в обратен ред!). Ако имате, разбира се. :) Ако не, не се притеснявайте. Всъщност можете да напишете всичко тук .
За компания с име на домейн john.doe.org GroupId ще бъде org.doe.john. Тази конвенция за именуване е необходима за разделяне на проекти с идентични имена, произведени от различни компании.
В този пример ще използвам фиктивен домейн: fatlady.info.codegym.cc . Съответно въвеждам cc.codergym.info.fatlady в полето GroupId . ArtifactId е просто името на нашия проект. Можете да използвате букви и определени символи (например тирета), за да разделяте думите. Нашият "артефакт" ще бъде кръстен точно Howто пишем тук. В този пример ще използвам my-super-project . Все още не докосвайте полето за version — просто го оставете Howто е. Създаване на най-простия уеб проект в IntelliJ IDEA Enterprise.  Стъпка по стъпка, със снимки - 4И ето стандартния прозорец IDEA, когато създавате нов проект. Спазвайки традицията, нека го наречем мой-супер-проект . Създаване на най-простия уеб проект в IntelliJ IDEA Enterprise.  Стъпка по стъпка, със снимки - 5Проектът е създаден!
Pom.xml веднага се отваря. Това е файл с настройки на Maven. Ако искаме да кажем на Maven Howво да прави or къде да намери нещо, ние описваме всичко това в този pom.xml файл. Намира се в корена на проекта.
Виждаме, че сега съдържа точните данни, които въведохме при създаването на проекта Maven : groupId , artifactId и version (не докоснахме последния).

Структурата на нашия проект

Този проект на Maven има специфична структура. Създаване на най-простия уеб проект в IntelliJ IDEA Enterprise.  Стъпка по стъпка, със снимки - 6Както можете да видите, коренът има:
  • директория .idea , която съдържа IDEA настройките на текущия проект;
  • src директория, където създаваме нашия изходен code ;
  • файл my-super-project.iml , който е проектен файл, създаден от IDEA;
  • файлът pom.xml (файлът на проекта Maven, който споменах по-рано), който вече е отворен. Ако споменавам някъде pom.xml, това е файлът, за който говоря.
В папката src има две подпапки:
  • main — за нашия code;
  • test — за тестове на нашия code.
В main и test има папка java . Можете да мислите за тях като за една и съща папка, с изключение на това, че основната е за изходния code, а тази в test е за тестовия code. Засега нямаме полза от папката с ресурси . Няма да го използваме. Но просто го оставете там.

Превръщането му в уеб проект

Време е да преобразуваме нашия проект Maven в уеб проект. За да направите това, щракнете с десния бутон върху името на проекта в това дърво и изберете Добавяне на поддръжка на рамка ... Създаване на най-простия уеб проект в IntelliJ IDEA Enterprise.  Стъпка по стъпка, със снимки - 7Отваря се прозорец, където можем да добавим поддръжка за различни рамки към нашия проект. Но имаме нужда само от едно: уеб приложение . И това е този, който избираме. Създаване на най-простия уеб проект в IntelliJ IDEA Enterprise.  Стъпка по стъпка, със снимки - 8Уверете се, че е поставена отметка в квадратчето за уеб приложение и че основният прозорец показва, че искаме файлът web.xml да бъде създаден автоматично (препоръчвам да поставите отметка в квадратчето, ако вече не е избрано). След това виждаме, че уеб папката е добавена към структурата на нашия проект. Създаване на най-простия уеб проект в IntelliJ IDEA Enterprise.  Стъпка по стъпка, със снимки - 9Това е коренът на нашия уеб проект с address/. С други думи, ако въведем ' localhost ' в браузъра (когато проектът работи, разбира се), тогава той ще изглежда тук, в основата на уеб проекта. Ако въведем localhost/addUser , тогава той ще търси ресурс, наречен addUser в уеб папката.
Основното нещо, което трябва да разберете е, че уеб папката е коренът на нашия проект, когато го поставим в Tomcat. Сега имаме определена структура на папките, но в готовия проект, който ще създадем, тя ще бъде малко по-различна. По-конкретно, уеб папката ще бъде основната.
В web има необходима папка, наречена WEB-INF , където се намира файлът web.xml , т.е. този, който поискахме от програмата да създаде в последната стъпка. Да го отворим. Създаване на най-простия уеб проект в IntelliJ IDEA Enterprise.  Стъпка по стъпка, със снимки - 10Виждате, че все още няма нищо интересно в него, само заглавка. Между другото, ако не сте поискали създаването на file, тогава ще трябва да го създадете ръчно, т.е. да напишете всички заглавки на ръка. Или поне потърсете готова version в интернет. За Howво ни трябва web.xml ? За картографиране. Тук ще посочим за Tomcat кои URL искания към кои сървлети да бъдат предадени. Но ще стигнем до това по-късно. Засега го оставете празно. Уеб папката също има файл index.jsp. Отвори го. Създаване на най-простия уеб проект в IntelliJ IDEA Enterprise.  Стъпка по стъпка, със снимки - 11Това е файлът, който ще бъде изпълнен по подразбиране, така да се каже. С други думи, точно това ще видим, когато започнем проекта. По принцип jsp е обикновен HTML файл , с изключение на това, че можете да изпълнявате Java code вътре в него.

Малко за статичното и динамичното съдържание

Статичното съдържание е съдържание, което не се променя с времето. Всичко, което пишем в HTML файл, се показва непроменено, точно Howто е написано. Ако напишем " здравей свят ", този текст ще се покаже веднага щом отворим pageта, и след 5 minutesи, и утре, и след седмица, и след година. Няма да се промени. Но Howво ще стане, ако искаме да покажем текущата дата на pageта? Ако просто напишем " 27 октомври 2017 г", тогава утре щяхме да видим същата дата, и седмица по-късно, и година по-късно. Но бихме искали датата да е текуща. Това е мястото, където способността за изпълнение на code направо на pageта е полезна. Можем да получим date обект, преобразувайте го в желания формат и го покажете на pageта. След това, всеки ден, когато отворим pageта, датата винаги ще бъде текуща. Ако имаме нужда само от статично съдържание, тогава имаме нужда само от обикновен уеб сървър и HTML файлове. Нямаме нужда от Java, Maven or Tomcat. Но ако искаме да използваме динамично съдържание, имаме нужда от всички тези инструменти. Но засега нека се върнем към нашия index.jsp . Нека да посочим нещо различно от стандартното заглавие, например „ Моето супер уеб приложение! “ След това в тялото да напишем „ Жив съм! “ Почти сме готови да започнем нашия проект! За съжаление обичайният зелен триъгълник за стартиране на програмата не е активен. Създаване на най-простия уеб проект в IntelliJ IDEA Enterprise.  Стъпка по стъпка, със снимки - 12Щракнете върху бутона вляво от него (обозначен на екрана с червена стрелка) и изберете Редактиране на конфигурации ... Това отваря прозорец, в който сме поканени да щракнем върху зелен знак плюс, за да добавим няHowва конфигурация. Кликнете върху него (в горния ляв ъгъл на прозореца). Създаване на най-простия уеб проект в IntelliJ IDEA Enterprise.  Стъпка по стъпка, със снимки - 13Изберете Tomcat сървър > Локален . Ще се отвори прозорец с много опции, но настройките по подразбиране ни устройват за почти всичко. Създаване на най-простия уеб проект в IntelliJ IDEA Enterprise.  Стъпка по стъпка, със снимки - 14Можем да дадем на нашата конфигурация красиво име instead of стандартното Unnamed (най-отгоре). Също така трябва да проверим дали IDEA е намерила успешно Tomcat в нашата система (вече сте изтеглor и инсталиралиправилно е?). Ако не е намерен (което е малко вероятно), натиснете стрелката надолу и изберете къде е инсталиран. Или изберете различна version, ако имате повече от една инсталирана. Имам само един и вече е инсталиран. Ето защо изглежда така, Howто изглежда на моя екран. И в най-долната част на прозореца виждаме предупреждение, което ни предупреждава, че досега не са посочени артефакти за внедряване на сървъра. Вдясно от това предупреждение има бутон, предлагащ да коригираме това. Щракваме върху него и виждаме, че IDEA успя да намери всичко сама, създаде всичко, което липсваше, и конфигурира всички настройки сама. Създаване на най-простия уеб проект в IntelliJ IDEA Enterprise.  Стъпка по стъпка, със снимки - 15Виждаме, че това ни премести от раздела Сървър към раздела Разполагане , под Разполагане при стартиране на сървърараздел и сега имаме артефакт, който трябва да бъде разгърнат. Щракнете върху Приложи и OK. И първо виждаме, че в долната част на прозореца се е появил раздел с нашия локален Tomcat сървър, където ще бъде поставен нашият артефакт. Свийте този раздел, като щракнете върху съответния бутон от дясната страна на прозореца. Създаване на най-простия уеб проект в IntelliJ IDEA Enterprise.  Стъпка по стъпка, със снимки - 16Сега виждаме, че зеленият стартов триъгълник е активен. За тези, които обичат да проверяват отново всичко, можете да щракнете върху бутона за настройки на проекта (вдясно от бутоните за стартиране, обозначен с червена стрелка), отидете в секцията Артефакти и се уверете, че артефактът наистина е създаден. Не беше там, докато не натиснахме тази корекциябутон, но сега всичко е наред. И тази конфигурация ни устройва напълно. С две думи, разликата между my-super-project:war и my-super-project:war exploded е, че my-super-project:war се състои само от един war файл (който е просто архив) и versionта с exploded е просто "неопакованата" война . И лично това е опцията, която намирам за по-удобна, защото ви позволява бързо да отстранявате незначителни промени в сървъра. По същество артефактът е наш проект, току-що компorран — и където структурата на папките е променена, за да позволи на Tomcat директен достъп до него. Ще изглежда нещо подобно:
Създаване на най-простия уеб проект в IntelliJ IDEA Enterprise.  Стъпка по стъпка, със снимки - 17
Сега всичко е готово за стартиране на нашия проект. Натиснете ценния зелен бутон за стартиране и се насладете на резултата! :)
Създаване на най-простия уеб проект в IntelliJ IDEA Enterprise.  Стъпка по стъпка, със снимки - 18
Коментари
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION