Hallo, diesmal durch Drücken der Taste TODO der Fertigstellung ⇄ unvollständig möchten wir die Umschaltbarkeit implementieren.
1: Kurze Beschreibung von MVC 2: Ich möchte eine Vorlage mit Spring Initializr erstellen und eine Hallo-Welt erstellen 3: Temporäre Daten in MySQL speichern-> Alle abrufen-> Oben anzeigen 4: Implementierung der Posting-Funktion 5: Schalten Sie die TODO-Anzeige (hier und jetzt)
Zunächst der Ablauf dieses Prozesses ・ Suchen und erhalten Sie TODO von id ・ TODO-Status mit true ⇄ false wechseln ・ Speichern Sie TODO Es wird sein.
Lassen Sie uns also den Teil tun, um TODO sofort von id zu erhalten.
java/com/example/todo/TodoService.java
public TodoEntity findTodoById(Long todoId) {
Optional<TodoEntity> todoResult = todoRepository.findById(todoId);
//Auf null prüfen
return todoResult.get();
}
Es sollte so sein.
Der hier verwendete optionale Typ ist ein Typ, der explizit angibt, dass der darin enthaltene Typ null sein kann.
//nullチェックする Ich werde den Teil, der markiert ist, so lassen, wie er in einem zukünftigen Artikel gemacht wird.
Diesmal ist es vom Typ Optional
Jetzt können Sie TODO per ID erhalten!
Als nächstes implementieren wir die Logik zum Umschalten des TODO-Status.
java/com/example/todo/TodoService.java
public void switchTodo(Long todoId) {
TodoEntity todoEntity = findTodoById(todoId);
todoEntity.setStatus(!todoEntity.isStatus());
todoRepository.save(todoEntity);
}
Holen Sie sich zuerst das TODO, indem Sie die vorherige Funktion aufrufen. Und ich wechsle den Status, aber mit! TodoEntity.isStatus () befindet es sich im entgegengesetzten Zustand zum aktuellen Zustand. (Dies ist ein Schreibstil, der häufig beim Umschalten zwischen Boreeanern verwendet wird.)
java/com/example/todo/TodoController.java
@PatchMapping("/toggle-status/{id}")
public String switchStatus(@PathVariable("id") Long todoId) {
todoService.switchTodo(todoId);
return "redirect:/top";
}
Lass uns so schreiben.
@PathVariable ist eine Annotation, bei der die {id} in die URL eingebettet wird.
<!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>
<!--Formular posten-->
<div class=" w-75 h-auto my-1 mx-auto pt-5">
<p class="pl-5">Erstellen Sie eine neue Aufgabe</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">ToDo Name</span>
<input type="text" name="title" placeholder="Geben Sie ToDo innerhalb von 30 Zeichen ein" class="col-9">
</label>
<label class="row my-0">
<span class="col-2 text-center">Frist</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">ToDo hinzufügen</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">Frist:<span th:text="${todo.deadline}"></span></p>
<p class="mb-1">Erstellungsdatum:<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">
Bearbeiten
</a>
</div>
<!--〜〜〜〜〜〜 Diesmal hinzuzufügende Inhalte〜〜〜〜〜〜-->
<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">
Erledigt
</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">
Unvollständig
</button>
</form>
</div>
<!--〜〜〜〜〜〜 Diesmal hinzuzufügende Inhalte 〜〜〜〜〜〜-->
</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}"
Dies bedeutet jedoch, dass der Status, wenn er wahr ist, abgeschlossen wurde. Es wird als abgeschlossen in grün angezeigt.
Obwohl method = "post" gesetzt ist, wurde @PatchMapping in der vorherigen Controller-Bearbeitung verwendet.
Tatsächlich unterstützt HTML nicht die Möglichkeit, einen Patch anzufordern. Wenn Sie also eine Anfrage mit Patch stellen möchten, müssen Sie etwas entwickeln.
In Thymeleaf
<input type="hidden" name="_method" value="patch">
Wenn du möchtest
in application.property
spring.mvc.hiddenmethod.filter.enabled=true
Wenn Sie hinzufügen, ist type = "hidden" verfügbar und Sie können Patch-Anfragen senden.
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);
//Ausnahmen behandeln
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;
}
Die aktuelle TODO-App sieht wie oben aus.
Recommended Posts