Створення найпростішого веб-проекту в 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.codegym.cc . Відповідно, у полі GroupId я вписую com.codegym.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. І саме такий варіант особисто мені зручніший, тому що дозволяє швидше деплоїти дрібні зміни на сервер. По суті, артефакт — це і є наш проект, тільки вже скомпільований, і в якому змінено структуру папок так, щоб його можна було викладати прямо на томкат. Виглядатиме вона приблизно ось так: Що ж, тепер усе готове для запуску нашого проекту. Тиснемо заповітну зелену кнопочку запуску і насолоджуємося результатом! :)