CodeGym /Blog Java /Random-FR /Création du projet Web le plus simple dans IntelliJ IDEA ...
John Squirrels
Niveau 41
San Francisco

Création du projet Web le plus simple dans IntelliJ IDEA Enterprise. Pas à pas, avec photos

Publié dans le groupe Random-FR
Connaissances requises pour comprendre l'article : Vous avez déjà plus ou moins compris Java Core et aimeriez vous pencher sur les technologies JavaEE et la programmation web . Il serait plus logique que vous étudiiez actuellement la quête Java Collections, qui traite de sujets proches de l'article.
Création du projet Web le plus simple dans IntelliJ IDEA Enterprise.  Pas à pas, avec photos - 1
Actuellement, j'utilise IntelliJ IDEA Enterprise Edition ( ndlr : il s'agit d'une version étendue payante de l'IDE ; elle est généralement utilisée dans le développement professionnel). Il est beaucoup plus facile de travailler avec des projets Web qu'avec l' édition communautaire gratuite . Dans l' Enterprise Edition , un seul clic de souris crée littéralement le projet, le dépose dans un conteneur de servlet, démarre le serveur et ouvre même une page Web pour le projet dans le navigateur. Dans la version gratuite d'IDEA, vous auriez à faire une grande partie de cela par vous-même, c'est-à-dire "manuellement". J'utilise Apache Mavenpour construire le projet et gérer son cycle de vie. Je n'ai utilisé qu'une petite partie de ses capacités (gestion des packages/dépendances) dans ce projet. En tant que conteneur de servlet/serveur d'application, j'ai choisi Apache Tomcat version 9.0.12.

Commençons

Tout d'abord, ouvrez IntelliJ IDEA et créez un projet Maven vide . Création du projet Web le plus simple dans IntelliJ IDEA Enterprise.  Pas à pas, avec photos - 2Sur la gauche, sélectionnez Maven et vérifiez que le JDK du projet est sélectionné ci-dessus. S'il ne s'y trouve pas, sélectionnez-en un dans la liste ou cliquez sur Nouveau ... et choisissez-en un sur l'ordinateur. Création du projet Web le plus simple dans IntelliJ IDEA Enterprise.  Pas à pas, avec photos - 3Dans cette fenêtre, vous devez spécifier GroupId et ArtifactId . Le GroupId fait référence à l'identifiant unique de la société émettrice du projet. La pratique courante consiste à utiliser le nom de domaine de l'entreprise, mais dans l'ordre inverse. Pas comme un miroir cependant. Par exemple, si le nom de domaine d'une entreprise est maven.apache.org , alors son GroupId serait org.apache.maven. Autrement dit, nous écrivons d'abord le domaine de premier niveau, ajoutons un point, puis le domaine de second niveau, et ainsi de suite. C'est l'approche généralement acceptée. Si vous "réalisez" le projet vous-même (et non en tant que membre d'une entreprise), alors vous mettez votre nom de domaine personnel ici (également dans l'ordre inverse !). Si vous en avez un, bien sûr. :) Si non, ne vous inquiétez pas. Vous pouvez en fait écrire n'importe quoi ici .
Pour une entreprise avec le nom de domaine john.doe.org, le GroupId sera org.doe.john. Cette convention de dénomination est nécessaire pour séparer les projets portant le même nom et produits par différentes sociétés.
Dans cet exemple, j'utiliserai un domaine fictif : fatlady.info.codegym.cc . En conséquence, j'entre cc.codergym.info.fatlady dans le champ GroupId . ArtifactId est simplement le nom de notre projet. Vous pouvez utiliser des lettres et certains symboles (traits d'union, par exemple) pour séparer les mots. Notre "artefact" sera nommé exactement ce que nous écrivons ici. Dans cet exemple, je vais utiliser my-super-project . Ne touchez pas encore au champ de version, laissez-le tel quel. Création du projet Web le plus simple dans IntelliJ IDEA Enterprise.  Pas à pas, avec photos - 4Et voici la fenêtre IDEA standard lorsque vous créez un nouveau projet. Conformément à la tradition, appelons-le mon-super-projet . Création du projet Web le plus simple dans IntelliJ IDEA Enterprise.  Pas à pas, en images - 5Le projet est créé !
Pom.xml est immédiatement ouvert. Ceci est un fichier avec les paramètres Maven. Si nous voulons dire à Maven quoi faire ou où trouver quelque chose, nous décrivons tout cela dans ce fichier pom.xml. Il se trouve à la racine du projet.
Nous voyons qu'il contient maintenant les données exactes que nous avons saisies lors de la création du projet Maven : groupId , artefactId et version (nous n'avons pas touché à cette dernière).

La structure de notre projet

Ce projet Maven a une structure spécifique. Création du projet Web le plus simple dans IntelliJ IDEA Enterprise.  Pas à pas, en images - 6Comme vous pouvez le voir, la racine a :
  • un répertoire .idea , qui contient les paramètres IDEA du projet en cours ;
  • un répertoire src , où nous créons notre code source ;
  • un fichier my-super-project.iml , qui est un fichier de projet créé par IDEA ;
  • le fichier pom.xml (le fichier de projet Maven que j'ai mentionné plus tôt), qui est maintenant ouvert. Si je mentionne pom.xml quelque part, c'est le fichier dont je parle.
Dans le dossier src , il y a deux sous-dossiers :
  • main — pour notre code ;
  • test — pour les tests de notre code.
Dans main et test , il y a un dossier java . Vous pouvez les considérer comme le même dossier, sauf que celui de main est pour le code source et celui de test est pour le code de test. Pour l'instant, nous n'avons aucune utilité pour le dossier des ressources . Nous ne l'utiliserons pas. Mais laissez-le là.

Le transformer en projet web

Il est temps pour nous de convertir notre projet Maven en projet web. Pour ce faire, cliquez avec le bouton droit sur le nom du projet dans cette arborescence et sélectionnez Ajouter le support du frameworkCréation du projet Web le plus simple dans IntelliJ IDEA Enterprise.  Pas à pas, en images - 7Une fenêtre s'ouvre dans laquelle nous pouvons ajouter le support de différents frameworks à notre projet. Mais nous n'en avons besoin que d'une seule : Application Web . Et c'est celui que nous sélectionnons. Création du projet Web le plus simple dans IntelliJ IDEA Enterprise.  Pas à pas, en images - 8Assurez-vous que la case Application Web est cochée et que la fenêtre principale indique que nous voulons qu'un fichier web.xml soit créé automatiquement (je recommande de cocher la case si elle n'est pas déjà cochée). Nous voyons alors que le dossier Web a été ajouté à notre structure de projet. Création du projet Web le plus simple dans IntelliJ IDEA Enterprise.  Pas à pas, en images - 9Ceci est la racine de notre projet web avec l'adresse/. En d'autres termes, si nous entrons ' localhost ' dans le navigateur (lorsque le projet est en cours d'exécution, bien sûr), alors il cherchera ici, à la racine du projet Web. Si nous entrons localhost/addUser , il recherchera une ressource appelée addUser dans le dossier web .
La principale chose que vous devez comprendre est que le dossier Web est la racine de notre projet lorsque nous le mettons dans Tomcat. Nous avons maintenant une certaine structure de dossiers, mais dans le projet fini que nous allons créer, ce sera légèrement différent. Plus précisément, le dossier Web sera la racine.
Dans web , il y a un dossier requis appelé WEB-INF , où se trouve le fichier web.xml , c'est-à-dire celui que nous avons demandé au programme de créer à la dernière étape. Ouvrons-le. Création du projet Web le plus simple dans IntelliJ IDEA Enterprise.  Pas à pas, en images - 10Vous pouvez voir qu'il n'a encore rien d'intéressant, seulement un en-tête. Au fait, si vous n'avez pas demandé la création du fichier, vous devrez le créer manuellement, c'est-à-dire taper tous les en-têtes à la main. Ou, au moins, recherchez une version prête à l'emploi sur Internet. Pourquoi avons-nous besoin de web.xml ? Pour la cartographie. C'est ici que nous allons préciser pour Tomcat quelles requêtes d'URL transmettre à quels servlets. Mais nous y reviendrons plus tard. Pour l'instant, laissez-le vide. Le dossier Web contient également un fichier index.jsp. Ouvrez-le. Création du projet Web le plus simple dans IntelliJ IDEA Enterprise.  Pas à pas, en images - 11C'est le fichier qui sera exécuté par défaut, pour ainsi dire. En d'autres termes, c'est précisément ce que nous verrons lorsque nous démarrerons le projet. Fondamentalement, jsp est un fichier HTML ordinaire , sauf 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 écrivons dans un fichier HTML est affiché tel quel, tel qu'il est écrit. Si on écrit « hello world », ce texte s'affichera dès qu'on ouvrira la page, et dans 5 minutes, et demain, et dans une semaine, et dans un an. Cela ne changera pas. Mais que se passe-t-il si nous voulons afficher la date actuelle sur la page ? Si on écrivait juste " 27 octobre 2017", alors demain nous verrions la même date, et une semaine plus tard, et un an plus tard. Mais nous aimerions que la date soit actuelle. C'est là que la possibilité d'exécuter du code directement sur la page est utile. Nous pouvons obtenir un date, convertissez-le au format souhaité et affichez-le sur la page. Ensuite, chaque jour, lorsque nous ouvrons la page, la date sera toujours actuelle. Si nous n'avons besoin que de contenu statique, nous avons simplement besoin d'un serveur Web standard et Fichiers HTML. Nous n'avons pas besoin de Java, Maven ou Tomcat. Mais si nous voulons utiliser du contenu dynamique, nous avons besoin de tous ces outils. Mais pour l'instant, revenons à notre index.jsp . Indiquons autre chose que le titre standard, par exemple, « Ma super application web ! » Puis, dans le corps, écrivons « Je suis en vie ! » Nous sommes presque prêts à démarrer notre projet ! Malheureusement, le triangle vert habituel pour démarrer le programme n'est pas actif. Création du projet Web le plus simple dans IntelliJ IDEA Enterprise.  Pas à pas, en images - 12Cliquez sur le bouton à gauche de celui-ci (indiqué sur l'écran par une flèche rouge) et sélectionnez Modifier les configurations ... Cela ouvre une fenêtre où nous sommes invités à cliquer sur un signe plus vert pour ajouter une configuration. Cliquez dessus (dans le coin supérieur gauche de la fenêtre). Création du projet Web le plus simple dans IntelliJ IDEA Enterprise.  Pas à pas, en images - 13Choisissez Serveur Tomcat > Local . Une fenêtre avec beaucoup d'options s'ouvrira, mais les valeurs par défaut nous conviennent pour presque tout. Création du projet Web le plus simple dans IntelliJ IDEA Enterprise.  Pas à pas, en images - 14Nous pouvons donner à notre configuration un joli nom au lieu du standard Sans nom (tout en haut). Nous devons également vérifier qu'IDEA a réussi à trouver Tomcat sur notre système (vous avez déjà téléchargé et installéça, non ?). S'il n'a pas été trouvé (ce qui est peu probable), appuyez sur la flèche vers le bas et choisissez où il est installé. Ou choisissez une version différente, si vous en avez plusieurs installées. Je n'en ai qu'un et il est déjà installé. C'est pourquoi il ressemble à ce qu'il fait sur mon écran. Et tout en bas de la fenêtre, nous voyons un avertissement, nous alertant que jusqu'à présent, aucun artefact n'a été indiqué pour le déploiement sur le serveur. À droite de cet avertissement se trouve un bouton suggérant que nous corrigions ce problème. Nous cliquons dessus et voyons qu'IDEA a pu tout trouver par lui-même, a créé tout ce qui manquait par lui-même et a configuré tous les paramètres par lui-même. Création du projet Web le plus simple dans IntelliJ IDEA Enterprise.  Pas à pas, en images - 15Nous pouvons voir qu'il nous a déplacé de l' onglet Serveur vers l' onglet Déploiement , sous Déployer au démarrage du serveursection, et nous avons maintenant un artefact à déployer. Cliquez sur Appliquer et OK. Et nous voyons d'abord qu'en bas de la fenêtre, une section est apparue avec notre serveur Tomcat local, où notre artefact sera placé. Réduisez cette section en cliquant sur le bouton correspondant sur le côté droit de la fenêtre. Création du projet Web le plus simple dans IntelliJ IDEA Enterprise.  Pas à pas, en images - 16Nous voyons maintenant que le triangle de lancement vert est actif. Pour ceux qui aiment tout revérifier, vous pouvez cliquer sur le bouton des paramètres du projet (à droite des boutons de lancement, indiqué par une flèche rouge), aller dans la section Artefacts , et vous assurer que l'artefact a bien été créé. Ce n'était pas là jusqu'à ce que nous appuyions sur ce correctifbouton, mais maintenant tout est OK. Et cette configuration nous convient parfaitement. En un mot, la différence entre my-super-project:war et my-super-project:war explosé est que my-super-project:war consiste en un seul fichier war (qui n'est qu'une archive) et la version avec éclaté est tout simplement la guerre "déballée" . Et personnellement, c'est l'option que je trouve la plus pratique, car elle permet de déboguer rapidement des modifications mineures sur le serveur. Essentiellement, l'artefact est notre projet, juste compilé et où une structure de dossiers a été modifiée pour permettre à Tomcat d'y accéder directement. Cela ressemblera à ceci :
Création du projet Web le plus simple dans IntelliJ IDEA Enterprise.  Pas à pas, en images - 17
Maintenant tout est prêt pour lancer notre projet. Appuyez sur le précieux bouton de lancement vert et profitez du résultat ! :)
Création du projet Web le plus simple dans IntelliJ IDEA Enterprise.  Pas à pas, en images - 18
Commentaires
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION