Hallo. Dieses Mal möchte ich den in Java Spring veröffentlichten Teil der Bearbeitungsfunktion von TODO implementieren.
1: [Grundlegendes zu den Super-Grundlagen] Eine kurze Beschreibung von MVC 2: [Vorlage vorbereiten] Ich möchte eine Vorlage mit Spring Initializr erstellen und eine Hallo-Welt erstellen 3: [Verbindung / Einstellungen / Datenanzeige mit MySQL] Temporäre Daten in MySQL speichern-> Alle abrufen-> Oben anzeigen 4: [POST-Funktion] Implementierung der Posting-Funktion 5: [PATCH-Funktion] TODO-Anzeige umschalten 6: [Einfach zu verwendendes JpaRepository] Implementierung der Suchfunktion [7: [Häufig mit Thymeleaf-Vorlagenfragmenten] Header erstellen] (https://qiita.com/nomad_kartman/items/8c33eca2880c43a06e40) 8: [PUT-Funktion] Implementierung der Bearbeitungsfunktion (hier und jetzt)
Zunächst möchte ich kurz den Ablauf der Bearbeitungsfunktionen erläutern!
Suchen Sie die TODO-Daten, die Sie bearbeiten möchten, nach ID und zeigen Sie sie auf der Vorderseite an
Geben Sie Ihre Änderungen ein und senden Sie sie per PUT an die Steuerung
Intern verarbeiten und speichern.
Wie zu erwarten, sieht es so aus!
Beginnen wir mit der Anzeige des TODO, das Sie bearbeiten möchten, an der Rezeption!
@GetMapping("/edit/{id}")
public String showEdit(Model model, @PathVariable("id") long id ) {
TodoEntity editTarget = todoService.findTodoById(id);
model.addAttribute( "editTarget" , editTarget);
return "edit";
}
Suchen Sie zunächst die ID des TODO, das Sie bearbeiten möchten, in der TodoEntity, die Sie zuvor verwendet haben, und packen Sie sie.
Und indem Sie model.addAttribute ("Variablenname", das Objekt, das Sie übergeben möchten) setzen, können Sie dieses Objekt auf der Vorderseite verwenden.
Dieses Mal werde ich es so verwenden, wie es mit dem Namen editTarget ist.
Da der Übergang zur Bearbeitungsseite mit return "edit"; erfolgt, erstellen Sie die Bearbeitungsseite.
python
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Bearbeiten</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>
<!--Formular bearbeiten-->
<div class=" w-75 h-auto my-1 mx-auto pt-5">
<p class="pl-5">Aufgaben aktualisieren</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">ToDo Name</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">Frist</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">aktualisieren</button>
</form>
</div>
<!--/Formular bearbeiten-->
<!--Lesen Sie 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>
Es mag etwas lang und schwer zu sehen sein, aber es ist eine Bearbeitungsseite.
th:action
↓ Der erste Punkt ist der Exportteil des Bearbeitungsformulars ↓
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'}"
Der Inhalt des Formulars wird an die angegebene URL gesendet.
Diesmal
/edit/{id}/complete
Ich werde es an die URL senden. Dieser Vorgang wird später beschrieben.
th:objects
th:object="${editTarget}"
Dies ist das editTarget, das zuvor von der Funktion showEdit gesendet wurde. Auf diese Weise können Sie editTarget in diesem Formular verwenden.
Ich denke, dies ist der Punkt, der dazu neigt, in diesem Prozess stecken zu bleiben.
Dieses Mal möchte ich die PUT-Methode zum Bearbeiten verwenden, also mit method = "put"! ?? Das könnte man denken.
(Eigentlich habe ich das zuerst gemacht)
HTML5 kann jedoch keine PUT / DELETE-Methoden verarbeiten!
Daher ist die folgende Verarbeitung erforderlich.
Sie mögen sich fragen, warum so etwas problematisch ist ... aber im Moment scheint es keine andere Wahl zu geben, als dies zu tun.
damit
python
<input type="hidden" name="_method" value="put">
Ich habe einen Prozess wie das Konvertieren von POST in PUT durchgeführt, indem ich eine Eingabe vorbereitet habe, die nicht auf der Vorderseite angezeigt wird.
Tatsächlich führt dies allein jedoch zu einem Fehler. Fügen Sie daher Folgendes zu application.properties hinzu.
resources/application.properties
spring.mvc.hiddenmethod.filter.enabled=true
Dadurch wird der Fehler behoben.
Apropos Behandlung der HTTP-PUT / DELETE-Methode mit SpringBoot2.2 + Thymeleaf Wenn Sie interessiert sind, lesen Sie bitte diesen Artikel, da er Ihr Verständnis vertiefen wird.
Als nächstes implementieren wir den Teil, der den bearbeiteten Inhalt verarbeitet.
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";
}
Fügen Sie dem Controller die PUT-Zuordnung hinzu.
Speichern Sie die von vorne gesendeten Daten mit @ModelAttribute in der TodoForm-Klasse.
↓ Und ich werde das Objekt an editTodo der Serviceklasse ↓ senden
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);
}
Holen Sie sich TODO von id und schreiben Sie jeden Wert in formData, den bearbeiteten Inhalt.
Da diesmal kein Rückgabewert vorhanden ist, wird dieser auf ungültig gesetzt.
Damit ist die Implementierung des Bearbeitungsprozesses abgeschlossen!
Recommended Posts