Créons une application TODO avec Java 3 Enregistrez les données temporaires dans MySQL-> Tout obtenir-> Afficher en haut

Bonjour. Ceci est une suite de Faisons une application TODO avec Java 2 Je veux créer un modèle avec Spring Initializr et créer un monde Hello.

Cette fois, je vais enregistrer les données temporaires dans la base de données (MySQL), les récupérer toutes et les afficher sur l'écran supérieur.

Collection de liens de création d'application TODO

1: Brève description de MVC 2: Je veux créer un modèle avec Spring Initializr et créer un Hello world 3: Créons une application TODO avec Java 3 Sauvegardez les données temporaires dans MySQL-> Tout obtenir-> Afficher en haut (ici et maintenant)

Installer MySQL et Sequel Pro

Tout d'abord, nous allons introduire une base de données et une interface graphique pratique.

Je ne préciserai pas l'introduction détaillée ici, mais je pense que le lien suivant sera utile.

À propos de l'introduction de MySQL

Procédure de construction de l'environnement MySQL Introduction à MySQL

À propos de l'introduction de Sequel PRO

Comment installer Mac MySQL Sequel Pro

Créer DB / table-> Créer des données temporaires

Suivez le lien ci-dessus pour créer une base de données!

Dans cet article, nous utiliserons le nom de la base de données qiita_todo.

Une fois la base de données créée, démarrez Sequel Pro et connectez-vous à la base de données.

Entrez ensuite ce qui suit dans l'onglet Requête.

CREATE TABLE `todo` (
  `id` bigint(11) unsigned zerofill NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `title` varchar(30) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '' COMMENT 'Titre',
  `deadline` date NOT NULL COMMENT 'Date limite',
  `status` tinyint(1) NOT NULL DEFAULT '0' COMMENT 'statut',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 'Date et heure de création',
  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 'Mettre à jour la date et l'heure',
  PRIMARY KEY (`id`),
  UNIQUE KEY `title` (`title`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

↓ L'image ressemble à ceci. Screen Shot 0002-07-06 at 16.34.44.png

Si vous appuyez sur ** Ctrl + r ** pour exécuter l'instruction Query ...

↓ La table doit être créée comme ceci. (Vous pouvez vérifier les spécifications de la colonne dans l'onglet Structure.)

Screen Shot 0002-07-06 at 16.35.15.png

Introduction de JPA

Après la fin de DB, introduisons ensuite JPA.

JPA est comme un traducteur qui connecte Spring et DB. Il transmet la requête de Spring à la base de données et la traite de différentes manières.

Par exemple, si vous utilisez la méthode findAll de JPA, toutes les données DB seront acquises. Cette méthode sera décrite plus loin.

Ajout de JPA et MySQL à build.gradle

Ajoutez ce qui suit aux dépendances de app / build.gradle.

dependencies {
~~~ abrégé ~~~
   implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
	 runtimeOnly 'mysql:mysql-connector-java'
~~~ abrégé ~~~
}

Mettre à jour build.gradle

Vous pouvez utiliser JPA en mettant à jour la partie modifiée de build.gradle selon l'image ci-dessous! Screen Shot 0002-07-06 at 16.58.34.png

Modifier application.properties (ou application.yaml)

Puis éditez application.properties (ou yaml) pour connecter la base de données créée et Spring.

L'emplacement du fichier sera app / src / main / application.properties.

Ajoutez ce qui suit.

spring.datasource.url=jdbc:mysql://localhost:3306/qiita_todo # ①
spring.datasource.username=root # ②
spring.datasource.password=     # ②
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.initialization-mode=never # ③
spring.datasource.sql-script-encoding=utf-8
spring.jpa.hibernate.ddl-auto=none # ③

① 3306 doit être le numéro de port par défaut, mais si vous l'avez modifié, modifiez-le. La partie de qiita_todo est le nom de la base de données.

② Encore une fois, si vous avez votre propre nom d'utilisateur et mot de passe, utilisez-les. Dans cet article, le nom d'utilisateur est root et il n'y a pas de mot de passe. (Veuillez noter que le mot de passe peut être traité comme un espace si vous le copiez.)

③ Il n'y a pas de problème pour modifier les paramètres ici, donc si vous êtes intéressé, veuillez essayer google (lancer)

Essayez de mettre des données

Maintenant que les paramètres sont terminés, insérons des données temporaires.

Ouvrez Sequel Pro, appuyez sur l'onglet Contenu et double-cliquez sur un enregistrement vide pour l'entrer, alors entrez une valeur appropriée.

Screen Shot 0002-07-12 at 11.41.19.png

Obtenir tous les enregistrements DB du contrôleur

C'est ensuite au tour d'Intel iJ.

Tout d'abord, préparez un conteneur (Entity) à utiliser lors de l'extraction de données à partir de la base de données. La présentation de Lombok est utile à bien des égards, alors commencez par là.

Introduction de Lombok

L'utilisation de Lombok facilite la saisie de Getter et Setter.

Ajoutez ce qui suit aux dépendances de build.gradle.

dependencies {
~~~ abrégé ~~~
	compileOnly 'org.projectlombok:lombok:1.18.12'
	annotationProcessor 'org.projectlombok:lombok:1.18.12'
~~~ abrégé ~~~
}

Après l'ajout, rechargeons gradle de la même manière que lorsque JPA a été inséré.

Créer une classe d'entité

Vient ensuite la création d'entité.

Tout d'abord, créez un package (dossier) dans la hiérarchie où se trouve TodoContoroller.

main / java / com.example.todo <-Vous pouvez le créer en faisant un clic droit sur cette hiérarchie et en cliquant sur Nouveau-> Package.

Cette fois, je nommerai le paquet dao.

Cliquez avec le bouton droit sur le dao créé et appuyez sur-> Nouveau-> Classe Java pour créer une classe appelée TodoEntity.

Screen Shot 0002-07-12 at 11.54.12.png

Modifier la classe Entity

@Entity
@Getter
@Setter
@Table(name="todo")
public class TodoEntity {
    @Id
    @Column
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    @Column(name="title")
    private String title;
    
    @Column(name="deadline")
    private LocalDate deadline;
    
    @Column(name="status")
    private boolean status;
    
    @CreationTimestamp
    @Column(name="create_time")
    private LocalDateTime createTime;
    
    @UpdateTimestamp
    @Column(name="update_time")
    private LocalDateTime updateTime;
}

Modifiez la classe Entity comme ceci.

Vous pouvez créer une variable correspondant à la table en définissant @Column.

@CreationTimestamp et @UpdateTimestamp sont des annotations qui saisissent automatiquement l'heure lors de la création / mise à jour.

Maintenant que vous disposez de la classe Entity, vous êtes prêt à obtenir et à envoyer des données à partir de la base de données.

Créer un référentiel

Ensuite, créez la classe Repository. Cette classe est la classe qui interagit réellement avec l'application et la base de données. (C'est le rôle de cette classe de tout récupérer, modifier et supprimer)

Créez la classe TodoRepository dans le package dao que vous venez de créer.

@Repository
public interface TodoRepository extends JpaRepository<TodoEntity, Long> {
}

C'est tout ce dont vous avez besoin pour modifier. (L'importation est omise.)

Extends hérite de la classe JpaRepository.

Le référentiel détaillé est expliqué sur le site ici, donc si vous êtes intéressé, jetez-y un œil.

Vous êtes maintenant prêt à vider les données récupérées via le référentiel Todo dans l'entité Todo!

Créer une classe de service

Maintenant, créons la classe Service.

Le rôle de la classe Service dans cette application Todo est de demander à la classe Repository d'effectuer le ** traitement lié à la base de données **.

En d'autres termes, écrivez la logique métier dans cette classe.

Créez une classe TodoService sous main / java / com.example.todo.

@Service
@RequiredArgsConstructor
public class TodoService {
    private final TodoRepository todoRepository;
    
    public List<TodoEntity> findAllTodo() {
        return todoRepository.findAll();
    }
}

Je me sens comme cela. (L'importation est omise.)

@RequiredArgsConstructor est l'annotation de Lombok pour la construction par défaut.

Une annotation qui génère automatiquement un constructeur par défaut avec des arguments pour les membres déclarés en final (todoRepository dans ce cas).

Ici et ici Vous voudrez peut-être consulter le site.

Modifier le contrôleur

Maintenant que le service, l'entité et le référentiel ont été créés, éditons le contrôleur.

@Controller
@RequiredArgsConstructor
public class TodoController {

    private final TodoService todoService;
    
    @GetMapping("/top")
    public String top(Model model){
        List<TodoEntity> todoEntityList =  todoService.findAllTodo(); //①
        model.addAttribute("todoList", todoEntityList); //②
        return "top";
    }
}

C'est comme ça.

① Obtenez tous les enregistrements de base de données de la classe Service créée précédemment et renvoyez-les à la variable todoEntityList en tant que valeur de retour List .

② Faites de todoEntityList une variable appelée todoList et passez-la au premier plan.

Modification de top.html

<!DOCTYPE html>
<!--↓①-->
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<!--↓②-->
<div th:each="todo: ${todoList}" class=" w-75 h-25 my-1 mx-auto pt-5">
    <div class="container">
        <div  class="row">
            <div class="col-5 pl-5">
                <p th:text="${todo.title}" class="mb-1"></p>
                <p class="mb-1">Date limite:<span  th:text="${todo.deadline}"></span></p>
                <p class="mb-1">Date de création:<span  th:text="${todo.createTime}"></span></p>
            </div>
            <div class="col-2 d-flex justify-content-start align-items-center px-0">
                <a class="h-100 w-75 btn btn-info pt-4">
Éditer
                </a>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

BootStrap est utilisé pour un affichage facile et beau. Veuillez noter que le style d'écriture n'est pas très beau!

① Tout d'abord, déclarez l'utilisation de Thymeleaf ici. Vous pouvez maintenant utiliser des méthodes telles que th: ~ ~! Comme vous pouvez le voir ci-dessous, il y a diverses choses comme th: each et th: text, alors pourquoi ne pas vous référer à here? ..

② Dans chacun d'eux, la liste décrite dans le contrôleur est décomposée et utilisée. Ce qui est passé comme todoList est traité comme todo en HTML. Après cela, vous pouvez l'afficher en appelant todo.title, date limite ou d'autres variables de la liste!

↓ Lancez l'application et j'espère qu'elle devrait ressembler à ceci ...!

Screen Shot 0002-07-12 at 13.40.26.png

Un bref résumé

Ce que j'ai fait cette fois ...

① Appelez findAllTodo de TodoService avec TodoContoroller

② findAllTodo appelle findAll de TodoRepository

③ findAll récupère tous les enregistrements de la base de données

④ Toutes les données vont dans TodoEntity

⑤ Les données retournent à TodoController et sont transmises à la réception pour affichage!

Voilà le flux!

Au lieu d'avoir une classe ayant beaucoup de traitement, nous avons créé différentes classes pour distribuer le traitement et faciliter la réponse en cas d'erreur!

La suite revient!

Recommended Posts

Créons une application TODO avec Java 3 Enregistrez les données temporaires dans MySQL-> Tout obtenir-> Afficher en haut
Créons une application TODO en Java 5 Changer l'affichage de TODO
Créons une application TODO en Java 4 Implémentation de la fonction de publication
Créons une application TODO en Java 6 Implémentation de la fonction de recherche
Créons une application TODO en Java 8 Implémentation des fonctions d'édition
Créons une application TODO avec Java 1 Brève explication de MVC
Faisons une application de calculatrice avec Java ~ Créez une zone d'affichage dans la fenêtre
Créons une application TODO en Java 11 Gestion des exceptions lors de l'accès à un TODO avec un ID inexistant
Faisons une application de calcul avec Java ~ Afficher la fenêtre de l'application
Créons une application TODO dans Java 13 TODO form validation 1: Character limit-Update Gradle to use @Validated
Créer une application TODO dans Java 7 Créer un en-tête
Créons un framework Web ultra-simple avec Java
Faisons une application TODO avec Java 2 Je veux créer un modèle avec Spring Initializr et créer Hello world
Créons une application TODO avec Java 12 Processing lorsqu'une requête arrive avec une HttpMethod inutilisée ・ Traitement lorsqu'une erreur se produit sur le serveur
Créez un environnement de test MySQL (+ des millions de données de test) en 5 minutes
[Java] Créer un fichier temporaire
Afficher les données Firestore dans RecyclerView [Java]
Restez coincé dans un Java Primer
Volume d'essais pour créer une application Web Java sur Windows Server 2016
Créer des données binaires de longueur variable en Java
Créons un environnement de développement Java (mise à jour)
Créons une bibliothèque d'opérations de stockage de fichiers polyvalente (?) En faisant abstraction du stockage / acquisition de fichiers avec Java