Lassen Sie uns eine TODO-App in Java 6 erstellen. Implementierung der Suchfunktion

Hallo. Dieses Mal möchte ich die Suchfunktion im Frühjahr implementieren.

Linkerfassung zur Erstellung von TODO-Anwendungen

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)

Implementierungsablauf

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 ...!

Bearbeiten der Repository-Klasse

@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.

Serviceklasse bearbeiten

   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 .

Controller bearbeiten

    @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 einer TodoSearchForm-Klasse

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.

Search.html erstellen

<!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>

Zusammenfassung

Wie war es?

Ich denke, der wichtige Punkt ist diesmal das Jpa-Repository.

Es gibt eine Referenz in hier. Ich denke!