JavaRush /Blog Java /Random-FR /Création d'un projet Web simple dans IntelliJ Idea Enterp...
Стас Пасинков
Niveau 26
Киев

Création d'un projet Web simple dans IntelliJ Idea Enterprise. Pas à pas, avec photos

Publié dans le groupe Random-FR
Niveau de connaissances requis pour comprendre l'article : vous avez déjà plus ou moins compris Java Core et souhaitez vous intéresser aux technologies JavaEE et à la programmation web. Cela a plus de sens si vous étudiez actuellement la quête Java Collections, qui couvre des sujets proches de l'article. Création d'un projet Web simple dans IntelliJ Idea Enterprise.  Pas à pas, avec photos - 1J'utilise actuellement IntelliJ IDEA Enterprise Edition (il s'agit d'une version avancée payante de l'IDE, elle est généralement utilisée dans le développement professionnel - ndlr ). Il est beaucoup plus facile de travailler avec des projets Web que l'édition communautaire gratuite. Ainsi, dans l'édition Enterprise, littéralement d'un simple clic de souris, le projet est assemblé, versé dans un conteneur de servlet, le serveur démarre et même une page avec le projet en cours s'ouvre dans le navigateur. Dans la version gratuite de l’idée, une grande partie de cela devrait être effectuée de manière indépendante, pour ainsi dire, « à la main ». J'utilise Apache Maven pour construire le projet et gérer son cycle de vie. En cela, je n'ai utilisé qu'une petite fraction de ses capacités (gestion des packages/dépendances). J'ai choisi Apache Tomcat version 9.0.0.M4 comme conteneur de servlets/serveur d'applications. Je sais qu'il existe déjà des versions plus récentes, mais c'est celle que j'ai installée.

Commençons

Tout d'abord, ouvrons IntelliJ IDEA et créons un projet Maven vide.
Création d'un projet Web simple dans IntelliJ Idea Enterprise.  Pas à pas, avec photos - 2
Ici à gauche nous sélectionnons Maven, vérifions que le JDK du projet est indiqué en haut. S'il n'y est pas, sélectionnez celui dont vous avez besoin dans la liste, ou cliquez sur Nouveau... et sélectionnez directement depuis votre ordinateur. Au milieu de la fenêtre j'ai une animation de chargement de la liste des archétypes. Nous n'en avons pas besoin, alors sans attendre le téléchargement, n'hésitez pas à cliquer sur Suivant en bas de la fenêtre.
Création d'un projet Web simple dans IntelliJ Idea Enterprise.  Pas à pas, avec photos - 3
Dans cette fenêtre, vous devez spécifier GroupId et ArtifactId . GroupId fait référence à l'identifiant unique de l'entreprise qui produit le projet. Il est courant d'utiliser le nom de domaine de l'entreprise, mais dans l'ordre inverse. Pas dans le sens d'un miroir, mais si, par exemple, le nom de domaine d'une entreprise est maven.apache.org , alors son GroupId sera org.apache.maven . Autrement dit, nous écrivons d'abord le domaine de premier niveau, le séparons par un point, écrivons le nom du domaine de deuxième niveau, et ainsi de suite. C'est l'approche généralement acceptée. Dans le cas où vous « coupez » un projet seul, et non en tant que membre d'une entreprise, écrivez ici votre nom de domaine personnel (également dans l'ordre inverse !). Si vous l'avez, bien sûr :). Sinon, ne vous inquiétez pas. En fait, vous pouvez écrire n'importe quoi ici .
Pour une entreprise portant le nom de domaine vasya.pupkin.org, le GroupId sera org.pupkin.vasya. Cette approche des noms est nécessaire afin de séparer les projets portant le même nom, mais qui ont été publiés par des sociétés différentes.
Dans cet exemple, j'utiliserai le nom de domaine fictif fatfaggy.info.javarush.ru . En conséquence, j'entre ru.javarush.info.fatfaggy dans le champ GroupId . ArtefactId est simplement le nom de notre projet. Vous pouvez utiliser des lettres et certains symboles (des tirets, par exemple) pour séparer les mots. Notre « artefact » sera appelé exactement comme nous l’écrivons ici. Dans cet exemple, j'écris my-super-project . Nous ne touchons pas au champ version pour l’instant, nous le laissons tel quel.
Création d'un projet Web simple dans IntelliJ Idea Enterprise.  Pas à pas, avec photos - 4
Eh bien, la fenêtre IDEA standard lors de la création d'un nouveau projet. Appelons-le mon-super-projet selon la tradition .
Création d'un projet Web simple dans IntelliJ Idea Enterprise.  Pas à pas, avec photos - 5
Le projet est créé !
Le fichier pom.xml s'est immédiatement ouvert devant nous. Il s'agit d'un fichier avec les paramètres Maven. Si nous voulons « dire » à Maven quoi et comment faire ou où obtenir quelque chose, nous décrivons tout cela dans ce fichier pom.xml. Il se situe à la racine du projet.
On voit qu'il contient désormais exactement les données que nous avons saisies lors de la création du projet Maven : groupId , artefactId et version (nous n'avons pas touché à cette dernière).

Notre structure de projet

Ce projet Maven a une certaine structure.
Création d'un projet Web simple dans IntelliJ Idea Enterprise.  Pas à pas, avec photos - 6
Comme nous pouvons le voir, à la racine se trouvent :
  • le répertoire .idea , qui contient les paramètres d'idée pour le projet en cours ;
  • le répertoire src dans lequel nous créons nos sources ;
  • fichier my-super-project.iml , un fichier de projet créé par IDEA ;
  • fichier pom.xml , le même fichier de projet Maven dont j'ai parlé juste au-dessus, que nous avons maintenant ouvert. Si je mentionne pom.xml ou « pom » quelque part, je ferai référence à ce fichier particulier.
Le dossier src contient à son tour deux sous-dossiers :
  • principal - pour notre code ;
  • test - pour les tests de notre code.
main et test ont tous deux un dossier java . Considérez qu'il s'agit du même dossier, seul celui de main est destiné au code source et celui de test est respectivement destiné au code de test. Nous n’avons pas du tout besoin du dossier de ressources pour l’instant, nous ne l’utiliserons pas. Mais laissez-le se coucher.

Se transformer en projet web

Il est temps pour nous de convertir notre projet Maven en projet web. Pour ce faire, faites un clic droit sur le nom du projet dans cette arborescence et sélectionnez Ajouter un support de framework...
Création d'un projet Web simple dans IntelliJ Idea Enterprise.  Pas à pas, avec photos - 7
Une fenêtre s'ouvrira où nous pourrons ajouter la prise en charge de toutes sortes de frameworks différents pour notre projet. Mais nous n’en avons besoin que d’une seule : l’application Web . Nous le choisissons.
Création d'un projet Web simple dans IntelliJ Idea Enterprise.  Pas à pas, avec photos - 8
Nous vérifions qu'il y a une coche à côté de Application Web , et dans la partie principale de la fenêtre, il est noté que nous souhaitons qu'un fichier web.xml soit créé immédiatement pour nous (je recommande de cocher la case s'il n'y est pas). Après cela, nous verrons que la structure de notre projet a été complétée par le dossier web .
Création d'un projet Web simple dans IntelliJ Idea Enterprise.  Pas à pas, avec photos - 9
C'est la racine de notre projet Web à l'adresse / . Autrement dit, si nous entrons l'adresse localhost dans le navigateur (lorsque nous le lançons, bien sûr), alors elle sera accessible exactement ici, à la racine du projet Web. Si nous entrons localhost/addUser , alors le dossier Web recherchera une ressource appelée addUser .
L'essentiel est de comprendre que le dossier Web est la racine de notre projet lorsque nous le téléchargeons sur Tomcat. Nous avons maintenant une certaine structure de dossiers, mais dans le projet fini que nous allons télécharger, elle sera légèrement différente et le dossier Web y sera la racine.
Dans le Web, il existe un dossier obligatoire appelé WEB-INF , où se trouve le fichier web.xml , que nous avons demandé de créer à l'étape précédente. Ouvrons-le.
Création d'un projet Web simple dans IntelliJ Idea Enterprise.  Pas à pas, avec photos - 10
Comme vous pouvez le voir, il n'y a encore rien d'intéressant, juste le « chapeau ». D'ailleurs, si nous n'avions pas demandé à le créer, nous aurions peut-être dû le créer manuellement, c'est-à-dire saisir manuellement l'intégralité de cet « en-tête » ou, dans les cas extrêmes, rechercher une version toute faite sur Internet. . A quoi sert web.xml ? Pour la cartographie. Ici, nous indiquerons à Tomcat quelles requêtes d'URL envoyer à quels servlets. Mais c’est tout plus tard, pour l’instant nous le laisserons vide. Il existe également un fichier index.jsp dans le dossier Web . Ouvrons-le.
Création d'un projet Web simple dans IntelliJ Idea Enterprise.  Pas à pas, avec photos - 11
C'est le fichier qui sera exécuté par défaut, pour ainsi dire. Autrement dit, lorsque nous lancerons le projet, c'est exactement ce que nous verrons. Essentiellement, jsp est un fichier HTML standard, à la différence que vous pouvez y exécuter du code Java.

Un peu sur le contenu statique et dynamique

Le contenu statique est un contenu qui ne change pas dans le temps. Tout ce que nous avons écrit dans le fichier HTML sera affiché sans modification. Si nous avons écrit hello world, alors cette inscription s'affichera dès que nous ouvrirons la page, et dans 5 minutes, et demain, et dans une semaine, et dans un an. Elle ne changera pas. Mais que se passe-t-il si nous voulons afficher la date actuelle sur la page ? Si nous écrivons simplement « 27 octobre 2017 », alors demain nous verrons la même date, dans une semaine et dans un an. Mais j’aimerais que cette date soit toujours d’actualité. C'est là que la possibilité d'exécuter du code directement à l'intérieur de la page nous vient en aide. Nous pouvons obtenir un objet date, le convertir sous la forme dont nous avons besoin et l'afficher sur la page. Ensuite, chaque jour, chaque fois que nous ouvrirons la page, la date sera toujours d'actualité. Si nous n'avons besoin que de contenu statique, un serveur Web classique et des fichiers HTML nous suffisent. Nous n'avons pas besoin de Java, Maven ou Tomcat. Mais si nous voulons utiliser du contenu dynamique, c’est là que tout cela nous sera utile. Mais pour l'instant revenons à notre index.jsp . Indiquons quelque chose qui nous est propre au lieu de l'en-tête standard, par exemple « Ma super application Web ! » et dans le corps, nous écrirons, par exemple, « Je suis vivant ! » Nous sommes presque prêts à lancer notre projet ! Mais malheureusement, le triangle vert habituel pour lancer le programme n’est pas actif.
Création d'un projet Web simple dans IntelliJ Idea Enterprise.  Pas à pas, avec photos - 12
Cliquons sur le bouton à gauche de celui-ci (indiqué sur l'écran par une flèche rouge) et sélectionnons Modifier les configurations... Une fenêtre s'ouvrira où il nous sera demandé de cliquer sur le signe plus vert pour ajouter une sorte de configuration. Cliquez dessus, il se trouve dans le coin supérieur gauche de la fenêtre.
Création d'un projet Web simple dans IntelliJ Idea Enterprise.  Pas à pas, avec photos - 13
Sélectionnez l' élément Tomcat Server et le sous-élément Local. Une fenêtre s'ouvrira avec de nombreux paramètres différents, mais nous sommes satisfaits de presque tout et de celui par défaut.
Création d'un projet Web simple dans IntelliJ Idea Enterprise.  Pas à pas, avec photos - 14
Nous pouvons en quelque sorte joliment nommer notre configuration au lieu du standard Unnamed (tout en haut). Il faut également vérifier que l'idée a bien trouvé Tomcat dans notre système (vous l'avez déjà téléchargé et installé auparavant , n'est-ce pas ?). Si vous ne le trouvez pas (ce qui est peu probable), cliquez sur la flèche vers le bas et sélectionnez l'endroit où nous l'avons installé, ou une autre version si vous en avez plusieurs. J'en ai un et il est déjà installé, donc tout ressemble à la capture d'écran. Et tout en bas de la fenêtre, nous voyons qu'il y a un avertissement indiquant qu'il n'y a pas un seul artefact destiné au déploiement sur le serveur. Et à droite de cette inscription se trouve un bouton qui propose de corriger ce défaut. Nous cliquons dessus et voyons que l'idée elle-même a tout trouvé, a tout créé elle-même, ce qui lui manquait et a effectué elle-même tous les réglages.
Création d'un projet Web simple dans IntelliJ Idea Enterprise.  Pas à pas, avec photos - 15
Nous voyons que nous avons été transférés de l'onglet Serveur vers l'onglet Déploiement , dans la section Déployer au démarrage du serveur , nous avons déjà l'artefact qui doit être déployé, et en dessous il est indiqué que cet artefact sera construit avant le déploiement. Postulez, ok. Et nous voyons que d'abord, en bas de la fenêtre, une section est apparue avec notre serveur Tomcat local, dans laquelle notre artefact sera placé. Vous pouvez réduire cette section en cliquant sur le bouton correspondant sur le côté droit de la fenêtre.
Création d'un projet Web simple dans IntelliJ Idea Enterprise.  Pas à pas, avec photos - 16
On voit également que le triangle vert pour le lancement est déjà actif. Pour ceux qui veulent tout vérifier, vous pouvez cliquer sur le bouton avec les paramètres du projet (à droite des boutons de lancement, marqué d'une flèche rouge), aller dans la section Artefacts et vous assurer que l'artefact a bien été créé. Il n'était pas là jusqu'à ce que nous appuyions sur le bouton Réparer , mais maintenant tout va bien. Et cette configuration nous convient plutôt bien. En un mot, la différence entre my-super-project:war et my-super-project:war explosé est que my-super-project:war ne créera qu'un seul fichier war (qui n'est qu'une archive), et l'option avec explosée est simplement une guerre « déballée » . Et cette option est personnellement plus pratique pour moi, car elle me permet de déployer rapidement de petites modifications sur le serveur. En fait, l'artefact est notre projet, seulement déjà compilé, et dans lequel la structure des dossiers a été modifiée afin qu'il puisse être téléchargé directement sur Tomcat. Cela ressemblera à ceci :
Création d'un projet Web simple dans IntelliJ Idea Enterprise.  Pas à pas, avec photos - 17
Eh bien, maintenant tout est prêt pour lancer notre projet. Nous appuyons sur le très convoité bouton de démarrage vert et apprécions le résultat ! :)
Création d'un projet Web simple dans IntelliJ Idea Enterprise.  Pas à pas, avec photos - 18
Commentaires
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION