Bonjour. Cette fois, je voudrais implémenter la partie fonction d'édition de TODO publiée dans Java Spring.
1: [Comprendre les super bases] Une brève description de MVC 2: [Préparer un modèle] Je veux créer un modèle avec Spring Initializr et créer un monde Hello 3: [Connexion / Paramètres / Affichage des données avec MySQL] Enregistrer les données temporaires dans MySQL-> Tout obtenir-> Afficher en haut 4: [Fonction POST] Implémentation de la fonction de publication 5: [Fonction PATCH] Basculer l'affichage TODO 6: [Easy to use JpaRepository] Implémentation de la fonction de recherche [7: [Commun avec les fragments de modèle Thymeleaf] Créer un en-tête] (https://qiita.com/nomad_kartman/items/8c33eca2880c43a06e40) 8: [Fonction PUT] Implémentation de la fonction d'édition (ici et maintenant)
Tout d'abord, je voudrais expliquer brièvement le flux des fonctions d'édition!
Recherchez les données TODO que vous souhaitez modifier par ID et affichez-les sur le devant
Entrez vos modifications et envoyez-les au contrôleur via PUT
Traitez en interne et enregistrez.
Comme vous vous en doutez, cela ressemble à ceci!
Commençons par afficher le TODO que vous souhaitez éditer à la réception!
@GetMapping("/edit/{id}")
public String showEdit(Model model, @PathVariable("id") long id ) {
TodoEntity editTarget = todoService.findTodoById(id);
model.addAttribute( "editTarget" , editTarget);
return "edit";
}
Tout d'abord, recherchez l'ID du TODO que vous souhaitez modifier dans TodoEntity que vous avez utilisé auparavant et emballez-le.
Et en définissant model.addAttribute ("nom de la variable", l'objet que vous voulez passer), vous pouvez utiliser cet objet sur la face avant.
Cette fois, je vais l'utiliser tel quel avec le nom editTarget.
Puisque la transition vers la page d'édition se fait avec return 'edit' '; ``, créez la page d'édition.
python
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Éditer</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>
<!-- Header -->
<header th:replace="common/header :: header_fragment()"></header>
<!--Modifier le formulaire-->
<div class=" w-75 h-auto my-1 mx-auto pt-5">
<p class="pl-5">Mettre à jour les tâches</p>
<form th:action="@{'/edit/' + *{id} + '/complete'}" th:object="${editTarget}" method="post" class="container d-flex w-auto my-0 mx-auto">
<div class="w-100">
<label class="row">
<span class="col-2 text-center">Nom de ToDo</span>
<input type="text" name="title" th:value="${editTarget.title}" class="col-9">
</label>
<label class="row my-0">
<span class="col-2 text-center">Date limite</span>
<input type="date" name="deadline" th:value="${editTarget.deadline}" class="col-9 my-0">
</label>
</div>
<input type="hidden" name="_method" value="put">
<button class="btn btn-primary w-25 col-2 mr-3" type="submit">mise à jour</button>
</form>
</div>
<!--/Modifier le formulaire-->
<!--lire bootstrap js-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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>
C'est peut-être un peu long et difficile à voir, mais c'est une page d'édition.
th:action
↓ Le premier point est la partie export du formulaire d'édition ↓
python
<form th:action="@{'/edit/' + *{id} + '/complete'}" th:object="${editTarget}" method="post" class="container d-flex w-auto my-0 mx-auto">
th:action="@{'/edit/' + *{id} + '/complete'}"
Le contenu du formulaire est envoyé à l'URL spécifiée.
Cette fois
/edit/{id}/complete
Je vais l'envoyer à l'URL. Ce processus sera décrit plus loin.
th:objects
th:object="${editTarget}"
Ceci est le editTarget envoyé par la fonction showEdit plus tôt. En faisant cela, vous pouvez utiliser editTarget dans ce formulaire.
Je pense que c'est le point qui a tendance à rester coincé dans ce processus.
Cette fois, je veux utiliser la méthode PUT pour l'édition, donc avec method = "put"! ?? Vous pourriez penser cela.
(En fait, je l'ai fait au début)
Cependant, HTML5 ne peut pas gérer les méthodes PUT / DELETE!
Par conséquent, le traitement suivant est requis.
Vous vous demandez peut-être pourquoi une chose aussi gênante est ... mais pour l'instant, il semble qu'il n'y ait pas d'autre choix que de le faire.
alors
python
<input type="hidden" name="_method" value="put">
Je faisais un processus comme la conversion de POST en PUT en préparant une entrée qui n'est pas affichée sur la face avant.
Cependant, en fait, cela seul provoquera une erreur, alors ajoutez ce qui suit à application.properties.
resources/application.properties
spring.mvc.hiddenmethod.filter.enabled=true
Cela éliminera l'erreur.
Au fait Gestion de la méthode HTTP PUT / DELETE avec SpringBoot2.2 + Thymeleaf Si vous êtes intéressé, veuillez lire cet article car il approfondira votre compréhension.
Ensuite, nous implémenterons la partie qui traite le contenu édité.
java/com/example/todo/TodoController.java
@PutMapping("/edit/{id}/complete")
public String edit(@ModelAttribute TodoForm formData, @PathVariable("id") long id) {
todoService.editToDo(formData);
return "redirect:/top";
}
Ajoutez PUT Mapping au contrôleur.
Stockez les données envoyées depuis l'avant avec @ModelAttribute dans la classe TodoForm.
↓ Et j'enverrai l'objet à editTodo de la classe de service ↓
java/com/example/todo/TodoService.java
public void editToDo(TodoForm formData) {
TodoEntity todoEntity = findTodoById(formData.getId());
todoEntity.setTitle(formData.getTitle());
todoEntity.setDeadline(formData.getDeadline());
todoEntity.setStatus(formData.isStatus());
todoRepository.save(todoEntity);
}
Récupérez TODO à partir de id et réécrivez chaque valeur dans formData qui est le contenu modifié.
Puisqu'il n'y a pas de valeur de retour cette fois, il est défini sur void.
Ceci termine la mise en œuvre du processus d'édition!
Recommended Posts