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

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

Приступаем

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

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

Этот Maven-проект имеет определенную структуру. Как видим, в корне лежат:

• директория .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… Откроется окно, где мы можем добавить поддержку всяких разных фреймворков для нашего проекта. Но нам нужен только один: Web Application. Его и выбираем. Проверяем, что стоит галочка напротив Web Application, а в основной части окна отмечено, что мы хотим, чтобы для нас создали сразу ещё и файл web.xml (рекомендую поставить галочку, если её там нет). После этого мы увидим, что структура нашего проекта пополнилась папочкой web. Это корень нашего веб-проекта с адресом /. То есть, если мы введем в браузере адрес localhost (когда запустим, конечно же), то это будет обращение именно сюда, в корень веб-проекта. Если введем localhost/addUser, то в папочке web будет искаться ресурс с названием addUser. В web лежит обязательная папка с названием WEB-INF, где находится файл web.xml, который мы просили создать на прошлом шаге. Откроем его. Как видим, в нем пока нет ничего интересного, одна только «шапка». Кстати, если бы мы не просили его создавать, нам бы, возможно, пришлось создавать его вручную, то есть набирать «ручками» всю эту «шапку», или, в крайнем случае искать готовый вариант в интернетах. Для чего нужен web.xml? Для маппинга. Здесь мы распишем для Tomcat, какие url-запросы передавать на какие сервлеты. Но это все позже, пока оставляем его пустым. Ещё в папочке web есть файл index.jsp. Откроем его. Это файл, который будет выполнен по умолчанию, так сказать. То есть когда мы запустим проект, то именно его и узреем. По сути, jsp — обычный html-файл, с той разницей, что в нём можно выполнять java-код.

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

Статический контент — такой, который не меняется со временем. Всё то, что мы написали в html файле написали — то и будет отображаться без изменений. Если мы написали hello world — то эта надпись отобразится и как только мы откроем страничку, и через 5 минут, и завтра, и через неделю, и через год. Она не изменится. Но что, если мы хотим на страничке вывести текущую дату? Если мы просто напишем «27 октября 2017 года» — то и завтра мы увидим такую же дату, и через неделю, и через год. А хотелось бы, чтобы эта дата была все-таки актуальна. Именно тут нам и приходит на помощь возможность выполнять какой-то код прямо внутри страницы. Мы можем получить объект даты, привести его к нужному нам виду и вывести на странице. Тогда каждый день когда бы мы не открыли страничку — дата будет всегда актуальна. Если нам нужен только статический контент — то нам достаточно обычного веб-сервера и html файлов. Никакой джавы, мавенов, томкатов нам и не нужно. Но если мы хотим использовать динамический контент — вот тут то нам все это и пригодится. Но пока вернемся к нашему index.jsp. Давайте укажем вместо стандартного заголовка что-то свое, например «My super web-app!», а в теле напишем например «I'm alive!». Мы уже почти готовы к тому, чтобы запустить наш проект! Но, к сожалению, привычный зеленый треугольничек для запуска программы у нас не активен. Нажмем на кнопку слева от него (указал на скрине красной стрелочкой) и выберем Edit configurations… Откроется окно, где нам предлагают нажать на зеленый плюсик чтоб добавить какую-то конфигурацию. Нажмем на него, он находится в левом верхнем углу окна. Выберем пункт Tomcat Server и подпункт Local. Откроется окно со множеством всяческих параметров, но нас почти все устраивает и дефолтное. Можем как-нибудь красиво назвать нашу конфигурацию вместо стандартного Unnamed (в самом верху). Так же необходимо проверить, что идея успешно нашла томкат у нас в системе (вы же его перед этим уже скачали и установили, да?). Если не нашла (что вряд ли) — нажимаем стрелочку вниз и выбираем где он у нас установлен, ну или же другую версию, если у вас их несколько. У меня он один и уже установлен, поэтому выглядит все так, как на скрине. И в самом низу окна видим, что светится предупреждение, что пока нет ни одного артефакта, предназначенного для деплоя на сервер. А справа от этой надписи кнопочка, которая предлагает этот недочет исправить. Жмем на нее и видим, что идея сама все нашла, сама все создала, чего ей не хватало, и сама все настройки проставила. Видим, что нас со вкладки Server перебросило на вкладку Deployment, в разделе Deploy at the server startup у нас уже указан артефакт, который надо деплоить, ну а внизу указано, что перед деплоем этот артефакт будет билдиться. Apply, Ok. И видим, что во первых, внизу окна появился раздел с нашим локальным сервером томкат, в который будет помещен наш артефакт. Свернуть этот раздел можно нажав на соответствующею кнопку в правой части окна. Так же видим, что зеленый треугольничек для запуска уже активен. Для тех, кто хочет все проверить — можно нажать на кнопку с настройками проекта (справа от кнопок запуска, помечена красной стрелкой), перейти в раздел Artifacts и убедиться, что артефакт действительно создан. Его не было до того момента, пока мы не нажали ту кнопку Fix, но теперь все ок. И такая конфигурация нас вполне устраивает. Если в двух словах чем отличается my-super-project:war от my-super-project:war exploded — так это тем, что my-super-project:war создаст только один файл war (который является просто архивом), а вариант с exploded — это просто «распакованный» war. И именно такой вариант лично мне более удобен, так как позволяет быстрее деплоить мелкие изменения на сервер. По сути, артефакт — это и есть наш проект, только уже скомпилированный, и в котором изменена структура папок так, чтобы его можно было выкладывать уже напрямую на томкат. Выглядеть она будет примерно вот так: Ну что ж, теперь все готово для запуска нашего проекта. Жмем заветную зеленую кнопочку запуска и наслаждаемся результатом! :)