Hallo. Dieses Mal möchte ich die Suchfunktion im Frühjahr 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 Anzeige von TODO um 6: Implementierung der Suchfunktion (hier und jetzt)
Das Suchwort wird in search.html eingegeben
↓
Der Controller empfängt das Suchwort und sendet es an die Serviceklasse
↓
Bitten Sie in der Serviceklasse das Repository um Suchverarbeitung
↓
Das Repository gibt das Ergebnis an den Service zurück
↓
Der Dienst gibt die Ergebnisse an die Steuerung zurück
↓
Der Controller gibt die Ergebnisse in search.html zurück
↓
Wird auf HTML angezeigt
Es ist wie ...!
@Repository
public interface TodoRepository extends JpaRepository<TodoEntity, Long> {
//↓ Hinzufügen
List<TodoEntity> findByTitleContaining(String searchWord);
}
Jpa verfügt über mehrere Methoden, die für die Suche geeignet sind. FindByTitleContaining Auf diese Weise sucht die Titelspalte nach dem Wortlaut im Argument.
public List<TodoEntity> findToDoByTitle(String searchWord) {
return todoRepository.findByTitleContaining(searchWord);
}
Fügen Sie diese Funktion hinzu.
Das Argument searchWord, bei dem es sich um eine Zeichenfolge handelt, wird an die Funktion im vorherigen Repository gesendet. Der Rückgabewert ist List
@GetMapping("/search")
public String showSearch() {
return "search";
}
@GetMapping("/search/result")
public String searchResult(Model model, @ModelAttribute TodoSearchForm searchForm) {
List<TodoEntity> searchResult = todoService.findToDoByTitle(searchForm.getSearchWord());
model.addAttribute("searchResults", searchResult);
return "search";
}
Fügen Sie diese beiden hinzu.
Die obere / Suche dient zur Anzeige des Suchbildschirms und die untere / serach / Ergebnis dient zur Anzeige der Suchergebnisse.
Sie können die erfassten Daten mithilfe von model.addAtrribute () an die HTML-Datei senden. Dieses Mal senden wir ein SearchResult vom Typ List
Erstellen Sie eine Schiffsklasse, die die während der Suche eingegebenen Zeichen verarbeitet.
TodoSearchForm
package com.example.todo;
import lombok.Data;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;
@Data
public class TodoSearchForm {
private Long id;
@NotNull
@Size(min = 0, max = 30)
private String searchWord;
}
@Data ist eine Lombok-Anmerkung. Es werden Getter, Setter usw. weggelassen. Diesmal ist es wichtig, dass Sie das String-Suchwort speichern können.
<!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>
<!-- Header -->
<div class="container mt-5">
<form th:action="@{/search/result}" method="GET">
<div class="row">
<input type="text" name="searchWord" class="col-8">
<button type="submit" class="ml-3 col-3 btn-primary w-25 btn-lg">Suche</button>
</div>
</form>
</div>
<div th:if="!${#lists.isEmpty(searchResults)}" class="container mt-5">
<p>Suchergebnisse sind<span th:text="${#lists.size(searchResults)}"></span>Es gibt Fälle</p>
</div>
<div th:each="todo: ${searchResults}" 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 th:href="@{/edit/{id}(id=${todo.id})}" class="h-100 w-75 btn btn-info pt-4">
Bearbeiten
</a>
</div>
<div th:if="${todo.status}" class="col-2 d-flex px-0">
<div class="h-100 w-75 badge bg-success text-white d-flex align-items-center">
<h3 class=" my-1 mx-auto">Erledigt</h3>
</div>
</div>
<div th:unless="${todo.status}" class="col-2 d-flex px-0">
<div class="h-100 w-75 badge bg-danger text-white d-flex align-items-center">
<h3 class=" my-1 mx-auto">Unvollständig</h3>
</div>
</div>
</div>
</div>
</div>
<!--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>
Der Punkt ist, dass Sie zeigen können, wie viele Suchergebnisse es gibt, indem Sie die folgenden Schritte ausführen!
<div th:if="!${#lists.isEmpty(searchResults)}" class="container mt-5">
<p>Suchergebnisse sind<span th:text="${#lists.size(searchResults)}"></span>Es gibt Fälle</p>
</div>
Wie war es?
Ich denke, der wichtige Punkt ist diesmal das Jpa-Repository.
Es gibt eine Referenz in hier. Ich denke!
Recommended Posts