[JAVA] Créez une application mémo avec Tomcat + JSP + Servlet + MySQL à l'aide d'Eclipse

Supplément 2018.12.16: Dans cet article, il est créé en utilisant "Tomcat project", mais compte tenu du reste, il est préférable de le créer en "spécifiant maven-archetype-webapp dans le projet Maven". (Ou dans un "projet web dynamique")

référence

Je ne sais pas quel numéro préparer, mais j'ai rongé un peu lors de la session d'étude d'introduction à Java en interne, donc pour examen et préparation. (Aussi, je me demande s'il y a quelque chose à faire lors de l'exécution d'une application Web + application DB après avoir créé un petit environnement)

Chaque version

De nos jours, il est développé à l'aide de divers frameworks, mais j'aimerais voir quel type d'implémentation et de traitement est effectué à la place primitive, alors je le fais ici avec JSP + Servlet.

Créer un projet Tomcat

Créer Java | Tomcat Project

image.png

Le nom du projet est memoapp

image.png

Le nom du contexte est (par défaut) / memoapp

image.png

Cela créera le projet

image.png

Créer l'interface utilisateur et la partie traitement de l'écran principal

Créer un fichier JSP

Créez un fichier JSP pour la partie UI. Sélectionnez un fichier JSP dans le nouveau menu Eclipse.

image.png

Sélectionnez WEB-INF / jsp comme dossier de création (sinon il sera créé en l'entrant manuellement) Le nom du fichier est facile à comprendre.

image.png

Sélectionnez "Nouveau fichier JSP (html)" comme modèle

image.png

Cela créera un fichier JSP

image.png

Modifiez «» et ajoutez le titre de la page avec «<h1>»</p> <h4><strong><code>index.jsp</code></strong></h4> <pre><code class="language-html"> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Memo App</title> </head> <body> <h1>memo app</h1> </body> </html> </code></pre> <h2>Créer un servlet</h2> <p>Créez une classe de servlet qui traite l'échange de données avec la JSP créée.</p> <ul> <li>Il y a "Servlet" dans le nouveau menu de création, mais seul le projet créé par "Dynamic Web Project" semble être la cible et ne peut pas être utilisé, il est donc généralement créé en créant une classe Java.</li> </ul> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/256859/65d3a365-80d8-a5d6-4cbf-980d36f565ae.png" alt="image.png" /></p> <p>La source au moment de la génération automatique est seulement la définition de classe et il n'y a pas de constructeur, mais <code>doGet ()</code> est défini comme suit. (Créez une méthode appelée lorsqu'il y a une requête GET)</p> <h4><strong><code>MemoAppMain.java</code></strong></h4> <pre><code class="language-java"> package jp.example.org; import java.io.IOException; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/") public class MemoAppMain extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String view = "/WEB-INF/jsp/index.jsp"; RequestDispatcher dispatcher = req.getRequestDispatcher(view); dispatcher.forward(req, resp); } } </code></pre> <p><code>doGet ()</code> lit le fichier JSP dans<code> / WEB-INF / jsp / index.jsp</code> et utilise le traitement en avant pour afficher le contenu de la JSP sur le navigateur.</p> <p>De plus, il semble qu'il y ait des transferts en avant et en redirection dans la transition d'écran de Servlet: [Connaître la différence entre redirection et transfert: JavaTips ~ JSP / Version Servlet- @ IT](http://www.atmarkit.co.jp/ait/ articles / 0407/06 / news077.html)</p> <p>Maintenant, lorsque vous démarrez Tomcat et "Mettre à jour la définition du contexte", vous devriez voir le contenu de la JSP lorsque vous y accédez depuis votre navigateur.</p> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/256859/1e86f2c8-b5d9-f36a-1581-6ad09d6af84a.png" alt="image.png" /></p> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/256859/d32ec827-249d-6fa8-da73-930813a2dbae.png" alt="image.png" /></p> <h1>Créer un processus de saisie de mémo</h1> <h2>Créer un formulaire de saisie avec JSP</h2> <p>Il s'agit généralement d'une balise de formulaire html. À peu près comme ça.</p> <h4><strong><code>index.jsp</code></strong></h4> <pre><code class="language-html"> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Memo App</title> </head> <body> <h1>memo app</h1> <form method="post"> <input type="text" name="title" size="50"/> <br/> <textarea rows="5" cols="80" name="memo"></textarea> <br/> <input type="submit"/> </form> </body> </html> </code></pre> <p>Normalement, la balise form utilise l'attribut ʻaction` pour décrire la destination des données d'entrée, mais cette fois, il est omis car il est fait pour se poster.</p> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/256859/3676509a-2a1d-c22a-f753-eba6a961a900.png" alt="image.png" /></p> <p>Lorsqu'il est affiché (car il n'y a pas de décoration), il ressemble à ceci. (Je veux faire quelque chose avec Bootstrap ...)</p> <h2>Recevoir les données postées par Servlet</h2> <p>Comme je n'ai pas écrit l'action sous la forme décrite dans JSP, la destination de la publication est moi-même. En d'autres termes, vous pouvez créer un processus de réception POST dans la classe <code>MemoAppMain</code> déjà créée.</p> <p><code>MemoAppMain</code> a<code> doGet ()</code> pour gérer la requête GET créée, mais create<code>doPost ()</code>pour gérer la requête POST de la même manière.</p> <p>Pour le moment, ça ressemble à ça</p> <h4><strong><code>MemoAppMain.java</code></strong></h4> <pre><code class="language-java"> @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("UTF-8"); System.out.println("title: " + req.getParameter("title")); System.out.println("memo: " + req.getParameter("memo")); // --Enregistrer dans DB ici-- resp.sendRedirect("."); } </code></pre> <p>Cette méthode est appelée lorsqu'il y a une requête POST. Comme son nom l'indique, les paramètres POST (requêtes HTTP) sont définis dans l'objet <code>req</code> et sont accessibles avec<code> getParameter (String)</code>. Le "titre" et le "mémo" de la chaîne de caractères spécifiée par ce <code>getParameter (String)</code> sont les chaînes de caractères du nom de formulaire du formulaire html.</p> <p>Pour le moment, j'accède uniquement aux données texte POSTÉES, je vais donc créer un processus pour enregistrer cela dans la base de données. <code>setCharacterEncoding (" UTF-8 ");</code> est une mesure contre les caractères déformés. Référence: <a href="https://www.javadrive.jp/servlet/request/index4.html">Correspondance des paramètres japonais (setCharacterEncoding) --Obtenir des informations sur la requête --Introduction aux servlets</a></p> <p>Lorsque le processus de sauvegarde est terminé, j'appelle <code>sendRedirect (". ");</code> Pour rediriger l'écran vers moi et le recharger.</p> <p>Todo: n'explique pas comment Tomcat démarre et se termine et comment l'application fonctionne à ce stade.</p> <h1>Traitement des connexions DB</h1> <p>Utilisez MySQL.</p> <p>Créez un processus pour enregistrer les données saisies dans le formulaire en tant que DB. Avant cela, configurez d'abord JDBC pour effectuer des opérations de base de données à partir d'applications Java.</p> <p>Vous pouvez configurer manuellement le JDBC (pilote JDBC intégré à l'application), mais ici nous utiliserons Maven pour l'installer.</p> <p>Maven est ... Gugu ♡</p> <h2>Convertir un projet Tomcat en Maven</h2> <p>Sélectionnez [Configuration] -> [Convertir en projet Maven] dans le menu contextuel du projet.</p> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/256859/5da2e789-454f-7c08-f5a6-375cd5ff4d6d.png" alt="image.png" /></p> <p>La boîte de dialogue Créer un nouveau POM s'affiche. Laissez le contenu par défaut et cliquez sur [Terminer] OK</p> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/256859/4d470ffe-2cf4-5bf9-9ceb-f16003866ba2.png" alt="image.png" /></p> <p>Cela générera un fichier pom.xml (et un répertoire <code>target</code> pour la sortie).</p> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/256859/15e03c2a-0473-ef37-98c2-75edb4921551.png" alt="image.png" /></p> <h4><strong><code>pom.xml</code></strong></h4> <pre><code class="language-xml"> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>memoapp</groupId> <artifactId>memoapp</artifactId> <version>0.0.1-SNAPSHOT</version> <build> <sourceDirectory>WEB-INF/src</sourceDirectory> <plugins> <plugin> <artifactId>maven-compiler-plugin</artifactId> <version>3.5.1</version> <configuration> <source/> <target/> </configuration> </plugin> </plugins> </build> </project> </code></pre> <p>De plus, si vous convertissez en projet Maven, certains paramètres tels que la version JRE et la destination de construction seront réécrits, donc corrigez-le.</p> <h3>Modifier le dossier de sortie</h3> <p>Dans l'onglet [Source] de [Java Build Path] dans les propriétés du projet, le "Dossier de sortie par défaut" est [<nom du projet> / cible / classes], cliquez donc sur le bouton [Parcourir] et cliquez sur [<nom du projet> / WEB -Change vers INF / classes]</p> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/256859/50e67781-b8b6-630c-4d8e-b8c37cd492fe.png" alt="image.png" /></p> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/256859/de36caa2-931b-9d40-b877-18bf6faed966.png" alt="image.png" /></p> <p>Après avoir changé la valeur par défaut, sélectionnez le dossier de sortie de <nom_projet> / WEB-INF / src dans la liste de [Dossier source sur le chemin de construction] et appuyez sur [Modifier].</p> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/256859/f92b79e7-918d-e7d6-52d8-f9b4f1ee1ef1.png" alt="image.png" /></p> <p>Définissez le paramètre du dossier de sortie sur "Dossier de sortie par défaut du projet"</p> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/256859/06ecca54-a373-9ce5-59d5-db2a6b60922a.png" alt="image.png" /></p> <h3>Modifications JRE</h3> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/256859/20f03aad-cd1a-4c83-0efe-ceb3d33af0b6.png" alt="image.png" /></p> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/256859/c05e767e-994d-1cb3-1d91-abe753b31cfb.png" alt="image.png" /></p> <p>Lorsque vous mettez à jour les paramètres, il vous sera demandé de confirmer la suppression du fichier avant la modification, cliquez donc sur [Oui] pour le supprimer.</p> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/256859/4b780489-7b0a-e129-6ce8-c6370af42216.png" alt="image.png" /></p> <p>Si un fichier inconnu est généré sous <code>work</code>, vous pouvez également le supprimer.</p> <h2>Introduction de JDBC</h2> <p>Accédez au référentiel Maven avec un navigateur et trouvez le fichier dont vous avez besoin.</p> <p><a href="https://mvnrepository.com/">Maven Repository: Search/Browse/Explore</a></p> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/256859/92a95695-0c0a-5c2a-0ee4-6e3b53a08d03.png" alt="image.png" /></p> <p>Cette fois, recherchez avec <code>mysql jdbc</code>. Ensuite, [MySQL Connector / J] sera frappé, donc <a href="https://mvnrepository.com/artifact/mysql/mysql-connector-java">Open Link</a> https://mvnrepository.com/artifact/mysql/mysql-connector-java</p> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/256859/1ef62de6-4eab-c14c-a7b8-fcb05d62eee9.png" alt="image.png" /></p> <p>Lorsque vous ouvrez le lien, une liste de versions sera affichée, donc sélectionnez fondamentalement la même version que MySQL. Cette fois, j'utilise MySQL 8.0.13, alors sélectionnez la même version.</p> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/256859/ac7743d5-a7b5-e7f3-3ca8-ec8cacba735f.png" alt="image.png" /></p> <p>Un exemple de description de la source est décrit à la destination du lien. Publiez le contenu affiché sur cet onglet [Maven] dans <code><dependencies> ～ </ dependencies></code> dans le fichier <code>pom.xml</code> du projet.</p> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/256859/df60c8b0-e716-3540-7ca3-3b638a25d166.png" alt="image.png" /></p> <p>Cependant, comme la balise <code><dependencies></code> n'existe pas dans l'état initial, comme immédiatement après la conversion en projet Maven, entrez-la dans l'interface utilisateur à partir de l'onglet dépendances (soit manuellement).</p> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/256859/e6129a1b-f5ad-2030-a8a8-7f3ac0c5e657.png" alt="image.png" /></p> <p>Entrez la valeur affichée sur le site de Maven dans la boîte de dialogue de sélection des dépendances comme indiqué ci-dessous et appuyez sur [OK].</p> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/256859/f2338987-48cb-25b7-b9e3-8e93ab7eb9ea.png" alt="image.png" /></p> <p>Et mysql-connector-java sera ajouté, donc enregistrez le fichier.</p> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/256859/ed466118-c916-3fa5-8ece-c7578f880aa5.png" alt="image.png" /></p> <p>En même temps que l'enregistrement, le téléchargement et la construction des fichiers nécessaires sont lancés, et lorsque la construction est terminée, des fichiers tels que «Dépendance Maven» sont ajoutés à la configuration du projet.</p> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/256859/e583e4e5-4326-1d4a-8c72-b59f54de1205.png" alt="image.png" /></p> <p>À ce stade, le contenu de pom.xml ressemble à ceci</p> <h4><strong><code>pom.xml</code></strong></h4> <pre><code class="language-xml"> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>memoapp</groupId> <artifactId>memoapp</artifactId> <version>0.0.1-SNAPSHOT</version> <build> <sourceDirectory>WEB-INF/src</sourceDirectory> <plugins> <plugin> <artifactId>maven-compiler-plugin</artifactId> <version>3.5.1</version> <configuration> <source/> <target/> </configuration> </plugin> </plugins> </build> <dependencies> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.13</version> </dependency> </dependencies> </project> </code></pre> <h2>Créer une base de données et un utilisateur</h2> <p>Créez une base de données et un utilisateur à utiliser dans l'application. Cela se fait sur MySQL, indépendamment de Tomcat ou Java.</p> <pre><code class="language-sql">C:\Users\zaki>mysql -u root -p Enter password: ******** Welcome to the MySQL monitor. Commands end with ; or \g. Your MySQL connection id is 9 Server version: 8.0.13 MySQL Community Server - GPL Copyright (c) 2000, 2018, Oracle and/or its affiliates. All rights reserved. Oracle is a registered trademark of Oracle Corporation and/or its affiliates. Other names may be trademarks of their respective owners. Type 'help;' or '\h' for help. Type '\c' to clear the current input statement. mysql> mysql> create database memoapp_db; Query OK, 1 row affected (0.06 sec) mysql> create user memoapp identified by "memoapp"; Query OK, 0 rows affected (0.13 sec) mysql> grant all on memoapp_db.* to memoapp; Query OK, 0 rows affected (0.03 sec) mysql> </code></pre> <h2>Connexion à la base de données depuis Java</h2> <pre><code class="language-java"> // --Enregistrer dans DB ici-- Connection con = null; Statement smt = null; String url = "jdbc:mysql://localhost:3306/memoapp_db"; String user = "memoapp"; String pass = "memoapp"; try { con = DriverManager.getConnection(url, user, pass); smt = con.createStatement(); System.out.println("smt: " + smt); } catch (SQLException e) { e.printStackTrace(); } finally { try { con.close(); } catch (SQLException e) { e.printStackTrace(); } } // --Traitement DB jusqu'à ici-- </code></pre> <p>Maintenant, lorsque j'essaie d'enregistrer des données à partir d'un formulaire, une exception se produit</p> <pre><code>java.sql.SQLException: No suitable driver found for jdbc:mysql://localhost:3306/memoapp_db at java.sql.DriverManager.getConnection(DriverManager.java:689) at java.sql.DriverManager.getConnection(DriverManager.java:247) at jp.example.org.MemoAppMain.doPost(MemoAppMain.java:44) at javax.servlet.http.HttpServlet.service(HttpServlet.java:648) at javax.servlet.http.HttpServlet.service(HttpServlet.java:729) : : </code></pre> <p>Ce n'est pas un problème car le fichier jar JDBC introduit par Maven peut être référencé au moment de la construction sur Eclipse, mais le chemin du fichier jar JDBC n'est pas défini lors de l'exécution avec Tomcat.</p> <p>Si vous cochez [Utiliser le chemin de classe SMART! Maven] sur l'écran "Chemin de classe du chargeur de classe de développement" des paramètres Tomcat dans les propriétés du projet, les bibliothèques de Maven seront également référencées lors de l'exécution de Tomcat ...?</p> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/256859/f8590167-913f-b972-cf6b-0465e5d1f8ad.png" alt="image.png" /></p> <p>J'ai pensé, mais Tomcat a eu une erreur et memoapp ne fonctionne pas</p> <pre><code>Sérieux: Begin event threw exception [Sam 12 01 13:38:19 JST 2018] Sérieux: Parse error in context.xml for /memoapp [Sam 12 01 13:38:19 JST 2018] Sérieux:Survenu à la ligne 126, colonne 2[Sam 12 01 13:38:19 JST 2018] Sérieux:Marquer cette application comme indisponible en raison d'une erreur précédente[Sam 12 01 13:38:19 JST 2018] Sérieux: One or more components marked the context as not correctly configured [Sam 12 01 13:38:19 JST 2018] Sérieux:Le lancement du contexte a échoué en raison d'une erreur précédente[/memoapp] [Sam 12 01 13:38:19 JST 2018] </code></pre> <p>À propos, si vous définissez ce paramètre et mettez à jour la définition de contexte, memoapp.xml ressemble à ceci</p> <h4><strong><code>memoapp.xml</code></strong></h4> <pre><code class="language-xml"> <Context path="/memoapp" reloadable="true" docBase="C:\Users\zaki\src\2018b-java-study\memoapp" workDir="C:\Users\zaki\src\java-study\memoapp\work" > <Loader className="org.apache.catalina.loader.DevLoader" reloadable="true" debug="1" useSystemClassLoaderAsParent="false" /> </Context> </code></pre> <p>Quand je l'ai recherché, j'ai trouvé des informations qui "Renommez et copiez le fichier<code> DevLoader.zip</code> inclus dans le plug-in Tomcat dans TOMCAT_HOME / server / lib dans jar.</p> <ul> <li><a href="http://hinapotech.cocolog-nifty.com/blog/2008/10/eclipsedevloade.html">[eclipse] DevLoader Trap: Note technique de Hinapo</a></li> <li><a href="http://d.hatena.ne.jp/Ochotona/20060608/1149732351">Débogage du projet Maven - Journal d'élevage de Naruto</a></li> <li><a href="https://qa.atmarkit.co.jp/q/283/">Tomcat ne fonctionne pas dans Eclipse !! --QA @ IT</a></li> </ul> <p>Dans Eclipse Tomcat Plugin 9.13 à partir de décembre 2018, le fichier DevLoader.zip n'est pas inclus directement, mais dans le fichier <code>net.sf.eclipse.tomcat_9.1.3.jar</code> (difficile à comprendre!) Puisque le fichier jar est en fait un zip, renommez l'extension et développez-la, puis extrayez le <code>DevloaderTomcat7.jar</code> à l'intérieur ... ça? N'y a-t-il que Tomcat7?</p> <p>Lorsque j'ai utilisé ce fichier, cela ne fonctionnait pas sur Tomcat 8.</p> <pre><code>Sérieux: Begin event threw error [Sam 12 01 14:48:25 JST 2018] Sérieux: ContainerBase.addChild: start: [Sam 12 01 14:48:25 JST 2018] Sérieux:Descripteur de configuration C:\pleiades\pleiades\tomcat\8\conf\Catalina\localhost\memoapp.Erreur lors du déploiement de xml[Sam 12 01 14:48:25 JST 2018] </code></pre> <p>Il semble n'y avoir aucun fichier requis dans le plug-in Tomcat d'Eclipse, alors téléchargez-le sur le net.</p> <p>https://sourceforge.net/projects/tomcatplugin/files/additional/ ↑ Cela n'arrive pas ... Donc d'ici. https://github.com/his-eg/tomcatplugin/blob/master/net.sf.eclipse.tomcat/DevLoaderTomcat8.jar</p> <p>Copiez ce fichier dans le répertoire lib de Tomcat. (Pour les Pléiades, autour de <code>pleiades \ tomcat \ 8 \ lib \ DevloaderTomcat7.jar</code>)</p> <p>Cela devrait fonctionner si je redémarre Tomcat ... mais j'obtiens toujours la même erreur</p> <pre><code>java.sql.SQLException: No suitable driver found for jdbc:mysql://localhost:3306/memoapp_db </code></pre> <p>(Imaginez) Cette erreur échoue <code>DriverManager.getConnection ()</code> qui ne peut pas être exécuté sans le jdbc jar car DevLoader n'a pas déterminé la classe à charger au moment de l'exécution. Donc juste avant cela, vous pouvez charger le fichier jdbc. Puis faites <code>Class.forName (" com.mysql.cj.jdbc.Driver ");</code></p> <pre><code class="language-java"> // --Enregistrer dans DB ici-- Connection con = null; Statement smt = null; //String url = "jdbc:mysql://localhost:3306/memoapp_db?useSSL=false&useUnicode=true&serverTimezone=UTC"; String url = "jdbc:mysql://localhost:3306/memoapp_db"; String user = "memoapp"; String pass = "memoapp"; try { Class.forName("com.mysql.cj.jdbc.Driver"); con = DriverManager.getConnection(url, user, pass); smt = con.createStatement(); System.out.println("smt: " + smt); } catch (SQLException | ClassNotFoundException e) { e.printStackTrace(); } finally { try { con.close(); } catch (SQLException e) { e.printStackTrace(); } } // --Traitement DB jusqu'à ici-- </code></pre> <p>Le code de la partie connexion à la base de données ressemble donc à ceci. Notez que le nom de classe de l'argument de <code>forName ()</code> qui apparaît souvent dans l'exemple de code est "com.mysql .__ cj __. Jdbc.Driver" car FQCN a été modifié dans la version actuelle (cj a été ajouté). Teru)</p> <p>J'ai également dû ajouter le chemin de classe du chargeur de classe de développement, ʻorg.eclipse.m2e.MAVEN2_CLASSPATH_CONTAINER`.</p> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/256859/fadaa5d1-479a-c568-490a-ee2bb0ebf07a.png" alt="image.png" /></p> <p>En passant, il a fallu une semaine pour atteindre l'achèvement de la connexion à la base de données ...</p> <ul> <li>Bien que ce ne soit pas intelligent, si vous copiez <code>mysql-connector-java-8.0.13.jar</code> et<code> protobuf-java-3.6.1.jar</code> directement sous le répertoire<code> lib</code> de la bibliothèque Tomcat, les paramètres du côté Eclipse seront modifiés. Cela fonctionne sans rien.</li> </ul> <h1>Fonctionnement DB</h1> <p>Cliquez ici pour un bref résumé des opérations MySQL. [(Loose and updated) MySQL / SQL mémo](Qiita https://qiita.com/zaki-lknr/items/4d330b64e1d8cdd9ce59)</p> <h2>Conception et création de table</h2> <p>Simple car c'est un échantillon</p> <table> <thead> <tr> <th>field</th> <th>type</th> <th>size</th> <th>not null</th> <th>comment</th> <th>etc</th> </tr> </thead> <tbody> <tr> <td>memo_id</td> <td>int</td> <td>11</td> <td>✓</td> <td>ID</td> <td>auto_increment</td> </tr> <tr> <td>category</td> <td>int</td> <td>11</td> <td></td> <td>Catégorie</td> <td></td> </tr> <tr> <td>title</td> <td>varchar</td> <td>64</td> <td></td> <td>Titre</td> <td></td> </tr> <tr> <td>memo</td> <td>text</td> <td></td> <td></td> <td>Note</td> <td></td> </tr> <tr> <td>create_date</td> <td>datetime</td> <td></td> <td></td> <td>Date de création</td> <td></td> </tr> <tr> <td>modified_date</td> <td>datetime</td> <td></td> <td></td> <td>Date de mise à jour</td> <td></td> </tr> </tbody> </table> <p>Création de SQL pour créer une table</p> <pre><code class="language-sql">create table if not exists memo_data ( memo_id INT(11) auto_increment not null comment 'ID', category INT(11) comment 'Catégorie', title VARCHAR(64) comment 'Titre', memo TEXT comment 'Note', create_date DATETIME comment 'Date de création', modified_date DATETIME comment 'Date de mise à jour', primary key (memo_id) ) </code></pre> <p>Code Java pour créer une table (bien qu'un peu approprié)</p> <pre><code class="language-java"> con = DriverManager.getConnection(url, user, pass); smt = con.createStatement(); System.out.println("smt: " + smt); String create_table = "create table if not exists memo_data (" + "memo_id INT(11) auto_increment not null comment 'ID'," + "category INT(11) comment 'Catégorie'," + "title VARCHAR(64) comment 'Titre'," + "memo TEXT comment 'Note'," + "create_date DATETIME comment 'Date de création'," + "modified_date DATETIME comment 'Date de mise à jour'," + "primary key (memo_id)" + ")"; // create table smt.executeUpdate(create_table); </code></pre> <p>Maintenant, lancez-le et la table sera créée</p> <pre><code>mysql> show tables; +----------------------+ | Tables_in_memoapp_db | +----------------------+ | memo_data | +----------------------+ 1 row in set (0.01 sec) mysql> describe memo_data; +---------------+-------------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra | +---------------+-------------+------+-----+---------+----------------+ | memo_id | int(11) | NO | PRI | NULL | auto_increment | | category | int(11) | YES | | NULL | | | title | varchar(64) | YES | | NULL | | | memo | text | YES | | NULL | | | create_date | datetime | YES | | NULL | | | modified_date | datetime | YES | | NULL | | +---------------+-------------+------+-----+---------+----------------+ 6 rows in set (0.00 sec) mysql> </code></pre> <h2>Processus d'enregistrement des mémos</h2> <p>Créez un processus pour enregistrer les données d'entrée du formulaire qui peuvent être référencées par <code>req.getParameter (" title ")</code> et <code>req.getParameter (" memo ")</code> dans la méthode de <code>doPost ()</code> dans le tableau.</p> <pre><code class="language-java">String form_title = req.getParameter("title"); String form_memo = req.getParameter("memo"); </code></pre> <p>Et obtenez-le dans une variable, et l'instruction INSERT ressemble à ce qui suit.</p> <pre><code class="language-sql">insert into memo_data ( category, title, memo, create_date, modified_date ) values ( 0, form_title, form_memo, cast(now() as datetime), cast(now() as datetime) ); </code></pre> <p>Code Java pour sauvegarder les enregistrements</p> <pre><code class="language-java"> con = DriverManager.getConnection(url, user, pass); smt = con.createStatement(); String form_title = req.getParameter("title"); String form_memo = req.getParameter("memo"); System.out.println("title: " + form_title); System.out.println("text: " + form_memo); String insert_memo = "insert into memo_data (" + "category, title, memo, create_date, modified_date" + ") values (" + "0," + "'" + form_title + "'," + "'" + form_memo + "'," + "cast(now() as datetime)," + "cast(now() as datetime) " + ");"; //Enregistrer l'enregistrement smt.executeUpdate(insert_memo); </code></pre> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/256859/64dfa930-41cc-1982-5d9a-7190ea61681d.png" alt="image.png" /></p> <p>Désormais, lorsque vous saisissez du texte depuis le navigateur et que vous le soumettez, le contenu est enregistré dans la base de données.</p> <p>(C'est difficile à voir avec les sauts de ligne) Comme ça</p> <pre><code>mysql> select * from memo_data; +---------+----------+--------+----------------------------+---------------------+---------------------+ | memo_id | category | title | memo | create_date | modified_date | +---------+----------+--------+----------------------------+---------------------+---------------------+ | 1 | 0 |achats| -curry -Facile -Niku| 2018-12-02 09:52:07 | 2018-12-02 09:52:07 | +---------+----------+--------+----------------------------+---------------------+---------------------+ 1 row in set (0.00 sec) mysql> </code></pre> <h2>Acquisition de mémos et traitement d'affichage</h2> <p>Créez un processus pour afficher les dernières données de mémo enregistrées à l'écran. Puisqu'il est affiché, l'emplacement est exécuté avec <code>doGet ()</code>.</p> <p>La colonne à afficher pour le moment</p> <p>--Titre --Note --Mis à jour</p> <p>Avec trois.</p> <p>Tout d'abord, l'instruction SELECT</p> <pre><code class="language-sql">select title, memo, modified_date from memo_data; </code></pre> <p>Contrairement à la création et à l'insertion, les sources Java créent également des processus qui reçoivent les résultats de l'exécution.</p> <pre><code class="language-java"> con = DriverManager.getConnection(url, user, pass); smt = con.createStatement(); String select_memo = "select title, memo, modified_date from memo_data;"; ResultSet result = smt.executeQuery(select_memo); while (result.next()) { System.out.println("title: " + result.getString("title")); System.out.println("memo: " + result.getString("memo")); System.out.println("modify: " + result.getString("modified_date")); } </code></pre> <p>Vous pouvez maintenant obtenir les informations d'enregistrement. Ensuite, transmettez les données de mémo extraites de la base de données à l'écran (JSP).</p> <h1>Création du traitement de sortie de mémo</h1> <p>Cette fois, créez un processus pour transmettre les données du servlet à JSP (reportez-vous à la valeur reçue du servlet dans JSP).</p> <h2>Côté servlet</h2> <p>Premièrement, le résultat de ʻexecuteQuery () `ne peut pas être utilisé après la fermeture de la connexion, donc créez une variable pour passer et copiez-y les informations d'enregistrement.</p> <pre><code class="language-java"> ArrayList<HashMap<String, String>> record_list = new ArrayList<>(); //Omission ResultSet result = smt.executeQuery(select_memo); while (result.next()) { HashMap<String, String> record = new HashMap<>(); record.put("title", result.getString("title")); record.put("memo", result.getString("memo")); record.put("modified_date", result.getString("modified_date")); record_list.add(record); } </code></pre> <p>Ensuite, pour passer cette <code>liste_enregistrements</code> à la JSP, définissez la valeur dans la variable de demande de Servlet avec<code> setAtribute ()</code> (comme HashMap, vous pouvez transmettre la structure de données au format clé-valeur).</p> <pre><code class="language-java"> req.setAttribute("record_list", record_list); String view = "/WEB-INF/jsp/index.jsp"; RequestDispatcher dispatcher = req.getRequestDispatcher(view); dispatcher.forward(req, resp); </code></pre> <p>Vous pouvez maintenant vous y référer dans JSP avec le nom de clé <code>record_list</code>.</p> <h2>Côté JSP</h2> <p>La valeur définie par <code>setAttribute (KEY)</code> dans Servlet peut être récupérée par <code>request.getAttribute (KEY)</code>.</p> <pre><code class="language-java"> ArrayList<HashMap<String, String>> list = (ArrayList<HashMap<String, String>>) request.getAttribute("record_list"); </code></pre> <p>Après l'extraction, il est sorti au format html de la même manière que le codage Java normal.</p> <pre><code class="language-java"> Iterator<HashMap<String, String>> i = list.iterator(); while (i.hasNext()) { HashMap map = i.next(); out.println("<hr/>"); out.println("<div>" + map.get("title") + "</div>"); out.println("<div>" + map.get("modified_date") + "</div>"); out.println("<div>" + ((String) map.get("memo")).replace("\n", "<br/>") + "</div>"); } </code></pre> <p>J'ai également besoin d'une déclaration d'importation en premier</p> <pre><code class="language-text"><%@page import="java.util.Iterator"%> <%@page import="java.util.ArrayList"%> <%@page import="java.util.HashMap"%> </code></pre> <p>La source entière ressemble à ceci</p> <pre><code class="language-text"><%@page import="java.util.Iterator"%> <%@page import="java.util.ArrayList"%> <%@page import="java.util.HashMap"%> <%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Memo App</title> </head> <body> <h1>Application mémo</h1> <form method="post"> <input type="text" name="title" size="50" /> <br /> <textarea rows="5" cols="80" name="memo"></textarea> <br /> <input type="submit" /> </form> <% ArrayList<HashMap<String, String>> list = (ArrayList<HashMap<String, String>>) request .getAttribute("record_list"); Iterator<HashMap<String, String>> i = list.iterator(); while (i.hasNext()) { HashMap map = i.next(); out.println("<hr/>"); out.println("<div>" + map.get("title") + "</div>"); out.println("<div>" + map.get("modified_date") + "</div>"); out.println("<div>" + ((String) map.get("memo")).replace("\n", "<br/>") + "</div>"); } %> </body> </html> </code></pre> <p>Écran d'affichage</p> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/256859/1bb3c991-9742-65e7-32af-64751e5aa27b.png" alt="image.png" /></p> <p>J'ai réussi à le visualiser et à le sauvegarder.</p> <h1>Tâches futures</h1> <p>--Parce que la spécification d'adresse du serveur de base de données est codée en dur, elle doit être reconstruite à chaque fois que l'environnement change.</p> <ul> <li><a href="https://qiita.com/zaki-lknr/items/2bd955df62d4de0528ac">Définition de fichier XML des paramètres de connexion à la base de données utilisant JNDI</a></li> <li>Mesures d'injection SQL --Utilisation des espaces réservés --Création d'un fichier war à exécuter dans un environnement non local</li> <li>Peut-être le monde des opérations Eclipse --Informations connexes: <a href="https://qiita.com/zaki-lknr/items/a2e76986b6e473964800">Exportation de projets et de fichiers war lors de la création de Java côté serveur dans Eclipse</a> --De-Eclipse --CLI construire</li> <li>Si vous avez une structure de répertoires créée en tant que projet Maven, par exemple dans Debian Linux, si vous entrez <code>maven</code> avec apt, vous pouvez créer un fichier war en exécutant<code> mvn package</code> dans le répertoire avec<code> pom.xml</code>.</li> <li><a href="https://github.com/zaki-lknr/javaee-memoapp2/commits/master">Référence car la source a été téléchargée sur GitHub</a> «Est-ce une IDÉE après tout?</li> <li>Processus d'initialisation de la base de données --JPA (API de persistance Java) --Classez correctement le traitement de la base de données</li> <li>L'idée de DAO</li> <li>Pour le dire clairement, en implémentant les opérations d'entrée / sortie de données séparément dans des classes distinctes, par exemple, même si la base de données passe à Postgres, le changement du côté de l'appelant est minimisé, ce qui est souvent fait avec du code commercial.</li> <li><a href="https://github.com/zaki-lknr/javaee-memoapp2/tree/master/src/main/java/jp/example/www/dao">Exemple de source côté DAO (GitHub)</a></li> <li><a href="https://github.com/zaki-lknr/javaee-memoapp2/commit/9dee5df1857f7c64a7d9b5def76a3e5c7bee505b#diff-9b28da552a85fc2a037e656543ff16">Modifications de la source de l'appelant (GitHub)</a> --Servlet-> Ecrire le transfert de données JSP un peu plus magnifiquement --Utilisez JavaBeans: <a href="https://qiita.com/zaki-lknr/items/3c01f74e0fe2876442d2">Simplifiez l'écriture de JSP / Servlet avec JavaBeans et JSTL</a> ――Pouvez-vous écrire un peu plus joliment la partie d'affichage de la boucle? --Dans la bibliothèque de balises de base JSTL forEach: <a href="https://qiita.com/zaki-lknr/items/3c01f74e0fe2876442d2">Simplifier l'écriture de JSP / Servlet avec JavaBeans et JSTL</a></li> <li>Support de cadre --Printemps --Connexion ou session</li> <li>L'apparence de l'écran --Amorcer ...</li> </ul> <!-- ENDDDDDDDDDDDDDDDDDDDDDDDDDDDDD --> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- ng_ads_new_ui --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6575041992772322" data-ad-slot="8191531813" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div style="margin-top: 30px;"> <div class="link-top" style="margin-top: 1px;"></div> <p> <font size="4">Recommended Posts</font> <!-- BEGIN LINK ************************* --> <div style="margin-top: 10px;"> <a href="/fr/32690b071abf202281d6">Créez une application mémo avec Tomcat + JSP + Servlet + MySQL à l'aide d'Eclipse</a> </div> <div style="margin-top: 10px;"> <a href="/fr/3373c306bd2ec720092c">Créer un projet Tomcat à l'aide d'Eclipse</a> </div> <div style="margin-top: 10px;"> <a href="/fr/7505b054f5708868f5ba">[Java] J'ai essayé de me connecter en utilisant le pool de connexion avec Servlet (tomcat) & MySQL & Java</a> </div> <div style="margin-top: 10px;"> <a href="/fr/2fa52ecee90b7a25e4c9">Mémo de développement d'applications Web avec MVN, Tomcat, JSP / Servlet avec VScode</a> </div> <div style="margin-top: 10px;"> <a href="/fr/9ca5bb0719f38e2ce52e">Créer un projet Tomcat en utilisant Eclipse Pleiades All in One</a> </div> <div style="margin-top: 10px;"> <a href="/fr/a505249cc0d50df3aae8">Jusqu'à ce que vous créiez une application Web avec Servlet / JSP (Partie 1)</a> </div> <div style="margin-top: 10px;"> <a href="/fr/dfee2210ebff74ac942c">Un exemple CRUD simple utilisant Java Servlet / JSP et MySQL</a> </div> <div style="margin-top: 10px;"> <a href="/fr/1936ab2944fe79837ac2">Créer un projet Jetty à l'aide d'Eclipse</a> </div> <div style="margin-top: 10px;"> <a href="/fr/833a8879ce49b9bec9cb">Créer un projet Java à l'aide d'Eclipse</a> </div> <div style="margin-top: 10px;"> <a href="/fr/a181776ce407ce44dbfd">Créer un programme Servlet dans Eclipse</a> </div> <div style="margin-top: 10px;"> <a href="/fr/2c5632cd1bd741cdd3e3">[Rails6] Créer une nouvelle application avec Rails [Débutant]</a> </div> <div style="margin-top: 10px;"> <a href="/fr/bc97bea609583dee7f93">[Rails 5] Créer une nouvelle application avec Rails [Débutant]</a> </div> <div style="margin-top: 10px;"> <a href="/fr/17b2c10042c3203382f2">[Memo] Créez facilement un environnement CentOS 8 avec Docker</a> </div> <div style="margin-top: 10px;"> <a href="/fr/22b7f03c409422c40f7d">Créez une application de recherche simple avec Spring Boot</a> </div> <div style="margin-top: 10px;"> <a href="/fr/28ca111a5a3c0cbdcf0a">Créez un tableau d'affichage simple avec Java + MySQL</a> </div> <div style="margin-top: 10px;"> <a href="/fr/2ee748aeb05ee538129f">[Windows] [IntelliJ] [Java] [Tomcat] Créer un environnement pour Tomcat 9 avec IntelliJ</a> </div> <div style="margin-top: 10px;"> <a href="/fr/8137ac40ebd8f5bdb3c5">[Eclipse / Tomcat] Servlet + JSP dans le projet webapp de Maven</a> </div> <div style="margin-top: 10px;"> <a href="/fr/57b2f5d9140e37abad59">À propos de [servlet] [JSP] [tomcat]</a> </div> <div style="margin-top: 10px;"> <a href="/fr/627d45bbaa173fcd771c">Créez une application de chat avec WebSocket (Tyrus) + libGDX + Kotlin</a> </div> <div style="margin-top: 10px;"> <a href="/fr/eb4640761a4e77490ea3">Créer un servlet Java et un fichier WAR JSP à déployer sur Apache Tomcat 9 avec Gradle</a> </div> <div style="margin-top: 10px;"> <a href="/fr/3d553bb24b34d0671845">[Rails] J'ai essayé de créer une mini application avec FullCalendar</a> </div> <div style="margin-top: 10px;"> <a href="/fr/7b2c2445ebdee5edead1">Créez une application Web Hello World avec Spring Framework + Jetty</a> </div> <div style="margin-top: 10px;"> <a href="/fr/f0d0417c3731b044c6db">Comment s'inscrire en tant que client dans Square à l'aide de Tomcat</a> </div> <div style="margin-top: 10px;"> <a href="/fr/62a7281dbe0398db85f2">Créer une méthode java [Memo] [java11]</a> </div> <div style="margin-top: 10px;"> <a href="/fr/8577aa59797faa938264">Créez un terrain de jeu avec Xcode 12</a> </div> <div style="margin-top: 10px;"> <a href="/fr/951f6579ad1bb589185f">Créer une loterie avec Ruby</a> </div> <div style="margin-top: 10px;"> <a href="/fr/a15a011485ac92074d6f">Premiers pas avec JSP et servlet</a> </div> <div style="margin-top: 10px;"> <a href="/fr/40c7d50e2f8703559dc2">Créer un site de catalogue d'applications à l'aide de l'interface de ligne de commande pour Microsoft 365 avec Docker</a> </div> <div style="margin-top: 10px;"> <a href="/fr/5a1b5e5da95a21935d18">Créer une JVM pour la distribution d'applications avec les modules JDK 9 et jlink</a> </div> <div style="margin-top: 10px;"> <a href="/fr/bf49eced38eeab5371ad">[Introduction à JSP + Servlet] J'ai joué avec pendant un moment ♬</a> </div> <div style="margin-top: 10px;"> <a href="/fr/d14d643db28bc63c7b3f">Créez une application de recherche de restaurant avec l'API IBM Watson + Guru Navi (avec source)</a> </div> <div style="margin-top: 10px;"> <a href="/fr/5602dbcc736cd03d03b8">[Java / Eclipse / Servlet / JSP / PostgreSQL] Framework d'application WEB avec fonctions de publication / sauvegarde / édition / mise à jour / suppression de données</a> </div> <div style="margin-top: 10px;"> <a href="/fr/09384726105eee53bbb6">Créez un environnement Vue3 avec Docker!</a> </div> <div style="margin-top: 10px;"> <a href="/fr/0993c489e7ef1c0f969d">[Android] Créer un calendrier à l'aide de GridView</a> </div> <div style="margin-top: 10px;"> <a href="/fr/33bfea8b4b27ed0e7715">Créez une application avec Spring Boot 2</a> </div> <div style="margin-top: 10px;"> <a href="/fr/6577d2556ba355537cee">Créer une application de minuterie avec de la boue</a> </div> <div style="margin-top: 10px;"> <a href="/fr/6a4b6062df6cf7a12ef4">Créer une nouvelle application avec Rails</a> </div> <div style="margin-top: 10px;"> <a href="/fr/718c77f6a305c7a190e1">Passer des paramètres de JSP avec un servlet</a> </div> <div style="margin-top: 10px;"> <a href="/fr/8c29fc7fc2d886a9b35e">Créez une application avec Spring Boot</a> </div> <div style="margin-top: 10px;"> <a href="/fr/900bf9f0ee0d8f7b9b11">Créer une fonction de filtrage en utilisant actes-as-taggable-on</a> </div> <div style="margin-top: 10px;"> <a href="/fr/a2932d0f2c775525a4b6">Créer une application en ligne de commande avec maven</a> </div> <div style="margin-top: 10px;"> <a href="/fr/b07dd5e86a6d6cd3efbc">Hello World avec GlassFish 5.1 + Servlet + JSP</a> </div> <div style="margin-top: 10px;"> <a href="/fr/bd99135a1d2f0009a69e">Essayez de créer une application client serveur</a> </div> <div style="margin-top: 10px;"> <a href="/fr/d0069963b13737e8e3f8">Créez des exceptions avec une interface fluide</a> </div> <div style="margin-top: 10px;"> <a href="/fr/eee651c34f05470f8fac"></a> </div> <div style="margin-top: 10px;"> <a href="/fr/340afd8401af2ae2231f">Créez un projet de développement d'application Spring Boot avec la commande cURL + tar</a> </div> <div style="margin-top: 10px;"> <a href="/fr/b78c3791b27b1256def6">Créez une application de résumé de nouvelles techniques de style LINEnews avec Rails x LineBot! [Partie 1]</a> </div> <div style="margin-top: 10px;"> <a href="/fr/db9cb387ecfde0944496">Étapes pour créer une application chameau simple avec les démarreurs Apache Camel Spring Boot</a> </div> <div style="margin-top: 10px;"> <a href="/fr/fa145e42bf32271d8d6c">Interagir avec une base de données MySQL à l'aide de la fonction ORM (Object-Relational Mapping) d'Apache Cayenne</a> </div> <div style="margin-top: 10px;"> <a href="/fr/f1dfeb2c3b8bcca5ebc5">[Java] J'ai installé JDBC et essayé de me connecter avec servlet + MySQL. (Il existe une version utilisant DAO / Bean)</a> </div> <!-- END LINK ************************* --> </p> </div> </div> </div> <div class="footer text-center" style="margin-top: 40px;"> <!-- <p> Licensed under cc by-sa 3.0 with attribution required. </p> --> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.2/build/highlight.min.js"></script> <!-- ads --> <script data-ad-client="ca-pub-6575041992772322" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- end ads --> </body> </html>