Bonjour, cette fois en appuyant sur le bouton TODO d'achèvement ⇄ incomplet nous voulons implémenter la possibilité de basculer.
1: Brève description de MVC 2: Je veux créer un modèle avec Spring Initializr et créer un Hello world 3: Enregistrer les données temporaires dans MySQL-> Tout obtenir-> Afficher en haut 4: Implémentation de la fonction de publication 5: Changez l'affichage TODO (ici et maintenant)
Tout d'abord, le déroulement de ce processus ・ Recherchez et obtenez TODO à partir de l'identifiant ・ Changez le statut TODO avec true ・ Économisez TODO Ce sera.
Alors faisons la partie pour obtenir TODO d'id immédiatement.
java/com/example/todo/TodoService.java
public TodoEntity findTodoById(Long todoId) {
Optional<TodoEntity> todoResult = todoRepository.findById(todoId);
//Vérifier null
return todoResult.get();
}
Ça devrait être comme ça.
Le type facultatif utilisé ici est un type qui indique explicitement que le type qu'il contient peut être nul.
//nullチェックする Je laisserai la partie marquée car elle sera faite dans un prochain article.
Cette fois, il est de type facultatif
Vous pouvez maintenant obtenir TODO par identifiant!
Ensuite, nous allons implémenter la logique pour changer l'état TODO.
java/com/example/todo/TodoService.java
public void switchTodo(Long todoId) {
TodoEntity todoEntity = findTodoById(todoId);
todoEntity.setStatus(!todoEntity.isStatus());
todoRepository.save(todoEntity);
}
Tout d'abord, récupérez le TODO en appelant la fonction précédente. Et je change le statut, mais en faisant! TodoEntity.isStatus (), il est dans l'état opposé à l'état actuel. (C'est un style d'écriture qui est souvent utilisé lors du basculement entre les boreeans.)
java/com/example/todo/TodoController.java
@PatchMapping("/toggle-status/{id}")
public String switchStatus(@PathVariable("id") Long todoId) {
todoService.switchTodo(todoId);
return "redirect:/top";
}
Écrivons comme ça.
@PathVariable est une annotation qui intègre l '{id} dans l'URL.
<!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>
<!--Formulaire de publication-->
<div class=" w-75 h-auto my-1 mx-auto pt-5">
<p class="pl-5">Créer une nouvelle tâche</p>
<form th:action="@{/register}" th:object="${ToDoForm}" 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" placeholder="Entrez ToDo dans les 30 caractères" class="col-9">
</label>
<label class="row my-0">
<span class="col-2 text-center">Date limite</span>
<input type="date" id="date" name="deadline" class="col-9 my-0">
</label>
</div>
<button class="btn btn-primary w-25 col-2 mr-3" type="submit">Ajouter ToDo</button>
</form>
</div>
<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>
<!--〜〜〜〜〜〜 Contenu à ajouter cette fois〜〜〜〜〜〜-->
<div th:if="${todo.status}" class="col-3 d-flex px-0">
<form th:action="@{/toggle-status/{id}(id=${todo.id})}" method="post" class="w-100 container d-flex my-0 mx-auto p-0 mr-2">
<input type="hidden" name="_method" value="patch">
<button type="submit" class="h-100 w-75 btn btn-success text-white">
Terminé
</button>
</form>
</div>
<div th:unless="${todo.status}" class="col-3 d-flex px-0">
<form th:action="@{/toggle-status/{id}(id=${todo.id})}" method="post" class="w-100 container d-flex my-0 mx-auto p-0 mr-2">
<input type="hidden" name="_method" value="patch">
<button type="submit" class="h-100 w-75 btn btn-danger text-white">
Incomplet
</button>
</form>
</div>
<!--〜〜〜〜〜〜 Contenu à ajouter cette fois 〜〜〜〜〜〜-->
</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>
th:if="${todo.status}"
Cependant, cela signifie que si l'état est vrai, c'est-à-dire qu'il est terminé. Il est affiché comme terminé en vert.
De plus, bien que method = "post" soit défini, @PatchMapping a été utilisé dans l'édition précédente du contrôleur.
En fait, HTML ne prend pas en charge la possibilité de demander un correctif. Donc, si vous voulez faire une demande avec Patch, vous devez concevoir quelque chose.
Dans Thymeleaf
<input type="hidden" name="_method" value="patch">
Si tu veux
dans application.property
spring.mvc.hiddenmethod.filter.enabled=true
Si vous ajoutez, type = "hidden" sera disponible et vous pourrez envoyer des demandes de patch.
Contoller
package com.example.todo;
import com.example.todo.dao.TodoEntity;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PatchMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import java.util.List;
@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";
}
@PostMapping("/register")
public String register(@ModelAttribute TodoForm formData) {
todoService.setTodo(formData);
return "redirect:/top";
}
@PatchMapping("/toggle-status/{id}")
public String switchStatus(@PathVariable("id") Long todoId) {
todoService.switchTodo(todoId);
return "redirect:/top";
}
}
Service
package com.example.todo;
import com.example.todo.dao.TodoEntity;
import com.example.todo.dao.TodoRepository;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;
import java.util.List;
import java.util.Optional;
@Service
@RequiredArgsConstructor
public class TodoService {
private final TodoRepository todoRepository;
public List<TodoEntity> findAllTodo() {
return todoRepository.findAll();
}
public void setTodo(TodoForm formData) {
TodoEntity todo = new TodoEntity();
todo.setTitle(formData.getTitle());
todo.setDeadline(formData.getDeadline());
todoRepository.save(todo);
}
public TodoEntity findTodoById(Long todoId) {
Optional<TodoEntity> todoResult = todoRepository.findById(todoId);
//Gérer les exceptions
return todoResult.get();
}
public void switchTodo(Long todoId) {
TodoEntity todoEntity = findTodoById(todoId);
todoEntity.setStatus(!todoEntity.isStatus());
todoRepository.save(todoEntity);
}
}
Entity
package com.example.todo.dao;
import lombok.Getter;
import lombok.Setter;
import org.hibernate.annotations.CreationTimestamp;
import org.hibernate.annotations.UpdateTimestamp;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
import java.time.LocalDate;
import java.time.LocalDateTime;
@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;
}
L'application TODO actuelle ressemble à celle ci-dessus.
Recommended Posts