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.
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.)
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!
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.
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.
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 ...!
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