JavaRush /Blog Java /Random-ES /Creación de un proyecto web simple en IntelliJ Idea Enter...
Стас Пасинков
Nivel 26
Киев

Creación de un proyecto web simple en IntelliJ Idea Enterprise. Paso a paso, con fotos.

Publicado en el grupo Random-ES
Nivel de conocimiento necesario para comprender el artículo: ya comprende más o menos Java Core y le gustaría conocer las tecnologías JavaEE y la programación web. Tiene más sentido si actualmente está estudiando la búsqueda de Colecciones de Java, que cubre temas cercanos al artículo. Creación de un proyecto web sencillo en IntelliJ Idea Enterprise.  Paso a paso, con fotos - 1Actualmente estoy usando IntelliJ IDEA Enterprise Edition (esta es una versión avanzada paga del IDE, generalmente se usa en desarrollo profesional: nota del editor ). Es mucho más fácil trabajar con proyectos web que la Community Edition gratuita. Entonces, en Enterprise Edition, literalmente con un clic del mouse, el proyecto se ensambla, se vierte en un contenedor de servlets, se inicia el servidor e incluso se abre una página con el proyecto en ejecución en el navegador. En la versión gratuita de la idea, gran parte de esto tendría que hacerse de forma independiente, por así decirlo, "a mano". Utilizo Apache Maven para construir el proyecto y gestionar su ciclo de vida. En esto utilicé sólo una pequeña fracción de sus capacidades (gestión de paquetes/dependencias). Elegí Apache Tomcat versión 9.0.0.M4 como contenedor de servlets/servidor de aplicaciones. Sé que ya existen versiones más nuevas, pero esta es la que tengo instalada.

Empecemos

Primero, abramos IntelliJ IDEA y creemos un proyecto Maven vacío.
Creación de un proyecto web sencillo en IntelliJ Idea Enterprise.  Paso a paso, con fotos - 2
Aquí a la izquierda seleccionamos Maven, comprobamos que en la parte superior está indicado el JDK del proyecto. Si no está allí, seleccione el que necesita de la lista o haga clic en Nuevo... y seleccione directamente desde su computadora. En medio de la ventana tengo una animación de carga de la lista de arquetipos. No los necesitamos, así que sin esperar la descarga, no dudes en hacer clic en Siguiente en la parte inferior de la ventana.
Creación de un proyecto web simple en IntelliJ Idea Enterprise.  Paso a paso, con fotos - 3
En esta ventana debe especificar GroupId y ArtifactId . GroupId se refiere al identificador único de la empresa que produce el proyecto. Es una práctica común utilizar el nombre de dominio de la empresa, pero en orden inverso. No en el sentido de un espejo, pero si, por ejemplo, el nombre de dominio de una empresa es maven.apache.org , entonces su GroupId será org.apache.maven . Es decir, primero escribimos el dominio de primer nivel, lo separamos con un punto, escribimos el nombre del dominio de segundo nivel, etcétera. Este es el enfoque generalmente aceptado. En el caso de que esté “cortando” un proyecto por su cuenta y no como parte de una empresa, escriba aquí su nombre de dominio personal (¡también en orden inverso!). Si lo tienes, por supuesto :). Si no, no te enfades. De hecho, puedes escribir cualquier cosa aquí .
Para una empresa con el nombre de dominio vasya.pupkin.org, el GroupId será org.pupkin.vasya. Este enfoque de los nombres es necesario para separar proyectos con el mismo nombre, pero que fueron lanzados por diferentes empresas.
En este ejemplo, usaré el nombre de dominio ficticio fatfaggy.info.javarush.ru . En consecuencia, ingreso ru.javarush.info.fatfaggy en el campo GroupId . ArtefactId es simplemente el nombre de nuestro proyecto. Puedes utilizar letras y algunos símbolos (guiones, por ejemplo) para separar palabras. Nuestro "artefacto" se llamará exactamente como escribimos aquí. En este ejemplo, escribo mi-super-proyecto . No tocamos el campo de versión por ahora, lo dejamos como está.
Creación de un proyecto web sencillo en IntelliJ Idea Enterprise.  Paso a paso, con fotos - 4
Bueno, la ventana IDEA estándar al crear un nuevo proyecto. Llamémoslo mi-super-proyecto según la tradición .
Creación de un proyecto web sencillo en IntelliJ Idea Enterprise.  Paso a paso, con fotos - 5
¡El proyecto ha sido creado!
El archivo pom.xml se abrió inmediatamente frente a nosotros. Este es un archivo con la configuración de Maven. Si queremos "decirle" a Maven qué y cómo hacer o de dónde obtener algo, describimos todo esto en este mismo archivo pom.xml. Está ubicado en la raíz del proyecto.
Vemos que ahora contiene exactamente los datos que ingresamos al crear el proyecto Maven: groupId , artefactoId y versión (no tocamos este último).

Nuestra estructura de proyecto

Este proyecto Maven tiene una cierta estructura.
Creación de un proyecto web simple en IntelliJ Idea Enterprise.  Paso a paso, con fotos - 6
Como podemos ver, en la raíz se encuentra:
  • el directorio .idea , que contiene la configuración de la idea para el proyecto actual;
  • el directorio src en el que creamos nuestras fuentes;
  • archivo my-super-project.iml , un archivo de proyecto creado por IDEA;
  • Archivo pom.xml , el mismo archivo de proyecto Maven del que hablé anteriormente, que ahora tenemos abierto. Si menciono pom.xml o “pom” en alguna parte, me refiero a este archivo en particular.
La carpeta src a su vez contiene dos subcarpetas:
  • principal - para nuestro código;
  • prueba: para pruebas de nuestro código.
Tanto main como test tienen una carpeta java . Considere que estas son la misma carpeta, solo que la de main es para el código fuente y la de test es para el código de prueba, respectivamente. No necesitamos la carpeta de recursos por ahora, no la usaremos. Pero que se acueste.

Convertirse en un proyecto web

Es hora de que conviertamos nuestro proyecto Maven en un proyecto web. Para hacer esto, haga clic derecho en el nombre del proyecto en este árbol y seleccione Agregar soporte de marco...
Creación de un proyecto web simple en IntelliJ Idea Enterprise.  Paso a paso, con fotos - 7
Se abrirá una ventana donde podremos agregar soporte para todo tipo de marcos diferentes para nuestro proyecto. Pero sólo necesitamos una: Aplicación Web . Nosotros lo elegimos.
Creación de un proyecto web simple en IntelliJ Idea Enterprise.  Paso a paso, con fotos - 8
Comprobamos que hay una marca de verificación junto a Aplicación web , y en la parte principal de la ventana se indica que queremos que se nos cree un archivo web.xml de inmediato (recomiendo marcar la casilla si no está allí) . Tras esto veremos que la estructura de nuestro proyecto se ha complementado con la carpeta web .
Creación de un proyecto web sencillo en IntelliJ Idea Enterprise.  Paso a paso, con fotos - 9
Esta es la raíz de nuestro proyecto web en / . Es decir, si ingresamos la dirección localhost en el navegador (cuando lo iniciamos, claro), entonces se accederá exactamente aquí, a la raíz del proyecto web. Si ingresamos localhost/addUser , entonces la carpeta web buscará un recurso llamado addUser .
Lo principal es entender que la carpeta web es la raíz de nuestro proyecto cuando lo subimos a Tomcat. Ahora tenemos una determinada estructura de carpetas, pero en el proyecto terminado que cargaremos, será ligeramente diferente y la carpeta web será la raíz allí.
En web hay una carpeta requerida llamada WEB-INF , donde se encuentra el archivo web.xml , que solicitamos crear en el paso anterior. Abrámoslo.
Creación de un proyecto web sencillo en IntelliJ Idea Enterprise.  Paso a paso, con fotos - 10
Como puede ver, todavía no tiene nada interesante, solo el "sombrero". Por cierto, si no hubiéramos pedido crearlo, es posible que hubiéramos tenido que crearlo manualmente, es decir, escribir todo este "encabezado" a mano o, en casos extremos, buscar una versión ya preparada en Internet. . ¿Para qué sirve web.xml ? Para mapeo. Aquí le diremos a Tomcat qué URL solicita enviar a qué servlets. Pero eso es todo después, por ahora lo dejaremos vacío. También hay un archivo index.jsp en la carpeta web . Abrámoslo.
Creación de un proyecto web sencillo en IntelliJ Idea Enterprise.  Paso a paso, con fotos - 11
Este es el archivo que se ejecutará de forma predeterminada, por así decirlo. Es decir, cuando lancemos el proyecto, esto es exactamente lo que veremos. En esencia, jsp es un archivo html normal, con la diferencia de que puedes ejecutar código java en él.

Un poco sobre contenido estático y dinámico.

El contenido estático es contenido que no cambia con el tiempo. Todo lo que escribimos en el archivo html se mostrará sin cambios. Si escribimos hola mundo, esta inscripción se mostrará tan pronto como abramos la página, después de 5 minutos, mañana, una semana y un año. Ella no cambiará. ¿Pero qué pasa si queremos mostrar la fecha actual en la página? Si simplemente escribimos "27 de octubre de 2017", mañana veremos la misma fecha, en una semana y en un año. Pero me gustaría que esta fecha siguiera siendo relevante. Aquí es donde nos ayuda la capacidad de ejecutar algún código directamente dentro de la página. Podemos obtener un objeto de fecha, convertirlo al formulario que necesitamos y mostrarlo en la página. Luego, todos los días, cada vez que abramos la página, la fecha siempre será relevante. Si solo necesitamos contenido estático, entonces un servidor web normal y archivos html nos bastarán. No necesitamos Java, Maven o Tomcat. Pero si queremos utilizar contenido dinámico, aquí es donde todo esto nos vendrá bien. Pero por ahora volvamos a nuestro index.jsp . En lugar del encabezado estándar, indiquemos algo propio, por ejemplo, “¡Mi súper aplicación web!”, y en el cuerpo escribiremos, por ejemplo, “¡Estoy vivo!” ¡Ya casi estamos listos para lanzar nuestro proyecto! Pero, lamentablemente, el habitual triángulo verde para iniciar el programa no está activo.
Creación de un proyecto web simple en IntelliJ Idea Enterprise.  Paso a paso, con fotos - 12
Hagamos clic en el botón a la izquierda del mismo (indicado en la pantalla con una flecha roja) y seleccione Editar configuraciones... Se abrirá una ventana donde se nos pide que hagamos clic en el signo más verde para agregar algún tipo de configuración. Haga clic en él, está ubicado en la esquina superior izquierda de la ventana.
Creación de un proyecto web sencillo en IntelliJ Idea Enterprise.  Paso a paso, con fotos - 13
Seleccione el elemento Servidor Tomcat y el subelemento Local. Se abrirá una ventana con muchos parámetros diferentes, pero estamos contentos con casi todo y con el predeterminado.
Creación de un proyecto web simple en IntelliJ Idea Enterprise.  Paso a paso, con fotos - 14
De alguna manera podemos nombrar nuestra configuración en lugar del estándar Sin nombre (en la parte superior). También es necesario comprobar que la idea encontró correctamente Tomcat en nuestro sistema (ya lo descargaste e instalaste antes , ¿verdad?). Si no la encuentras (lo cual es poco probable), haz clic en la flecha hacia abajo y selecciona dónde la tenemos instalada, u otra versión si tienes varias. Tengo uno y ya está instalado, así que todo se ve como en la captura de pantalla. Y en la parte inferior de la ventana vemos que hay una advertencia de que no hay un solo artefacto destinado a implementarse en el servidor. Y a la derecha de esta inscripción hay un botón que ofrece corregir este defecto. Hacemos clic en él y vemos que la idea misma encontró todo, creó todo lo que le faltaba y realizó todos los ajustes por sí misma.
Creación de un proyecto web sencillo en IntelliJ Idea Enterprise.  Paso a paso, con fotos - 15
Vemos que fuimos transferidos de la pestaña Servidor a la pestaña Implementación , en la sección Implementar al iniciar el servidor ya tenemos el artefacto que necesita ser implementado, y debajo se indica que este artefacto se construirá antes de la implementación. Aplicar, está bien. Y vemos que, en primer lugar, en la parte inferior de la ventana apareció una sección con nuestro servidor Tomcat local, en el que se colocará nuestro artefacto. Puede contraer esta sección haciendo clic en el botón correspondiente en el lado derecho de la ventana.
Creación de un proyecto web sencillo en IntelliJ Idea Enterprise.  Paso a paso, con fotos - 16
También vemos que el triángulo verde de lanzamiento ya está activo. Para aquellos que quieran comprobar todo, pueden hacer clic en el botón con la configuración del proyecto (a la derecha de los botones de inicio, marcado con una flecha roja), ir a la sección Artefactos y asegurarse de que el artefacto realmente haya sido creado. No estaba allí hasta que presionamos el botón Reparar , pero ahora todo está bien. Y esta configuración nos sienta bastante bien. En pocas palabras, la diferencia entre my-super-project:war y my-super-project:war explotó es que my-super-project:war creará solo un archivo war (que es solo un archivo), y la opción con explotada es simplemente una guerra “desempaquetada” . Y esta opción es personalmente más conveniente para mí, ya que me permite implementar rápidamente pequeños cambios en el servidor. De hecho, el artefacto es nuestro proyecto, solo que ya está compilado y en el que se ha cambiado la estructura de carpetas para que se pueda cargar directamente en Tomcat. Se verá algo como esto:
Creación de un proyecto web sencillo en IntelliJ Idea Enterprise.  Paso a paso, con fotos - 17
Bueno, ahora ya está todo listo para poner en marcha nuestro proyecto. ¡Pulsamos el ansiado botón verde de inicio y disfrutamos del resultado! :)
Creación de un proyecto web simple en IntelliJ Idea Enterprise.  Paso a paso, con fotos - 18
Comentarios
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION