JavaRush /Java блог /Java Developer /Создание простейшего веб-проекта в IntelliJ Idea Enterpri...
Стас Пасинков
26 уровень
Киев

Создание простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками

Статья из группы Java Developer
Уровень знаний, необходимых для понимания статьи: вы уже более-менее разобрались с Java Core и хотели бы посмотреть на JavaEE-технологии и web-программирование. Логичнее всего, если вы сейчас изучаете квест Java Collections, где рассматриваются близкие статье темы. Создание простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 1В настоящее время я использую IntelliJ IDEA Enterprise Edition (это платная расширенная версия IDE, её обычно используют в профессиональной разработке, — прим. ред.). В ней гораздо проще работать с веб-проектами, чем в бесплатной Community Edition. Так, в Enterprise Edition буквально по одному щелчку мышки происходит сборка проекта, заливается в контейнер сервлетов, запускается сервер и даже открывается страничка с запущенным проектом в браузере. В бесплатной версии идеи многое из этого пришлось бы делать самостоятельно, так сказать, «ручками». Для сборки проекта и управления его жизненным циклом я пользуюсь Apache Maven. В этом я использовал лишь малую толику его возможностей (управление пакетами/зависимостями). В качестве контейнера сервлетов/сервера приложений (Application server) я выбрал Apache Tomcat версии 9.0.0.М4. Я знаю, что уже есть и более новые версии, но у меня установлена именно эта.

Приступаем

Для начала откроем IntelliJ IDEA и создадим пустой Maven-проект.
Создание простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 2
Тут слева выбираем Maven, проверяем, чтобы сверху была указана JDK для проекта. Если её нет, выберите необходимую из списка, либо жмите New… и выбирайте напрямую с компьютера. В середине окна у меня крутится анимация загрузки списка архетипов. Нам они не нужны, поэтому, не дожидаясь загрузки, смело клацаете Next внизу окна.
Создание простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 3
В этом окне необходимо указать GroupId и ArtifactId. Под GroupId подразумевается уникальный идентификатор компании, которая выпускает проект. Обычно принято использовать доменное имя компании, только в обратном порядке. Не в смысле, зеркально, а если, например, доменное имя компании maven.apache.org, то ее GroupId будет org.apache.maven. То есть сначала пишем домен первого уровня, отделяем точкой, пишем имя домена второго уровня, и так далее. Это общепринятый подход. В том случае, если вы «пилите» проект самостоятельно, а не в составе компании, пишите сюда ваше личное доменное имя (тоже в обратном порядке!). Если оно у вас, конечно же, есть:). Если нет — не расстраивайтесь. В действительности сюда можно написать что угодно.
Для компании с доменным именем vasya.pupkin.org, GroupId будет org.pupkin.vasya. Такой подход к именам нужен для того, чтобы отделять проекты с одинаковым названием, но которые выпустили разные компании.
В этом примере я буду использовать вымышленное доменное имя fatfaggy.info.javarush.ru. Соответственно, в поле GroupId я вписываю ru.javarush.info.fatfaggy. ArtefactId — это просто название нашего проекта. Можно использовать буквы и некоторые знаки (дефис, например) для разделения слов. Наш «артефакт» будет называться именно так, как мы тут напишем. В этом примере, я пишу my-super-project. Поле версии пока не трогаем, оставляем как есть.
Создание простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 4
Ну и стандартное окошко IDEA при создании нового проекта. Назовем его по традиции my-super-project.
Создание простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 5
Проект создан!
Перед нами сразу открылся файл pom.xml. Это файл, с настройками Maven. Если мы хотим «рассказать» Maven’у, что и как делать или откуда что-то брать, мы описываем всё это в этом самом файле pom.xml. Он находится в корне проекта.
Видим, что в нём указаны сейчас именно те данные, которые мы вводили при создании Maven-прокта: groupId, artifactId и version (последний мы не трогали).

Структура нашего проекта

Этот Maven-проект имеет определенную структуру.
Создание простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 6
Как видим, в корне лежат:
  • директория .idea, в которой находятся настройки идеи для текущего проекта;
  • директория src, в которой мы создаем наши исходники;
  • файл my-super-project.iml, файл проекта, созданный IDEA;
  • файл pom.xml, тот самый файл Maven-проекта, о котором я говорил чуть выше, который у нас сейчас открыт. Если я буду где-то упоминать pom.xml или «помник», я буду иметь в виду именно этот файл.
В папке src в свою очередь лежат две подпапки:
  • main — для нашего кода;
  • test — для тестов для нашего кода.
И в main, и в test есть папка java. Считайте, что это одна и та же папка, только та, что в main —для кода исходников, а та, что в test — для кода тестов соответственно. Папка resources нам пока вообще не нужна, мы не будем ее использовать. Но пусть полежит.

Превращение в веб-проект

Пришло время наш преобразовать наш Maven-проект в веб-проект. Для этого кликаем правой кнопкой мышки по названию проекта в этом дереве и выбираем пункт Add framework support…
Создание простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 7
Откроется окно, где мы можем добавить поддержку всяких разных фреймворков для нашего проекта. Но нам нужен только один: Web Application. Его и выбираем.
Создание простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 8
Проверяем, что стоит галочка напротив Web Application, а в основной части окна отмечено, что мы хотим, чтобы для нас создали сразу ещё и файл web.xml (рекомендую поставить галочку, если её там нет). После этого мы увидим, что структура нашего проекта пополнилась папочкой web.
Создание простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 9
Это корень нашего веб-проекта с адресом /. То есть, если мы введем в браузере адрес localhost (когда запустим, конечно же), то это будет обращение именно сюда, в корень веб-проекта. Если введем localhost/addUser, то в папочке web будет искаться ресурс с названием addUser.
Главное, надо понять, что папка web — корень нашего проекта, когда мы его зальем на Tomcat. Сейчас у нас есть определённая структура папок, но в готовом проекте, который мы будем заливать, она будет немного другой, и именно папочка web там будет корнем.
В web лежит обязательная папка с названием WEB-INF, где находится файл web.xml, который мы просили создать на прошлом шаге. Откроем его.
Создание простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 10
Как видим, в нем пока нет ничего интересного, одна только «шапка». Кстати, если бы мы не просили его создавать, нам бы, возможно, пришлось создавать его вручную, то есть набирать «ручками» всю эту «шапку», или, в крайнем случае искать готовый вариант в интернетах. Для чего нужен web.xml? Для маппинга. Здесь мы распишем для Tomcat, какие url-запросы передавать на какие сервлеты. Но это все позже, пока оставляем его пустым. Ещё в папочке web есть файл index.jsp. Откроем его.
Создание простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 11
Это файл, который будет выполнен по умолчанию, так сказать. То есть когда мы запустим проект, то именно его и узреем. По сути, jsp — обычный html-файл, с той разницей, что в нём можно выполнять java-код.

Немного про статический и динамический контент

Статический контент — такой, который не меняется со временем. Всё то, что мы написали в html файле написали — то и будет отображаться без изменений. Если мы написали hello world — то эта надпись отобразится и как только мы откроем страничку, и через 5 минут, и завтра, и через неделю, и через год. Она не изменится. Но что, если мы хотим на страничке вывести текущую дату? Если мы просто напишем «27 октября 2017 года» — то и завтра мы увидим такую же дату, и через неделю, и через год. А хотелось бы, чтобы эта дата была все-таки актуальна. Именно тут нам и приходит на помощь возможность выполнять какой-то код прямо внутри страницы. Мы можем получить объект даты, привести его к нужному нам виду и вывести на странице. Тогда каждый день когда бы мы не открыли страничку — дата будет всегда актуальна. Если нам нужен только статический контент — то нам достаточно обычного веб-сервера и html файлов. Никакой джавы, мавенов, томкатов нам и не нужно. Но если мы хотим использовать динамический контент — вот тут то нам все это и пригодится. Но пока вернемся к нашему index.jsp. Давайте укажем вместо стандартного заголовка что-то свое, например «My super web-app!», а в теле напишем например «I'm alive!». Мы уже почти готовы к тому, чтобы запустить наш проект! Но, к сожалению, привычный зеленый треугольничек для запуска программы у нас не активен.
Создание простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 12
Нажмем на кнопку слева от него (указал на скрине красной стрелочкой) и выберем Edit configurations… Откроется окно, где нам предлагают нажать на зеленый плюсик чтоб добавить какую-то конфигурацию. Нажмем на него, он находится в левом верхнем углу окна.
Создание простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 13
Выберем пункт Tomcat Server и подпункт Local. Откроется окно со множеством всяческих параметров, но нас почти все устраивает и дефолтное.
Создание простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 14
Можем как-нибудь красиво назвать нашу конфигурацию вместо стандартного Unnamed (в самом верху). Так же необходимо проверить, что идея успешно нашла томкат у нас в системе (вы же его перед этим уже скачали и установили, да?). Если не нашла (что вряд ли) — нажимаем стрелочку вниз и выбираем где он у нас установлен, ну или же другую версию, если у вас их несколько. У меня он один и уже установлен, поэтому выглядит все так, как на скрине. И в самом низу окна видим, что светится предупреждение, что пока нет ни одного артефакта, предназначенного для деплоя на сервер. А справа от этой надписи кнопочка, которая предлагает этот недочет исправить. Жмем на нее и видим, что идея сама все нашла, сама все создала, чего ей не хватало, и сама все настройки проставила.
Создание простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 15
Видим, что нас со вкладки Server перебросило на вкладку Deployment, в разделе Deploy at the server startup у нас уже указан артефакт, который надо деплоить, ну а внизу указано, что перед деплоем этот артефакт будет билдиться. Apply, Ok. И видим, что во первых, внизу окна появился раздел с нашим локальным сервером томкат, в который будет помещен наш артефакт. Свернуть этот раздел можно нажав на соответствующею кнопку в правой части окна.
Создание простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 16
Так же видим, что зеленый треугольничек для запуска уже активен. Для тех, кто хочет все проверить — можно нажать на кнопку с настройками проекта (справа от кнопок запуска, помечена красной стрелкой), перейти в раздел Artifacts и убедиться, что артефакт действительно создан. Его не было до того момента, пока мы не нажали ту кнопку Fix, но теперь все ок. И такая конфигурация нас вполне устраивает. Если в двух словах чем отличается my-super-project:war от my-super-project:war exploded — так это тем, что my-super-project:war создаст только один файл war (который является просто архивом), а вариант с exploded — это просто «распакованный» war. И именно такой вариант лично мне более удобен, так как позволяет быстрее деплоить мелкие изменения на сервер. По сути, артефакт — это и есть наш проект, только уже скомпилированный, и в котором изменена структура папок так, чтобы его можно было выкладывать уже напрямую на томкат. Выглядеть она будет примерно вот так:
Создание простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 17
Ну что ж, теперь все готово для запуска нашего проекта. Жмем заветную зеленую кнопочку запуска и наслаждаемся результатом! :)
Создание простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 18
Комментарии (119)
ЧТОБЫ ПОСМОТРЕТЬ ВСЕ КОММЕНТАРИИ ИЛИ ОСТАВИТЬ КОММЕНТАРИЙ,
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ
И. Ж. Уровень 39
26 февраля 2024
У меня артефакт war exploded не появился и нигде не могу его найти, и не работает из за этого!
Андрей Уровень 42
5 октября 2023
спасибо коментам!!
PadreBenito Уровень 2
5 июля 2023
Господи моя невнимательность меня погубит, всё сделал как было описано в статье, но при выборе томката в конфигурации я выбрал TomEE, и указывал путь к томкату 9 и соответственно оно выдавала ошибку "the selected directory is not a valid TomEE home" я установил штук 6 томкатов разных и не понимал в чём проблема в течении 3 часов, пока на англ сайте не нашёл такого же дурака как я которому ответили что нужно выбирать в конфигурации не TomEE а Tomkat, теперь задаюсь вопросом стоит мне дальше заниматься всем этим, или у программистов это в порядке вещей?
Kurama Уровень 50
19 мая 2023
Что бы я ни делал: следовал разным статьям, менял порт, менял адрес в конфигурации, создал сервлет Всё равно после запуска кода автоматически открывается эта страница
Vlad Уровень 30
16 января 2023
Подскажите пожалуйста как шапку написвть для web.xml по другому не выходит, просто у меня не interprise версия, или хотябы статью где можно почитать как разобраться в этой шапке
Serhio Gonsales Уровень 35
30 мая 2022
Надо было сделать html проект и что бы не качать VSC, а сделать все в родной интелидж гуглится эта статья. Коротко и ясно, быстрая настройка, то что надо. Благодарствую 👍
42sides Уровень 2 Expert
8 февраля 2022
А у меня вот такая ошибка возникает( Using CATALINA_OPTS: "" NOTE: Picked up JDK_JAVA_OPTIONS: --add-opens=java.base/java.lang=ALL-UNNAMED --add-opens=java.base/java.io=ALL-UNNAMED --add-opens=java.base/java.util=ALL-UNNAMED --add-opens=java.base/java.util.concurrent=ALL-UNNAMED --add-opens=java.rmi/sun.rmi.transport=ALL-UNNAMED 08-Feb-2022 22:33:25.831 INFO [main] org.apache.catalina.startup.VersionLoggerListener.log Server version name: Apache Tomcat/10.0.16 08-Feb-2022 22:33:25.838 INFO [main] org.apache.catalina.startup.VersionLoggerListener.log Server built: Jan 15 2022 13:19:56 UTC и т.д.
Sever Уровень 23
7 февраля 2022
Ну прям очень поверхностно.
btwlav Уровень 3
22 октября 2021
А если на шаге Add Framework Support в списке только Groovy?
Anonymous #2851252 Уровень 3
22 октября 2021
Проще в блокноте вэб страницу написать.