CodeGym /Blog Java /Random-ES /Creando el proyecto web más simple en IntelliJ IDEA Enter...
John Squirrels
Nivel 41
San Francisco

Creando el proyecto web más simple en IntelliJ IDEA Enterprise. Paso a paso, con fotos.

Publicado en el grupo Random-ES
Conocimientos necesarios para comprender el artículo: ya ha descubierto más o menos Java Core y le gustaría ver las tecnologías JavaEE y la programación web . Sería más sensato que estuvieras estudiando actualmente la búsqueda de colecciones de Java, que trata temas cercanos al artículo.
Creando el proyecto web más simple en IntelliJ IDEA Enterprise.  Paso a paso, con fotos - 1
Actualmente, uso IntelliJ IDEA Enterprise Edition ( nota del editor: esta es una versión extendida paga del IDE; generalmente se usa en desarrollo profesional). Es mucho más fácil trabajar con proyectos web que en la Community Edition gratuita . En Enterprise Edition , literalmente, un clic del mouse construye el proyecto, lo coloca en un contenedor de servlet, inicia el servidor e incluso abre una página web para el proyecto en el navegador. En la versión gratuita de IDEA, tendrías que hacer gran parte de esto por tu cuenta, es decir, "manualmente". Yo uso apache mavenconstruir el proyecto y gestionar su ciclo de vida. Solo usé una pequeña parte de sus capacidades (administración de paquetes/dependencias) en este proyecto. Como contenedor de servlets/servidor de aplicaciones, elegí Apache Tomcat versión 9.0.12.

Empecemos

Primero, abra IntelliJ IDEA y cree un proyecto Maven vacío . Creando el proyecto web más simple en IntelliJ IDEA Enterprise.  Paso a paso, con fotos - 2A la izquierda, seleccione Maven y verifique que el JDK del proyecto esté seleccionado arriba. Si no está allí, seleccione uno de la lista o haga clic en Nuevo ... y elija uno de la computadora. Creando el proyecto web más simple en IntelliJ IDEA Enterprise.  Paso a paso, con fotos - 3En esta ventana, debe especificar GroupId y ArtifactId . El GroupId se refiere al identificador único de la empresa que emite el proyecto. La práctica común es utilizar el nombre de dominio de la empresa, pero en orden inverso. Aunque no como un espejo. Por ejemplo, si el nombre de dominio de una empresa es maven.apache.org , entonces su GroupId sería org.apache.maven. Es decir, primero escribimos el dominio de nivel superior, agregamos un punto, luego el dominio de segundo nivel y así sucesivamente. Este es el enfoque generalmente aceptado. Si está "moliendo" el proyecto usted mismo (y no como parte de una empresa), entonces ponga su nombre de dominio personal aquí (¡también en orden inverso!). Si tienes uno, por supuesto. :) Si no, no te preocupes. De hecho, puedes escribir cualquier cosa aquí .
Para una empresa con el nombre de dominio john.doe.org, el GroupId será org.doe.john. Esta convención de nomenclatura es necesaria para separar proyectos con nombres idénticos producidos por diferentes empresas.
En este ejemplo, usaré un dominio ficticio: fatlady.info.codegym.cc . En consecuencia, ingreso cc.codergym.info.fatlady en el campo GroupId . ArtifactId es simplemente el nombre de nuestro proyecto. Puede usar letras y ciertos símbolos (guiones, por ejemplo) para separar palabras. Nuestro "artefacto" se llamará exactamente como escribimos aquí. En este ejemplo, voy a usar my-super-project . No toque el campo de la versión todavía, simplemente déjelo como está. Creando el proyecto web más simple en IntelliJ IDEA Enterprise.  Paso a paso, con fotos - 4Y aquí está la ventana IDEA estándar cuando crea un nuevo proyecto. Siguiendo con la tradición, llamémoslo mi-super-proyecto . Creando el proyecto web más simple en IntelliJ IDEA Enterprise.  Paso a paso, con fotos - 5¡El proyecto está creado!
Pom.xml se abre inmediatamente. Este es un archivo con la configuración de Maven. Si queremos decirle a Maven qué hacer o dónde encontrar algo, describimos todo eso en este archivo pom.xml. Se encuentra en la raíz del proyecto.
Vemos que ahora contiene los datos exactos que ingresamos al crear el proyecto Maven : groupId , artefactoId y versión (no tocamos ese último).

La estructura de nuestro proyecto

Este proyecto Maven tiene una estructura específica. Creando el proyecto web más simple en IntelliJ IDEA Enterprise.  Paso a paso, con fotos - 6Como puede ver, la raíz tiene:
  • un directorio .idea , que contiene la configuración IDEA del proyecto actual;
  • un directorio src , donde creamos nuestro código fuente;
  • un archivo my-super-project.iml , que es un archivo de proyecto creado por IDEA;
  • el archivo pom.xml (el archivo del proyecto Maven que mencioné anteriormente), que ahora está abierto. Si menciono pom.xml en alguna parte, este es el archivo del que estoy hablando.
Dentro de la carpeta src , hay dos subcarpetas:
  • main — para nuestro código;
  • test — para pruebas de nuestro código.
En main y test , hay una carpeta java . Puede pensar en estos como la misma carpeta, excepto que el que está en main es para el código fuente y el que está en test es para el código de prueba. Por ahora, no tenemos ningún uso para la carpeta de recursos . No lo usaremos. Pero déjalo ahí.

Transformarlo en un proyecto web

Es hora de convertir nuestro proyecto Maven en un proyecto web. Para hacer esto, haga clic con el botón derecho en el nombre del proyecto en este árbol y seleccione Agregar soporte de marco ... Creando el proyecto web más simple en IntelliJ IDEA Enterprise.  Paso a paso, con fotos - 7Se abre una ventana donde podemos agregar soporte para varios marcos a nuestro proyecto. Pero solo necesitamos una: Aplicación Web . Y ese es el que seleccionamos. Creando el proyecto web más simple en IntelliJ IDEA Enterprise.  Paso a paso, con fotos - 8Asegúrese de que la casilla de verificación de la aplicación web esté seleccionada y que la ventana principal indique que queremos que se cree un archivo web.xml automáticamente (recomiendo seleccionar la casilla de verificación, si aún no está seleccionada). Luego vemos que la carpeta web se ha agregado a la estructura de nuestro proyecto. Creando el proyecto web más simple en IntelliJ IDEA Enterprise.  Paso a paso, con fotos - 9Esta es la raíz de nuestro proyecto web con la dirección/. En otras palabras, si ingresamos ' localhost ' en el navegador (cuando el proyecto se está ejecutando, por supuesto), entonces buscará aquí, en la raíz del proyecto web. Si ingresamos localhost/addUser , entonces buscará un recurso llamado addUser en la carpeta web .
Lo principal que debe comprender es que la carpeta web es la raíz de nuestro proyecto cuando lo colocamos en Tomcat. Ahora tenemos una cierta estructura de carpetas, pero en el proyecto terminado que vamos a crear, será ligeramente diferente. En concreto, la carpeta web será la raíz.
En web , hay una carpeta requerida llamada WEB-INF , donde se encuentra el archivo web.xml , es decir, el que le pedimos al programa que creara en el último paso. Vamos a abrirlo. Creando el proyecto web más simple en IntelliJ IDEA Enterprise.  Paso a paso, con fotos - 10Puede ver que todavía no tiene nada interesante, solo un encabezado. Por cierto, si no solicitó que se creara el archivo, tendrá que crearlo manualmente, es decir, escribir todos los encabezados a mano. O, al menos, busque una versión preparada en Internet. ¿Para qué necesitamos web.xml ? Para mapeo. Aquí es donde detallaremos para Tomcat qué URL solicita pasar a qué servlets. Pero llegaremos a eso más tarde. Por ahora, déjalo vacío. La carpeta web también tiene un archivo index.jsp. Abrelo. Creando el proyecto web más simple en IntelliJ IDEA Enterprise.  Paso a paso, con fotos - 11Este es el archivo que se ejecutará por defecto, por así decirlo. En otras palabras, es precisamente lo que veremos cuando iniciemos el proyecto. Básicamente, jsp es un archivo HTML ordinario , excepto que puede ejecutar código Java dentro de él.

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

El contenido estático es contenido que no cambia con el tiempo. Todo lo que escribimos en un archivo HTML se muestra sin cambios, tal como está escrito. Si escribimos " hola mundo ", este texto se mostrará tan pronto como abramos la página, y en 5 minutos, y mañana, y en una semana, y en un año. No cambiará. Pero, ¿y si queremos mostrar la fecha actual en la página? Si solo escribimos " 27 de octubre de 2017", entonces mañana veríamos la misma fecha, y una semana después, y un año después. Pero nos gustaría que la fecha fuera actual. Aquí es donde la capacidad de ejecutar código directamente en la página es útil. Podemos obtener una objeto de fecha, convertirlo al formato deseado y mostrarlo en la página. Luego, cada día cuando abramos la página, la fecha siempre será actual. Si solo necesitamos contenido estático, entonces solo necesitamos un servidor web normal y Archivos HTML. No necesitamos Java, Maven o Tomcat. Pero si queremos usar contenido dinámico, entonces necesitamos todas esas herramientas. Pero por ahora, volvamos a nuestro index.jsp . Indiquemos algo que no sea el título estándar, por ejemplo, "¡ Mi súper aplicación web! ". Luego, en el cuerpo, escribamos "¡ Estoy vivo! ". ¡Ya casi estamos listos para comenzar nuestro proyecto! Desafortunadamente, el triángulo verde habitual para iniciar el programa no está activo. Creando el proyecto web más simple en IntelliJ IDEA Enterprise.  Paso a paso, con fotos - 12Haga clic en el botón a la izquierda del mismo (indicado en la pantalla con una flecha roja) y seleccione Editar configuraciones ... Eso abre una ventana donde se nos invita a hacer clic en un signo más verde para agregar alguna configuración. Haga clic en él (en la esquina superior izquierda de la ventana). Creando el proyecto web más simple en IntelliJ IDEA Enterprise.  Paso a paso, con fotos - 13Elija Servidor Tomcat > Local . Se abrirá una ventana con un montón de opciones, pero los valores predeterminados nos convienen para casi todo. Creando el proyecto web más simple en IntelliJ IDEA Enterprise.  Paso a paso, con fotos - 14Podemos darle a nuestra configuración un nombre bonito en lugar del estándar Sin nombre (en la parte superior). También necesitamos verificar que IDEA haya encontrado con éxito Tomcat en nuestro sistema (ya ha descargado e instalado¿bien?). Si no se encontró (lo que es poco probable), presione la flecha hacia abajo y elija dónde está instalado. O elija una versión diferente, si tiene más de una instalada. Solo tengo uno y ya está instalado. Es por eso que se ve como lo hace en mi pantalla. Y en la parte inferior de la ventana, vemos una advertencia que nos alerta de que hasta el momento no se han indicado artefactos para su implementación en el servidor. A la derecha de esta advertencia hay un botón que sugiere que solucionemos esto. Hacemos clic en él y vemos que IDEA pudo encontrar todo por sí misma, creó todo lo que faltaba por sí misma y configuró todas las configuraciones por sí misma. Creando el proyecto web más simple en IntelliJ IDEA Enterprise.  Paso a paso, con fotos - 15Podemos ver que nos movió de la pestaña Servidor a la pestaña Implementación , debajo de Implementar al inicio del servidorsección, y ahora tenemos un artefacto para implementar. Haga clic en Aplicar y Aceptar. Y primero vemos que en la parte inferior de la ventana, ha aparecido una sección con nuestro servidor Tomcat local, donde se colocará nuestro artefacto. Contraer esta sección haciendo clic en el botón correspondiente en el lado derecho de la ventana. Creando el proyecto web más simple en IntelliJ IDEA Enterprise.  Paso a paso, con fotos - 16Ahora vemos que el triángulo de lanzamiento verde está activo. Para aquellos a los que les gusta verificar todo dos veces, pueden hacer clic en el botón de configuración del proyecto (a la derecha de los botones de inicio, indicado con una flecha roja), ir a la sección Artefactos y asegurarse de que el artefacto realmente se haya creado . No estaba allí hasta que presionamos Fixbotón, pero ahora todo está bien. Y esta configuración nos viene a la perfección. En pocas palabras, la diferencia entre my-super-project:war y my-super-project:war explosioned es que my-super-project:war consta de un solo archivo war (que es solo un archivo) y la versión con explosionado es simplemente la guerra "desempaquetada" . Y personalmente, esa es la opción que encuentro más conveniente, porque te permite depurar rápidamente cambios menores en el servidor. En esencia, el artefacto es nuestro proyecto, recién compilado, y donde se ha cambiado una estructura de carpetas para permitir que Tomcat acceda a él directamente. Se verá algo como esto:
Creando el proyecto web más simple en IntelliJ IDEA Enterprise.  Paso a paso, con fotos - 17
Ahora todo está listo para lanzar nuestro proyecto. ¡Presiona el precioso botón verde de lanzamiento y disfruta del resultado! :)
Creando el proyecto web más 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